gru/mikrotik_backup_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-04-14 13:35:40 +02:00
parent 9252915151
commit 1a2ae0d607
8 changed files with 152 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/app.component.ts
View File

@@ -33,7 +33,7 @@ export class AppComponent {
pageLabel = 'dashboard.title';
readonly author = 'Mateusz Gruszczyński';
readonly authorHandle = '@linuxiarz.pl';
readonly authorUrl = 'https://linuxiarz.pl';
readonly authorUrl = 'https://www.linuxiarz.pl';
readonly apiSnapshot = this.apiStatus.snapshot;
readonly languageOptions: TopbarLanguageOption[] = APP_LANGUAGE_OPTIONS;
readonly apiStateLabelKey = computed(() => {

2
frontend/src/app/features/dashboard/dashboard-page.component.html
View File

@@ -15,7 +15,7 @@
<div class="operations-center">
<div class="operations-center__actions">
<button pButton type="button" icon="pi pi-upload" [label]="'dashboard.exportAll' | translate" [loading]="exporting" (click)="exportAll()"></button>
<button pButton type="button" severity="secondary" icon="pi pi-database" [label]="'dashboard.binaryAll' | translate" [loading]="runningBinary" (click)="binaryAll()"></button>
<button pButton type="button" severity="secondary" styleClass="btn-binary-accent" icon="pi pi-database" [label]="'dashboard.binaryAll' | translate" [loading]="runningBinary" (click)="binaryAll()"></button>
</div>
<div class="operations-center__stats">

8
frontend/src/app/features/files/files-page.component.html
View File

@@ -24,12 +24,12 @@
<span class="form-field">
<label>{{ 'files.typeLabel' | translate }}</label>
<p-select [options]="typeOptions" [(ngModel)]="backupType" optionLabel="label" optionValue="value"></p-select>
<p-select [appendTo]="'body'" [options]="typeOptions" [(ngModel)]="backupType" optionLabel="label" optionValue="value"></p-select>
</span>
<span class="form-field">
<label>{{ 'files.routerLabel' | translate }}</label>
<p-select [options]="routerOptions" [(ngModel)]="routerId" optionLabel="label" optionValue="value"></p-select>
<p-select [appendTo]="'body'" [options]="routerOptions" [(ngModel)]="routerId" optionLabel="label" optionValue="value"></p-select>
</span>
<span class="form-field">
@@ -39,12 +39,12 @@
<span class="form-field">
<label>{{ 'files.sortLabel' | translate }}</label>
<p-select [options]="sortOptions" [(ngModel)]="sortBy" optionLabel="label" optionValue="value"></p-select>
<p-select [appendTo]="'body'" [options]="sortOptions" [(ngModel)]="sortBy" optionLabel="label" optionValue="value"></p-select>
</span>
<span class="form-field">
<label>{{ 'files.orderLabel' | translate }}</label>
<p-select [options]="orderOptions" [(ngModel)]="order" optionLabel="label" optionValue="value"></p-select>
<p-select [appendTo]="'body'" [options]="orderOptions" [(ngModel)]="order" optionLabel="label" optionValue="value"></p-select>
</span>
<div class="filters-actions repository-toolbar__actions">

2
frontend/src/app/features/routers/routers-page.component.html
View File

@@ -96,7 +96,7 @@
</span>
<span class="form-field">
<label>{{ 'routers.deviceType' | translate }}</label>
<p-select [options]="deviceTypeOptions" formControlName="device_type" optionLabel="label" optionValue="value"></p-select>
<p-select [appendTo]="'body'" [options]="deviceTypeOptions" formControlName="device_type" optionLabel="label" optionValue="value"></p-select>
</span>
<span class="form-field">
<label>{{ 'routers.host' | translate }}</label>

2
frontend/src/app/features/settings/settings-page.component.html
View File

@@ -1,7 +1,7 @@
<app-page-header [eyebrow]="'settings.eyebrow' | translate" [title]="'settings.title' | translate" [subtitle]="'settings.subtitle' | translate">
<div header-actions class="header-actions-row">
<button pButton type="button" severity="secondary" icon="pi pi-envelope" [label]="'settings.testEmail' | translate" [loading]="testingEmail" (click)="testEmail()"></button>
<button pButton type="button" severity="help" icon="pi pi-send" [label]="'settings.testPushover' | translate" [loading]="testingPushover" (click)="testPushover()"></button>
<button pButton type="button" severity="secondary" styleClass="btn-pushover-neutral" icon="pi pi-send" [label]="'settings.testPushover' | translate" [loading]="testingPushover" (click)="testPushover()"></button>
</div>
</app-page-header>

1
frontend/src/styles.css
View File

@@ -1,3 +1,4 @@
@import url('https://cdn.jsdelivr.net/npm/hack-font@3/build/web/hack.css');
@import './styles/pages.css';
@import './styles/layout.css';
@import './styles/auth.css';

180
frontend/src/styles/pages.css
View File

@@ -538,19 +538,35 @@ body.dark-theme .metric-tile, .empty-state{
}
.p-button.p-button-secondary, .p-button.p-button-help, .p-button.p-button-outlined, .p-button.p-button-text{
background: transparent;
background: color-mix(in srgb, var(--surface-1) 88%, white 12%);
color: var(--text-main);
border-color: var(--border-strong);
border-color: color-mix(in srgb, var(--border-strong) 86%, transparent);
}
.p-button.p-button-secondary:not(.p-disabled):hover, .p-button.p-button-help:not(.p-disabled):hover, .p-button.p-button-outlined:not(.p-disabled):hover{
background: color-mix(in srgb, var(--surface-2) 82%, white 18%);
border-color: color-mix(in srgb, var(--border-strong) 96%, transparent);
}
.p-button.p-button-text{
border-color: transparent;
background: transparent;
}
body.dark-theme .p-button.p-button-secondary, body.dark-theme .p-button.p-button-help, body.dark-theme .p-button.p-button-outlined, body.dark-theme .p-button.p-button-text{
color: var(--text-main);
}
body.dark-theme .p-button.p-button-secondary, body.dark-theme .p-button.p-button-help, body.dark-theme .p-button.p-button-outlined{
background: color-mix(in srgb, var(--surface-1) 90%, white 10%);
border-color: rgba(146, 170, 194, 0.22);
}
body.dark-theme .p-button.p-button-secondary:not(.p-disabled):hover, body.dark-theme .p-button.p-button-help:not(.p-disabled):hover, body.dark-theme .p-button.p-button-outlined:not(.p-disabled):hover{
background: color-mix(in srgb, var(--surface-1) 84%, white 16%);
border-color: rgba(146, 170, 194, 0.34);
}
.p-button.p-button-danger{
background: transparent;
border-color: rgba(194, 70, 70, 0.5);
@@ -606,10 +622,14 @@ body.dark-theme .p-inputtext, body.dark-theme .p-inputtextarea, body.dark-theme
.p-tag{
border-radius: 999px;
font-size: 0.72rem;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.12em;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.15;
padding: 0.28rem 0.72rem;
min-width: max-content;
max-width: 100%;
}
@@ -712,10 +732,6 @@ body.dark-theme .app-table .p-datatable-tbody > tr:hover > td{
border-top: 1px solid var(--border-color);
}
.empty-state, .compact-empty{
padding: 1.2rem;
border: 1px dashed var(--border-strong);
@@ -1146,7 +1162,7 @@ body.dark-theme .topbar{
.p-tag{
font-size: 0.66rem;
font-size: 0.6rem;
}
.app-table{
@@ -1929,6 +1945,50 @@ body.dark-theme .inline-summary{
justify-content: center;
}
.operations-center__actions .btn-binary-accent{
background: rgba(141, 89, 58, 0.1);
border-color: rgba(141, 89, 58, 0.34);
color: #6f452d;
}
.operations-center__actions .btn-binary-accent:not(.p-disabled):hover{
background: rgba(141, 89, 58, 0.14);
border-color: rgba(141, 89, 58, 0.42);
}
body.dark-theme .operations-center__actions .btn-binary-accent{
background: rgba(75, 144, 217, 0.09);
border-color: rgba(75, 144, 217, 0.3);
color: #dbe8f5;
}
body.dark-theme .operations-center__actions .btn-binary-accent:not(.p-disabled):hover{
background: rgba(75, 144, 217, 0.13);
border-color: rgba(75, 144, 217, 0.4);
}
.header-actions-row .btn-pushover-neutral{
background: rgba(75, 144, 217, 0.08);
border-color: rgba(75, 144, 217, 0.26);
color: #2f5f8f;
}
.header-actions-row .btn-pushover-neutral:not(.p-disabled):hover{
background: rgba(75, 144, 217, 0.12);
border-color: rgba(75, 144, 217, 0.34);
}
body.dark-theme .header-actions-row .btn-pushover-neutral{
background: rgba(75, 144, 217, 0.08);
border-color: rgba(75, 144, 217, 0.28);
color: #dbe8f5;
}
body.dark-theme .header-actions-row .btn-pushover-neutral:not(.p-disabled):hover{
background: rgba(75, 144, 217, 0.12);
border-color: rgba(75, 144, 217, 0.38);
}
.operations-center__stats{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -2499,8 +2559,8 @@ app-page-header{
}
.repository-table .p-tag{
font-size: 0.68rem;
padding: 0.22rem 0.48rem;
font-size: 0.62rem;
padding: 0.24rem 0.58rem;
}
@@ -3115,29 +3175,52 @@ body.dark-theme .p-button:not(.p-button-secondary):not(.p-button-help):not(.p-bu
}
.p-select, .p-textarea, .p-inputtextarea, .p-inputtext, textarea.p-inputtextarea, textarea.p-textarea{
border-radius: 12px;
border: 1px solid var(--border-strong);
background: color-mix(in srgb, var(--surface-1) 90%, white 10%);
border-radius: 14px;
border: 1px solid rgba(126, 142, 158, 0.24);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 245, 241, 0.98) 100%);
color: var(--text-main);
box-shadow: none;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
body.dark-theme .p-select, body.dark-theme .p-textarea, body.dark-theme .p-inputtextarea, body.dark-theme .p-inputtext, body.dark-theme textarea.p-inputtextarea, body.dark-theme textarea.p-textarea{
background: rgba(255, 255, 255, 0.03);
background: linear-gradient(180deg, rgba(28, 38, 50, 0.98) 0%, rgba(23, 33, 44, 0.98) 100%);
color: var(--text-main);
border-color: var(--border-color);
border-color: rgba(146, 170, 194, 0.18);
box-shadow: 0 12px 24px rgba(5, 10, 18, 0.26);
}
.p-select{
display: flex;
align-items: center;
min-height: 2.95rem;
min-height: 3rem;
overflow: hidden;
}
.p-select:not(.p-disabled):hover{
border-color: rgba(141, 89, 58, 0.42);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 241, 236, 0.98) 100%);
}
body.dark-theme .p-select:not(.p-disabled):hover{
border-color: rgba(75, 144, 217, 0.24);
background: linear-gradient(180deg, rgba(29, 39, 51, 0.985) 0%, rgba(24, 34, 45, 0.985) 100%);
}
.p-select.p-focus, .p-select.p-inputwrapper-focus{
border-color: rgba(141, 89, 58, 0.62);
box-shadow: 0 0 0 3px rgba(141, 89, 58, 0.12), 0 10px 24px rgba(15, 23, 42, 0.06);
}
body.dark-theme .p-select.p-focus, body.dark-theme .p-select.p-inputwrapper-focus{
border-color: #4f95df;
box-shadow: 0 0 0 3px rgba(79, 149, 223, 0.16), 0 16px 30px rgba(5, 10, 18, 0.28);
}
.p-select .p-select-label, .p-select .p-select-label.p-placeholder{
width: 100%;
min-height: 0;
padding: 0.78rem 0 0.78rem 1rem;
padding: 0.84rem 0 0.84rem 1rem;
border: 0;
border-radius: 0;
background: transparent;
@@ -3145,9 +3228,9 @@ body.dark-theme .p-select, body.dark-theme .p-textarea, body.dark-theme .p-input
display: flex;
align-items: center;
font-family: var(--font-body);
font-size: 0.96rem;
font-size: 0.94rem;
font-weight: 500;
line-height: 1.35;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
color: var(--text-main);
@@ -3170,6 +3253,12 @@ body.dark-theme .p-select, body.dark-theme .p-textarea, body.dark-theme .p-input
align-self: stretch;
color: var(--text-soft);
flex: 0 0 2.85rem;
background: transparent;
}
.p-select .p-select-dropdown .p-icon{
width: 0.95rem;
height: 0.95rem;
}
.p-inputtext:enabled:focus, .p-textarea:enabled:focus, .p-inputtextarea:enabled:focus, textarea.p-inputtextarea:enabled:focus, textarea.p-textarea:enabled:focus{
@@ -3192,22 +3281,26 @@ body.dark-theme .auth-card .p-inputtext:enabled:focus, body.dark-theme .auth-car
box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}
.p-select-overlay, .p-component-overlay{
backdrop-filter: blur(12px);
background: color-mix(in srgb, var(--surface-1) 97%, white 3%);
border: 1px solid var(--border-color);
.p-select-overlay{
backdrop-filter: blur(18px);
background: linear-gradient(180deg, rgba(251, 250, 247, 0.98) 0%, rgba(244, 242, 238, 0.98) 100%);
border: 1px solid rgba(126, 142, 158, 0.16);
color: var(--text-main);
box-shadow: var(--shadow-lg);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
border-radius: 16px;
overflow: hidden;
}
body.dark-theme .p-select-overlay, body.dark-theme .p-component-overlay{
background: #1f2935;
border-color: rgba(146, 170, 194, 0.2);
body.dark-theme .p-select-overlay{
background: linear-gradient(180deg, rgba(34, 46, 61, 0.98) 0%, rgba(24, 34, 45, 0.98) 100%);
border-color: rgba(146, 170, 194, 0.12);
box-shadow: 0 22px 48px rgba(5, 10, 18, 0.38);
}
.p-select-list{
padding: 0.35rem;
padding: 0.35rem 0;
background: transparent;
gap: 0;
}
body.dark-theme .p-select-list{
@@ -3215,7 +3308,8 @@ body.dark-theme .p-select-list{
}
.p-select-option{
border-radius: 10px;
border-radius: 0;
padding: 0.82rem 1rem;
font-size: 0.92rem;
line-height: 1.35;
color: var(--text-main);
@@ -3223,13 +3317,18 @@ body.dark-theme .p-select-list{
}
.p-select-option:hover{
background: #dbe5f0;
color: #13202c;
background: rgba(17, 20, 23, 0.045);
color: #111417;
}
.p-select-option.p-focus{
background: rgba(17, 20, 23, 0.055);
color: #111417;
}
.p-select-option.p-select-option-selected{
background: #c8d8ea;
color: #13202c;
background: rgba(141, 89, 58, 0.09);
color: #6f452d;
font-weight: 600;
}
@@ -3238,13 +3337,18 @@ body.dark-theme .p-select-option{
}
body.dark-theme .p-select-option:hover{
background: #314355;
background: rgba(255, 255, 255, 0.03);
color: #f4f8fb;
}
body.dark-theme .p-select-option.p-focus{
background: rgba(255, 255, 255, 0.04);
color: #f4f8fb;
}
body.dark-theme .p-select-option.p-select-option-selected{
background: #d9e1ea;
color: #13202c;
background: rgba(75, 144, 217, 0.22);
color: #f4f8fb;
font-weight: 600;
}