From b78178f2857772bf0e0af3f0da1b76476afc005e Mon Sep 17 00:00:00 2001 From: glendc Date: Thu, 15 Aug 2024 15:30:22 +0200 Subject: [PATCH] introduce loading indicators and card click hints --- static/css/style.css | 84 +++++++++++++++++++++++++++++++++++-- templates/base.html | 9 +++- templates/includes/bars.svg | 52 +++++++++++++++++++++++ templates/includes/nav.html | 14 ++++++- templates/index.html | 19 +++++++-- 5 files changed, 169 insertions(+), 9 deletions(-) create mode 100644 templates/includes/bars.svg diff --git a/static/css/style.css b/static/css/style.css index 6be1448..963a676 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -161,6 +161,10 @@ body > header { margin: 0; font-family: var(--mono-font); border-bottom: 1px solid var(--accent); + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + gap: 10px; } body > footer { @@ -185,6 +189,20 @@ body > header a .hover-icon { font-size: 16px; } +body > header .htmx-indicator { + opacity: 0; + transition: opacity 500ms ease-in; + color: var(--fg); +} + +body > header .htmx-request .htmx-indicator { + opacity: 1; +} + +body > header .htmx-request.htmx-indicator { + opacity: 1; +} + @media not all and (hover: none) { body > header a:hover, body > footer a:hover { @@ -278,10 +296,20 @@ div.card a header { text-align: right; display: grid; background-color: var(--bg); - grid-template-columns: auto 1fr; + grid-template-columns: auto 1fr 1fr; border-top-left-radius: 10px; border-top-right-radius: 10px; - padding: 5px 8px; + align-items: center; + padding-inline: 10px; + gap: 10px; +} + +div.card a header > div { + margin-block: 5px; +} + +.card .btn-icon::after { + content: "⇨"; } div.card a > div { @@ -295,6 +323,20 @@ div.card article { padding: 0 10px; } +div.card .htmx-indicator { + opacity: 0; + transition: opacity 500ms ease-in; + color: var(--fg); +} + +div.card .htmx-request .htmx-indicator { + opacity: 1; +} + +div.card .htmx-request.htmx-indicator { + opacity: 1; +} + @media not all and (hover: none) { div.card a:hover header { background-color: var(--accent); @@ -304,6 +346,15 @@ div.card article { transform: scale(1.025); box-shadow: 0px 5px 10px 0px rgba(125, 125, 125, 0.5); } + + .card a:hover .btn-icon { + font-size: 24px; + font-weight: bold; + } + + .card a:hover .btn-icon::after { + content: "☞"; + } } nav { @@ -323,7 +374,8 @@ nav .button > div { padding: 5px 20px; } -nav .button .icon { +nav .button .icon, +.card .icon { margin-right: 8px; } @@ -336,6 +388,32 @@ nav .button.idle > div { transform: scale(0.85); } +nav .button .htmx-indicator { + display: none; + transition: opacity 500ms ease-in; + opacity: 0; + color: var(--fg); + padding-inline: 12px; +} + +nav .button .htmx-request .htmx-indicator { + display: inline; + opacity: 1; +} + +nav .button .htmx-request.htmx-indicator { + display: inline; + opacity: 1; +} + +nav .button .htmx-request.htmx-indicator ~ .button-text { + display: none; +} + +.card .btn-icon { + margin-block: auto; +} + @media not all and (hover: none) { nav .button.active:hover > div { background-color: var(--bg); diff --git a/templates/base.html b/templates/base.html index f4fa65b..e8eedff 100644 --- a/templates/base.html +++ b/templates/base.html @@ -48,13 +48,20 @@
- + > 🏠  plabayo.tech/{{ this.slug }}  
+
{% block content %}{% endblock %}