Skip to content

Add Tailwind styled scaffold templates #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 29, 2021
Merged

Add Tailwind styled scaffold templates #71

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e48dc28
Add Tailwind styled scaffold templates
BakiVernes Aug 20, 2021
bfb324a
Match templates to rails main branch
BakiVernes Sep 12, 2021
f14aa08
Support Rails 6
dixpac Sep 13, 2021
9c5aaa3
Remove commented out code from engine.rb
dixpac Sep 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion lib/install/tailwindcss.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
APPLICATION_LAYOUT_PATH = Rails.root.join("app/views/layouts/application.html.erb")

if APPLICATION_LAYOUT_PATH.exist?
say "Add Tailwindcss include tags in application layout"
say "Add Tailwindcss include tags and container element in application layout"
insert_into_file APPLICATION_LAYOUT_PATH.to_s, <<~ERB.indent(4), before: /^\s*<%= stylesheet_link_tag/
<%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
ERB
insert_into_file APPLICATION_LAYOUT_PATH.to_s, %( <main class="container mx-auto mt-28 px-5 flex">\n ), before: /^\s*<%= yield/
insert_into_file APPLICATION_LAYOUT_PATH.to_s, %(\n </main>), after: /^\s*<%= yield %>/
else
say "Default application.html.erb is missing!", :red
say %( Add <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %> and <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %> within the <head> tag in your custom layout.)
Expand Down
4 changes: 4 additions & 0 deletions lib/tailwindcss/engine.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,9 @@ class Engine < ::Rails::Engine
env.cache = ActiveSupport::Cache.lookup_store(:null_store)
end if Rails.env.production?
end

config.app_generators do |g|
g.templates.unshift File::expand_path('../../templates', __FILE__)
end
end
end
43 changes: 43 additions & 0 deletions lib/templates/erb/scaffold/_form.html.erb.tt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<%%= form_with(model: <%= model_resource_name %>, class: "contents") do |form| %>
<%% if <%= singular_table_name %>.errors.any? %>
<div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
<h2><%%= pluralize(<%= singular_table_name %>.errors.count, "error") %> prohibited this <%= singular_table_name %> from being saved:</h2>

<ul>
<%% <%= singular_table_name %>.errors.each do |error| %>
<li><%%= error.full_message %></li>
<%% end %>
</ul>
</div>
<%% end %>

<% attributes.each do |attribute| -%>
<div class="my-5">
<% if attribute.password_digest? -%>
<%%= form.label :password %>
<%%= form.password_field :password %>
</div>

<div class="my-5">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't think these div's are aligned properly, yeah?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When we generate the scaffold the divs are indeed properly aligned as shown in a fresh rails/main app:

image

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have had to add that extra indentation for .tt files that I have worked on in the past too so that the generated files look right as you showed above. That's not the only quirk it has for lining up code. Variables and things also have to be lined up weird so they generate in the correct location. I have never understood why, but would like to look into it more. Any suggestions on where I could dive deeper on this?

<%%= form.label :password_confirmation %>
<%%= form.password_field :password_confirmation, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
<% elsif attribute.attachments? -%>
<%%= form.label :<%= attribute.column_name %> %>
<%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
<% else -%>
<%%= form.label :<%= attribute.column_name %> %>
<% if attribute.field_type == :text_area -%>
<%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: 4, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
<% elsif attribute.field_type == :check_box -%>
<%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "block mt-2 h-5 w-5" %>
<% else -%>
<%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
<% end -%>
<% end -%>
</div>

<% end -%>
<div class="inline">
<%%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium" %>
</div>
<%% end %>
8 changes: 8 additions & 0 deletions lib/templates/erb/scaffold/edit.html.erb.tt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<div class="mx-auto md:w-2/3 w-full">
<h1 class="font-bold text-4xl">Editing <%= human_name.downcase %></h1>

<%%= render "form", <%= singular_table_name %>: @<%= singular_table_name %> %>

<%%= link_to "Show this <%= human_name.downcase %>", @<%= singular_table_name %>, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
<%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add CR

14 changes: 14 additions & 0 deletions lib/templates/erb/scaffold/index.html.erb.tt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<div class="w-full">
<%% if notice.present? %>
<p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%%= notice %></p>
<%% end %>

<div class="flex justify-between items-center">
<h1 class="text-lg font-bold text-4xl"><%= human_name.pluralize %></h1>
<%%= link_to 'New <%= human_name.downcase %>', new_<%= singular_route_name %>_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
</div>

<div id="<%= plural_table_name %>" class="min-w-full">
<%%= render @<%= plural_table_name %> %>
</div>
</div>
7 changes: 7 additions & 0 deletions lib/templates/erb/scaffold/new.html.erb.tt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<div class="mx-auto md:w-2/3 w-full">
<h1 class="text-lg font-bold text-4xl">New <%= human_name.downcase %></h1>

<%%= render "form", <%= singular_table_name %>: @<%= singular_table_name %> %>

<%%= link_to 'Back to <%= human_name.pluralize.downcase %>', <%= index_helper %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add CR

22 changes: 22 additions & 0 deletions lib/templates/erb/scaffold/partial.html.erb.tt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<div id="<%%= dom_id <%= singular_table_name %> %>">
<% attributes.reject(&:password_digest?).each do |attribute| -%>
<p class="my-5">
<strong class="block font-medium mb-1"><%= attribute.human_name %>:</strong>
<% if attribute.attachment? -%>
<%%= link_to <%= singular_table_name %>.<%= attribute.column_name %>.filename, <%= singular_table_name %>.<%= attribute.column_name %> if <%= singular_table_name %>.<%= attribute.column_name %>.attached? %>
<% elsif attribute.attachments? -%>
<%% <%= singular_table_name %>.<%= attribute.column_name %>.each do |<%= attribute.singular_name %>| %>
<div><%%= link_to <%= attribute.singular_name %>.filename, <%= attribute.singular_name %> %></div>
<%% end %>
<% else -%>
<%%= <%= singular_table_name %>.<%= attribute.column_name %> %>
<% end -%>
</p>

<% end -%>
<%% if action_name != "show" %>
<%%= link_to "Show this <%= human_name.downcase %>", <%= singular_table_name %>, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
<%%= link_to 'Edit this <%= human_name.downcase %>', edit_<%= singular_table_name %>_path(<%= singular_table_name %>), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>
<hr class="mt-6">
<%% end %>
</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add CR

15 changes: 15 additions & 0 deletions lib/templates/erb/scaffold/show.html.erb.tt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<div class="mx-auto md:w-2/3 w-full flex">
<div class="mx-auto">
<%% if notice.present? %>
<p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%%= notice %></p>
<%% end %>

<%%= render @<%= singular_table_name %> %>

<%%= link_to 'Edit this <%= singular_table_name %>', edit_<%= singular_table_name %>_path(@<%= singular_table_name %>), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
<div class="inline-block ml-2">
<%%= button_to 'Delete this <%= singular_table_name %>', <%= singular_table_name %>_path(@<%= singular_table_name %>), method: :delete, data: { confirm: "Are you sure you want to delete this <%= singular_table_name %>?" }, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
</div>
<%%= link_to 'Back to <%= plural_table_name %>', <%= index_helper %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
</div>
</div>