gabriel / musehub public
_issues.scss
458 lines 8.3 KB
Raw
sha256:0997d6250ae6476362f6fe2025af7789f46d03df3e9f34356d5e8ee79b201923 fix(issues): use issue number as pagination cursor, not cre… Sonnet 4.6 patch 8 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 .isl-page {
12 display: flex;
13 flex-direction: column;
14 gap: var(--space-4);
15 }
16
17 .isl-layout {
18 display: grid;
19 grid-template-columns: 1fr 220px;
20 gap: var(--space-4);
21 align-items: start;
22
23 @media (max-width: 900px) { grid-template-columns: 1fr; }
24 }
25
26 .isl-main {
27 min-width: 0;
28 display: flex;
29 flex-direction: column;
30 gap: var(--space-3);
31 }
32
33 .isl-sidebar {
34 display: flex;
35 flex-direction: column;
36 gap: 0;
37 position: sticky;
38 top: calc(var(--header-height) + var(--space-4));
39 max-height: calc(100vh - var(--header-height) - var(--space-4));
40 overflow-y: auto;
41 scrollbar-width: thin;
42 scrollbar-color: var(--border-default) transparent;
43
44 @media (max-width: 900px) { display: none; }
45 }
46
47 .isl-list { display: flex; flex-direction: column; }
48
49 .isl-row-body {
50 flex: 1;
51 min-width: 0;
52 display: flex;
53 flex-direction: column;
54 gap: 5px;
55 }
56
57 .isl-row-title-line {
58 display: flex;
59 align-items: baseline;
60 gap: 8px;
61 }
62
63 .isl-row-meta-line {
64 display: flex;
65 align-items: center;
66 gap: 6px;
67 flex-wrap: wrap;
68 }
69
70 .isl-row-intel-line {
71 display: flex;
72 align-items: center;
73 gap: 5px;
74 flex-wrap: wrap;
75 }
76
77 .isl-row-right {
78 display: flex;
79 flex-direction: column;
80 align-items: flex-end;
81 gap: 4px;
82 flex-shrink: 0;
83 }
84
85 .isl-empty {
86 display: flex;
87 flex-direction: column;
88 align-items: center;
89 justify-content: center;
90 padding: var(--space-12) var(--space-6);
91 text-align: center;
92 gap: var(--space-3);
93 }
94
95 .isl-pagination {
96 display: flex;
97 align-items: center;
98 justify-content: center;
99 gap: var(--space-2);
100 padding: var(--space-4) 0;
101 }
102
103 .isl-tpl-grid {
104 display: grid;
105 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
106 gap: var(--space-3);
107 padding: var(--space-3) var(--space-4);
108 }
109
110 .isl-sb-list {
111 display: flex;
112 flex-direction: column;
113 gap: 0;
114 }
115
116 .isl-sb-labels { display: flex; flex-direction: column; gap: 4px; }
117 .isl-sb-people { display: flex; flex-direction: column; gap: 4px; }
118
119 .isl-sb-intel-list {
120 display: flex;
121 flex-direction: column;
122 gap: 2px;
123 }
124
125 .isl-sb-intel-body {
126 display: flex;
127 flex-direction: column;
128 gap: 2px;
129 flex: 1;
130 min-width: 0;
131 }
132
133 .isl-sb-agent-list {
134 display: flex;
135 flex-direction: column;
136 gap: 4px;
137 }
138
139 .isl-stat-strip {
140 display: flex;
141 align-items: center;
142 justify-content: space-between;
143 gap: var(--space-3);
144 flex-wrap: wrap;
145 }
146
147 .isl-stat-counts {
148 display: flex;
149 align-items: center;
150 gap: 6px;
151 flex-wrap: wrap;
152 }
153
154 .isl-strip-filters {
155 display: flex;
156 align-items: center;
157 gap: var(--space-2);
158 flex-shrink: 0;
159 }
160
161 .isl-tabs {
162 display: flex;
163 align-items: center;
164 }
165
166 .isl-filters {
167 display: flex;
168 align-items: center;
169 gap: var(--space-2);
170 margin-left: auto;
171 flex-wrap: wrap;
172 padding: var(--space-2) 0;
173 }
174
175 // ── Issue detail page (.isd-*) ─────────────────────────────────────────────────
176
177 .isd-page { min-height: 100vh; }
178
179 .isd-hero-inner {
180 position: relative;
181 max-width: 1200px;
182 margin: 0 auto;
183 padding: var(--space-8) var(--space-6) var(--space-5);
184 }
185
186 .isd-eyebrow {
187 display: flex;
188 align-items: center;
189 justify-content: space-between;
190 gap: var(--space-3);
191 flex-wrap: wrap;
192 margin-bottom: var(--space-4);
193 }
194
195 .isd-eyebrow-left {
196 display: flex;
197 align-items: center;
198 gap: var(--space-2);
199 flex-wrap: wrap;
200 }
201
202 .isd-eyebrow-right {
203 display: flex;
204 align-items: center;
205 gap: var(--space-2);
206 flex-shrink: 0;
207 }
208
209 .isd-wrap {
210 max-width: 1200px;
211 margin: 0 auto;
212 padding: var(--space-5) var(--space-6) var(--space-10);
213 }
214
215 .isd-layout {
216 display: grid;
217 grid-template-columns: 1fr 280px;
218 gap: var(--space-6);
219 align-items: start;
220
221 @media (max-width: 900px) { grid-template-columns: 1fr; }
222 }
223
224 .isd-main { min-width: 0; }
225
226 .isd-sidebar {
227 display: flex;
228 flex-direction: column;
229 gap: 0;
230 position: sticky;
231 top: calc(var(--header-height) + var(--space-4));
232 max-height: calc(100vh - var(--header-height) - var(--space-4));
233 overflow-y: auto;
234 scrollbar-width: thin;
235 scrollbar-color: var(--border-default) transparent;
236
237 @media (max-width: 900px) { position: static; max-height: none; overflow-y: visible; }
238 }
239
240 .isd-panel-hd {
241 display: flex;
242 align-items: center;
243 gap: var(--space-2);
244 padding: var(--space-3) var(--space-4);
245 }
246
247 .isd-anchor-addr {
248 display: flex;
249 align-items: center;
250 gap: 0;
251 flex: 1;
252 min-width: 0;
253 }
254
255 .isd-anchor-stats {
256 display: flex;
257 align-items: center;
258 gap: var(--space-2);
259 flex-shrink: 0;
260 }
261
262 .isd-body-hd {
263 display: flex;
264 align-items: center;
265 gap: var(--space-2);
266 padding: var(--space-3) var(--space-4);
267 }
268
269 .isd-event-replies {
270 display: flex;
271 flex-direction: column;
272 gap: 0;
273 }
274
275 .isd-event-empty {
276 display: flex;
277 align-items: center;
278 justify-content: center;
279 padding: var(--space-6) var(--space-4);
280 }
281
282 .isd-release-bd {
283 display: flex;
284 flex-direction: column;
285 gap: 4px;
286 padding: var(--space-2) var(--space-3);
287 }
288
289 .isd-rel-commit-top {
290 display: flex;
291 align-items: center;
292 gap: 6px;
293 }
294
295 .isd-rel-landed-in {
296 display: flex;
297 align-items: center;
298 gap: 5px;
299 flex-wrap: wrap;
300 }
301
302 .isd-ic-section {
303 display: flex;
304 flex-direction: column;
305 gap: 7px;
306 padding: 9px 12px;
307 }
308
309 .isd-ic-section-label {
310 display: flex;
311 align-items: center;
312 justify-content: space-between;
313 }
314
315 .isd-ic-blast-hero {
316 display: flex;
317 flex-direction: column;
318 gap: 6px;
319 }
320
321 .isd-ic-blast-nums {
322 display: flex;
323 align-items: baseline;
324 gap: 5px;
325 }
326
327 .isd-ic-grav-wrap {
328 display: flex;
329 align-items: center;
330 gap: 7px;
331 }
332
333 .isd-ic-grav-track {
334 flex: 1;
335 height: 10px;
336 overflow: hidden;
337 }
338
339 .isd-ic-co-syms {
340 display: flex;
341 align-items: center;
342 flex-wrap: wrap;
343 gap: 4px;
344 }
345
346 .isd-ic-churn-line {
347 display: flex;
348 align-items: baseline;
349 flex-wrap: wrap;
350 gap: 4px;
351 }
352
353 .isd-ic-sparkline {
354 display: flex;
355 align-items: flex-end;
356 gap: 2px;
357 height: 36px;
358 }
359
360 .isd-ic-issue-list {
361 display: flex;
362 flex-wrap: wrap;
363 gap: 4px;
364 }
365
366 // ── New issue page (.isn-*) ────────────────────────────────────────────────────
367
368 .isn-page {
369 max-width: 960px;
370 margin: 0 auto;
371 padding: var(--space-4) var(--space-3);
372 }
373
374 .isn-layout {
375 display: grid;
376 grid-template-columns: 1fr 240px;
377 gap: var(--space-4);
378 align-items: start;
379
380 @media (max-width: 720px) { grid-template-columns: 1fr; }
381 }
382
383 .isn-main { min-width: 0; }
384
385 .isn-card-header {
386 display: flex;
387 align-items: center;
388 justify-content: space-between;
389 padding: var(--space-3) var(--space-4);
390 }
391
392 .isn-card-body {
393 padding: var(--space-4);
394 display: flex;
395 flex-direction: column;
396 gap: var(--space-5);
397 }
398
399 .isn-section {
400 display: flex;
401 flex-direction: column;
402 gap: var(--space-3);
403 }
404
405 .isn-section-header {
406 display: flex;
407 align-items: center;
408 gap: var(--space-2);
409 }
410
411 .isn-cli-block {
412 display: flex;
413 flex-direction: column;
414 gap: var(--space-3);
415 }
416
417 .isn-cli-step {
418 display: flex;
419 gap: var(--space-3);
420 align-items: flex-start;
421 }
422
423 .isn-cli-step-body {
424 display: flex;
425 flex-direction: column;
426 gap: 6px;
427 flex: 1;
428 min-width: 0;
429 }
430
431 .isn-anatomy {
432 display: flex;
433 flex-direction: column;
434 }
435
436 .isn-anatomy-row {
437 display: flex;
438 gap: var(--space-3);
439 padding: var(--space-2) var(--space-3);
440 }
441
442 .isn-sidebar {
443 display: flex;
444 flex-direction: column;
445 gap: var(--space-3);
446 }
447
448 .isn-sb-section {
449 display: flex;
450 flex-direction: column;
451 gap: var(--space-2);
452 }
453
454 .isn-sb-links {
455 display: flex;
456 flex-direction: column;
457 gap: 4px;
458 }
File History 1 commit
sha256:0997d6250ae6476362f6fe2025af7789f46d03df3e9f34356d5e8ee79b201923 fix(issues): use issue number as pagination cursor, not cre… Sonnet 4.6 patch 8 days ago