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;
|
letter-spacing: 0.04em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Страница настроек: сайдбар не растягивается слишком широко */
|
||||||
|
.settings-page-sidebar {
|
||||||
|
max-width: 220px;
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.settings-page-sidebar {
|
||||||
|
max-width: 260px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Responsive navbar */
|
/* Responsive navbar */
|
||||||
@media (max-width: 991.98px) {
|
@media (max-width: 991.98px) {
|
||||||
.navbar-collapse {
|
.navbar-collapse {
|
||||||
|
|||||||
@@ -279,7 +279,7 @@ export default function SettingsPage() {
|
|||||||
title="Настройки интерфейса"
|
title="Настройки интерфейса"
|
||||||
icon={<IconSettings size={28} />}
|
icon={<IconSettings size={28} />}
|
||||||
pretitle="Интерфейс"
|
pretitle="Интерфейс"
|
||||||
meta="WebSocket, DoH, пинг, PTR зона и другие параметры UI"
|
meta="WebSocket, DoH, пинг, PTR зона"
|
||||||
actions={
|
actions={
|
||||||
<div className="btn-list">
|
<div className="btn-list">
|
||||||
<button
|
<button
|
||||||
@@ -321,12 +321,12 @@ export default function SettingsPage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="row">
|
<div className="row g-0 g-lg-4">
|
||||||
{/* Боковое меню в стиле Tabler Settings (секции + list-group) */}
|
{/* Боковое меню — узкая колонка, светлый фон */}
|
||||||
<div className="col-lg-3 col-xl-2 mb-4 mb-lg-0 pe-lg-0">
|
<div className="col-12 col-lg-3 col-xl-2 mb-4 mb-lg-0 settings-page-sidebar">
|
||||||
<div
|
<div
|
||||||
className="sticky-top border-end border-1 pe-lg-4 py-3"
|
className="sticky-top bg-body-tertiary rounded-end py-3 px-3 pe-lg-3"
|
||||||
style={{ top: '1rem' }}
|
style={{ top: '1rem', minHeight: '200px' }}
|
||||||
>
|
>
|
||||||
<div className="input-icon mb-3">
|
<div className="input-icon mb-3">
|
||||||
<span className="input-icon-addon">
|
<span className="input-icon-addon">
|
||||||
@@ -376,8 +376,8 @@ export default function SettingsPage() {
|
|||||||
</div>
|
</div>
|
||||||
</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' && (
|
{activeSection === 'live-doh' && (
|
||||||
<SectionCard
|
<SectionCard
|
||||||
id="live-doh"
|
id="live-doh"
|
||||||
@@ -585,22 +585,6 @@ export default function SettingsPage() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user