Skip to content

Commit 6d180f4

Browse files
ImTheKaiImTheKai
committed
Improve the mobile view of hackorum - we now have a burger menue, a single column that automatically adjusts the size and the topic list, that looks and fits
Signed-off-by: Kai Wagner <kai.wagner@percona.com>
1 parent 0a00729 commit 6d180f4

8 files changed

Lines changed: 511 additions & 28 deletions

File tree

‎app/assets/stylesheets/base/root.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,3 +79,71 @@ body.sidebar-collapsed .page-layout.with-sidebar > main.container {
7979
.page-layout.with-sidebar > main.container {
8080
grid-area: main;
8181
}
82+
83+
.layout-sidebar-overlay {
84+
display: none;
85+
}
86+
87+
@media (max-width: 900px) {
88+
.container {
89+
padding: 0;
90+
}
91+
92+
.page-layout.with-sidebar {
93+
grid-template-columns: minmax(0, 1fr);
94+
grid-template-areas: "main";
95+
}
96+
97+
body.sidebar-collapsed .page-layout.with-sidebar {
98+
grid-template-columns: minmax(0, 1fr);
99+
}
100+
101+
.page-layout.with-sidebar .layout-sidebar {
102+
position: fixed;
103+
top: var(--nav-height);
104+
left: 0;
105+
height: calc(100vh - var(--nav-height));
106+
width: min(84vw, 360px);
107+
max-width: 360px;
108+
transform: translateX(-110%);
109+
transition: transform var(--transition-normal);
110+
z-index: 200;
111+
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
112+
}
113+
114+
body.mobile-sidebar-open .page-layout.with-sidebar .layout-sidebar {
115+
transform: translateX(0);
116+
}
117+
118+
body.sidebar-collapsed .page-layout.with-sidebar .layout-sidebar {
119+
visibility: visible;
120+
pointer-events: auto;
121+
}
122+
123+
.page-layout.with-sidebar .layout-sidebar-resizer {
124+
display: none;
125+
}
126+
127+
.layout-sidebar-overlay {
128+
display: block;
129+
position: fixed;
130+
top: var(--nav-height);
131+
left: 0;
132+
right: 0;
133+
bottom: 0;
134+
background: rgba(15, 23, 42, 0.45);
135+
opacity: 0;
136+
pointer-events: none;
137+
transition: opacity var(--transition-normal);
138+
z-index: 150;
139+
}
140+
141+
body.mobile-sidebar-open .layout-sidebar-overlay {
142+
opacity: 1;
143+
pointer-events: auto;
144+
}
145+
146+
body.mobile-sidebar-open {
147+
overflow: hidden;
148+
}
149+
}

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,28 @@
1919
align-items: center;
2020
min-height: var(--nav-height);
2121
gap: var(--spacing-4);
22+
position: relative;
23+
}
24+
25+
.nav-burger {
26+
display: none;
27+
align-items: center;
28+
justify-content: center;
29+
width: 44px;
30+
height: 44px;
31+
border-radius: 999px;
32+
border: var(--border-width) solid var(--color-border);
33+
background: var(--color-bg-card);
34+
cursor: pointer;
35+
box-shadow: var(--shadow-sm);
36+
transition: background-color var(--transition-fast), transform var(--transition-fast);
37+
color: var(--color-text-secondary);
38+
font-size: 1.1rem;
39+
}
40+
41+
.nav-burger:hover {
42+
background: var(--color-bg-hover);
43+
transform: scale(1.03);
2244
}
2345

2446
.nav-brand {
@@ -130,3 +152,91 @@
130152
background: var(--color-bg-hover);
131153
}
132154
}
155+
156+
.mobile-nav-dropdown {
157+
display: none;
158+
position: relative;
159+
margin-left: auto;
160+
flex: 1 1 auto;
161+
justify-content: flex-end;
162+
}
163+
164+
.mobile-nav-toggle {
165+
list-style: none;
166+
display: inline-flex;
167+
align-items: center;
168+
gap: var(--spacing-2);
169+
cursor: pointer;
170+
background: var(--color-bg-card);
171+
border: var(--border-width) solid var(--color-border);
172+
border-radius: 999px;
173+
padding: var(--spacing-2) var(--spacing-4);
174+
color: var(--color-text-secondary);
175+
font-weight: var(--font-weight-medium);
176+
box-shadow: var(--shadow-sm);
177+
transition: background-color var(--transition-fast), transform var(--transition-fast);
178+
}
179+
180+
.mobile-nav-toggle::marker,
181+
.mobile-nav-toggle::-webkit-details-marker {
182+
display: none;
183+
}
184+
185+
.mobile-nav-toggle:hover {
186+
background: var(--color-bg-hover);
187+
transform: translateY(-1px);
188+
}
189+
190+
.mobile-nav-menu {
191+
display: none;
192+
position: absolute;
193+
right: 0;
194+
top: calc(100% + var(--spacing-3));
195+
background: var(--color-bg-card);
196+
border: var(--border-width) solid var(--color-border);
197+
border-radius: var(--border-radius-lg);
198+
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
199+
padding: var(--spacing-4);
200+
gap: var(--spacing-3);
201+
flex-direction: column;
202+
z-index: 200;
203+
width: min(92vw, 360px);
204+
min-width: 240px;
205+
}
206+
207+
.mobile-nav-dropdown[open] .mobile-nav-menu {
208+
display: flex;
209+
}
210+
211+
@media (max-width: 900px) {
212+
.nav-container {
213+
padding: 0 var(--spacing-4);
214+
}
215+
216+
.tagline {
217+
display: none;
218+
}
219+
220+
.nav-links,
221+
.nav-right {
222+
display: none;
223+
}
224+
225+
body.has-sidebar .nav-burger {
226+
display: inline-flex;
227+
}
228+
229+
.mobile-nav-dropdown {
230+
display: inline-flex;
231+
}
232+
233+
.mobile-nav-menu .nav-link {
234+
width: 100%;
235+
justify-content: space-between;
236+
}
237+
238+
.mobile-nav-menu .nav-user {
239+
display: block;
240+
padding: 0 var(--spacing-2);
241+
}
242+
}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,31 @@
247247
padding: var(--spacing-2) var(--spacing-3);
248248
}
249249

