Fix loading-spinner spacing and add logo to header brand
The "Hinzufügen" buttons reserved layout space for their loading spinner even when idle, since .htmx-indicator only toggled opacity (not display), leaving a visible gap before the centered text. Switch to display:none/inline-flex so the spinner takes no space until an htmx request is in flight, and drop the static plus icon next to "Hinzufügen" so the idle button just shows centered text with the spinner appearing in its place while loading. Also adds the favicon as a small logo image in front of "LinkVault" in the shared topbar. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,8 @@
|
|||||||
{% import "_icons.html" as icons %}
|
{% import "_icons.html" as icons %}
|
||||||
<header class="topbar">
|
<header class="topbar">
|
||||||
<a href="/" class="brand" style="text-decoration:none;">Link<span>Vault</span></a>
|
<a href="/" class="brand" style="text-decoration:none;">
|
||||||
|
<img src="/static/favicon.svg" alt="" width="24" height="24" style="vertical-align:-6px; margin-right:6px;">Link<span>Vault</span>
|
||||||
|
</a>
|
||||||
<div class="topbar-right">
|
<div class="topbar-right">
|
||||||
<nav class="mode-switch">
|
<nav class="mode-switch">
|
||||||
<a href="/" class="mode-tab {% if request.url.path == '/' %}active{% endif %}">
|
<a href="/" class="mode-tab {% if request.url.path == '/' %}active{% endif %}">
|
||||||
|
|||||||
@@ -214,9 +214,11 @@
|
|||||||
.md-help code {
|
.md-help code {
|
||||||
background: var(--panel2); padding: 1px 5px; border-radius: 4px; color: var(--text);
|
background: var(--panel2); padding: 1px 5px; border-radius: 4px; color: var(--text);
|
||||||
}
|
}
|
||||||
.htmx-indicator { opacity: 0; transition: opacity .2s; }
|
/* display:none statt opacity:0, damit der (unsichtbare) Indikator im
|
||||||
.htmx-request .htmx-indicator { opacity: 1; }
|
Ruhezustand keinen Platz im Button reserviert. */
|
||||||
.htmx-request.htmx-indicator { opacity: 1; }
|
.htmx-indicator { display: none; }
|
||||||
|
.htmx-request .htmx-indicator { display: inline-flex; }
|
||||||
|
.htmx-request.htmx-indicator { display: inline-flex; }
|
||||||
|
|
||||||
.icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; }
|
.icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; }
|
||||||
.icon-spin { animation: icon-spin 0.8s linear infinite; }
|
.icon-spin { animation: icon-spin 0.8s linear infinite; }
|
||||||
|
|||||||
@@ -63,7 +63,7 @@
|
|||||||
style="flex:1 1 220px; width:auto;">
|
style="flex:1 1 220px; width:auto;">
|
||||||
<button type="submit" style="white-space:nowrap;">
|
<button type="submit" style="white-space:nowrap;">
|
||||||
<span class="htmx-indicator icon-spin">{{ icons.spinner(size=14) }}</span>
|
<span class="htmx-indicator icon-spin">{{ icons.spinner(size=14) }}</span>
|
||||||
{{ icons.plus(size=14) }} Hinzufügen
|
Hinzufügen
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="muted" style="font-size:.8rem; margin-top:6px;">
|
<div class="muted" style="font-size:.8rem; margin-top:6px;">
|
||||||
|
|||||||
@@ -44,7 +44,7 @@
|
|||||||
<div style="display:flex; justify-content:flex-end; margin-top:8px;">
|
<div style="display:flex; justify-content:flex-end; margin-top:8px;">
|
||||||
<button type="submit" style="white-space:nowrap;">
|
<button type="submit" style="white-space:nowrap;">
|
||||||
<span class="htmx-indicator icon-spin">{{ icons.spinner(size=14) }}</span>
|
<span class="htmx-indicator icon-spin">{{ icons.spinner(size=14) }}</span>
|
||||||
{{ icons.plus(size=14) }} Hinzufügen
|
Hinzufügen
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="muted" style="font-size:.8rem; margin-top:6px;">
|
<div class="muted" style="font-size:.8rem; margin-top:6px;">
|
||||||
|
|||||||
Reference in New Issue
Block a user