Skip to content

Commit c3f2f7c

Browse files
maebealemaebeale
authored
Tailwind scaffold templates (#250)
* Tailwind scaffolded templates * Update scaffolds
1 parent 321d8d9 commit c3f2f7c

File tree

6 files changed

+95
-68
lines changed

6 files changed

+95
-68
lines changed

‎lib/templates/erb/scaffold/_form.html.erb.tt‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<%%= simple_form_for(@<%= singular_table_name %>) do |f| %>
22
<%%= f.error_notification %>
3-
<%%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
3+
<%%= render 'shared/errors', resource: @<%= singular_table_name %> if @<%= singular_table_name %>.errors.any? %>
44

55
<div class="row">
66
<%% @<%= singular_table_name %>.attribute_names.reject { |a| ["id", "created_at", "updated_at"].include?(a) }.each do |attr| %>
@@ -10,11 +10,13 @@
1010
<%% end %>
1111
</div>
1212

13-
<div class="form-actions mt-3">
14-
<% if @<%= singular_table_name %>.persisted? && current_user.super_user? %>
15-
<%%= link_to "Delete", @<%= singular_table_name %>, method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-outline-danger" %>
16-
<% end %>
17-
<%%= link_to "Cancel", <%= plural_table_name %>_path, class: "btn btn-outline-secondary" %>
18-
<%%= f.button :submit, class: "btn btn-outline-primary ms-2" %>
13+
<div class="form-actions flex justify-end gap-4 mt-3">
14+
<%% if @<%= singular_table_name %>.persisted? && current_user.super_user? %>
15+
<%%= link_to_button "Delete", @<%= singular_table_name %>, method: :delete, variant: :danger_outline, data: { confirm: "Are you sure?" } %>
16+
<%% end %>
17+
<%%= link_to_button "Cancel", <%= plural_table_name %>_path, variant: :secondary_outline %>
18+
<%%= f.button :submit, class: 'inline-flex items-center gap-2 px-4 py-2 rounded-lg
19+
transition-colors duration-200 font-medium shadow-sm text-sm
20+
border border-blue-600 text-grey-600 hover:bg-blue-600 hover:text-white' %>
1921
</div>
2022
<%% end %>

‎lib/templates/erb/scaffold/edit.html.erb.tt‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1-
<div class="row">
2-
<div class="col-md-12">
3-
<h2>Edit <%%= @<%= singular_table_name %>.class.model_name.human %></h2>
4-
<%%= render "form", locals: { <%= singular_table_name %>: @<%= singular_table_name %> } %>
1+
<div class="w-full">
2+
<div class="flex items-start justify-between mb-6">
3+
<div class="pr-6">
4+
<h1 class="text-2xl font-semibold text-gray-900 mb-2">Edit <%%= @<%= singular_table_name %>.class.model_name.human %></h1>
5+
<div class="border-b border-gray-300 mb-6"></div>
6+
<div class="mt-4 pt-4">
7+
<%%= render 'form', <%= singular_table_name %>: @<%= singular_table_name %> %>
8+
</div>
9+
</div>
10+
<%%= link_to_button 'View', <%= singular_table_name %>_path(@<%= singular_table_name %>), variant: :secondary_outline %>
511
</div>
612
</div>

‎lib/templates/erb/scaffold/index.html.erb.tt‎

Lines changed: 48 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,58 @@
1-
<div class="col-md-12">
2-
<div class="row">
3-
<div class="col-md-9 col-lg-8 width">
4-
<div class="entry-content">
5-
<h2 class="normal"><%%= <%= plural_table_name.classify %>.model_name.human.pluralize %></h2>
6-
</div>
1+
<div class="w-full px-4">
2+
<!-- Header -->
3+
<div class="flex items-center justify-between mb-6">
4+
<div>
5+
<h2 class="text-2xl font-semibold text-gray-900"><%%= <%= plural_table_name.classify %>.model_name.human.pluralize %></h2>
76
</div>
8-
<div class="col-md-3 col-lg-4 width">
9-
<div class="entry-content">
10-
<%%= link_to 'New ' + <%= singular_table_name.classify %>.model_name.human, new_<%= singular_table_name %>_path, class: "btn btn-outline-primary" %>
11-
</div>
7+
<div>
8+
<%%= link_to_button('New ' + <%= singular_table_name.classify %>.model_name.human.downcase,
9+
new_<%= singular_table_name %>_path,
10+
variant: :primary_outline) %>
1211
</div>
1312
</div>
14-
</div>
15-
16-
<div class="col-md-12">
17-
<table class="table table-striped table-bordered table-responsive">
18-
<thead>
19-
<tr>
20-
<%% attributes = @<%= plural_table_name %>.first.attributes.keys if @<%= plural_table_name %>.any? %>
21-
<%% attributes&.each do |attribute| %>
22-
<th><%%= attribute.humanize %></th>
23-
<%% end %>
24-
<th>Edit</th>
25-
</tr>
26-
</thead>
13+
<div class="border-b border-gray-300 mb-6"></div>
2714

28-
<tbody>
29-
<%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
15+
<!-- Table -->
16+
<div class="overflow-x-auto">
17+
<table class="min-w-full table-auto border-collapse border border-gray-200">
18+
<thead class="bg-gray-100">
19+
<%% if @<%= plural_table_name %>.any? %>
3020
<tr>
31-
<%% attributes.each do |attribute| %>
32-
<td><%%= <%= singular_table_name %>[attribute] %></td>
21+
<%% attributes = @<%= plural_table_name %>.first.attributes.keys - ["id", "created_at", "updated_at"] if @<%= plural_table_name %>.any? %>
22+
<%% attributes&.each do |attribute| %>
23+
<th class="px-4 py-2 text-left text-sm font-semibold text-gray-700"><%%= attribute.humanize %></th>
3324
<%% end %>
34-
<td><%%= link_to 'Edit', edit_<%= singular_table_name %>_path(<%= singular_table_name %>) %></td>
25+
<th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">Edit</th>
3526
</tr>
36-
<%% end %>
37-
</tbody>
38-
</table>
27+
<%% end %>
28+
</thead>
29+
30+
<tbody class="divide-y divide-gray-200">
31+
<%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
32+
<tr class="hover:bg-gray-50 transition-colors duration-150">
33+
<%% attributes.each do |attribute| %>
34+
<td class="px-4 py-2 text-sm text-gray-800">
35+
<%%= <%= singular_table_name %>[attribute] %>
36+
</td>
37+
<%% end %>
38+
<td class="px-4 py-2 flex gap-2">
39+
<%%= link_to_button 'Edit', edit_<%= singular_table_name %>_path(<%= singular_table_name %>),
40+
variant: :secondary_outline %>
41+
</td>
42+
</tr>
43+
<%% end %>
44+
</tbody>
45+
</table>
46+
</div>
47+
48+
<!-- Empty state -->
49+
<%% unless @<%= plural_table_name %>.any? %>
50+
<p class="text-gray-500 text-center py-6">No <%%= <%= plural_table_name.classify %>.model_name.human.pluralize %> found.</p>
51+
<%% end %>
3952

40-
<div class="text-center">
41-
<%<%= will_paginate @<%= plural_table_name %>, :previous_label => '<<', :next_label => '>>', :inner_window => 2 %>
53+
<!-- Pagination -->
54+
<div class="flex justify-center mt-6">
55+
<%%= will_paginate @<%= plural_table_name %>, previous_label: '<<', next_label: '>>',
56+
class: 'flex space-x-2' %>
4257
</div>
4358
</div>

‎lib/templates/erb/scaffold/new.html.erb.tt‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
<div class="row">
2-
<div class="col-md-12">
3-
<h2>New <%%= @<%= singular_table_name %>.class.model_name.human %></h2>
4-
<%%= render "form", locals: { <%= singular_table_name %>: @<%= singular_table_name %> } %>
1+
<div class="max-w-7xl mx-auto px-4 py-8">
2+
<h1 class="text-3xl font-semibold text-gray-900 mb-4">New <%%= <%= plural_table_name.classify %>.model_name.human %></h1>
3+
<div class="border-b border-gray-300 mb-6"></div>
4+
<div class="mt-4 pt-4">
5+
<%%= render 'form', <%= singular_table_name %>: @<%= singular_table_name %> %>
56
</div>
6-
</div>
7+
</div>

‎lib/templates/erb/scaffold/show.html.erb.tt‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
1-
<div class="row mb-3">
2-
<div class="col text-end">
3-
<%%= link_to "Edit", edit_<%= singular_table_name %>_path(@<%= singular_table_name %>), class: "btn btn-outline-primary" if current_user.super_user? %>
4-
</div>
5-
</div>
1+
<div class="detail py-6 min-h-screen">
2+
<div class="max-w-5xl mx-auto px-4">
3+
<div class="flex justify-end mb-6">
4+
<%%= link_to_button("Index", <%= plural_table_name %>_path, variant: :secondary_outline) %>
5+
<%% if current_user.super_user? %>
6+
<%%= link_to_button("Edit", edit_<%= singular_table_name %>_path, variant: :primary_outline) %>
7+
<%% end %>
8+
</div>
9+
<div class="max-w-3xl mx-auto bg-white border border-gray-200 rounded-xl shadow p-6">
10+
<h1 class="text-2xl font-bold mb-4"><%%= <%= plural_table_name.classify %>.model_name.human %> Details</h1>
11+
12+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
613

7-
<div class="row">
8-
<div class="col-md-12">
9-
<h2><%%= @<%= singular_table_name %>.class.model_name.human %> Details</h2>
14+
<% attributes.each do |attribute| -%>
15+
<div class="mb-3">
16+
<p class="font-bold text-gray-700"><%= attribute.human_name %>:</p>
17+
<p class="text-gray-900"><%%= @<%= singular_table_name %>.<%= attribute.name %> %></p>
18+
</div>
19+
<% end -%>
1020

11-
<table class="table table-striped">
12-
<tbody>
13-
<%% attributes = @<%= singular_table_name %>.attributes.keys if @<%= singular_table_name %> %>
14-
<%% attributes&.each do |attribute| -%>
15-
<tr>
16-
<th><%%= attribute.humanize %></th>
17-
<td><%%= @<%= singular_table_name %>.send(attribute) %></td>
18-
</tr>
19-
<%% end -%>
20-
</tbody>
21-
</table>
21+
</div>
22+
</div>
2223
</div>
2324
</div>

‎lib/templates/rails/scaffold_controller/controller.rb.tt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
class <%= controller_class_name %>Controller < ApplicationController
33
before_action :set_<%= singular_table_name %>, only: [:show, :edit, :update, :destroy]
44

5+
layout 'tailwind'
6+
57
def index
68
per_page = params[:number_of_items_per_page].presence || 25
79
@<%= plural_table_name %> = <%= orm_class.all(class_name) %>.paginate(page: params[:page], per_page: per_page)

0 commit comments

Comments
 (0)