From 89c60aee5a602ed5bfd73a9d5bcbbf9945aac44f Mon Sep 17 00:00:00 2001
From: Andinus <andinus@nand.sh>
Date: Sat, 11 Jun 2022 11:58:29 +0530
Subject: Scope css, improve image error handling, show progress bar

- Errors are shown if some images fail to load.
- Progress bar is shown while images are loading.
- .pack is called after all images have been loaded.
---
 templates/gallery.crotmp | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'templates/gallery.crotmp')

diff --git a/templates/gallery.crotmp b/templates/gallery.crotmp
index 6afef0a..6aead73 100644
--- a/templates/gallery.crotmp
+++ b/templates/gallery.crotmp
@@ -1,5 +1,13 @@
 <:use 'templates/base.crotmp'>
   <|page(.title)>
+    <div id="loading">
+      <label for="loading-progress">Loading Images:</label>
+      <progress id="loading-progress" max="100" value="0"></progress>
+    </div>
+    <div id="loading-error" class="alert" role="alert">
+      <span id="loading-error-text"></span>
+      <button id="loading-error-dismiss">Dismiss</button>
+    </div>
     <div id="gallery">
       <@gallery : $i>
         <?{ $i.<type> eq 'img' }>
-- 
cgit 1.4.1-2-gfad0