style(backup): polish location tabs — drop stray descriptions, pad panels, round corners
- Remove the per-tab 'How LibrePortal connects…' description lines; the tab labels already say what each panel is, and the paragraphs read as misplaced titles. - Give the tab panels even, comfortable padding (tabs-content padding zeroed so the panel owns it) instead of the cramped 2px sides. - Round the tab strip's top corners (.tabs-list) so the strip + content read as one card — .tabs-content already rounds the bottom, leaving the top square. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
parent
0c770462b0
commit
459609a35b
@ -724,15 +724,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* The location editor reuses the app-detail tab design (.tabs-wrapper /
|
/* The location editor reuses the app-detail tab design (.tabs-wrapper /
|
||||||
.tab-button / .tab-panel from style.css). Only trim the panel padding so it
|
.tab-button / .tab-panel from style.css). Round the strip's top corners so
|
||||||
sits inside the backup row's own padding instead of doubling it. */
|
it reads as a card (.tabs-content already rounds the bottom), and let the
|
||||||
.backup-location-details .tab-panel {
|
panel own a comfortable, even padding around the config fields. */
|
||||||
padding: 16px 2px 2px;
|
.backup-location-details .tabs-list {
|
||||||
|
border-radius: 12px 12px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backup-location-details .tab-panel > .category-description {
|
.backup-location-details .tabs-content {
|
||||||
margin-top: 0;
|
padding: 0;
|
||||||
margin-bottom: 12px;
|
}
|
||||||
|
|
||||||
|
.backup-location-details .tab-panel {
|
||||||
|
padding: 20px 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backup-form-footer {
|
.backup-form-footer {
|
||||||
|
|||||||
@ -696,19 +696,16 @@ class BackupPage {
|
|||||||
</div>
|
</div>
|
||||||
<div class="tabs-content">
|
<div class="tabs-content">
|
||||||
<div class="tab-panel active" data-tab-panel="connection" data-loc="${idx}">
|
<div class="tab-panel active" data-tab-panel="connection" data-loc="${idx}">
|
||||||
<p class="category-description">How LibrePortal connects to this storage location.</p>
|
|
||||||
<div class="backup-location-connection-fields" id="backup-location-${idx}-connection">
|
<div class="backup-location-connection-fields" id="backup-location-${idx}-connection">
|
||||||
${this.renderLocFields(idx, groups.connection, l)}
|
${this.renderLocFields(idx, groups.connection, l)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-panel" data-tab-panel="retention" data-loc="${idx}">
|
<div class="tab-panel" data-tab-panel="retention" data-loc="${idx}">
|
||||||
<p class="category-description">When to delete old backups from this location.</p>
|
|
||||||
<div id="backup-location-${idx}-retention">
|
<div id="backup-location-${idx}-retention">
|
||||||
${this.formRetention(`CFG_BACKUP_LOC_${idx}_`, retentionValues, true)}
|
${this.formRetention(`CFG_BACKUP_LOC_${idx}_`, retentionValues, true)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-panel" data-tab-panel="advanced" data-loc="${idx}">
|
<div class="tab-panel" data-tab-panel="advanced" data-loc="${idx}">
|
||||||
<p class="category-description">Overrides most locations don't need.</p>
|
|
||||||
<div id="backup-location-${idx}-advanced">
|
<div id="backup-location-${idx}-advanced">
|
||||||
${this.renderLocFields(idx, groups.advanced, l)}
|
${this.renderLocFields(idx, groups.advanced, l)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user