denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance header actions with responsive design and improved button layout for better usability on small screens
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 5m35s
Details

Browse Source
This commit is contained in:
denozord
2025-08-12 23:46:49 +07:00
parent 9c0fe54402
commit 8982c9ae10
2 changed files with 62 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.css
+17
View File
@@ -241,6 +241,23 @@
.header-actions .btn {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.header-actions .btn svg { width: 18px; height: 18px; }
/* Responsive sizing for small screens */
@media (max-width: 992px) {
.header-actions { gap: 0.4rem; }
.header-actions .btn {
padding: 0.35rem 0.6rem;
font-size: 0.875rem;
}
.header-actions .btn .me-1 { margin-right: 0.4rem !important; }
}
@media (max-width: 576px) {
.page-header .col-auto.ms-auto { width: 100%; }
.header-actions { width: 100%; }
}
/* Custom responsive adjustments */
frontend/src/components/PageHeaderActions.jsx
+45 -49
View File
@@ -29,64 +29,60 @@ function PageHeaderActions({
<div className="header-actions">
<div className="btn-group">
{onOnlineUpdate && (
<button className="btn btn-outline-warning" onClick={onOnlineUpdate} title="Online-обновление BGP (WebSocket)">
<button className="btn btn-outline-warning" type="button" onClick={onOnlineUpdate} title="Online-обновление BGP (WebSocket)">
<IconBolt className="me-1" /> Online-обновление
</button>
)}
{onBackgroundUpdate && (
<button className="btn btn-outline-success" onClick={onBackgroundUpdate} title="Фоновое обновление BGP (POST)">
<button className="btn btn-outline-success" type="button" onClick={onBackgroundUpdate} title="Фоновое обновление BGP (POST)">
<IconPlayerPlay className="me-1" /> Фоновое обновление
</button>
)}
</div>
<span className="vr d-none d-lg-inline" />
<div className="btn-group">
{onOnlineUpdate && (
<span className="vr" />
)}
</div>
<div className="btn-group">
{onPreview && (
<button className="btn btn-outline-secondary" onClick={onPreview} disabled={disablePreview} title="Предпросмотр изменений">
<IconEye className="me-1" /> Предпросмотр
</button>
)}
{onRefresh && (
<button className="btn btn-outline-secondary" onClick={onRefresh} disabled={disableRefresh} title="Обновить данные">
<IconRefresh className={loading ? 'spin me-1' : 'me-1'} /> Обновить
</button>
)}
{onImport && (
<button className="btn btn-outline-primary" onClick={onImport} title="Импорт">
<IconUpload className="me-1" /> Импорт
</button>
)}
{onExport && (
<button className="btn btn-outline-primary" onClick={onExport} disabled={disableExport} title="Экспорт">
<IconDownload className="me-1" /> Экспорт
</button>
)}
{onClear && (
<button className="btn btn-outline-secondary" onClick={onClear} disabled={disableClear} title="Очистить пустые/невалидные">
Очистить
</button>
)}
{onSave && (
<button className="btn btn-primary" onClick={onSave} disabled={disableSave} title="Сохранить">
{loading ? (
<>
<span className="spinner-border spinner-border-sm me-2" role="status"></span>
Сохранение...
</>
) : (
<>
<IconDeviceFloppy className="me-1" /> Сохранить
</>
)}
</button>
)}
{onHistory && (
<button className="btn btn-outline-secondary" onClick={onHistory} title="История версий">История</button>
)}
{onPreview && (
<button className="btn btn-outline-secondary" type="button" onClick={onPreview} disabled={disablePreview} title="Предпросмотр изменений">
<IconEye className="me-1" /> Предпросмотр
</button>
)}
{onRefresh && (
<button className="btn btn-outline-secondary" type="button" onClick={onRefresh} disabled={disableRefresh} title="Обновить данные">
<IconRefresh className={loading ? 'spin me-1' : 'me-1'} /> Обновить
</button>
)}
{onImport && (
<button className="btn btn-outline-primary" type="button" onClick={onImport} title="Импорт">
<IconUpload className="me-1" /> Импорт
</button>
)}
{onExport && (
<button className="btn btn-outline-primary" type="button" onClick={onExport} disabled={disableExport} title="Экспорт">
<IconDownload className="me-1" /> Экспорт
</button>
)}
{onClear && (
<button className="btn btn-outline-secondary" type="button" onClick={onClear} disabled={disableClear} title="Очистить пустые/невалидные">
Очистить
</button>
)}
{onSave && (
<button className="btn btn-primary" type="button" onClick={onSave} disabled={disableSave} title="Сохранить">
{loading ? (
<>
<span className="spinner-border spinner-border-sm me-2" role="status"></span>
Сохранение...
</>
) : (
<>
<IconDeviceFloppy className="me-1" /> Сохранить
</>
)}
</button>
)}
{onHistory && (
<button className="btn btn-outline-secondary" type="button" onClick={onHistory} title="История версий">История</button>
)}
</div>
</div>
);