Mermutef/LMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor web UI: CSS classes only, no inline styles; fix footer; add full lab1.zip

Browse Source 
- Replace all inline style= with reusable CSS classes
- Add layout classes: page, page-header, page-main, page-footer
- Fix footer at bottom via flex column + flex:1 on main
- Remove jsessionid from static resource URLs
- Create lab1-full.zip with 30 variants from PDF metodichka
- All templates use CSS var classes for light/dark theme
This commit is contained in:
Vladislav Kopnin
2026-09-10 21:29:10 +03:00
parent 9b7748571e
commit b4c801853a
10 changed files with 230 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
web/src/main/resources/templates/fragments/base.html
View File

@@ -7,38 +7,33 @@
<link rel="stylesheet" th:href="@{/css/app.css}">
<script th:src="@{/js/htmx.min.js}" defer></script>
<script>
(function(){
var t = localStorage.getItem('lms-theme') || 'light';
document.documentElement.setAttribute('data-theme', t);
})();
function toggleTheme() {
var e = document.documentElement;
var t = e.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
e.setAttribute('data-theme', t);
localStorage.setItem('lms-theme', t);
}
(function(){ var t = localStorage.getItem('lms-theme') || 'light'; document.documentElement.setAttribute('data-theme', t); })();
function toggleTheme(){ var e=document.documentElement; var t=e.getAttribute('data-theme')==='dark'?'light':'dark'; e.setAttribute('data-theme',t); localStorage.setItem('lms-theme',t); }
</script>
</head>
<body class="flex flex-col" style="min-height:100vh">
<header style="position:sticky;top:0;z-index:10;border-bottom:1px solid var(--c-border);background:var(--c-surface);">
<div style="max-width:1152px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1.5rem;">
<a th:href="@{/}" style="font-size:1.125rem;font-weight:600;text-decoration:none;">LMS</a>
<nav style="display:flex;align-items:center;gap:1rem;font-size:0.875rem;" th:if="${currentUser != null}">
<a th:if="${currentUser.admin}" th:href="@{/admin}">Панель</a>
<a th:if="${currentUser.admin}" th:href="@{/admin/groups}">Группы</a>
<span style="color:var(--c-text-muted)" th:text="${currentUser.name}">—</span>
<button onclick="toggleTheme()" class="btn btn-secondary" style="padding:0.25rem 0.5rem;font-size:0.75rem;">☀/🌙</button>
<form th:action="@{/logout}" method="post">
<button class="btn btn-secondary" type="submit">Выйти</button>
</form>
</nav>
</div>
</header>
<main style="flex:1;width:100%;max-width:1152px;margin:0 auto;padding:2rem 1.5rem;">
<th:block th:replace="${content}" />
</main>
<footer style="border-top:1px solid var(--c-border);padding:1rem;text-align:center;font-size:0.75rem;color:var(--c-text-muted);">
LMS v0.1.1
</footer>
<body>
<div class="page">
<header class="page-header">
<div class="page-header-inner">
<a th:href="@{/}" class="logo">LMS</a>
<nav class="nav" th:if="${currentUser != null}">
<a th:if="${currentUser.admin}" th:href="@{/admin}" class="nav-link">Панель</a>
<a th:if="${currentUser.admin}" th:href="@{/admin/groups}" class="nav-link">Группы</a>
<a th:if="${currentUser.admin}" th:href="@{/admin/labs}" class="nav-link">Лабораторные</a>
<span class="nav-sep" th:text="${currentUser.name}">—</span>
<button onclick="toggleTheme()" class="btn btn-secondary btn-sm">☀/🌙</button>
<form th:action="@{/logout}" method="post">
<button class="btn btn-secondary" type="submit">Выйти</button>
</form>
</nav>
</div>
</header>
<main class="page-main">
<th:block th:replace="${content}" />
</main>
<footer class="page-footer">
LMS v0.1.1
</footer>
</div>
</body>
</html>
</html>