Skip to content

Commit dfc7a77

Browse files
amatsudaamatsuda
committed
Brief design with Tailwind
1 parent 4daa214 commit dfc7a77

File tree

5 files changed

+93
-35
lines changed

5 files changed

+93
-35
lines changed

‎app/views/layouts/application.html.erb‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,16 @@
1616
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
1717
</head>
1818

19-
<body>
20-
<main class="container mx-auto mt-28 px-5 flex">
19+
<body class="bg-gray-50">
20+
<header class="bg-white shadow-sm border-b border-gray-200">
21+
<div class="container mx-auto px-4 py-4">
22+
<h1 class="text-2xl font-bold text-gray-900">
23+
<%= link_to "blade.ruby-lang.org", root_path, class: "hover:text-red-600 transition-colors" %>
24+
</h1>
25+
</div>
26+
</header>
27+
28+
<main class="container mx-auto px-4 py-8">
2129
<%= yield %>
2230
</main>
2331
</body>

‎app/views/messages/_message.html.erb‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,26 @@
1-
<div class="message" id="<%= dom_id message %>">
2-
<ul class="headers">
3-
<li>From: <%= message.from %></li>
4-
<li>Date: <%= message.published_at %></li>
5-
<li>Subject: <%= message.subject %></li>
6-
</ul>
7-
<pre><%= message.body %></pre>
1+
<div class="bg-white rounded-lg shadow-md overflow-hidden" id="<%= dom_id message %>">
2+
<div class="border-b border-gray-200 bg-gray-50 px-6 py-4">
3+
<h2 class="text-xl font-semibold text-gray-900 mb-3"><%= message.subject %></h2>
4+
<div class="space-y-1 text-sm text-gray-600">
5+
<div class="flex items-center gap-2">
6+
<span class="font-medium text-gray-700">From:</span>
7+
<span><%= message.from %></span>
8+
</div>
9+
<div class="flex items-center gap-2">
10+
<span class="font-medium text-gray-700">Date:</span>
11+
<span><%= message.published_at&.strftime("%Y-%m-%d %H:%M:%S %Z") || "N/A" %></span>
12+
</div>
13+
<% if message.list %>
14+
<div class="flex items-center gap-2">
15+
<span class="font-medium text-gray-700">List:</span>
16+
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
17+
<%= message.list.name %> #<%= message.list_seq %>
18+
</span>
19+
</div>
20+
<% end %>
21+
</div>
22+
</div>
23+
<div class="px-6 py-4">
24+
<pre class="whitespace-pre-wrap font-mono text-sm text-gray-800 leading-relaxed"><%= message.body %></pre>
25+
</div>
826
</div>

‎app/views/messages/_thread.html.erb‎

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,45 @@
1-
<div class="thread-message" style="margin-left: <%= depth * 20 %>px;">
1+
<div class="thread-message" style="margin-left: <%= depth * 6 %>px;">
22
<% if depth == 0 %>
3-
<h2>
4-
<span><%= message.list_seq %>: (<%= message.count_recursively %>)</span>
5-
<%= link_to without_list_prefix(message.subject), "/#{list.name}/#{message.list_seq}" %>
6-
</h2>
3+
<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
4+
<div class="p-5">
5+
<div class="flex items-start justify-between gap-4">
6+
<div class="flex-1 min-w-0">
7+
<h2 class="text-lg font-semibold text-gray-900 hover:text-red-600 transition-colors mb-2">
8+
<span class="px-0.5">[#<%= message.list_seq %>]</span>
9+
<%= link_to without_list_prefix(message.subject), "/#{list.name}/#{message.list_seq}" %>
10+
<span class="text-sm text-gray-500 font-normal ml-2">— <%= message.from %></span>
11+
</h2>
12+
<div class="flex items-center gap-3 text-sm text-gray-600">
13+
<span class="inline-flex items-center gap-1">
14+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
15+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
16+
</svg>
17+
<%= count = message.count_recursively %> <%= count == 1 ? 'message' : 'messages' %>
18+
</span>
19+
</div>
20+
</div>
21+
</div>
22+
</div>
23+
</div>
724
<% else %>
8-
<div class="reply">
9-
<span class="reply-meta">
10-
<%= link_to "[#{message.list_seq}]", "/#{list.name}/#{message.list_seq}" %>
11-
<%= without_list_prefix(message.subject) %>
12-
- <%= message.from&.first || message.from %>
13-
</span>
25+
<div class="py-2 border-l-2 border-gray-200 pl-4 hover:border-red-400 transition-colors">
26+
<div class="flex items-start gap-2 text-sm">
27+
<svg class="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
28+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
29+
</svg>
30+
<div class="flex-1 min-w-0">
31+
<%= link_to "/#{list.name}/#{message.list_seq}", class: "text-gray-900 hover:text-red-600 transition-colors" do %>
32+
<span class="px-0.5">[#<%= message.list_seq %>] <%= without_list_prefix(message.subject) %></span>
33+
<% end %>
34+
<span class="text-gray-500">— <%= message.from %></span>
35+
</div>
36+
</div>
1437
</div>
1538
<% end %>
1639

1740
<% if message.children&.any? %>
18-
<% message.children.each do |child| %>
19-
<%= render partial: 'thread', locals: { message: child, list: list, depth: depth + 1 } %>
20-
<% end %>
41+
<div class="mt-2">
42+
<%= render partial: 'thread', collection: message.children, as: :message, locals: {list: list, depth: depth + 1} %>
43+
</div>
2144
<% end %>
2245
</div>

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

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
<% content_for :title, @list.name %>
22

3-
<p style="color: green"><%= notice %></p>
4-
5-
<h1><%= @list.name %></h1>
3+
<% if notice %>
4+
<div class="mb-4 p-4 bg-green-50 border border-green-200 text-green-800 rounded-lg">
5+
<%= notice %>
6+
</div>
7+
<% end %>
68

7-
<% @messages.each do |message| %>
8-
<h2>
9-
<span><%= message.list_seq %>: (<%= message.count_recursively %>)</span>
10-
<%= link_to without_list_prefix(message.subject), "/#{@list.name}/#{message.list_seq}" %>— <%= message.from %>
11-
</h2>
12-
<div><pre><%= message.body %></pre></div>
9+
<div class="mb-8">
10+
<h1 class="text-3xl font-bold text-gray-900"><%= @list.name %></h1>
11+
<p class="text-gray-600 mt-2">Mailing list archive</p>
12+
</div>
1313

14-
<%= render partial: 'thread', locals: { message: message, list: @list, depth: 0 } %>
15-
<% end %>
14+
<div class="space-y-6">
15+
<%= render partial: 'thread', collection: @messages, as: :message, locals: {list: @list, depth: 0} %>
16+
</div>

‎app/views/messages/show.html.erb‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
<% content_for :title, @message.subject %>
22

3-
<p style="color: green"><%= notice %></p>
3+
<% if notice %>
4+
<div class="mb-4 p-4 bg-green-50 border border-green-200 text-green-800 rounded-lg">
5+
<%= notice %>
6+
</div>
7+
<% end %>
8+
9+
<div class="mb-4">
10+
<%= link_to "← Back to #{@message.list.name}", "/#{@message.list.name}/", class: "text-red-600 hover:text-red-800 font-medium" %>
11+
</div>
412

513
<%= render @message %>

0 commit comments

Comments
 (0)