Skip to content

Commit 62972aa

Browse files
Oli0liOli0li
committed
Refactor tag views to avoid inline stylings
1 parent 37e159f commit 62972aa

File tree

5 files changed

+211
-567
lines changed

5 files changed

+211
-567
lines changed

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

Lines changed: 24 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,54 @@
11
<%= form_with(model: tag, local: true) do |form| %>
22
<% if tag.errors.any? %>
3-
<div style="background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border: 1px solid #f87171; color: #dc2626; padding: 1.5rem; border-radius: 0.75rem; margin-bottom: 2rem;">
4-
<div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
5-
<svg style="width: 1.25rem; height: 1.25rem; flex-shrink: 0;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3+
<div class="alert-error">
4+
<div class="flex items-center gap-3 mb-4">
5+
<svg class="icon-size-md text-red-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
66
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
77
</svg>
8-
<h3 style="font-size: 1.125rem; font-weight: 600; margin: 0;">
8+
<h3 class="alert-error-title">
99
<%= pluralize(tag.errors.count, "error") %> prohibited this tag from being saved:
1010
</h3>
1111
</div>
12-
<ul style="margin: 0; padding-left: 1.5rem;">
12+
<ul class="alert-error-list">
1313
<% tag.errors.each do |error| %>
14-
<li style="margin-bottom: 0.5rem; font-weight: 500;"><%= error.full_message %></li>
14+
<li class="mb-2 font-medium"><%= error.full_message %></li>
1515
<% end %>
1616
</ul>
1717
</div>
1818
<% end %>
1919

20-
<div style="space-y: 1.5rem;">
20+
<div class="space-y-6">
2121

2222
<!-- Tag Name Field -->
23-
<div style="margin-bottom: 1.5rem;">
24-
<%= form.label :name, style: "display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem;" do %>
25-
<div style="display: flex; align-items: center; gap: 0.5rem;">
26-
<svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
23+
<div class="mb-6">
24+
<%= form.label :name, class: "input-label" do %>
25+
<div class="label-with-icon">
26+
<svg class="icon-size" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2727
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
2828
</svg>
2929
Tag Name
3030
</div>
3131
<% end %>
3232
<%= form.text_field :name,
3333
placeholder: "Enter tag name (e.g., healthcare, technology, education)",
34-
style: "width: 100%; padding: 0.875rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem; transition: all 0.2s; background: white;",
35-
onfocus: "this.style.borderColor='#8b5cf6'; this.style.boxShadow='0 0 0 3px rgba(139, 92, 246, 0.1)';",
36-
onblur: "this.style.borderColor='#e5e7eb'; this.style.boxShadow='none';" %>
37-
<p style="margin: 0.5rem 0 0 0; font-size: 0.75rem; color: #6b7280;">
34+
class: "form-input" %>
35+
<p class="text-muted">
3836
Provide a clear, descriptive name for this content classification tag.
3937
</p>
4038
</div>
4139

4240
<!-- Cognates Field -->
43-
<div data-controller="select-tags" style="margin-bottom: 1.5rem;">
44-
<div style="display: flex; justify-content: space-between; align-items: end; margin-bottom: 0.5rem;">
45-
<%= form.label :cognates_list, style: "font-size: 0.875rem; font-weight: 600; color: #374151;" do %>
46-
<div style="display: flex; align-items: center; gap: 0.5rem;">
47-
<svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
41+
<div data-controller="select-tags" class="mb-6">
42+
<div class="flex justify-between items-end mb-2">
43+
<%= form.label :cognates_list, class: "input-label" do %>
44+
<div class="label-with-icon">
45+
<svg class="icon-size" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4846
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
4947
</svg>
5048
Related Tags (Cognates)
5149
</div>
5250
<% end %>
53-
<small style="font-size: 0.75rem; color: #6b7280; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em;">
51+
<small class="text-xs text-gray-500 font-normal uppercase tracking-wider">
5452
Press enter to add a new tag
5553
</small>
5654
</div>
@@ -66,70 +64,23 @@
6664
multiple: true,
6765
data: { "allow-clear": "true", "select-tags-target": "tagList" } %>
6866

69-
<p style="margin: 0.5rem 0 0 0; font-size: 0.75rem; color: #6b7280;">
67+
<p class="text-muted">
7068
Select related tags that share similar meanings or contexts. These help with content discovery and organization.
7169
</p>
7270
</div>
7371