250+
@media (max-width: 900px) {
251+
.settings-page .email-table {
252+
table-layout: fixed;
253+
}
254+
255+
.settings-page .email-table th,
256+
.settings-page .email-table td {
257+
padding: var(--spacing-2);
258+
font-size: var(--font-size-xs);
259+
word-break: break-word;
260+
white-space: normal;
261+
}
262+
263+
.settings-page .email-table td:last-child {
264+
flex-wrap: wrap;
265+
gap: var(--spacing-2);
266+
}
267+
268+
.settings-page .email-table .button-secondary,
269+
.settings-page .email-table .button-danger {
270+
width: 100%;
271+
justify-content: center;
272+
}
273+
}
274+
250275
.settings-page .team-list,
251276
.settings-page .member-list {
252277
list-style: none;

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,16 @@
4545
}
4646
}
4747

48+
@media (max-width: 900px) {
49+
.sidebar {
50+
position: static;
51+
top: auto;
52+
max-height: none;
53+
height: 100%;
54+
padding-right: 0;
55+
}
56+
}
57+
4858
.sidebar-section {
4959
margin-bottom: var(--spacing-8);
5060
}

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

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,59 @@ a.topic-icon {
202202
}
203203
}
204204

205+
@media (max-width: 900px) {
206+
.topics-table {
207+
& th,
208+
& td {
209+
padding: var(--spacing-2);
210+
}
211+
212+
& th.participants-header,
213+
& td.topic-participants {
214+
display: none;
215+
}
216+
217+
& th.activity-header,
218+
& td.topic-activity {
219+
display: none;
220+
}
221+
}
222+
223+
.topic-title-stack {
224+
display: flex;
225+
flex-direction: column;
226+
gap: var(--spacing-1);
227+
}
228+
229+
.topic-icons {
230+
display: flex;
231+
flex-wrap: wrap;
232+
gap: var(--spacing-2);
233+
}
234+
235+
.topic-icon {
236+
padding: 2px;
237+
margin-right: 0;
238+
}
239+
240+
.topic-icon-badge {
241+
min-width: 16px;
242+
height: 16px;
243+
font-size: 10px;
244+
}
245+
246+
.topic-link {
247+
font-size: var(--font-size-base);
248+
line-height: var(--line-height-normal);
249+
}
250+
251+
.topic-byline {
252+
font-size: var(--font-size-2xs);
253+
}
254+
255+
}
256+
257+
205258
.activity-star {
206259
background-color: var(--color-bg-activity-team);
207260
.topic-icon-badge {
@@ -321,6 +374,96 @@ a.topic-icon {
321374
}
322375
}
323376

377+
378+
.topic-title-stack {
379+
display: flex;
380+
flex-direction: column;
381+
gap: var(--spacing-2);
382+
}
383+
384+
.topic-row-footer {
385+
display: flex;
386+
align-items: center;
387+
gap: var(--spacing-3);
388+
width: 100%;
389+
}
390+
391+
.topic-footer-icons {
392+
display: inline-flex;
393+
align-items: center;
394+
gap: var(--spacing-2);
395+
}
396+
397+
.topic-footer-replies {
398+
text-align: center;
399+
color: var(--color-text-muted);
400+
font-size: var(--font-size-sm);
401+
display: none;
402+
}
403+
404+
.topic-footer-time {
405+
text-align: right;
406+
color: var(--color-text-muted);
407+
font-size: var(--font-size-sm);
408+
white-space: nowrap;
409+
display: none;
410+
}
411+
412+
413+
.topic-icons {
414+
display: inline-flex;
415+
flex-wrap: wrap;
416+
gap: var(--spacing-2);
417+
align-items: center;
418+
}
419+
420+
.topic-byline {
421+
display: flex;
422+
flex-wrap: wrap;
423+
gap: var(--spacing-2);
424+
justify-content: space-between;
425+
color: var(--color-text-muted);
426+
font-size: var(--font-size-sm);
427+
}
428+
429+
.topic-byline-item {
430+
display: inline-flex;
431+
align-items: center;
432+
gap: var(--spacing-2);
433+
}
434+
435+
.topic-byline-right {
436+
margin-left: auto;
437+
}
438+
439+
.topic-byline-avatar {
440+
width: 20px;
441+
height: 20px;
442+
border-radius: 999px;
443+
flex-shrink: 0;
444+
}
445+
446+
@media (max-width: 900px) {
447+
.topic-row-footer {
448+
display: grid;
449+
grid-template-columns: var(--topic-footer-icons-width, 96px) minmax(0, 1fr) auto;
450+
align-items: center;
451+
gap: var(--spacing-3);
452+
}
453+
454+
.topic-footer-icons {
455+
width: var(--topic-footer-icons-width, 96px);
456+
justify-content: flex-start;
457+
}
458+
459+
.topic-footer-replies,
460+
.topic-footer-time {
461+
display: block;
462+
font-size: var(--font-size-2xs);
463+
}
464+
465+
}
466+
324467
.topic-link {
325468
color: var(--color-text-link);
326469
text-decoration: none;

0 commit comments

Comments
 (0)