Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(config): add section dividers to the config form

Browse Source 
Add a thin divider above the Save/Reset buttons, and one at the top of
#advanced-sections so a line appears between the "Show Advanced Options"
toggle and the advanced fields only when they're revealed. Shared config
renderer, so it applies to every config category (backup included).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-22 11:41:53 +01:00
parent d3681163af
commit afaa43de36
3 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
containers/libreportal/frontend/css/config.css
View File

@ -343,6 +343,17 @@
margin-top: 0px; margin-top: 0px;
} }
/* Thin horizontal rule that separates the config form's sections — one sits
above the Save/Reset buttons, and one at the top of #advanced-sections so a
line appears between the "Show Advanced Options" toggle and the advanced
fields only when they're revealed. */
.config-divider {
height: 0;
border: none;
border-top: 1px solid var(--border-color, rgba(var(--text-rgb), 0.12));
margin: 24px 0;
}
.git-master-toggle .master-toggle { .git-master-toggle .master-toggle {
display: flex; display: flex;
align-items: center; align-items: center;

2
containers/libreportal/frontend/js/components/config/config-manager.js
View File

@ -144,7 +144,7 @@ if (typeof window.ConfigManager === 'undefined') {
'</div>' + '</div>' +
'</div>'; '</div>';
configSection.innerHTML = headerHTML + '<form id="config-form" class="config-form">' + formHTML + '<div class="config-actions">' + configSection.innerHTML = headerHTML + '<form id="config-form" class="config-form">' + formHTML + '<div class="config-divider"></div><div class="config-actions">' +
'<button type="submit" class="btn btn-primary">' + '<button type="submit" class="btn btn-primary">' +
'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">' + '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">' +
'<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>' + '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>' +

4
containers/libreportal/frontend/js/components/config/config-utils.js
View File

@ -53,6 +53,10 @@ class ConfigUtils {
// .is-advanced .domains-header h3::after in config.css). // .is-advanced .domains-header h3::after in config.css).
if (advancedSubcategories.length > 0) { if (advancedSubcategories.length > 0) {
formHTML += '<div id="advanced-sections" class="advanced-sections" style="display: none;">'; formHTML += '<div id="advanced-sections" class="advanced-sections" style="display: none;">';
// Divider between the "Show Advanced Options" toggle and the advanced
// fields. It lives inside #advanced-sections so it only appears once the
// user reveals them.
formHTML += '<div class="config-divider"></div>';
for (const subcategoryName of advancedSubcategories) { for (const subcategoryName of advancedSubcategories) {
const subcategoryData = configData[subcategoryName]; const subcategoryData = configData[subcategoryName];