Skip to content

Commit 9d378af

Browse files
adrianthedevadrianthedev
authored
UI4: detail view, description list and panel improvements (#4209)
1 parent 051d049 commit 9d378af

File tree

120 files changed

+1612
-717
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

120 files changed

+1612
-717
lines changed

‎agents.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,24 @@ Don't implement a component if the Figma MCP is not available and fails and aler
1818
- Use clean CSS and convert the variables to Tailwind CSS `@apply` statements where possible.
1919
- add the new component to the `src/input.css` file.
2020
- use the BEMCSS methodology for the component classes.
21+
- when the width and height are the same, use the `size-` class instead of `width-` and `height-`.
22+
- don't use `left`/`right` modifiers as we need to support RTL. Use `start`/`end` instead. Same for short names like `ml`, `mr`, `pl`, `pr`, `left`, `right`, etc.
2123

2224
#### Figma
2325

2426
- check the components and see if they use other components. If so, use the existing components.
2527

2628
#### Files
2729

30+
## Javascript
31+
32+
We use StimulusJS for the javascript.
33+
Aboid writing inline script tags in the HTML unless instructed so or mentioned some kind of "temporary" or "quick" solution .
34+
35+
## HTML Structure
36+
37+
When toggling the visibility of some html elements, use the `hidden` HTML attribute instead of the `hidden` class.
38+
39+
## Ruby on Rails
40+
41+
Whenever possible use the `partial:` keyword when rendering partials unless needed otherwise.

‎app/assets/stylesheets/application.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@
4141
--shadow-modal: " 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)";
4242

4343
--breakpoint-xs: 30rem;
44+
45+
/* Tiny text size originally added for discreet information */
46+
--text-tiny: 0.625rem;
4447
}
4548

4649
@plugin '@tailwindcss/forms';
@@ -103,11 +106,14 @@
103106
@import "./css/components/ui/badge.css";
104107
@import "./css/components/ui/radio_button.css";
105108

109+
@import "./css/components/field-wrapper.css";
106110
@import "./css/components/avatar.css";
107111
@import "./css/components/breadcrumbs.css";
108112
@import "./css/components/color_scheme_switcher.css";
109113
@import "./css/components/discreet_information.css";
110114
@import "./css/components/tooltip.css";
115+
@import "./css/components/modal.css";
116+
@import "./css/css-animations.css";
111117

112118
html,
113119
body {
@@ -163,6 +169,10 @@
163169
display: none;
164170
}
165171

172+
body.modal-open {
173+
@apply overflow-hidden;
174+
}
175+
166176
trix-editor {
167177
max-height: 320px !important;
168178
overflow-y: auto;
@@ -193,4 +203,16 @@
193203
.selected-row {
194204
@apply bg-neutral-100!;
195205
}
206+
207+
.container-large {
208+
@apply 2xl:container 2xl:mx-auto;
209+
}
210+
211+
.container-small {
212+
@apply 2xl:px-0 2xl:max-w-196 2xl:mx-auto;
213+
}
214+
215+
.container-full-width {
216+
@apply w-full;
217+
}
196218
}

‎app/assets/stylesheets/css/components/avatar.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,5 +124,5 @@
124124
}
125125

126126
.cado-avatar--tiny .cado-avatar__initials {
127-
@apply text-xs leading-4;
127+
@apply text-tiny leading-4;
128128
}

‎app/assets/stylesheets/css/components/color_scheme_switcher.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,3 +68,37 @@
6868
.color-scheme-switcher__text {
6969
@apply text-xs font-medium px-1;
7070
}
71+
72+
/* Accent color dropdown */
73+
.color-scheme-switcher__accent-wrapper {
74+
@apply relative;
75+
}
76+
77+
.color-scheme-switcher__accent-panel {
78+
@apply absolute top-full mt-2 end-0 z-40;
79+
@apply rounded-lg bg-white dark:bg-neutral-800;
80+
@apply border border-neutral-200 dark:border-neutral-700;
81+
@apply shadow-lg p-2 min-w-[160px];
82+
animation: css-animate-slide-down 0.15s ease-out;
83+
}
84+
85+
.color-scheme-switcher__accent-options {
86+
@apply grid grid-cols-3 gap-2;
87+
}
88+
89+
.color-scheme-switcher__accent-option {
90+
@apply flex items-center justify-center p-1;
91+
@apply rounded-md transition-all duration-150;
92+
@apply hover:bg-neutral-100 dark:hover:bg-neutral-700;
93+
@apply focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-1;
94+
@apply border-0 bg-transparent cursor-pointer;
95+
}
96+
97+
.color-scheme-switcher__accent-preview {
98+
@apply size-6 rounded-full border-2 border-white dark:border-neutral-600 shadow-sm;
99+
}
100+
101+
.color-scheme-switcher__accent-preview--neutral {
102+
@apply bg-neutral-400 dark:bg-neutral-500;
103+
background-image: linear-gradient(135deg, transparent 45%, white 45%, white 55%, transparent 55%);
104+
}

