Skip to content

Commit a1ee788

Browse files
voltsparxvoltsparx
committed
Fixing development pane
1 parent 68540a6 commit a1ee788

4 files changed

Lines changed: 370 additions & 16 deletions

File tree

‎docs/website/css/components/development.css‎

Lines changed: 179 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,13 @@
66
margin-bottom: 28px;
77
}
88

9+
.dev-stack {
10+
display: grid;
11+
grid-template-columns: minmax(0, 1fr);
12+
gap: 16px;
13+
margin-bottom: 28px;
14+
}
15+
916
.dev-card {
1017
background: var(--bg2);
1118
border: 1px solid var(--border2);
@@ -36,6 +43,7 @@
3643
line-height: 1.6;
3744
font-weight: 500;
3845
overflow-wrap: anywhere;
46+
margin-bottom: 12px;
3947
}
4048

4149
.dev-stat-grid {
@@ -72,11 +80,13 @@
7280
.dev-meta-list {
7381
display: grid;
7482
gap: 8px;
83+
min-width: 0;
7584
}
7685

7786
.dev-meta-list div {
78-
display: flex;
79-
justify-content: space-between;
87+
display: grid;
88+
grid-template-columns: minmax(100px, 148px) minmax(0, 1fr);
89+
align-items: start;
8090
gap: 12px;
8191
border-bottom: 1px solid var(--border2);
8292
padding-bottom: 8px;
@@ -91,11 +101,14 @@
91101

92102
.dev-meta-list strong,
93103
.dev-meta-list a {
104+
display: block;
94105
color: var(--txt);
95106
font-size: 13px;
96107
text-align: right;
97108
overflow-wrap: anywhere;
98109
word-break: break-word;
110+
min-width: 0;
111+
max-width: 100%;
99112
}
100113

101114
.dev-profile-head {
@@ -120,6 +133,33 @@
120133
gap: 10px;
121134
}
122135

136+
.dev-card-actions {
137+
display: flex;
138+
justify-content: flex-end;
139+
margin-top: 14px;
140+
}
141+
142+
.dev-action-button {
143+
appearance: none;
144+
border: 1px solid var(--border);
145+
border-radius: 10px;
146+
background: rgba(255, 26, 26, 0.08);
147+
color: var(--txt);
148+
font-family: var(--mono);
149+
font-size: 0.68rem;
150+
letter-spacing: 0.08em;
151+
text-transform: uppercase;
152+
padding: 9px 12px;
153+
cursor: pointer;
154+
transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
155+
}
156+
157+
.dev-action-button:hover {
158+
border-color: var(--r0);
159+
color: var(--r0);
160+
background: rgba(255, 26, 26, 0.12);
161+
}
162+
123163
.dev-list-item {
124164
display: block;
125165
border: 1px solid var(--border2);
@@ -210,6 +250,7 @@
210250
width: 100%;
211251
height: auto;
212252
display: block;
253+
overflow: visible;
213254
}
214255

215256
.dev-chart-grid {
@@ -221,7 +262,7 @@
221262
.dev-chart-axis {
222263
fill: var(--txt3);
223264
font-family: var(--mono);
224-
font-size: 11px;
265+
font-size: 13px;
225266
letter-spacing: 0.04em;
226267
}
227268

@@ -275,14 +316,14 @@
275316

276317
.dev-chart-label strong {
277318
color: var(--txt);
278-
font-size: 12px;
319+
font-size: 13px;
279320
margin-bottom: 4px;
280321
}
281322

282323
.dev-chart-label span {
283324
color: var(--txt3);
284325
font-family: var(--mono);
285-
font-size: 0.62rem;
326+
font-size: 0.7rem;
286327
}
287328

288329
.dev-pill-row {
@@ -313,6 +354,120 @@
313354
text-decoration: none;
314355
}
315356

357+
/* COMMIT HISTORY WINDOW */
358+
body.dev-history-open {
359+
overflow: hidden;
360+
}
361+
362+
.dev-history-backdrop {
363+
position: fixed;
364+
inset: 0;
365+
z-index: 2050;
366+
display: grid;
367+
place-items: center;
368+
padding: 20px;
369+
background: rgba(4, 4, 8, 0.78);
370+
backdrop-filter: blur(5px);
371+
}
372+
373+
.dev-history-backdrop[hidden] {
374+
display: none !important;
375+
}
376+
377+
.dev-history-window {
378+
width: min(980px, 94vw);
379+
max-height: min(82vh, 860px);
380+
display: grid;
381+
grid-template-rows: auto minmax(0, 1fr);
382+
gap: 14px;
383+
border: 1px solid var(--border);
384+
border-radius: 18px;
385+
background: rgba(9, 10, 16, 0.98);
386+
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
387+
padding: 18px;
388+
}
389+
390+
.dev-history-head {
391+
display: flex;
392+
justify-content: space-between;
393+
gap: 14px;
394+
align-items: start;
395+
}
396+
397+
.dev-history-title {
398+
font-family: var(--display);
399+
font-size: 0.82rem;
400+
letter-spacing: 0.12em;
401+
text-transform: uppercase;
402+
color: var(--r0);
403+
margin-bottom: 6px;
404+
}
405+
406+
.dev-history-meta {
407+
color: var(--txt3);
408+
font-family: var(--mono);
409+
font-size: 0.68rem;
410+
line-height: 1.6;
411+
}
412+
413+
.dev-history-close {
414+
appearance: none;
415+
border: 1px solid var(--border2);
416+
border-radius: 10px;
417+
background: rgba(255, 26, 26, 0.05);
418+
color: var(--txt2);
419+
font-family: var(--mono);
420+
font-size: 0.66rem;
421+
letter-spacing: 0.06em;
422+
text-transform: uppercase;
423+
padding: 8px 10px;
424+
cursor: pointer;
425+
}
426+
427+
.dev-history-close:hover {
428+
border-color: var(--r0);
429+
color: var(--r0);
430+
}
431+
432+
.dev-history-body {
433+
min-height: 0;
434+
overflow: auto;
435+
display: grid;
436+
gap: 10px;
437+
padding-right: 4px;
438+
}
439+
440+
.dev-history-item {
441+
display: block;
442+
border: 1px solid var(--border2);
443+
border-radius: 12px;
444+
background: rgba(255, 26, 26, 0.04);
445+
padding: 13px 15px;
446+
}
447+
448+
.dev-history-item:hover {
449+
border-color: var(--r0);
450+
background: rgba(255, 26, 26, 0.08);
451+
text-decoration: none;
452+
}
453+
454+
.dev-history-item-title {
455+
color: var(--txt);
456+
font-weight: 600;
457+
margin-bottom: 6px;
458+
overflow-wrap: anywhere;
459+
word-break: break-word;
460+
}
461+
462+
.dev-history-item-meta {
463+
color: var(--txt3);
464+
font-family: var(--mono);
465+
font-size: 0.68rem;
466+
line-height: 1.65;
467+
overflow-wrap: anywhere;
468+
word-break: break-word;
469+
}
470+
316471
/* RAW FILE POPUP */
317472
body.raw-viewer-open {
318473
overflow: hidden;
@@ -418,7 +573,7 @@ body.raw-viewer-open {
418573
}
419574

420575
.dev-meta-list div {
421-
flex-direction: column;
576+
grid-template-columns: 1fr;
422577
}
423578

424579
.dev-meta-list strong,
@@ -432,9 +587,27 @@ body.raw-viewer-open {
432587
padding: 14px;
433588
}
434589

590+
.dev-history-window {
591+
width: min(94vw, 94vw);
592+
max-height: 86vh;
593+
padding: 14px;
594+
}
595+
435596
.dev-chart {
436597
padding: 12px 10px 10px;
437598
}
599+
600+
.dev-chart-axis {
601+
font-size: 15px;
602+
}
603+
604+
.dev-chart-label strong {
605+
font-size: 14px;
606+
}
607+
608+
.dev-chart-label span {
609+
font-size: 0.78rem;
610+
}
438611
}
439612

440613
@media (max-width: 520px) {

‎docs/website/development.html‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
Waiting for repository data...
8181
</div>
8282

83-
<div class="dev-grid">
83+
<div class="dev-stack">
8484
<div class="dev-card">
8585
<div class="dev-card-title">Repository Snapshot</div>
8686
<div class="dev-card-copy">Stars, forks, open issues, branch defaults, and the latest push signal.</div>
@@ -108,13 +108,16 @@
108108
<div class="page-desc">Recent commits and contributor movement help visitors understand whether the project is quiet, active, or actively changing right now.</div>
109109
</div>
110110

111-
<div class="dev-grid">
111+
<div class="dev-stack">
112112
<div class="dev-card">
113113
<div class="dev-card-title">Recent Commits</div>
114114
<div class="dev-card-copy">Latest commit messages with direct links into GitHub.</div>
115115
<div id="dev-commits-list" class="dev-list">
116116
<div class="callout callout-info"><div class="callout-title">Commits</div>Waiting for commit history...</div>
117117
</div>
118+
<div class="dev-card-actions">
119+
<button id="dev-commits-more" class="dev-action-button" type="button">View More</button>
120+
</div>
118121
</div>
119122
<div class="dev-card">
120123
<div class="dev-card-title">Contributors</div>
@@ -150,6 +153,21 @@
150153
</section>
151154
</main>
152155

156+
<div id="dev-history-backdrop" class="dev-history-backdrop" hidden>
157+
<div class="dev-history-window" role="dialog" aria-modal="true" aria-label="Repository commit history">
158+
<div class="dev-history-head">
159+
<div>
160+
<div class="dev-history-title">Commit History</div>
161+
<div id="dev-history-meta" class="dev-history-meta">Repository-wide commit history fetched from GitHub.</div>
162+
</div>
163+
<button id="dev-history-close" class="dev-history-close" type="button" aria-label="Close commit history">Close</button>
164+
</div>
165+
<div id="dev-history-body" class="dev-history-body">
166+
<div class="callout callout-info"><div class="callout-title">History</div>Select “View More” to load the full commit history.</div>
167+
</div>
168+
</div>
169+
</div>
170+
153171
<footer id="site-footer">
154172
<div><div class="footer-col-title">Development</div><span class="footer-copy">Live GitHub activity and raw project files</span></div>
155173
<div><div class="footer-col-title">Project</div><a class="footer-link" href="project.html#author">Author &amp; License</a><a class="footer-link" href="index.html">Overview</a></div>

‎docs/website/js/bootstrap/app.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,11 @@ const App = (() => {
173173
}
174174

175175
if (event.key === "Escape") {
176+
if (typeof DevelopmentFeed !== "undefined" && DevelopmentFeed.isHistoryOpen()) {
177+
DevelopmentFeed.closeHistoryWindow();
178+
return;
179+
}
180+
176181
if (typeof RawPopup !== "undefined" && RawPopup.isOpen()) {
177182
RawPopup.close();
178183
return;

0 commit comments

Comments
 (0)