gabriel / musehub public
_issues.scss
532 lines 10.0 KB
Raw
sha256:1dd27e6d5c24550177b01b0a171e8375c07cf046b549e7683364706b6522d3bc docs(#139): mark all 11 checklist items resolved, document … Sonnet 5 12 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Page: Issues (/*/issues + /*/issues/* + /*/issues/new)
3 // File: src/scss/pages/_issues.scss
4 //
5 // STRUCTURAL LAYOUT ONLY — zero colors, zero typography here.
6 // Visual rules live in components/_issues.scss.
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 // ── Issue list page (.isl-*) ──────────────────────────────────────────────────
10
11 // App-shell page (issue #139) — .isl-page fills whatever the body shell
12 // leaves it via flex, no calc()/height budget needed.
13 .isl-page {
14 flex: 1;
15 min-height: 0;
16 overflow: hidden;
17 display: flex;
18 flex-direction: column;
19 gap: var(--space-4);
20
21 @media (max-width: 900px) { overflow: visible; }
22 }
23
24 .isl-stat-strip {
25 flex-shrink: 0;
26 }
27
28 // Independently-scrolling columns — each is `flex: 1` within the
29 // app-shell's remaining space, not a calc()'d height. See
30 // docs/issues/two-column-app-shell-refactor.md.
31 .isl-layout {
32 display: grid;
33 grid-template-columns: 1fr 220px;
34 gap: var(--space-4);
35 align-items: stretch;
36 min-height: 0;
37 flex: 1;
38
39 @media (max-width: 900px) {
40 grid-template-columns: 1fr;
41 }
42 }
43
44 .isl-main {
45 min-width: 0;
46 min-height: 0;
47 display: flex;
48 flex-direction: column;
49 gap: var(--space-3);
50 overflow-y: auto;
51 scrollbar-width: thin;
52 scrollbar-color: var(--border-default) transparent;
53
54 // The card wrapper (clips rounded corners around the row list, see
55 // issue_list.html) is a flex item here — without flex-shrink:0 it
56 // shrinks to fit isl-main's bounded height by default instead of
57 // overflowing, so isl-main's own overflow-y:auto never triggers and
58 // the card's `overflow:hidden` silently eats everything past the fold.
59 > .card {
60 flex-shrink: 0;
61 }
62
63 @media (max-width: 900px) { overflow-y: visible; }
64 }
65
66 .isl-sidebar {
67 display: flex;
68 flex-direction: column;
69 gap: 0;
70 min-height: 0;
71 overflow-y: auto;
72 scrollbar-width: thin;
73 scrollbar-color: var(--border-default) transparent;
74
75 @media (max-width: 900px) {
76 overflow-y: visible;
77 display: none;
78 }
79 }
80
81 .isl-list { display: flex; flex-direction: column; }
82
83 .isl-row-body {
84 flex: 1;
85 min-width: 0;
86 display: flex;
87 flex-direction: column;
88 gap: 5px;
89 }
90
91 .isl-row-title-line {
92 display: flex;
93 align-items: baseline;
94 gap: 8px;
95 }
96
97 .isl-row-meta-line {
98 display: flex;
99 align-items: center;
100 gap: 6px;
101 flex-wrap: wrap;
102 }
103
104 .isl-row-intel-line {
105 display: flex;
106 align-items: center;
107 gap: 5px;
108 flex-wrap: wrap;
109 }
110
111 .isl-row-right {
112 display: flex;
113 flex-direction: column;
114 align-items: flex-end;
115 gap: 4px;
116 flex-shrink: 0;
117 }
118
119 .isl-empty {
120 display: flex;
121 flex-direction: column;
122 align-items: center;
123 justify-content: center;
124 padding: var(--space-12) var(--space-6);
125 text-align: center;
126 gap: var(--space-3);
127 }
128
129 .isl-pagination {
130 display: flex;
131 align-items: center;
132 justify-content: center;
133 gap: var(--space-2);
134 padding: var(--space-4) 0;
135 }
136
137 .isl-tpl-grid {
138 display: grid;
139 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
140 gap: var(--space-3);
141 padding: var(--space-3) var(--space-4);
142 }
143
144 .isl-sb-list {
145 display: flex;
146 flex-direction: column;
147 gap: 0;
148 }
149
150 .isl-sb-labels { display: flex; flex-direction: column; gap: 4px; }
151 .isl-sb-people { display: flex; flex-direction: column; gap: 4px; }
152
153 .isl-sb-intel-list {
154 display: flex;
155 flex-direction: column;
156 gap: 2px;
157 }
158
159 .isl-sb-intel-body {
160 display: flex;
161 flex-direction: column;
162 gap: 2px;
163 flex: 1;
164 min-width: 0;
165 }
166
167 .isl-sb-agent-list {
168 display: flex;
169 flex-direction: column;
170 gap: 4px;
171 }
172
173 .isl-stat-strip {
174 display: flex;
175 align-items: center;
176 justify-content: space-between;
177 gap: var(--space-3);
178 flex-wrap: wrap;
179 }
180
181 .isl-stat-counts {
182 display: flex;
183 align-items: center;
184 gap: 6px;
185 flex-wrap: wrap;
186 }
187
188 .isl-strip-filters {
189 display: flex;
190 align-items: center;
191 gap: var(--space-2);
192 flex-shrink: 0;
193 }
194
195 .isl-tabs {
196 display: flex;
197 align-items: center;
198 }
199
200 .isl-filters {
201 display: flex;
202 align-items: center;
203 gap: var(--space-2);
204 margin-left: auto;
205 flex-wrap: wrap;
206 padding: var(--space-2) 0;
207 }
208
209 // ── Issue detail page (.isd-*) ─────────────────────────────────────────────────
210
211 // App-shell page (issue #139) — fills whatever the body shell leaves it.
212 .isd-page {
213 flex: 1;
214 min-height: 0;
215 overflow: hidden;
216 display: flex;
217 flex-direction: column;
218
219 @media (max-width: 900px) { overflow: visible; }
220 }
221
222 .isd-hero {
223 flex-shrink: 0;
224 }
225
226 .isd-hero-inner {
227 position: relative;
228 max-width: 1200px;
229 margin: 0 auto;
230 padding: var(--space-8) var(--space-6) var(--space-5);
231 }
232
233 .isd-eyebrow {
234 display: flex;
235 align-items: center;
236 justify-content: space-between;
237 gap: var(--space-3);
238 flex-wrap: wrap;
239 margin-bottom: var(--space-4);
240 }
241
242 .isd-eyebrow-left {
243 display: flex;
244 align-items: center;
245 gap: var(--space-2);
246 flex-wrap: wrap;
247 }
248
249 .isd-eyebrow-right {
250 display: flex;
251 align-items: center;
252 gap: var(--space-2);
253 flex-shrink: 0;
254 }
255
256 .isd-wrap {
257 flex: 1;
258 min-height: 0;
259 display: flex;
260 flex-direction: column;
261 max-width: 1200px;
262 margin: 0 auto;
263 padding: var(--space-5) var(--space-6) var(--space-10);
264 width: 100%;
265
266 @media (max-width: 900px) { overflow: visible; }
267 }
268
269 // Independently-scrolling columns — each is `flex: 1` within the
270 // app-shell's remaining space, not a calc()'d height. See
271 // docs/issues/two-column-app-shell-refactor.md.
272 .isd-layout {
273 display: grid;
274 grid-template-columns: 1fr 280px;
275 gap: var(--space-6);
276 align-items: stretch;
277 min-height: 0;
278 flex: 1;
279
280 @media (max-width: 900px) {
281 grid-template-columns: 1fr;
282 }
283 }
284
285 .isd-main {
286 min-width: 0;
287 min-height: 0;
288 overflow-y: auto;
289 scrollbar-width: thin;
290 scrollbar-color: var(--border-default) transparent;
291
292 @media (max-width: 900px) { overflow-y: visible; }
293 }
294
295 .isd-sidebar {
296 display: flex;
297 flex-direction: column;
298 gap: 0;
299 min-height: 0;
300 overflow-y: auto;
301 scrollbar-width: thin;
302 scrollbar-color: var(--border-default) transparent;
303
304 // See isl-main's .card comment — direct children of a flex column
305 // shrink-to-fit by default instead of overflowing; the sidebar's
306 // stacked metadata cards must not compress.
307 > * {
308 flex-shrink: 0;
309 }
310
311 @media (max-width: 900px) { overflow-y: visible; }
312 }
313
314 .isd-panel-hd {
315 display: flex;
316 align-items: center;
317 gap: var(--space-2);
318 padding: var(--space-3) var(--space-4);
319 }
320
321 .isd-anchor-addr {
322 display: flex;
323 align-items: center;
324 gap: 0;
325 flex: 1;
326 min-width: 0;
327 }
328
329 .isd-anchor-stats {
330 display: flex;
331 align-items: center;
332 gap: var(--space-2);
333 flex-shrink: 0;
334 }
335
336 .isd-body-hd {
337 display: flex;
338 align-items: center;
339 gap: var(--space-2);
340 padding: var(--space-3) var(--space-4);
341 }
342
343 .isd-event-replies {
344 display: flex;
345 flex-direction: column;
346 gap: 0;
347 }
348
349 .isd-event-empty {
350 display: flex;
351 align-items: center;
352 justify-content: center;
353 padding: var(--space-6) var(--space-4);
354 }
355
356 .isd-release-bd {
357 display: flex;
358 flex-direction: column;
359 gap: 4px;
360 padding: var(--space-2) var(--space-3);
361 }
362
363 .isd-rel-commit-top {
364 display: flex;
365 align-items: center;
366 gap: 6px;
367 }
368
369 .isd-rel-landed-in {
370 display: flex;
371 align-items: center;
372 gap: 5px;
373 flex-wrap: wrap;
374 }
375
376 .isd-ic-section {
377 display: flex;
378 flex-direction: column;
379 gap: 7px;
380 padding: 9px 12px;
381 }
382
383 .isd-ic-section-label {
384 display: flex;
385 align-items: center;
386 justify-content: space-between;
387 }
388
389 .isd-ic-blast-hero {
390 display: flex;
391 flex-direction: column;
392 gap: 6px;
393 }
394
395 .isd-ic-blast-nums {
396 display: flex;
397 align-items: baseline;
398 gap: 5px;
399 }
400
401 .isd-ic-grav-wrap {
402 display: flex;
403 align-items: center;
404 gap: 7px;
405 }
406
407 .isd-ic-grav-track {
408 flex: 1;
409 height: 10px;
410 overflow: hidden;
411 }
412
413 .isd-ic-co-syms {
414 display: flex;
415 align-items: center;
416 flex-wrap: wrap;
417 gap: 4px;
418 }
419
420 .isd-ic-churn-line {
421 display: flex;
422 align-items: baseline;
423 flex-wrap: wrap;
424 gap: 4px;
425 }
426
427 .isd-ic-sparkline {
428 display: flex;
429 align-items: flex-end;
430 gap: 2px;
431 height: 36px;
432 }
433
434 .isd-ic-issue-list {
435 display: flex;
436 flex-wrap: wrap;
437 gap: 4px;
438 }
439
440 // ── New issue page (.isn-*) ────────────────────────────────────────────────────
441
442 .isn-page {
443 max-width: 960px;
444 margin: 0 auto;
445 padding: var(--space-4) var(--space-3);
446 }
447
448 .isn-layout {
449 display: grid;
450 grid-template-columns: 1fr 240px;
451 gap: var(--space-4);
452 align-items: start;
453
454 @media (max-width: 720px) { grid-template-columns: 1fr; }
455 }
456
457 .isn-main { min-width: 0; }
458
459 .isn-card-header {
460 display: flex;
461 align-items: center;
462 justify-content: space-between;
463 padding: var(--space-3) var(--space-4);
464 }
465
466 .isn-card-body {
467 padding: var(--space-4);
468 display: flex;
469 flex-direction: column;
470 gap: var(--space-5);
471 }
472
473 .isn-section {
474 display: flex;
475 flex-direction: column;
476 gap: var(--space-3);
477 }
478
479 .isn-section-header {
480 display: flex;
481 align-items: center;
482 gap: var(--space-2);
483 }
484
485 .isn-cli-block {
486 display: flex;
487 flex-direction: column;
488 gap: var(--space-3);
489 }
490
491 .isn-cli-step {
492 display: flex;
493 gap: var(--space-3);
494 align-items: flex-start;
495 }
496
497 .isn-cli-step-body {
498 display: flex;
499 flex-direction: column;
500 gap: 6px;
501 flex: 1;
502 min-width: 0;
503 }
504
505 .isn-anatomy {
506 display: flex;
507 flex-direction: column;
508 }
509
510 .isn-anatomy-row {
511 display: flex;
512 gap: var(--space-3);
513 padding: var(--space-2) var(--space-3);
514 }
515
516 .isn-sidebar {
517 display: flex;
518 flex-direction: column;
519 gap: var(--space-3);
520 }
521
522 .isn-sb-section {
523 display: flex;
524 flex-direction: column;
525 gap: var(--space-2);
526 }
527
528 .isn-sb-links {
529 display: flex;
530 flex-direction: column;
531 gap: 4px;
532 }
File History 2 commits
sha256:1dd27e6d5c24550177b01b0a171e8375c07cf046b549e7683364706b6522d3bc docs(#139): mark all 11 checklist items resolved, document … Sonnet 5 12 days ago
sha256:649011bedd713e22f7dca4c4be94bdefbf3b10950d9fc80235928d0b0b823be8 docs: track issue #139 (two-column app-shell refactor) plan… Sonnet 5 12 days ago