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 { .header-actions .btn {
display: inline-flex; display: inline-flex;
align-items: center; 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 */ /* Custom responsive adjustments */
frontend/src/components/PageHeaderActions.jsx
+45 -49
View File
@@ -29,64 +29,60 @@ function PageHeaderActions({
<div className="header-actions"> <div className="header-actions">
<div className="btn-group"> <div className="btn-group">
{onOnlineUpdate && ( {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-обновление <IconBolt className="me-1" /> Online-обновление
</button> </button>
)} )}
{onBackgroundUpdate && ( {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" /> Фоновое обновление <IconPlayerPlay className="me-1" /> Фоновое обновление
</button> </button>
)} )}
</div> </div>
<span className="vr d-none d-lg-inline" />
<div className="btn-group"> <div className="btn-group">
{onOnlineUpdate && ( {onPreview && (
<span className="vr" /> <button className="btn btn-outline-secondary" type="button" onClick={onPreview} disabled={disablePreview} title="Предпросмотр изменений">
)} <IconEye className="me-1" /> Предпросмотр
</div> </button>
<div className="btn-group"> )}
{onPreview && ( {onRefresh && (
<button className="btn btn-outline-secondary" onClick={onPreview} disabled={disablePreview} title="Предпросмотр изменений"> <button className="btn btn-outline-secondary" type="button" onClick={onRefresh} disabled={disableRefresh} title="Обновить данные">
<IconEye className="me-1" /> Предпросмотр <IconRefresh className={loading ? 'spin me-1' : 'me-1'} /> Обновить
</button> </button>
)} )}
{onRefresh && ( {onImport && (
<button className="btn btn-outline-secondary" onClick={onRefresh} disabled={disableRefresh} title="Обновить данные"> <button className="btn btn-outline-primary" type="button" onClick={onImport} title="Импорт">
<IconRefresh className={loading ? 'spin me-1' : 'me-1'} /> Обновить <IconUpload className="me-1" /> Импорт
</button> </button>
)} )}
{onImport && ( {onExport && (
<button className="btn btn-outline-primary" onClick={onImport} title="Импорт"> <button className="btn btn-outline-primary" type="button" onClick={onExport} disabled={disableExport} title="Экспорт">
<IconUpload className="me-1" /> Импорт <IconDownload className="me-1" /> Экспорт
</button> </button>
)} )}
{onExport && ( {onClear && (
<button className="btn btn-outline-primary" onClick={onExport} disabled={disableExport} title="Экспорт"> <button className="btn btn-outline-secondary" type="button" onClick={onClear} disabled={disableClear} title="Очистить пустые/невалидные">
<IconDownload className="me-1" /> Экспорт Очистить
</button> </button>
)} )}
{onClear && ( {onSave && (
<button className="btn btn-outline-secondary" onClick={onClear} disabled={disableClear} title="Очистить пустые/невалидные"> <button className="btn btn-primary" type="button" onClick={onSave} disabled={disableSave} title="Сохранить">
Очистить {loading ? (
</button> <>
)} <span className="spinner-border spinner-border-sm me-2" role="status"></span>
{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>
<> )}
<IconDeviceFloppy className="me-1" /> Сохранить {onHistory && (
</> <button className="btn btn-outline-secondary" type="button" onClick={onHistory} title="История версий">История</button>
)} )}
</button>
)}
{onHistory && (
<button className="btn btn-outline-secondary" onClick={onHistory} title="История версий">История</button>
)}
</div> </div>
</div> </div>
); );