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

Fix mobile layout; scroll tables themselves, not cards

Browse Source
This commit is contained in:
Vladislav Kopnin
2026-09-17 22:13:56 +03:00
parent 3c40ffb11d
commit 0bb55e6e4b
3 changed files with 42 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -155,6 +155,8 @@ a:not(.btn):hover { color: var(--c-text-link-hover); }
/* Tables */
table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
/* Прокручивается только таблица (обёртка ставится скриптом table-scroll.js), не карточка */
.table-scroll-box { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
th { text-align: left; font-weight: 500; color: var(--c-text-muted); padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--c-border); }
td { padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--c-border); }
tr:last-child td { border-bottom: none; }
@@ -185,6 +187,16 @@ tr:last-child td { border-bottom: none; }
.filter-select { width: auto; }
.hidden { display: none !important; }
/* На узком экране формы-строки растягиваются и переносят элементы:
нативный select иначе тянется по самому длинному пункту и вылезает за экран */
@media (max-width: 640px) {
.inline-form { display: flex; flex-wrap: wrap; width: 100%; }
.inline-form .input, .inline-form select { width: 100%; min-width: 0; }
.inline-form .btn { flex: 0 0 auto; }
.actions-cell .inline-form { display: inline-block; width: auto; }
.actions-cell .inline-form .input, .actions-cell .inline-form select { width: auto; }
}
/* Toast-уведомление */
.toast { position: fixed; top: 1rem; right: 1rem; z-index: 50; width: 20rem; }
@@ -412,9 +424,12 @@ th.th-filterable { padding-bottom: 0.35rem; }
.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) {
.learn-layout { grid-template-columns: 1fr; }
.learn-main { order: 1; }
.learn-side { position: static; max-height: none; order: 2; }
/* 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 и встроенный редактор */