Ensembia/nextcloud-ng_backup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 17 Wiki Activity

Backups: let the runs table scroll on narrow screens

Browse Source 
The table could not shrink below its content width and ran off the page,
cutting off the last columns; wrap it in an overflow-x container.
This commit is contained in:
Dillard Blom
2026-10-07 23:56:28 +02:00
parent 972a52e665
commit 695d972785
1 changed files with 27 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Backups.vue
+27 -24
View File
@@ -30,30 +30,32 @@
</div> </div>
</template> </template>
<table v-if="status.runs.length" class="ngb-table"> <div v-if="status.runs.length" class="ngb-table-wrap">
<thead> <table class="ngb-table">
<tr> <thead>
<th>{{ t('ng_backup', 'Started') }}</th> <tr>
<th>{{ t('ng_backup', 'Location') }}</th> <th>{{ t('ng_backup', 'Started') }}</th>
<th>{{ t('ng_backup', 'Kind') }}</th> <th>{{ t('ng_backup', 'Location') }}</th>
<th>{{ t('ng_backup', 'Restore point') }}</th> <th>{{ t('ng_backup', 'Kind') }}</th>
<th>{{ t('ng_backup', 'Status') }}</th> <th>{{ t('ng_backup', 'Restore point') }}</th>
<th>{{ t('ng_backup', 'Files') }}</th> <th>{{ t('ng_backup', 'Status') }}</th>
<th>{{ t('ng_backup', 'Uploaded') }}</th> <th>{{ t('ng_backup', 'Files') }}</th>
</tr> <th>{{ t('ng_backup', 'Uploaded') }}</th>
</thead> </tr>
<tbody> </thead>
<tr v-for="run in status.runs" :key="run.id" :title="run.error || ''"> <tbody>
<td>{{ new Date(run.startedAt * 1000).toLocaleString() }}</td> <tr v-for="run in status.runs" :key="run.id" :title="run.error || ''">
<td>{{ targetName(run.targetId) }}</td> <td>{{ new Date(run.startedAt * 1000).toLocaleString() }}</td>
<td>{{ run.kind }}</td> <td>{{ targetName(run.targetId) }}</td>
<td>{{ run.snapshot ? new Date(run.snapshot.createdAt * 1000).toLocaleString() + (run.snapshot.label ? ' – ' + run.snapshot.label : '') : '' }}</td> <td>{{ run.kind }}</td>
<td :class="'ngb-' + run.status">{{ run.status }}{{ run.status === 'running' ? ' (' + run.phase + ')' : '' }}{{ run.error ? ': ' + run.error : '' }}</td> <td>{{ run.snapshot ? new Date(run.snapshot.createdAt * 1000).toLocaleString() + (run.snapshot.label ? ' – ' + run.snapshot.label : '') : '' }}</td>
<td>{{ run.stats?.files?.files ?? run.stats?.restored ?? '' }}</td> <td :class="'ngb-' + run.status">{{ run.status }}{{ run.status === 'running' ? ' (' + run.phase + ')' : '' }}{{ run.error ? ': ' + run.error : '' }}</td>
<td>{{ run.stats?.files ? formatSize(run.stats.files.uploaded) : '' }}</td> <td>{{ run.stats?.files?.files ?? run.stats?.restored ?? '' }}</td>
</tr> <td>{{ run.stats?.files ? formatSize(run.stats.files.uploaded) : '' }}</td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</NcSettingsSection> </NcSettingsSection>
</template> </template>
@@ -126,6 +128,7 @@ async function saveSchedule() {
<style scoped> <style scoped>
.ngb-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; } .ngb-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.ngb-time { max-width: 260px; } .ngb-time { max-width: 260px; }
.ngb-table-wrap { overflow-x: auto; }
.ngb-table { width: 100%; border-collapse: collapse; } .ngb-table { width: 100%; border-collapse: collapse; }
.ngb-table th, .ngb-table td { text-align: start; padding: 4px 8px; border-bottom: 1px solid var(--color-border); } .ngb-table th, .ngb-table td { text-align: start; padding: 4px 8px; border-bottom: 1px solid var(--color-border); }
.ngb-failed { color: var(--color-error-text); } .ngb-failed { color: var(--color-error-text); }