7472
</div>
7573

7674
<!-- Form Actions -->
77-
<div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e5e7eb; display: flex; gap: 1rem; justify-content: flex-end; flex-wrap: wrap;">
78-
<%= link_to tags_path, style: "background: #6b7280; color: white; padding: 0.875rem 1.75rem; border-radius: 0.5rem; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s;" do %>
79-
<svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
75+
<div class="mt-8 pt-8 border-t border-gray-200 flex gap-4 justify-end flex-wrap">
76+
<%= link_to tags_path, class: "bg-gray-500 text-white py-3.5 px-7 rounded-lg no-underline font-semibold text-sm inline-flex items-center gap-2 transition-all hover:bg-gray-600 hover:-translate-y-0.5" do %>
77+
<svg class="icon-size" fill="none" stroke="currentColor" viewBox="0 0 24 24">
8078
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
8179
</svg>
8280
<span>Cancel</span>
8381
<% end %>
8482

8583
<%= form.submit (tag.persisted? ? "Update Tag" : "Create Tag"),
86-
style: "background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; padding: 0.875rem 1.75rem; border-radius: 0.5rem; border: none; font-weight: 600; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; transition: all 0.2s;" %>
84+
class: "bg-gradient-purple text-white py-3.5 px-7 rounded-lg border-0 font-semibold text-sm inline-flex items-center gap-2 cursor-pointer transition-all shadow-blue hover:-translate-y-0.5" %>
8785
</div>
8886
<% end %>
89-
90-
<style>
91-
/* Form input focus effects */
92-
form input[type="text"]:focus, form select:focus {
93-
outline: none;
94-
}
95-
96-
/* Button hover effects */
97-
a[style*="background: #6b7280"]:hover {
98-
background: #4b5563 !important;
99-
transform: translateY(-1px);
100-
}
101-
102-
input[type="submit"]:hover {
103-
box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.4), 0 4px 6px -2px rgba(139, 92, 246, 0.05) !important;
104-
transform: translateY(-1px);
105-
}
106-
107-
/* Multi-select styling */
108-
select[multiple] {
109-
appearance: none;
110-
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
111-
background-position: right 0.5rem center;
112-
background-repeat: no-repeat;
113-
background-size: 1.5em 1.5em;
114-
padding-right: 2.5rem;
115-
}
116-
117-
/* Responsive design */
118-
@media (max-width: 640px) {
119-
div[style*="justify-content: flex-end"] {
120-
flex-direction: column !important;
121-
align-items: stretch !important;
122-
}
123-
124-
a, input[type="submit"] {
125-
text-align: center !important;
126-
justify-content: center !important;
127-
}
128-
129-
div[style*="display: flex; justify-content: space-between"] {
130-
flex-direction: column !important;
131-
align-items: flex-start !important;
132-
gap: 0.5rem !important;
133-
}
134-
}
135-
</style>

‎app/views/tags/_list.html.erb‎

