mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 08:09:18 +02:00
refactor: Admin index — replace emoji buttons with Phosphor SVG icons, add back buttons + row click navigation, minimal JS, move export DB to Exporter modal, color stats, bulk bar anti-shift, credits reorder, tags icons
This commit is contained in:
Pontoporeia
@@ -57,11 +57,54 @@
|
||||
);
|
||||
}
|
||||
|
||||
.admin-main--list {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#admin-table-wrap {
|
||||
padding: 0 0 var(--space-2xl);
|
||||
}
|
||||
|
||||
.admin-body main > table tbody tr:nth-child(even) {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.admin-table-row:hover {
|
||||
background: var(--blue-muted-bg) !important;
|
||||
}
|
||||
|
||||
.admin-body main > h1,
|
||||
.admin-list-header > h1 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin: 0 0 var(--space-l) 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2xs);
|
||||
}
|
||||
|
||||
.admin-back-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.admin-back-btn:hover {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.admin-back-btn svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* ── Form styles → see form.css ─────────────────────────────────────────── */
|
||||
@@ -158,7 +201,7 @@
|
||||
/* ── Stats cards ────────────────────────────────────────────────────────── */
|
||||
.admin-stats {
|
||||
display: flex;
|
||||
gap: var(--space-s);
|
||||
gap: var(--space-2xs);
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -167,10 +210,44 @@
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-2xs) var(--space-s);
|
||||
padding: var(--space-2xs) var(--space-xs);
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
gap: var(--space-3xs);
|
||||
}
|
||||
|
||||
.admin-stat--pub .admin-stat__number {
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.admin-stat--pub .admin-stat__number:empty::after,
|
||||
.admin-stat--pub .admin-stat__number[data-empty] {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.admin-stat--pend .admin-stat__number {
|
||||
color: var(--accent-yellow);
|
||||
}
|
||||
|
||||
.admin-stat--pend .admin-stat__number:empty::after,
|
||||
.admin-stat--pend .admin-stat__number[data-empty] {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.admin-stat legend {
|
||||
font-size: var(--step--2);
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
color: var(--text-secondary);
|
||||
padding: 0;
|
||||
float: none;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.admin-stat__number {
|
||||
@@ -178,16 +255,9 @@
|
||||
font-weight: 700;
|
||||
color: var(--accent-primary);
|
||||
line-height: 1;
|
||||
order: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-stat__label {
|
||||
font-size: var(--step--2);
|
||||
color: var(--text-secondary);
|
||||
margin-top: var(--space-3xs);
|
||||
order: 2;
|
||||
}
|
||||
/* ── Stats (inline badge-like counters) ────────────────────────────── */
|
||||
|
||||
/* ── Maintenance bar ────────────────────────────────────────────────────── */
|
||||
.admin-maintenance-bar {
|
||||
@@ -223,7 +293,8 @@
|
||||
/* Empty-state message below the thesis table */
|
||||
.admin-empty {
|
||||
color: var(--text-secondary);
|
||||
padding: var(--space-s) 0;
|
||||
padding: var(--space-s) var(--space-2xs);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Identifier column in the thesis table */
|
||||
@@ -273,6 +344,21 @@
|
||||
margin-top: var(--space-m);
|
||||
}
|
||||
|
||||
.admin-body main > table th,
|
||||
.admin-body main > table td {
|
||||
padding: var(--space-3xs);
|
||||
}
|
||||
|
||||
.admin-body main > table td.admin-ap-col,
|
||||
.admin-body main > table th.admin-ap-col {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-na {
|
||||
color: var(--text-tertiary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Sortable column headers */
|
||||
.admin-sort-link {
|
||||
color: inherit;
|
||||
@@ -346,11 +432,107 @@
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
/* ── Compact table badges ─────────────────────────────────────────── */
|
||||
.status-badge {
|
||||
font-size: 0.7rem;
|
||||
padding: 2px var(--space-3xs);
|
||||
}
|
||||
|
||||
/* ── Compact icon buttons for table rows ──────────────────────────── */
|
||||
.admin-icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 3px;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.admin-icon-btn svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.admin-icon-btn:hover {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-primary);
|
||||
}
|
||||
|
||||
.admin-icon-btn--view:hover {
|
||||
background: var(--blue-muted-bg);
|
||||
color: var(--accent-blue);
|
||||
border-color: var(--blue-muted-border);
|
||||
}
|
||||
|
||||
.admin-icon-btn--edit:hover {
|
||||
background: var(--yellow-muted-bg);
|
||||
color: var(--accent-yellow);
|
||||
border-color: var(--yellow-muted-border);
|
||||
}
|
||||
|
||||
.admin-icon-btn--publish:hover {
|
||||
background: var(--green-muted-bg);
|
||||
color: var(--accent-green);
|
||||
border-color: var(--green-muted-border);
|
||||
}
|
||||
|
||||
.admin-icon-btn--unpublish:hover {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
border-color: var(--border-primary);
|
||||
}
|
||||
|
||||
.admin-icon-btn--delete:hover {
|
||||
background: var(--error-muted-bg);
|
||||
color: var(--error);
|
||||
border-color: var(--danger-border-muted);
|
||||
}
|
||||
|
||||
.admin-icon-btn--copy:hover {
|
||||
background: var(--blue-muted-bg);
|
||||
color: var(--accent-blue);
|
||||
border-color: var(--blue-muted-border);
|
||||
}
|
||||
|
||||
.admin-icon-btn--key:hover {
|
||||
background: var(--yellow-muted-bg);
|
||||
color: var(--accent-yellow);
|
||||
border-color: var(--yellow-muted-border);
|
||||
}
|
||||
|
||||
.admin-icon-btn--archive:hover {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
border-color: var(--border-primary);
|
||||
}
|
||||
|
||||
.admin-icon-btn--merge:hover {
|
||||
background: var(--yellow-muted-bg);
|
||||
color: var(--accent-yellow);
|
||||
border-color: var(--yellow-muted-border);
|
||||
}
|
||||
|
||||
/* ── Action buttons in table — see common.css .btn base class ──────────── */
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3xs);
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-actions-col {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Legacy table-action size — now just an alias */
|
||||
@@ -691,13 +873,14 @@
|
||||
margin-top: var(--space-2xs);
|
||||
}
|
||||
|
||||
/* ── List page toolbar (title + filters + stats + import, one row) ───────── */
|
||||
/* ── List page toolbar (generic grid header + right slot) ──────────────── */
|
||||
.admin-list-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: var(--space-m) var(--space-l);
|
||||
margin-bottom: var(--space-m);
|
||||
align-items: center;
|
||||
padding: var(--space-m) 0 0;
|
||||
}
|
||||
|
||||
.admin-list-toolbar h1 {
|
||||
@@ -749,6 +932,60 @@
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
/* ── List page toolbar (theses index — single-line search) ─────────────── */
|
||||
.admin-list-toolbar--list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-s);
|
||||
}
|
||||
|
||||
.admin-list-toolbar--list .admin-toolbar-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-m);
|
||||
}
|
||||
|
||||
.admin-list-toolbar--list .admin-toolbar-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-m);
|
||||
}
|
||||
|
||||
.admin-list-toolbar--list .admin-toolbar-title-row h1 {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-list-toolbar--list .admin-toolbar-top .admin-btn-group {
|
||||
display: flex;
|
||||
gap: var(--space-2xs);
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admin-list-toolbar--list .admin-filters {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--space-xs);
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.admin-list-toolbar--list .admin-filters input[type="text"] {
|
||||
flex: 1 1 auto;
|
||||
min-width: 8rem;
|
||||
}
|
||||
|
||||
.admin-list-toolbar--list .admin-filters select {
|
||||
min-width: 6rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.admin-list-toolbar--list .admin-filters .btn {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.admin-btn-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user