Skip to content

Commit 341c963

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 341c963

6 files changed

Lines changed: 452 additions & 7 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 var(--spacing-4);
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/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: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,155 @@ a.topic-icon {
202202
}
203203
}
204204

205+
@media (max-width: 900px) {
206+
.topics-table {
207+
& table {
208+
display: block;
209+
}
210+
211+
& thead {
212+
display: none;
213+
}
214+
215+
& tbody {
216+
display: block;
217+
}
218+
219+
& tr {
220+
position: relative;
221+
display: grid;
222+
gap: var(--spacing-2);
223+
padding: var(--spacing-3);
224+
border: var(--border-width) solid var(--color-border);
225+
border-left-width: 0;
226+
border-radius: var(--border-radius-lg);
227+
background: var(--color-bg-card);
228+
margin-bottom: var(--spacing-3);
229+
}
230+
231+
& td {
232+
display: flex;
233+
flex-direction: column;
234+
gap: var(--spacing-1);
235+
padding: 0;
236+
border-bottom: none;
237+
}
238+
239+
& td::before {
240+
content: attr(data-label);
241+
font-size: var(--font-size-xs);
242+
text-transform: uppercase;
243+
letter-spacing: 0.04em;
244+
color: var(--color-text-muted);
245+
}
246+
247+
& td.topic-title::before {
248+
display: none;
249+
}
250+
251+
& td.topic-activity::before {
252+
display: none;
253+
}
254+
255+
& td.topic-participants {
256+
display: none;
257+
}
258+
259+
& .topic-participants {
260+
text-align: left;
261+
}
262+
263+
& .topic-replies,
264+
& .topic-activity,
265+
& .topic-participants {
266+
width: auto;
267+
}
268+
}
269+
270+
.topics-table tr::before {
271+
content: "";
272+
position: absolute;
273+
left: 0;
274+
top: 0;
275+
bottom: 0;
276+
width: 6px;
277+
border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
278+
background: var(--status-color, var(--color-border));
279+
}
280+
281+
.topics-table tr:has(.status-border.status-new) {
282+
--status-color: var(--color-border-new);
283+
}
284+
285+
.topics-table tr:has(.status-border.status-aware) {
286+
--status-color: var(--color-border-aware);
287+
}
288+
289+
.topics-table tr:has(.status-border.status-reading) {
290+
--status-color: var(--color-border-reading);
291+
}
292+
293+
.topics-table tr:has(.status-border.status-read) {
294+
--status-color: var(--color-border-read);
295+
}
296+
297+
.topics-table td.status-border {
298+
border-left: 0;
299+
padding-left: var(--spacing-4);
300+
}
301+
302+
.topic-row {
303+
align-items: center;
304+
}
305+
306+
.topics-table td.topic-title {
307+
display: flex;
308+
flex-direction: row;
309+
align-items: center;
310+
gap: var(--spacing-2);
311+
}
312+
313+
.topic-icon {
314+
padding: 2px;
315+
margin-right: 0;
316+
}
317+
318+
.topic-icon-badge {
319+
min-width: 16px;
320+
height: 16px;
321+
font-size: 10px;
322+
}
323+
324+
.topic-link {
325+
font-size: var(--font-size-base);
326+
line-height: var(--line-height-normal);
327+
flex: 1 1 auto;
328+
min-width: 0;
329+
}
330+
331+
.topics-table td.topic-activity {
332+
align-items: flex-end;
333+
}
334+
335+
.activity-info {
336+
flex-direction: row;
337+
justify-content: space-between;
338+
text-align: left;
339+
gap: var(--spacing-2);
340+
width: 100%;
341+
}
342+
343+
.activity-replies,
344+
.activity-time {
345+
font-size: var(--font-size-2xs);
346+
}
347+
348+
.activity-time {
349+
text-align: right;
350+
}
351+
}
352+
353+
205354
.activity-star {
206355
background-color: var(--color-bg-activity-team);
207356
.topic-icon-badge {

0 commit comments

Comments
 (0)