FlightScore/PenaltyTracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add System Admin area and redesign Competitions page

Browse Source 
Move the Users table and add a new rule-text editor into a dedicated
admin.html/admin.js page with its own collapsible sidebar (Users,
Rules categories), reachable only for system admins via a button next
to the brand. The Competitions page no longer renders admin-only
controls inline.

Competitions page: cards are now fully clickable to open the
competition (drop the separate "Open" button), the admin-only delete
action moves into a "..." menu (new generic openInlineMenu/
openAnchoredPopover helpers in common.js), and add an open/closed
filter.

Topbar: language switch and logout move out of the topbar into a
small popup under the profile button, which itself opens the full
settings modal for username/display name/language/password.
This commit is contained in:
CodingPhoenix
2026-09-05 13:33:05 +02:00
parent e077703d5d
commit ae035c3fd4
8 changed files with 631 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/style.css
+87
View File
@@ -152,6 +152,7 @@ th {
background: #fafafa;
position: sticky;
top: 0;
z-index: 2;
cursor: pointer;
user-select: none;
white-space: nowrap;
@@ -450,3 +451,89 @@ button[disabled] { opacity: 0.55; cursor: not-allowed; }
.rules-table th.col-escalation,
.rules-table td.col-escalation { width: 10rem; }
}
/* System Admin area: sidebar + content, own layout separate from the
normal topbar-only pages. */
.admin-shell {
display: flex;
align-items: flex-start;
}
.admin-sidebar {
width: 220px;
flex-shrink: 0;
border-right: 1px solid var(--border);
padding: 1rem 0.5rem;
min-height: calc(100vh - 57px);
}
.admin-sidebar .category { margin-bottom: 0.25rem; }
.admin-sidebar .category-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: transparent;
border: none;
border-radius: var(--radius);
padding: 0.5rem 0.6rem;
font-weight: 600;
cursor: pointer;
}
.admin-sidebar .category-header:hover { background: var(--row-hover); }
.admin-sidebar .category-header .chevron {
color: var(--muted);
font-size: 0.7rem;
transition: transform 0.15s ease;
}
.admin-sidebar .category.collapsed .chevron { transform: rotate(-90deg); }
.admin-sidebar .category.collapsed .sub-list { display: none; }
.admin-sidebar .sub-list { list-style: none; margin: 0.15rem 0 0.5rem 0; padding: 0; }
.admin-sidebar .sub-item {
display: block;
padding: 0.4rem 0.6rem 0.4rem 1.25rem;
border-radius: var(--radius);
font-size: 0.9rem;
cursor: pointer;
}
.admin-sidebar .sub-item:hover { background: var(--row-hover); }
.admin-sidebar .sub-item.active {
background: rgba(43, 108, 176, 0.1);
color: var(--accent);
font-weight: 600;
}
.admin-content { flex: 1; min-width: 0; padding: 1.25rem; }
@media (max-width: 700px) {
.admin-sidebar { width: 160px; padding: 0.75rem 0.4rem; }
.admin-content { padding: 0.75rem; }
}
/* Small fixed-position dropdown menu, e.g. the "..." menu on a card. */
.menu {
position: fixed;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
z-index: 100;
min-width: 150px;
padding: 0.25rem;
}
.menu button {
display: block;
width: 100%;
text-align: left;
border: none;
border-radius: var(--radius);
padding: 0.5rem 0.6rem;
background: transparent;
}
.menu button:hover { background: var(--row-hover); }
.menu button.danger { color: var(--danger); }
.card.clickable {
cursor: pointer;
transition: box-shadow 0.1s ease, border-color 0.1s ease;
}
.card.clickable:hover {
border-color: var(--accent);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}