Skip to content

Commit 12b4c53

Browse files
hydrognomikhydrognomik
authored
Bootstrap Mazer cleanup (#591)
1 parent 8a0b2cd commit 12b4c53

File tree

12 files changed

+158
-474
lines changed

12 files changed

+158
-474
lines changed

‎Gemfile‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ gem "csv"
1212
gem "herb", "~> 0.8.10"
1313
gem "image_processing", "~> 1.14"
1414
gem "importmap-rails"
15+
gem "inline_svg"
1516
gem "jbuilder"
1617
gem "kamal", require: false
1718
gem "mission_control-jobs"

‎Gemfile.lock‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,9 @@ GEM
236236
actionpack (>= 6.0.0)
237237
activesupport (>= 6.0.0)
238238
railties (>= 6.0.0)
239+
inline_svg (1.10.0)
240+
activesupport (>= 3.0)
241+
nokogiri (>= 1.6)
239242
io-console (0.8.2)
240243
irb (1.16.0)
241244
pp (>= 0.6.0)
@@ -635,6 +638,7 @@ DEPENDENCIES
635638
hotwire-spark
636639
image_processing (~> 1.14)
637640
importmap-rails
641+
inline_svg
638642
jbuilder
639643
kamal
640644
letter_opener

‎app/assets/stylesheets/application.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,10 @@ body {
1919
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
2020
background-color: #f9fafb;
2121
}
22+
23+
@media (prefers-reduced-motion: reduce) {
24+
* {
25+
animation: none !important;
26+
transition: none !important;
27+
}
28+
}

‎app/assets/tailwind/application.css‎

Lines changed: 2 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,137 +1,6 @@
11
@import "tailwindcss";
22
@import "./components/sidebar.css";
3-
4-
/* Tom Select Tailwind Styles */
5-
6-
/* Hide the original select element */
7-
.ts-wrapper .ts-control + select,
8-
.ts-wrapper + select {
9-
@apply hidden;
10-
}
11-
12-
select[data-select-tags-target="tagList"] {
13-
@apply hidden;
14-
}
15-
16-
.ts-wrapper {
17-
@apply relative;
18-
}
19-
20-
.ts-wrapper.single .ts-control,
21-
.ts-wrapper.multi .ts-control {
22-
@apply w-full px-3.5 py-2.5 border border-gray-300 rounded-lg text-sm bg-white transition-all duration-200;
23-
min-height: 42px;
24-
}
25-
26-
.ts-wrapper.multi .ts-control {
27-
@apply flex flex-wrap items-center gap-1.5;
28-
padding: 0.375rem 0.625rem;
29-
}
30-
31-
.ts-wrapper .ts-control:focus-within {
32-
@apply border-blue-500 outline-none ring-4 ring-blue-500/10;
33-
}
34-
35-
.ts-wrapper.single .ts-control:hover:not(:focus-within),
36-
.ts-wrapper.multi .ts-control:hover:not(:focus-within) {
37-
@apply border-gray-400 bg-gray-50;
38-
}
39-
40-
.ts-wrapper .ts-control > input {
41-
@apply flex-grow outline-none bg-transparent text-sm;
42-
min-width: 60px;
43-
padding: 0.25rem;
44-
}
45-
46-
.ts-wrapper .ts-control > input::placeholder {
47-
@apply text-gray-400;
48-
}
49-
50-
/* Selected items (tags/badges) */
51-
.ts-wrapper.multi .ts-control > div {
52-
@apply inline-flex items-center gap-1.5 px-2.5 py-1 bg-blue-500 text-white text-sm rounded-md;
53-
max-width: 100%;
54-
}
55-
56-
.ts-wrapper.multi .ts-control > div.active {
57-
@apply bg-blue-600;
58-
}
59-
60-
/* Remove button */
61-
.ts-wrapper .ts-control .remove {
62-
@apply inline-flex items-center justify-center ml-1 text-white/80 hover:text-white cursor-pointer;
63-
font-size: 1.125rem;
64-
line-height: 1;
65-
padding: 0;
66-
border: none;
67-
background: none;
68-
}
69-
70-
.ts-wrapper .ts-control .remove:hover {
71-
@apply text-white;
72-
}
73-
74-
/* Dropdown */
75-
.ts-dropdown {
76-
@apply absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden;
77-
max-height: 280px;
78-
overflow-y: auto;
79-
}
80-
81-
.ts-dropdown .ts-dropdown-content {
82-
@apply py-1;
83-
}
84-
85-
/* Dropdown options */
86-
.ts-dropdown .option {
87-
@apply px-3.5 py-2 text-sm text-gray-700 cursor-pointer transition-colors duration-150;
88-
}
89-
90-
.ts-dropdown .option:hover,
91-
.ts-dropdown .option.active {
92-
@apply bg-blue-500 text-white;
93-
}
94-
95-
.ts-dropdown .option.selected {
96-
@apply hidden;
97-
}
98-
99-
/* No results message */
100-
.ts-dropdown .no-results {
101-
@apply px-3.5 py-2 text-sm text-gray-500 italic;
102-
}
103-
104-
/* Loading state */
105-
.ts-wrapper.loading::after {
106-
content: "";
107-
@apply absolute right-3 top-1/2 w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin;
108-
margin-top: -0.5rem;
109-
}
110-
111-
/* Disabled state */
112-
.ts-wrapper.disabled .ts-control {
113-
@apply bg-gray-100 text-gray-500 cursor-not-allowed border-gray-200;
114-
}
115-
116-
/* Single select caret */
117-
.ts-wrapper.single .ts-control::after {
118-
content: "";
119-
@apply absolute right-3 top-1/2 w-0 h-0;
120-
border-left: 5px solid transparent;
121-
border-right: 5px solid transparent;
122-
border-top: 5px solid #6b7280;
123-
margin-top: -2.5px;
124-
pointer-events: none;
125-
}
126-
127-
.ts-wrapper.single.input-active .ts-control::after {
128-
border-top-color: #3b82f6;
129-
}
130-
131-
/* Focus visible for accessibility */
132-
.ts-wrapper .ts-control:focus-visible {
133-
@apply outline-none ring-4 ring-blue-500/10;
134-
}
3+
@import "./components/tom-select.css";
1354

1365
/* Form Styles */
1376
.form-label {
@@ -285,7 +154,7 @@ nav.pagy a.gap {
285154
}
286155

287156
.content-wrapper {
288-
@apply max-w-7xl mx-auto overflow-x-hidden p-4 min-h-screen;
157+
@apply max-w-7xl mx-auto overflow-x-hidden p-4 pb-16 min-h-screen;
289158
}
290159

291160
.section-spacing {

‎app/assets/tailwind/components/tom-select.css‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
/* Tom Select Tailwind Styles, used for Tags management */
2+
3+
/* Hide the original select element */
4+
.ts-wrapper .ts-control + select,
5+
.ts-wrapper + select {
6+
@apply hidden;
7+
}
8+
9+
select[data-select-tags-target="tagList"] {
10+
@apply hidden;
11+
}
12+
13+
.ts-wrapper {
14+
@apply relative;
15+
}
16+
17+
.ts-wrapper.single .ts-control,
18+
.ts-wrapper.multi .ts-control {
19+
@apply w-full px-3.5 py-2.5 border border-gray-300 rounded-lg text-sm bg-white transition-all duration-200;
20+
min-height: 42px;
21+
}
22+
23+
.ts-wrapper.multi .ts-control {
24+
@apply flex flex-wrap items-center gap-1.5;
25+
padding: 0.375rem 0.625rem;
26+
}
27+
28+
.ts-wrapper .ts-control:focus-within {
29+
@apply border-blue-500 outline-none ring-4 ring-blue-500/10;
30+
}
31+
32+
.ts-wrapper.single .ts-control:hover:not(:focus-within),
33+
.ts-wrapper.multi .ts-control:hover:not(:focus-within) {
34+
@apply border-gray-400 bg-gray-50;
35+
}
36+
37+
.ts-wrapper .ts-control > input {
38+
@apply flex-grow outline-none bg-transparent text-sm;
39+
min-width: 60px;
40+
padding: 0.25rem;
41+
}
42+
43+
.ts-wrapper .ts-control > input::placeholder {
44+
@apply text-gray-400;
45+
}
46+
47+
/* Selected items (tags/badges) */
48+
.ts-wrapper.multi .ts-control > div {
49+
@apply inline-flex items-center gap-1.5 px-2.5 py-1 bg-blue-500 text-white text-sm rounded-md;
50+
max-width: 100%;
51+
}
52+
53+
.ts-wrapper.multi .ts-control > div.active {
54+
@apply bg-blue-600;
55+
}
56+
57+
/* Remove button */
58+
.ts-wrapper .ts-control .remove {
59+
@apply inline-flex items-center justify-center ml-1 text-white/80 hover:text-white cursor-pointer;
60+
font-size: 1.125rem;
61+
line-height: 1;
62+
padding: 0;
63+
border: none;
64+
background: none;
65+
}
66+
67+
.ts-wrapper .ts-control .remove:hover {
68+
@apply text-white;
69+
}
70+
71+
/* Dropdown */
72+
.ts-dropdown {
73+
@apply absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden;
74+
max-height: 280px;
75+
overflow-y: auto;
76+
}
77+
78+
.ts-dropdown .ts-dropdown-content {
79+
@apply py-1;
80+
}
81+
82+
/* Dropdown options */
83+
.ts-dropdown .option {
84+
@apply px-3.5 py-2 text-sm text-gray-700 cursor-pointer transition-colors duration-150;
85+
}
86+
87+
.ts-dropdown .option:hover,
88+
.ts-dropdown .option.active {
89+
@apply bg-blue-500 text-white;
90+
}
91+
92+
.ts-dropdown .option.selected {
93+
@apply hidden;
94+
}
95+
96+
/* No results message */
97+
.ts-dropdown .no-results {
98+
@apply px-3.5 py-2 text-sm text-gray-500 italic;
99+
}
100+
101+
/* Loading state */
102+
.ts-wrapper.loading::after {
103+
content: "";
104+
@apply absolute right-3 top-1/2 w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin;
105+
margin-top: -0.5rem;
106+
}
107+
108+
/* Disabled state */
109+
.ts-wrapper.disabled .ts-control {
110+
@apply bg-gray-100 text-gray-500 cursor-not-allowed border-gray-200;
111+
}
112+
113+
/* Single select caret */
114+
.ts-wrapper.single .ts-control::after {
115+
content: "";
116+
@apply absolute right-3 top-1/2 w-0 h-0;
117+
border-left: 5px solid transparent;
118+
border-right: 5px solid transparent;
119+
border-top: 5px solid #6b7280;
120+
margin-top: -2.5px;
121+
pointer-events: none;
122+
}
123+
124+
.ts-wrapper.single.input-active .ts-control::after {
125+
border-top-color: #3b82f6;
126+
}
127+
128+
/* Focus visible for accessibility */
129+
.ts-wrapper .ts-control:focus-visible {
130+
@apply outline-none ring-4 ring-blue-500/10;
131+
}

0 commit comments

Comments
 (0)