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 1 commit
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="field my-5">
Copy link

@hahmed hahmed Sep 3, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Do you know what the field css class is? I don't think that's tailwind related? Maybe it's the scaffold field class here https://github.com/rails/rails/blob/9c77d72ecc7fdf490e778b0807882fd53115e7a3/actiontext/test/dummy/app/assets/stylesheets/scaffold.css#L40? If so, maybe we can drop that because we want to use only tailwind inlined css?

Copy link
Contributor

Choose a reason for hiding this comment

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

Ooops...fixed

<% if attribute.password_digest? -%>
<%%= form.label :password %>
<%%= form.password_field :password %>
</div>

<div class="field my-5">
<%%= 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="actions inline">
Copy link

Choose a reason for hiding this comment

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

actions also looks like it's from the default scaffold css from https://github.com/rails/rails/blob/9c77d72ecc7fdf490e778b0807882fd53115e7a3/actiontext/test/dummy/app/assets/stylesheets/scaffold.css#L41, maybe drop this too and add mb-something here too?

Copy link
Contributor

Choose a reason for hiding this comment

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

Ooops...fixed. Thank you ❤️

<%%= 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

32 changes: 32 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,32 @@
<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 %></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>

<table class="min-w-full">
<thead class="border-b-2 border-gray-200">
<tr class="text-gray-500 uppercase text-left">
<% attributes.reject(&:password_digest?).each do |attribute| -%>
<th class="pt-6 pb-2 font-normal"><%= attribute.human_name %></th>
<% end -%>
</tr>
</thead>

<tbody>
<%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
<tr class="align-top border-b border-gray-200">
<% attributes.reject(&:password_digest?).each do |attribute| -%>
<td class="py-6 pr-3"><%%= <%= singular_table_name %>.<%= attribute.column_name %> %></td>
<% end -%>
<td class="py-6 pr-3"><%%= link_to 'Show', <%= model_resource_name %>, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %></td>
<td class="py-6 pr-3"><%%= link_to 'Edit', edit_<%= singular_route_name %>_path(<%= singular_table_name %>), class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %></td>
</tr>
<%% end %>
</tbody>
</table>
</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

20 changes: 20 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,20 @@
<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 %>

<% attributes.reject(&:password_digest?).each do |attribute| -%>
<p class="my-5">
<strong class="block font-medium mb-1"><%= attribute.human_name %>:</strong>
<%%= @<%= singular_table_name %>.<%= attribute.column_name %> %>
</p>
<% end -%>

<%%= link_to 'Edit', 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', <%= singular_table_name %>_path(@<%= singular_table_name %>), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
</div>
<%%= link_to 'Back', <%= index_helper %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
</div>
</div>