‎app/assets/stylesheets/css/components/field-wrapper.css‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.field-wrapper {
2+
@apply relative flex flex-col grow leading-tight size-auto w-full md:flex-row md:items-center py-2 min-h-15 w-full grow-0 text-ellipsis overflow-scroll;
3+
}
4+
5+
.field-wrapper__label {
6+
@apply flex self-start items-center shrink-0 w-full px-4 font-medium text-content text-sm md:w-60 pt-3;
7+
}
8+
9+
.field-wrapper__help {
10+
@apply text-content-secondary mt-2 text-sm;
11+
}
12+
13+
.field-wrapper__label-help {
14+
/* pb-3 offsets the pt of the label */
15+
@apply text-content-secondary text-xs leading-none font-normal pb-3;
16+
}
17+
18+
.field-wrapper__error {
19+
@apply text-danger mt-2 text-sm;
20+
}
21+
22+
.field-wrapper__content {
23+
@apply flex-1 flex flex-row px-4;
24+
}
25+
26+
.field-wrapper__content-wrapper {
27+
@apply w-full md:w-8/12;
28+
}
29+
30+
.field-wrapper--full-width {
31+
.field-wrapper__content-wrapper {
32+
@apply w-full;
33+
}
34+
}
35+
36+
/* Stacked modifier */
37+
.all-fields-stacked .field-wrapper,
38+
.field-wrapper.field-wrapper--stacked {
39+
@apply md:flex-col md:items-start gap-y-1 py-3;
40+
41+
.field-wrapper__label {
42+
@apply md:w-full min-h-0 pt-0;
43+
}
44+
45+
.field-wrapper__label-help {
46+
@apply pb-0;
47+
}
48+
49+
.field-wrapper__content {
50+
@apply pt-0 px-4 w-full;
51+
}
52+
}

