fix(ui): complete reviewed desktop integration
This commit is contained in:
sechmachine
@@ -81,10 +81,30 @@
|
||||
.nav-list { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
|
||||
.nav-link { display: flex; min-height: 2.5rem; align-items: center; gap: .7rem; border-radius: .55rem; padding: .55rem .7rem; color: var(--muted); font-weight: 600; text-decoration: none; }
|
||||
.nav-link:hover, .nav-link[aria-current="page"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgb(20 25 35 / .08); }
|
||||
.nav-link[data-tooltip] { position: relative; }
|
||||
[data-sidebar-collapsed="true"] .nav-link[data-tooltip]:hover::after,
|
||||
[data-sidebar-collapsed="true"] .nav-link[data-tooltip]:focus-visible::after {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
top: 50%;
|
||||
left: calc(100% + .75rem);
|
||||
padding: .38rem .55rem;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: .4rem;
|
||||
background: var(--ink);
|
||||
color: var(--panel);
|
||||
content: attr(data-tooltip);
|
||||
font-size: .75rem;
|
||||
line-height: 1;
|
||||
pointer-events: none;
|
||||
transform: translateY(-50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.nav-icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
|
||||
.sidebar-footer { display: grid; gap: .7rem; margin-top: auto; }
|
||||
.theme-field { display: grid; gap: .25rem; }
|
||||
.theme-field select { min-height: 2.4rem; border: 1px solid var(--border-strong); border-radius: .5rem; background: var(--panel); color: var(--ink); padding: .35rem .55rem; }
|
||||
[data-sidebar-collapsed="true"] .theme-field select { width: 2.5rem; padding-inline: .25rem; font-size: 0; }
|
||||
.logout-form button { width: 100%; border: 0; background: transparent; text-align: left; }
|
||||
.app-column { min-width: 0; }
|
||||
.app-header { display: flex; min-height: 3.75rem; align-items: center; gap: .8rem; border-bottom: 1px solid var(--border); padding: 0 1.5rem; }
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -25,10 +25,15 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
let collapsed = false;
|
||||
try { collapsed = localStorage.getItem('labtimesheet-sidebar') === 'collapsed'; }
|
||||
catch (_) { /* Use the expanded default. */ }
|
||||
root.dataset.sidebarCollapsed = String(collapsed);
|
||||
document.querySelector('[data-sidebar-toggle]')?.addEventListener('click', () => {
|
||||
collapsed = !collapsed;
|
||||
const sidebarToggle = document.querySelector('[data-sidebar-toggle]');
|
||||
const applySidebarState = () => {
|
||||
root.dataset.sidebarCollapsed = String(collapsed);
|
||||
sidebarToggle?.setAttribute('aria-expanded', String(!collapsed));
|
||||
};
|
||||
applySidebarState();
|
||||
sidebarToggle?.addEventListener('click', () => {
|
||||
collapsed = !collapsed;
|
||||
applySidebarState();
|
||||
try { localStorage.setItem('labtimesheet-sidebar', collapsed ? 'collapsed' : 'expanded'); }
|
||||
catch (_) { /* Collapse still works for this page. */ }
|
||||
});
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title th:text="${pageTitle + ' · Lab Timesheet'}">Lab Timesheet</title>
|
||||
<link rel="icon" th:href="@{/assets/icons.svg}" type="image/svg+xml">
|
||||
<script th:src="@{/assets/theme.js}"></script>
|
||||
<link rel="stylesheet" th:href="@{/assets/app.css}">
|
||||
<script defer th:src="@{/assets/app.js}"></script>
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title th:text="${pageTitle + ' · Lab Timesheet'}">Lab Timesheet</title>
|
||||
<link rel="icon" th:href="@{/assets/icons.svg}" type="image/svg+xml">
|
||||
<script th:src="@{/assets/theme.js}"></script>
|
||||
<link rel="stylesheet" th:href="@{/assets/app.css}">
|
||||
<script defer th:src="@{/assets/app.js}"></script>
|
||||
@@ -19,31 +20,31 @@
|
||||
<nav>
|
||||
<p class="nav-label sidebar-label">Workspace</p>
|
||||
<ul class="nav-list">
|
||||
<li><a class="nav-link" th:href="@{/dashboard}" th:attr="aria-current=${activeNav == 'dashboard'} ? 'page' : null">
|
||||
<li><a class="nav-link" th:href="@{/dashboard}" data-tooltip="Overview" th:attr="aria-current=${activeNav == 'dashboard'} ? 'page' : null">
|
||||
<svg class="nav-icon" aria-hidden="true"><use th:href="@{/assets/icons.svg#layout-dashboard}"></use></svg><span class="sidebar-label">Overview</span></a></li>
|
||||
<li sec:authorize="hasRole('ADMIN')"><a class="nav-link" th:href="@{/admin/accounts/new}" th:attr="aria-current=${activeNav == 'accounts'} ? 'page' : null"><svg class="nav-icon" aria-hidden="true"><use th:href="@{/assets/icons.svg#users}"></use></svg><span class="sidebar-label">Accounts</span></a></li>
|
||||
<li sec:authorize="hasRole('ADMIN')"><a class="nav-link" th:href="@{/attendance/calendar}" th:attr="aria-current=${activeNav == 'calendar'} ? 'page' : null"><svg class="nav-icon" aria-hidden="true"><use th:href="@{/assets/icons.svg#calendar-days}"></use></svg><span class="sidebar-label">Global calendar</span></a></li>
|
||||
<li sec:authorize="hasRole('MENTOR')"><a class="nav-link" th:href="@{/projects}" th:attr="aria-current=${activeNav == 'projects'} ? 'page' : null"><svg class="nav-icon" aria-hidden="true"><use th:href="@{/assets/icons.svg#folder-kanban}"></use></svg><span class="sidebar-label">Owned Projects</span></a></li>
|
||||
<li sec:authorize="hasRole('INTERN')"><a class="nav-link" th:href="@{/attendance}" th:attr="aria-current=${activeNav == 'attendance'} ? 'page' : null"><svg class="nav-icon" aria-hidden="true"><use th:href="@{/assets/icons.svg#clock}"></use></svg><span class="sidebar-label">My attendance</span></a></li>
|
||||
<li sec:authorize="hasRole('INTERN')"><a class="nav-link" th:href="@{/projects}" th:attr="aria-current=${activeNav == 'projects'} ? 'page' : null"><svg class="nav-icon" aria-hidden="true"><use th:href="@{/assets/icons.svg#folder-kanban}"></use></svg><span class="sidebar-label">My Projects</span></a></li>
|
||||
<li sec:authorize="hasRole('ADMIN')"><a class="nav-link" th:href="@{/admin/accounts/new}" data-tooltip="Accounts" th:attr="aria-current=${activeNav == 'accounts'} ? 'page' : null"><svg class="nav-icon" aria-hidden="true"><use th:href="@{/assets/icons.svg#users}"></use></svg><span class="sidebar-label">Accounts</span></a></li>
|
||||
<li sec:authorize="hasRole('ADMIN')"><a class="nav-link" th:href="@{/attendance/calendar}" data-tooltip="Global calendar" th:attr="aria-current=${activeNav == 'calendar'} ? 'page' : null"><svg class="nav-icon" aria-hidden="true"><use th:href="@{/assets/icons.svg#calendar-days}"></use></svg><span class="sidebar-label">Global calendar</span></a></li>
|
||||
<li sec:authorize="hasRole('MENTOR')"><a class="nav-link" th:href="@{/projects}" data-tooltip="Owned Projects" th:attr="aria-current=${activeNav == 'projects'} ? 'page' : null"><svg class="nav-icon" aria-hidden="true"><use th:href="@{/assets/icons.svg#folder-kanban}"></use></svg><span class="sidebar-label">Owned Projects</span></a></li>
|
||||
<li sec:authorize="hasRole('INTERN')"><a class="nav-link" th:href="@{/attendance}" data-tooltip="My attendance" th:attr="aria-current=${activeNav == 'attendance'} ? 'page' : null"><svg class="nav-icon" aria-hidden="true"><use th:href="@{/assets/icons.svg#clock}"></use></svg><span class="sidebar-label">My attendance</span></a></li>
|
||||
<li sec:authorize="hasRole('INTERN')"><a class="nav-link" th:href="@{/projects}" data-tooltip="My Projects" th:attr="aria-current=${activeNav == 'projects'} ? 'page' : null"><svg class="nav-icon" aria-hidden="true"><use th:href="@{/assets/icons.svg#folder-kanban}"></use></svg><span class="sidebar-label">My Projects</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="theme-field">
|
||||
<label class="field-label sidebar-label" for="theme-preference">Theme</label>
|
||||
<select id="theme-preference" data-theme-select aria-label="Theme">
|
||||
<select id="theme-preference" data-theme-select aria-label="Theme" title="Theme preference">
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="system">System</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="account"><svg class="nav-icon" aria-hidden="true"><use th:href="@{/assets/icons.svg#circle-user-round}"></use></svg><span class="sidebar-label" sec:authentication="name">Account</span></div>
|
||||
<form class="logout-form" th:action="@{/logout}" method="post"><button class="nav-link" type="submit"><svg class="nav-icon" aria-hidden="true"><use th:href="@{/assets/icons.svg#log-out}"></use></svg><span class="sidebar-label">Logout</span></button></form>
|
||||
<form class="logout-form" th:action="@{/logout}" method="post"><button class="nav-link" type="submit" data-tooltip="Logout"><svg class="nav-icon" aria-hidden="true"><use th:href="@{/assets/icons.svg#log-out}"></use></svg><span class="sidebar-label">Logout</span></button></form>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="app-column">
|
||||
<header class="app-header">
|
||||
<button class="icon-button" type="button" data-sidebar-toggle aria-label="Toggle sidebar" title="Toggle sidebar"><svg class="nav-icon" aria-hidden="true"><use th:href="@{/assets/icons.svg#panel-left}"></use></svg></button>
|
||||
<button class="icon-button" type="button" data-sidebar-toggle aria-expanded="true" aria-label="Toggle sidebar" title="Toggle sidebar"><svg class="nav-icon" aria-hidden="true"><use th:href="@{/assets/icons.svg#panel-left}"></use></svg></button>
|
||||
<div class="header-title"><span class="breadcrumb" th:text="${section}">Section</span> / <span th:text="${pageTitle}">Page</span></div>
|
||||
</header>
|
||||
<div class="page">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<!doctype html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head><meta charset="utf-8"><title>Defer SMTP configuration</title></head>
|
||||
<head><meta charset="utf-8"><title>Defer SMTP configuration</title><link rel="icon" th:href="@{/assets/icons.svg}" type="image/svg+xml"></head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Defer SMTP configuration</h1>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<!doctype html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head><meta charset="utf-8"><title>SMTP configuration</title></head>
|
||||
<head><meta charset="utf-8"><title>SMTP configuration</title><link rel="icon" th:href="@{/assets/icons.svg}" type="image/svg+xml"></head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>SMTP configuration</h1>
|
||||
|
||||
Reference in New Issue
Block a user