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

fix(catalog/webui): make the official-catalog "Re-enable" button inline, full-height & clickable

Browse Source 
When the official catalog is hidden, its "Re-enable" action rendered as a
flat, greyed-out ~27px pill pinned to the top-left of the row — shorter than
the 44px URL field and not obviously clickable (the generic .btn-secondary
loses its nebula-theme polish outside .config-actions, so it fell back to an
unstyled base button).

- The action column now align-self:stretch, so its control matches the URL
  field's height and sits inline (also vertically centres the compact × in the
  enabled state).
- The Re-enable button gets a dedicated .catalog-reenable-btn treatment: accent
  fill + accent border + hover state + an eye icon, filling the row height so it
  lines up with the input and clearly reads as a button.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
librelad 2026-07-07 21:40:23 +01:00
parent 126f563a07
commit 64d298c6db
2 changed files with 39 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -188,7 +188,7 @@ window.validateCatalogFormat = function (input) {
window.officialCatalogActionHTML = function (enabled) {
return enabled
? `<button type="button" class="delete-domain-btn" title="Remove the official catalog from browsing" onclick="window.deleteOfficialCatalog()"><span class="delete-icon">×</span></button>`
: `<button type="button" class="btn btn-secondary" style="padding:.3rem .8rem;" onclick="window.enableOfficialCatalog()">Re-enable</button>`;
: `<button type="button" class="catalog-reenable-btn" title="Show the official catalog in browsing again" onclick="window.enableOfficialCatalog()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>Re-enable</button>`;
};
window.deleteOfficialCatalog = function () {

38
containers/libreportal/frontend/core/forms/css/config.css
View File

@ -324,6 +324,44 @@
pointer-events: none;
}
/* Official-catalog row action column. align-self:stretch makes it match the
URL field's height (whatever that computes to), so its button sits inline and
the same height as the input — and centres the compact × in the enabled
state instead of pinning it to the top. */
.domain-header [data-official-action] {
align-self: stretch;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
/* Re-enable action (shown when the official catalog is hidden). A clear
accent-tinted, accent-bordered button with a hover state so it reads as
clickable — the generic .btn-secondary loses its themed polish outside
.config-actions and rendered as a flat, greyed-out pill. Fills the row
height (100% of the stretched column) to line up with the URL field. */
.catalog-reenable-btn {
height: 100%;
padding: 0 16px;
border-radius: 4px;
border: 1px solid rgba(var(--accent-rgb), 0.55);
background: rgba(var(--accent-rgb), 0.16);
color: var(--accent);
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.catalog-reenable-btn:hover {
background: rgba(var(--accent-rgb), 0.26);
border-color: var(--accent);
}
.catalog-reenable-btn:active { transform: translateY(1px); }
/* Responsive column counts — colocated here (and not in style.css)
because the base 3-column rule above loads later than style.css,
so the unscoped base would otherwise win the cascade against the