Lines changed: 26 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,50 @@
11
<tbody>
22
<% if @tags.any? %>
33
<% @tags.each_with_index do |tag, index| %>
4-
<tr style="border-bottom: 1px solid #f1f5f9; transition: all 0.2s;" onmouseover="this.style.backgroundColor='#f8fafc'" onmouseout="this.style.backgroundColor='white'">
5-
<td style="padding: 1.5rem;">
6-
<div style="display: flex; align-items: center; gap: 0.75rem;">
7-
<div class="bg-gradient-purple" style="width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.875rem;">
4+
<tr class="border-b border-gray-100 transition-all hover:bg-gray-50">
5+
<td class="table-cell">
6+
<div class="flex items-center gap-3">
7+
<div class="bg-gradient-purple w-10 h-10 rounded-lg flex items-center justify-center text-white font-semibold text-sm">
88
<%= tag.name.first.upcase %>
99
</div>
1010
<div>
11-
<div style="font-weight: 600; color: #111827; font-size: 0.875rem;"><%= tag.name %></div>
12-
<div style="color: #6b7280; font-size: 0.75rem;">Content Tag</div>
11+
<div class="font-semibold text-gray-900 text-sm"><%= tag.name %></div>
12+
<div class="text-gray-500 text-xs">Content Tag</div>
1313
</div>
1414
</div>
1515
</td>
16-
<td class="hide-mobile" style="padding: 1.5rem;">
17-
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
16+
<td class="hide-mobile table-cell">
17+
<div class="flex gap-2 flex-wrap">
1818
<% if tag.cognates_tags.any? %>
1919
<% tag.cognates_tags.each do |cognate| %>
20-
<%= link_to cognate.name, tag_path(cognate), class: "bg-gradient-green", style: "display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; color: white; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; text-decoration: none; transition: all 0.2s;", data: { turbo: false } %>
20+
<%= link_to cognate.name, tag_path(cognate), class: "bg-gradient-green inline-flex items-center py-1 px-3 text-white rounded-full text-xs font-medium no-underline transition-all hover:scale-105", data: { turbo: false } %>
2121
<% end %>
2222
<% else %>
23-
<span style="color: #94a3b8; font-style: italic; font-size: 0.75rem;">No cognates</span>
23+
<span class="text-gray-400 italic text-xs">No cognates</span>
2424
<% end %>
2525
</div>
2626
</td>
27-
<td style="padding: 1.5rem;">
28-
<div style="display: flex; align-items: center; gap: 0.5rem;">
29-
<div class="bg-gradient-amber" style="color: white; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600;">
27+
<td class="table-cell">
28+
<div class="flex items-center gap-2">
29+
<div class="bg-gradient-amber text-white py-1 px-2 rounded-md text-xs font-semibold">
3030
<%= tag.taggings_count %>
3131
</div>
32-
<span style="color: #6b7280; font-size: 0.75rem;">
32+
<span class="text-gray-500 text-xs">
3333
<%= pluralize(tag.taggings_count, 'usage') %>
3434
</span>
3535
</div>
3636
</td>
37-
<td style="padding: 1.5rem; text-align: right;">
38-
<div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
39-
<%= link_to tag, style: "background: #3b82f6; color: white; padding: 0.5rem 0.75rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s;", data: { turbo: false } do %>
40-
<svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
37+
<td class="table-cell text-right">
38+
<div class="flex gap-2 justify-end">
39+
<%= link_to tag, class: "btn-view", data: { turbo: false } do %>
40+
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4141
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
4242
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
4343
</svg>
4444
<span>View</span>
4545
<% end %>
46-
<%= link_to edit_tag_path(tag), style: "background: #6b7280; color: white; padding: 0.5rem 0.75rem; border-radius: 0.375rem; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.2s;", data: { turbo: false } do %>
47-
<svg style="width: 0.875rem; height: 0.875rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
46+
<%= link_to edit_tag_path(tag), class: "btn-edit", data: { turbo: false } do %>
47+
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4848
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
4949
</svg>
5050
<span>Edit</span>
@@ -57,39 +57,14 @@
5757
</tbody>
5858

5959
<% unless @tags.any? %>
60-
<!-- Empty state displayed outside the table -->
61-
<div style="padding: 3rem 1.5rem; text-align: center;">
62-
<div style="color: #9ca3af;">
63-
<svg style="width: 3rem; height: 3rem; margin: 0 auto 1rem; color: #d1d5db;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
60+
<!-- Empty state -->
61+
<div class="empty-state">
62+
<div class="text-gray-400">
63+
<svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6464
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
6565
</svg>
66-
<p style="font-size: 1rem; font-weight: 500; color: #6b7280; margin: 0;">No tags found</p>
67-
<p style="font-size: 0.875rem; color: #9ca3af; margin: 0.5rem 0 0 0;">Try adjusting your search filters or create a new tag.</p>
66+
<p class="text-base font-medium text-gray-500 m-0">No tags found</p>
67+
<p class="text-sm text-gray-400 mt-2 m-0">Try adjusting your search filters or create a new tag.</p>
6868
</div>
6969
</div>
7070
<% end %>
71-
72-
<style>
73-
/* Action button hover effects */
74-
a[href*="tags/"]:hover {
75-
transform: translateY(-1px);
76-
}
77-
78-
a[href*="tags/"][style*="background: #3b82f6"]:hover {
79-
background: #2563eb !important;
80-
}
81-
82-
a[href*="edit"]:hover {
83-
background: #4b5563 !important;
84-
}
85-
86-
/* Cognate badge hover effects */
87-
a[style*="background: linear-gradient(135deg, #10b981"]:hover {
88-
transform: scale(1.05);
89-
}
90-
91-
/* Table row hover animation */
92-
tbody tr:hover td:first-child > div > div:first-child {
93-
transform: scale(1.05);
94-
}
95-
</style>

0 commit comments

Comments
 (0)