Skip to content

Commit f9b20b0

Browse files
cpowcpow
authored
Merge pull request #6 from typecraft-dev/ep-6-tailwind
Make it everything look nice with tailwind
2 parents a57c410 + 206230d commit f9b20b0

File tree

18 files changed

+476
-104
lines changed

18 files changed

+476
-104
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,6 @@
3232

3333
# Ignore master key for decrypting credentials and more.
3434
/config/master.key
35+
36+
/app/assets/builds/*
37+
!/app/assets/builds/.keep

‎Gemfile‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,5 @@ group :test do
6161
gem "capybara"
6262
gem "selenium-webdriver"
6363
end
64+
65+
gem "tailwindcss-rails", "~> 4.3"

‎Gemfile.lock‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -322,6 +322,15 @@ GEM
322322
stimulus-rails (1.3.4)
323323
railties (>= 6.0.0)
324324
stringio (3.1.7)
325+
tailwindcss-rails (4.3.0)
326+
railties (>= 7.0.0)
327+
tailwindcss-ruby (~> 4.0)
328+
tailwindcss-ruby (4.1.11)
329+
tailwindcss-ruby (4.1.11-aarch64-linux-gnu)
330+
tailwindcss-ruby (4.1.11-aarch64-linux-musl)
331+
tailwindcss-ruby (4.1.11-arm64-darwin)
332+
tailwindcss-ruby (4.1.11-x86_64-linux-gnu)
333+
tailwindcss-ruby (4.1.11-x86_64-linux-musl)
325334
thor (1.3.2)
326335
thruster (0.1.14)
327336
thruster (0.1.14-aarch64-linux)
@@ -381,6 +390,7 @@ DEPENDENCIES
381390
solid_queue
382391
sqlite3 (>= 2.1)
383392
stimulus-rails
393+
tailwindcss-rails (~> 4.3)
384394
thruster
385395
turbo-rails
386396
tzinfo-data

‎Procfile.dev‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
web: bin/rails server
2+
css: bin/rails tailwindcss:watch

‎app/assets/builds/.keep‎

Whitespace-only changes.

‎app/assets/tailwind/application.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "tailwindcss";

‎app/views/projects/_form.html.erb‎

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,47 @@
1-
<%= form_with model: project do |f| %>
2-
1+
<%= form_with model: project, class: "space-y-6" do |f| %>
32
<% if project.errors.any? %>
4-
<div class="errors">
5-
<h2><%= pluralize(project.errors.count, "error") %> prohibited this project from being saved:</h2>
6-
<ul>
7-
<% project.errors.full_messages.each do |message| %>
8-
<li><%= message %></li>
9-
<% end %>
10-
</ul>
3+
<div class="bg-red-50 border-l-4 border-red-400 p-4 mb-6">
4+
<div class="flex">
5+
<div class="flex-shrink-0">
6+
<svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
7+
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
8+
</svg>
9+
</div>
10+
<div class="ml-3">
11+
<h3 class="text-sm font-medium text-red-800">
12+
<%= pluralize(project.errors.count, "error") %> prohibited this project from being saved:
13+
</h3>
14+
<div class="mt-2 text-sm text-red-700">
15+
<ul class="list-disc pl-5 space-y-1">
16+
<% project.errors.full_messages.each do |message| %>
17+
<li><%= message %></li>
18+
<% end %>
19+
</ul>
20+
</div>
21+
</div>
22+
</div>
1123
</div>
1224
<% end %>
1325

1426
<div>
15-
<%= f.label :name %>
16-
<%= f.text_field :name %>
27+
<%= f.label :name, class: "block text-sm font-medium text-gray-700" %>
28+
<div class="mt-1">
29+
<%= f.text_field :name, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" %>
30+
</div>
1731
</div>
1832

19-
<div class="actions">
20-
<%= f.submit %>
33+
<div>
34+
<%= f.label :active, class: "block text-sm font-medium text-gray-700" %>
35+
<div class="mt-1">
36+
<%= f.check_box :active, class: "h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" %>
37+
<span class="ml-2 text-sm text-gray-600">Mark as active</span>
38+
</div>
39+
</div>
40+
41+
<div class="pt-5">
42+
<div class="flex justify-end">
43+
<%= link_to "Cancel", projects_path, class: "bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
44+
<%= f.submit class: "ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
45+
</div>
2146
</div>
2247
<% end %>

‎app/views/projects/edit.html.erb‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1-
<h1>Edit Project</h1>
2-
3-
<%= render "form", project: @project %>
1+
<div class="md:grid md:grid-cols-3 md:gap-6">
2+
<div class="md:col-span-1">
3+
<div class="px-4 sm:px-0">
4+
<h1 class="text-2xl font-bold text-gray-900 mb-2">Edit Project</h1>
5+
<p class="mt-1 text-sm text-gray-600">
6+
Update your project's details.
7+
</p>
8+
</div>
9+
</div>
10+
<div class="mt-5 md:mt-0 md:col-span-2">
11+
<div class="shadow sm:rounded-md sm:overflow-hidden">
12+
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
13+
<%= render "form", project: @project %>
14+
</div>
15+
</div>
16+
</div>
17+
</div>

‎app/views/projects/index.html.erb‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,40 @@
1-
<h1>Projects</h1>
1+
<div class="flex justify-between items-center mb-6">
2+
<h1 class="text-3xl font-bold text-gray-900">Projects</h1>
3+
<%= link_to "New Project", new_project_path, class: "px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors" %>
4+
</div>
25

3-
<ul>
6+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
47
<% @projects.each do |project| %>
5-
<li><%= link_to project.name, project_path(project) %></li>
8+
<div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-md transition-shadow">
9+
<div class="p-6">
10+
<h2 class="text-xl font-semibold text-gray-900 mb-2">
11+
<%= project.name %>
12+
</h2>
13+
14+
<div class="mt-4 flex items-center text-sm text-gray-600">
15+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
16+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
17+
</svg>
18+
<span><%= project.todos.count %> <%= "Todo".pluralize(project.todos.count) %></span>
19+
</div>
20+
21+
<div class="mt-6">
22+
<%= link_to "View Project", project_path(project), class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
23+
</div>
24+
</div>
25+
</div>
626
<% end %>
7-
</ul>
27+
</div>
28+
29+
<% if @projects.empty? %>
30+
<div class="text-center py-12">
31+
<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
32+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
33+
</svg>
34+
<h3 class="mt-2 text-sm font-medium text-gray-900">No projects</h3>
35+
<p class="mt-1 text-sm text-gray-500">Get started by creating a new project.</p>
36+
<div class="mt-6">
37+
<%= link_to "New Project", new_project_path, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
38+
</div>
39+
</div>
40+
<% end %>

‎app/views/projects/new.html.erb‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1-
<h1>New Project</h1>
2-
3-
<%= render "form", project: @project %>
1+
<div class="md:grid md:grid-cols-3 md:gap-6">
2+
<div class="md:col-span-1">
3+
<div class="px-4 sm:px-0">
4+
<h1 class="text-2xl font-bold text-gray-900 mb-2">New Project</h1>
5+
<p class="mt-1 text-sm text-gray-600">
6+
Create a new project to organize your todos.
7+
</p>
8+
</div>
9+
</div>
10+
<div class="mt-5 md:mt-0 md:col-span-2">
11+
<div class="shadow sm:rounded-md sm:overflow-hidden">
12+
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
13+
<%= render "form", project: @project %>
14+
</div>
15+
</div>
16+
</div>
17+
</div>

0 commit comments

Comments
 (0)