‎app/assets/stylesheets/css/components/modal.css‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
/* Modal Component - Based on Figma Design System */
2+
3+
/* CSS Variables for height sizes matching width sizes */
4+
.modal {
5+
--modal-height-sm: 24rem; /* 384px - matches w-sm */
6+
--modal-height-md: 28rem; /* 448px - matches w-md */
7+
--modal-height-lg: 32rem; /* 512px - matches w-lg */
8+
--modal-height-xl: 36rem; /* 576px - matches w-xl */
9+
--modal-height-2xl: 42rem; /* 672px - matches w-2xl */
10+
--modal-height-3xl: 48rem; /* 768px - matches w-3xl */
11+
--modal-height-4xl: 56rem; /* 896px - matches w-4xl */
12+
}
13+
14+
.modal {
15+
@apply fixed inset-0 w-full z-100 flex justify-center items-center;
16+
}
17+
18+
.modal__overlay {
19+
@apply absolute w-full h-full bg-gray-800/25 flex justify-center items-center;
20+
}
21+
22+
.modal__card-container {
23+
@apply flex flex-col items-center justify-center relative shrink-0 w-full;
24+
}
25+
26+
.modal__card {
27+
@apply flex flex-col items-start relative size-full rounded-xl shadow-[0px_32px_64px_0px_rgba(0,0,0,0.04)] shrink-0;
28+
}
29+
30+
.modal__content {
31+
@apply bg-primary border border-tertiary border-solid flex flex-col items-start overflow-clip relative rounded-[11px] shrink-0 size-full;
32+
}
33+
34+
.modal__header {
35+
@apply border-b border-tertiary border-solid flex flex-col gap-0 items-start p-4 relative shrink-0 w-full;
36+
}
37+
38+
.modal__title {
39+
@apply line-clamp-1 font-medium leading-6 relative shrink-0 text-xl text-content;
40+
}
41+
42+
.modal__description {
43+
@apply line-clamp-1 font-normal leading-5 overflow-ellipsis overflow-hidden relative shrink-0 text-sm text-content-secondary;
44+
}
45+
46+
.modal__close-button {
47+
@apply relative shrink-0 size-5 cursor-pointer hover:opacity-70 transition-opacity;
48+
}
49+
50+
.modal__width-selector {
51+
@apply relative shrink-0 size-5 cursor-pointer hover:opacity-70 transition-opacity;
52+
}
53+
54+
.modal__height-selector {
55+
@apply relative shrink-0 size-5 cursor-pointer hover:opacity-70 transition-opacity;
56+
}
57+
58+
.modal__body {
59+
@apply flex flex-col flex-1 justify-between gap-4 items-start pb-4 pt-0 px-0 relative shrink-0 w-full min-h-64;
60+
}
61+
62+
.modal__body-content {
63+
@apply size-full;
64+
}
65+
66+
.modal__controls {
67+
@apply flex items-center justify-between px-4 py-0 relative shrink-0 w-full;
68+
}
69+
70+
.modal--width-sm {
71+
.modal__card {
72+
@apply w-sm;
73+
}
74+
}
75+
76+
.modal--width-md {
77+
.modal__card {
78+
@apply w-md;
79+
}
80+
}
81+
82+
.modal--width-lg {
83+
.modal__card {
84+
@apply w-lg;
85+
}
86+
}
87+
88+
.modal--width-xl {
89+
.modal__card {
90+
@apply w-xl;
91+
}
92+
}
93+
94+
.modal--width-2xl {
95+
.modal__card {
96+
@apply w-2xl;
97+
}
98+
}
99+
100+
.modal--width-3xl {
101+
.modal__card {
102+
@apply w-3xl;
103+
}
104+
}
105+
106+
.modal--width-4xl {
107+
.modal__card {
108+
@apply w-4xl;
109+
}
110+
}
111+
112+
.modal--width-25 {
113+
.modal__card {
114+
@apply w-[25dvw];
115+
}
116+
}
117+
118+
.modal--width-50 {
119+
.modal__card {
120+
@apply w-[50dvw];
121+
}
122+
}
123+
124+
.modal--width-75 {
125+
.modal__card {
126+
@apply w-[75dvw];
127+
}
128+
}
129+
130+
.modal--width-100 {
131+
.modal__card {
132+
@apply w-full;
133+
}
134+
}
135+
136+
.modal--width-full {
137+
.modal__card {
138+
@apply w-[calc(100dvw-2rem)];
139+
}
140+
}
141+
142+
.modal--height-auto {
143+
.modal__card {
144+
@apply min-h-32;
145+
}
146+
}
147+
148+
.modal--height-sm {
149+
.modal__card {
150+
@apply h-[var(--modal-height-sm)];
151+
}
152+
}
153+
154+
.modal--height-md {
155+
.modal__card {
156+
@apply h-[var(--modal-height-md)];
157+
}
158+
}
159+
160+
.modal--height-lg {
161+
.modal__card {
162+
@apply h-[var(--modal-height-lg)];
163+
}
164+
}
165+
166+
.modal--height-xl {
167+
.modal__card {
168+
@apply h-[var(--modal-height-xl)];
169+
}
170+
}
171+
172+
.modal--height-2xl {
173+
.modal__card {
174+
@apply h-[var(--modal-height-2xl)];
175+
}
176+
}
177+
178+
.modal--height-3xl {
179+
.modal__card {
180+
@apply h-[var(--modal-height-3xl)];
181+
}
182+
}
183+
184+
.modal--height-4xl {
185+
.modal__card {
186+
@apply h-[var(--modal-height-4xl)];
187+
}
188+
}
189+
190+
.modal--height-full {
191+
.modal__card {
192+
@apply h-[calc(100dvh-2rem)];
193+
}
194+
}
195+
196+
197+
.modal--height-25 {
198+
.modal__card {
199+
@apply h-[25dvh];
200+
}
201+
}
202+
203+
.modal--height-50 {
204+
.modal__card {
205+
@apply h-[50dvh];
206+
}
207+
}
208+
209+
.modal--height-75 {
210+
.modal__card {
211+
@apply h-[75dvh];
212+
}
213+
}
214+
215+
.modal--height-100 {
216+
.modal__card {
217+
@apply h-full;
218+
}
219+
}

0 commit comments

Comments
 (0)