introduce loading indicators and card click hints

plabayo · Aug 15, 2024 · b78178f · b78178f
1 parent e36e165
commit b78178f
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 9 deletions.
diff --git 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
@@ -48,13 +48,20 @@
     <body hx-boost="true">
         <header>
             <div>
-                <a href="/" title="Go to the homepage">
+                <a
+                    href="/"
+                    title="Go to the homepage"
+                    hx-indicator="#nav-spinner-home"
+                >
                     <span class="nuance icon">&gt;</span>
                     <span class="hover-icon">🏠</span>
                     <span>&nbsp;plabayo.tech/{{ this.slug }}</span>
                     <span class="cursor">&nbsp;</span>
                 </a>
             </div>
+            <div id="nav-spinner-home" class="htmx-indicator">
+                {% include "includes/bars.svg" %}
+            </div>
         </header>
         <div id="content">{% block content %}{% endblock %}</div>
         <footer>

diff --git a/templates/includes/bars.svg b/templates/includes/bars.svg
diff --git a/templates/includes/nav.html b/templates/includes/nav.html
@@ -1,9 +1,19 @@
 <nav>
     {% for page in ctx.pages %} {% match page.card %} {% when Some with (card)
     %}{% if this.slug != page.slug %}
-    <a class="button active" href="/{{ page.slug }}"
+    <a
+        class="button active"
+        href="/{{ page.slug }}"
+        title="Click to view the page: '{{ page.header }}'"
+        hx-indicator="#button-spinner-{{ page.slug }}"
         ><div class="{{ card.style }}">
-            <span class="icon">{{ card.icon }}</span> {{ card.button_title }}
+            <span id="button-spinner-{{ page.slug }}" class="htmx-indicator">
+                {% include "includes/bars.svg" %}
+            </span>
+            <span class="button-text">
+                <span class="icon">{{ card.icon }}</span> {{ card.button_title
+                }}
+            </span>
         </div>
     </a>
     {% else %}

diff --git a/templates/index.html b/templates/index.html
@@ -4,11 +4,24 @@
         {% for page in ctx.pages %} {% match page.card %} {% when Some with
         (card) %}
         <div class="card">
-            <a href="/{{ page.slug }}">
+            <a
+                href="/{{ page.slug }}"
+                title="Click to view the page: '{{ page.header }}'"
+                hx-indicator="#card-spinner-{{ page.slug }}"
+            >
                 <div class="{{ card.style }}">
                     <header>
-                        <span class="icon">{{ card.icon }}</span>{{ page.header
-                        }}
+                        <div>
+                            <span class="icon">{{ card.icon }}</span>{{
+                            page.header }}
+                        </div>
+                        <div
+                            id="card-spinner-{{ page.slug }}"
+                            class="htmx-indicator"
+                        >
+                            {% include "includes/bars.svg" %}
+                        </div>
+                        <div class="btn-icon"></div>
                     </header>
                     <article>{{ card.description_short|safe }}</article>
                 </div>