Changeset 93d6345 in Klonkt for src/views/partials/footer.ejs

Timestamp:

06/17/2026 03:34:07 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

dbde7f8

Parents:

c3ad46d

Message:

Theme scrollbar + install button in the footer row (no longer a separate row)

• Slim, rounded theme scrollbar (scrollbar-width/color + ::-webkit-scrollbar) instead of the default chunky browser scrollbar; works on page + internal scrollers.
• "Install app" moved from its own row below the footer to the centre of the footer row (compact variant) → saves vertical space.

CSS cache-buster v8.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

File:

• src/views/partials/footer.ejs (modified) (3 diffs)

src/views/partials/footer.ejs

@@ -4 +4 @@
       <span>© <%= new Date().getFullYear() %> <%= (site && site.title) || 'Klonkt' %></span>
     </div>
+    <%# Install-app knop — in de footer-rij (midden), bespaart een hele extra rij.
+        JS detecteert platform & opent een modal met PWA-install-stappen. %>
+    <button type="button" class="install-app-btn install-app-btn--footer" data-pcms-install-app>
+      <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M5 20h14v-2H5v2zm7-18L5.33 9h3.84v6h5.66V9h3.84L12 2z" fill="currentColor"/></svg>
+      <span>Installeer app</span>
+    </button>
     <div class="footer-meta">
       <span>Klonkt Beta<%= (typeof appVersion !== 'undefined' && appVersion) ? ' v' + appVersion : '' %></span>
@@ -20 +26 @@
   </div>
 
-  <%# Install-app button. JS detects platform & opens a modal with PWA-install
-      steps (iOS share-sheet / Android Chrome / desktop). PWA only — geen APK. %>
-  <div class="site-footer-install container">
-    <button type="button" class="install-app-btn" data-pcms-install-app>
-      <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M5 20h14v-2H5v2zm7-18L5.33 9h3.84v6h5.66V9h3.84L12 2z" fill="currentColor"/></svg>
-      <span>Installeer app</span>
-    </button>
-  </div>
 </footer>
 
@@ -102 +100 @@
 }
 
-/* Install-app button container — sits centered under the footer-inner row */
-.site-footer-install {
-  display: flex;
-  justify-content: center;
-  margin-top: 1.25rem;
+/* Compacte install-knop ín de footer-rij (midden) i.p.v. een grote losse CTA
+   op een eigen regel — bespaart verticale ruimte. */
+.install-app-btn--footer {
+  flex: 0 0 auto;
+  width: auto !important;          /* override de mobile .install-app-btn width:100% */
+  padding: 0.42rem 0.95rem;
+  font-size: 0.82rem;
+  gap: 0.4rem;
+}
+.install-app-btn--footer svg { width: 15px; height: 15px; }
+/* Op smal scherm: laat de drie items netjes centreren als ze wrappen. */
+@media (max-width: 600px) {
+  .site-footer-inner { justify-content: center; text-align: center; }
 }
 </style>