my personal site
Refactor admin HTML layout and enhance styling
- Updated the topbar to include a home link and improved layout structure for better usability.
- Adjusted CSS styles for various elements, including increased padding and gap adjustments for a more polished appearance.
- Removed redundant footer elements and optimized calendar and cell dimensions for improved responsiveness.
+24
-21
+24
-21
workers/gymtracker-ads-api/src/admin-html.ts
+24
-21
workers/gymtracker-ads-api/src/admin-html.ts
···
12
12
<body>
13
13
<div class="dashboard-wrap">
14
14
<div class="topbar">
15
-
<span class="topbar-title">Gym Tracker</span>
16
-
<span class="topbar-sep">/</span>
17
-
<span class="topbar-sub">ads admin</span>
15
+
<a href="https://jackhannon.net/" class="topbar-home" title="Back to jackhannon.net">← jackhannon.net</a>
16
+
<div class="topbar-center">
17
+
<span class="topbar-title">Gym Tracker</span>
18
+
<span class="topbar-sep">/</span>
19
+
<span class="topbar-sub">ads admin</span>
20
+
</div>
18
21
<div class="topbar-right">
19
22
<button type="button" id="refreshBtn" class="topbar-refresh" title="Refresh">↻</button>
20
23
<div class="status">
···
67
70
</div>
68
71
</div>
69
72
</div>
70
-
<p class="footer"><a href="https://jackhannon.net/">Back to jackhannon.net</a></p>
71
73
</div>
72
74
</div>
73
75
···
1214
1216
grid-column: 1 / -1;
1215
1217
display: flex;
1216
1218
align-items: center;
1217
-
gap: 8px;
1219
+
gap: 12px;
1218
1220
padding: 0 12px;
1219
1221
min-height: 40px;
1220
1222
height: 40px;
···
1222
1224
background: var(--surface);
1223
1225
min-width: 0;
1224
1226
}
1227
+
.topbar-home {
1228
+
font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap;
1229
+
}
1230
+
.topbar-home:hover { color: var(--accent); }
1231
+
.topbar-center { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; min-width: 0; }
1225
1232
.topbar-title { font-size: 13px; font-weight: 500; white-space: nowrap; }
1226
-
.topbar-sep { color: var(--border); flex-shrink: 0; }
1233
+
.topbar-sep { color: var(--border); flex-shrink: 0; opacity: 0.7; }
1227
1234
.topbar-sub { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
1228
-
.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
1235
+
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
1229
1236
.topbar-refresh {
1230
1237
padding: 4px 8px; font-size: 14px; line-height: 1;
1231
1238
border: 1px solid var(--border); background: transparent; color: var(--muted);
···
1510
1517
#adCards.loading, #calendarWrap.loading { opacity: 0.6; pointer-events: none; }
1511
1518
.calendar-empty { margin-top: 16px; padding: 24px; border: 1px dashed var(--border); background: var(--surface); text-align: center; max-width: 240px; }
1512
1519
.calendar-empty-text { color: var(--muted); font-size: 13px; margin: 0; }
1513
-
.calendar-wrap { margin-top: 16px; border: 1px solid var(--border); background: var(--surface); padding: 16px 20px; width: 100%; max-width: 100%; }
1520
+
.calendar-wrap { margin-top: 16px; border: 1px solid var(--border); background: var(--surface); padding: 18px 22px; width: 100%; min-width: 340px; max-width: 100%; }
1514
1521
.calendar-header { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 14px; }
1515
1522
.cal-month-label { font-size: 15px; font-weight: 500; color: var(--text); margin: 0; }
1516
1523
.cal-nav { padding: 4px 10px; font-size: 11px; background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; }
···
1519
1526
.calendar-grid { display: flex; flex-direction: column; gap: 0; }
1520
1527
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
1521
1528
.cal-weekdays span { text-align: center; }
1522
-
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); }
1523
-
.cal-cell { height: 72px; min-height: 72px; padding: 8px; background: var(--surface); display: flex; flex-direction: column; font-size: 11px; }
1529
+
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); width: 100%; }
1530
+
.cal-cell { min-height: 80px; height: auto; padding: 10px; background: var(--surface); display: flex; flex-direction: column; font-size: 11px; }
1524
1531
.cal-cell.other-month { background: var(--bg); }
1525
1532
.cal-cell.other-month .cal-cell-num { color: var(--muted); opacity: 0.6; }
1526
1533
.cal-cell.today { outline: 1px solid var(--accent); outline-offset: -1px; z-index: 1; }
···
1574
1581
.preview-img-wrap.preview-img-error .preview-img { display: none; }
1575
1582
.preview-img-placeholder { width: 100%; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); }
1576
1583
1577
-
.footer { margin-top: 20px; font-size: 11px; color: var(--muted); }
1578
-
.footer a { color: var(--accent); text-decoration: none; }
1579
-
.footer a:hover { text-decoration: underline; }
1580
-
1581
1584
::-webkit-scrollbar { width: 4px; height: 4px; }
1582
1585
::-webkit-scrollbar-thumb { background: var(--border); }
1583
1586
···
1587
1590
#start_at[readonly], #end_at[readonly] { cursor: pointer; }
1588
1591
1589
1592
@media (min-width: 900px) {
1590
-
.schedule-grid { grid-template-columns: 1fr 420px; }
1593
+
.schedule-grid { grid-template-columns: 1fr minmax(420px, 560px); }
1591
1594
}
1592
1595
@media (min-width: 1200px) {
1593
-
.schedule-grid { grid-template-columns: 1fr 480px; }
1594
-
.cal-cell { height: 80px; min-height: 80px; }
1596
+
.schedule-grid { grid-template-columns: 1fr minmax(480px, 640px); }
1597
+
.cal-cell { min-height: 88px; }
1595
1598
.cal-ad-pill { font-size: 11px; min-height: 30px; }
1596
1599
}
1597
1600
1598
1601
@media (max-width: 768px) {
1599
1602
.admin-editor-grid { grid-template-columns: 1fr; }
1600
1603
.preview-pane { position: static; }
1601
-
.calendar-wrap { max-width: 100%; padding: 10px 12px; }
1602
-
.cal-cell { height: 48px; min-height: 48px; padding: 3px; }
1604
+
.calendar-wrap { max-width: 100%; padding: 10px 12px; min-width: 300px; }
1605
+
.cal-cell { min-height: 56px; padding: 6px; }
1603
1606
.cal-cell-num { font-size: 10px; }
1604
1607
.cal-ad-pill { font-size: 8px; padding: 0 3px; }
1605
1608
}
···
1609
1612
.overview-status-banner { padding: 10px 12px; margin-bottom: 12px; }
1610
1613
.status-banner-text { font-size: 12px; }
1611
1614
.status-banner-sub { font-size: 10px; }
1612
-
.calendar-wrap { margin-top: 12px; }
1613
-
.cal-cell { height: 44px; min-height: 44px; padding: 2px; font-size: 9px; }
1615
+
.calendar-wrap { margin-top: 12px; min-width: 260px; }
1616
+
.cal-cell { min-height: 50px; padding: 5px; font-size: 9px; }
1614
1617
.cal-legend { margin-top: 10px; padding-top: 10px; gap: 8px; font-size: 9px; }
1615
1618
.ad-card { padding: 8px 10px; min-width: 0; }
1616
1619
.ad-card-head { font-size: 10px; }