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

Article page: offcanvas-lg sidebar (sticky desktop, right slide mobile), compact action row; persistent accordion state (localStorage)

Browse Source
This commit is contained in:
Vladislav Kopnin
2026-10-08 01:34:36 +03:00
parent 01237c6b0c
commit 3742b48204
6 changed files with 35 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/main/resources/static/css/app.css
View File

@@ -598,6 +598,9 @@ dialog.dlg.dlg-lg .dlg-body { max-height: 88vh; min-height: 62vh; }
/* Действия столбиком: ровные одинаковые кнопки друг под другом */
.actions-col { display: inline-flex; flex-direction: column; gap: 0.35rem; align-items: stretch; min-width: 6.5rem; }
.actions-col .inline-form { display: block; width: 100%; }
/* Строки с кнопками-иконками: формы не растягиваются на всю ширину (иначе столбик на мобиле) */
.action-row .inline-form { display: inline-flex; width: auto; flex-wrap: nowrap; }
#articleSide { --bs-offcanvas-width: 17rem; --bs-offcanvas-bg: var(--c-surface); --bs-offcanvas-color: var(--c-text); --bs-offcanvas-border-color: var(--c-border); }
.actions-col .btn { display: block; width: 100%; text-align: center; }
/* Иконки — SVG-файлы из /icons через CSS-маски: цвет наследуется от текста */
.cell-ico { font-size: 0.95rem; line-height: 1; }
@@ -643,8 +646,10 @@ th.th-filterable { padding-bottom: 0.35rem; }
}
/* Чтение материалов: контент + боковое содержание */
.learn-layout { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.learn-side { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; font-size: 0.875rem; }
@media (min-width: 992px) {
.learn-side { position: sticky; top: 4.5rem; max-height: calc(100vh - 5.5rem); overflow: auto; }
}
.learn-side { font-size: 0.875rem; }
.side-chapter { font-weight: 600; margin: 0.6rem 0 0.2rem; }
.side-section { margin: 0.25rem 0 0.5rem 0.75rem; }
.side-section > a { color: var(--c-text-muted); }
@@ -656,14 +661,6 @@ th.th-filterable { padding-bottom: 0.35rem; }
.article-nav .ml-auto, .article-nav a:last-child:not(:only-child) { margin-left: auto; }
.article-nav .btn { min-width: 0; max-width: calc(50% - 0.4rem); overflow: hidden; white-space: nowrap; }
.article-nav .btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1000px) {
/* minmax(0, 1fr), а не 1fr: иначе колонка растягивается до min-content
длинных строк кода и таблиц и страница вылезает за экран */
.learn-layout { grid-template-columns: minmax(0, 1fr); }
.learn-layout > * { min-width: 0; }
.learn-main { order: 1; min-width: 0; }
.learn-side { position: static; max-height: none; order: 2; min-width: 0; }
}
/* Панель форматирования markdown и встроенный редактор */
.md-toolbar {