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

table fix

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-04-14 20:22:53 +02:00
parent 3bbe47ca85
commit b02a2f3a8e
2 changed files with 40 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/features/diff-configs/diff-configs-page.component.html
View File

@@ -62,7 +62,7 @@
</app-section-card>
<app-section-card class="diff-configs-table-section" [title]="'diffConfigs.tableTitle' | translate" [subtitle]="'diffConfigs.tableSubtitle' | translate">
<p-table [value]="exportFiles" [loading]="loading" [rows]="8" [paginator]="exportFiles.length > 8" responsiveLayout="scroll" styleClass="app-table repository-table">
<p-table [value]="exportFiles" [loading]="loading" [rows]="8" [paginator]="exportFiles.length > 8" responsiveLayout="stack" [breakpoint]="'960px'" styleClass="app-table repository-table">
<ng-template pTemplate="header">
<tr>
<th>{{ 'files.fileColumn' | translate }}</th>
@@ -74,18 +74,22 @@
<ng-template pTemplate="body" let-item>
<tr>
<td>
<span class="p-column-title">{{ 'files.fileColumn' | translate }}</span>
<div class="table-primary">{{ item.file_name }}</div>
<small class="table-secondary">{{ 'files.checksum' | translate }}: {{ checksumShort(item.checksum) }}</small>
</td>
<td>
<span class="p-column-title">{{ 'files.routerColumn' | translate }}</span>
<div class="table-primary">{{ item.router_name || item.router_id }}</div>
<small class="table-secondary">ID {{ item.router_id }}</small>
</td>
<td>
<span class="p-column-title">{{ 'files.createdColumn' | translate }}</span>
<div class="table-primary">{{ item.created_at | date: 'dd.MM.yyyy HH:mm' }}</div>
<small class="table-secondary">{{ relativeAge(item.created_at) }}</small>
</td>
<td>
<span class="p-column-title">{{ 'files.compareColumn' | translate }}</span>
<div class="table-actions table-actions--labels table-actions--stack">
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-arrow-left" [label]="'files.setOlder' | translate" (click)="assignCompare('left', item)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-arrow-right" [label]="'files.setNewer' | translate" (click)="assignCompare('right', item)"></button>

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

@@ -702,8 +702,6 @@ body.dark-theme .app-table .p-datatable-tbody > tr:hover > td{
.p-avatar{
background: var(--primary);
color: #fff;
@@ -711,8 +709,6 @@ body.dark-theme .app-table .p-datatable-tbody > tr:hover > td{
}
.p-dialog{
border-radius: 20px;
overflow: hidden;
@@ -2553,12 +2549,22 @@ app-page-header{
.repository-table .table-primary{
font-size: 0.88rem;
line-height: 1.35;
min-width: 0;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
.repository-table .table-secondary{
margin-top: 0.18rem;
font-size: 0.74rem;
line-height: 1.35;
min-width: 0;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
.repository-table .p-tag{
@@ -2568,24 +2574,33 @@ app-page-header{
.repository-table .p-datatable-tbody > tr > td:first-child, .repository-table .p-datatable-thead > tr > th:first-child{
.repository-table .p-datatable-thead > tr > th:first-child{
width: 2.6rem;
padding-inline: 0.55rem;
}
.repository-table .p-datatable-tbody > tr > td:first-child{
padding-inline: 0.55rem;
}
.repository-table .table-actions--stack{
gap: 0.38rem;
min-width: 0;
}
.repository-table .p-button.table-action-btn, .repository-table .p-button.table-action-btn--wide, .repository-table .p-button.table-action-btn--compact{
min-height: 1.9rem;
min-width: 0;
max-width: 100%;
padding: 0.45rem 0.62rem;
font-size: 0.7rem;
letter-spacing: 0.09em;
}
.repository-table .p-button .p-button-label{
white-space: nowrap;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
.repository-table .p-button .p-button-icon{
@@ -3489,14 +3504,28 @@ body.dark-theme .device-toggle.is-active{background:linear-gradient(135deg,color
}
@media (max-width: 960px) {
.repository-table.app-table .p-datatable-wrapper{
overflow-x: hidden;
}
.repository-table.app-table .p-datatable-table{
width: 100% !important;
table-layout: fixed;
}
.repository-table.app-table .p-datatable-tbody > tr > td{
align-items: flex-start;
gap: 0.45rem;
min-width: 0;
max-width: 100%;
overflow: hidden;
box-sizing: border-box;
}
.repository-table .table-actions--stack,
.repository-table .table-actions--labels{
width: 100%;
min-width: 0;
}
.repository-table .p-button.table-action-btn,