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
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m4s
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user