feat(SettingsPage): enhance sidebar layout and content responsiveness for improved user experience
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m4s

This commit is contained in:
2026-02-17 15:08:50 +07:00
parent 48f47d66ca
commit 820b73e622
2 changed files with 18 additions and 24 deletions
+10
View File
@@ -346,6 +346,16 @@
letter-spacing: 0.04em;
}
/* Страница настроек: сайдбар не растягивается слишком широко */
.settings-page-sidebar {
max-width: 220px;
}
@media (min-width: 992px) {
.settings-page-sidebar {
max-width: 260px;
}
}
/* Responsive navbar */
@media (max-width: 991.98px) {
.navbar-collapse {
+8 -24
View File
@@ -279,7 +279,7 @@ export default function SettingsPage() {
title="Настройки интерфейса"
icon={<IconSettings size={28} />}
pretitle="Интерфейс"
meta="WebSocket, DoH, пинг, PTR зона и другие параметры UI"
meta="WebSocket, DoH, пинг, PTR зона"
actions={
<div className="btn-list">
<button
@@ -321,12 +321,12 @@ export default function SettingsPage() {
</div>
)}
<div className="row">
{/* Боковое меню в стиле Tabler Settings (секции + list-group) */}
<div className="col-lg-3 col-xl-2 mb-4 mb-lg-0 pe-lg-0">
<div className="row g-0 g-lg-4">
{/* Боковое меню — узкая колонка, светлый фон */}
<div className="col-12 col-lg-3 col-xl-2 mb-4 mb-lg-0 settings-page-sidebar">
<div
className="sticky-top border-end border-1 pe-lg-4 py-3"
style={{ top: '1rem' }}
className="sticky-top bg-body-tertiary rounded-end py-3 px-3 pe-lg-3"
style={{ top: '1rem', minHeight: '200px' }}
>
<div className="input-icon mb-3">
<span className="input-icon-addon">
@@ -376,8 +376,8 @@ export default function SettingsPage() {
</div>
</div>
{/* Контент выбранного раздела */}
<div className="col-lg-9 col-xl-10">
{/* Контент выбранного раздела — на всю оставшуюся ширину */}
<div className="col-lg-9 col-xl-10 min-vw-0 pt-lg-0">
{activeSection === 'live-doh' && (
<SectionCard
id="live-doh"
@@ -585,22 +585,6 @@ export default function SettingsPage() {
)}
</div>
</div>
{/* Кнопка сохранения внизу страницы (дублируем для удобства) */}
<div className="mt-3 pt-3 border-top">
<button
type="button"
className="btn btn-primary"
onClick={onSave}
disabled={saving}
>
{saving && (
<span className="spinner-border spinner-border-sm me-2" />
)}
<IconDeviceFloppy size={18} className="me-1" />
Сохранить настройки
</button>
</div>
</div>
</div>
</div>