From bef200b4669f058ce43ec9c0a3583de7fac558e3 Mon Sep 17 00:00:00 2001 From: Andinus Date: Fri, 10 Jun 2022 23:13:14 +0530 Subject: Add alt tags to images, fix flash of unstyled content - FOUC: On firefox, maybe the '@import' rule caused this. Also tried out lightGallery.js for lightbox, it doesn't work with text & anyways, it's buggy with bricks.js & you have to request license key. --- lib/Crater/Gallery.rakumod | 8 +++++--- lib/Crater/Routes/Gallery.rakumod | 2 +- resources/css/style.css | 2 -- resources/js/gallery.js | 4 +++- templates/base.crotmp | 17 +++++++++-------- templates/gallery.crotmp | 36 +++++++++++++++--------------------- templates/login.crotmp | 21 ++++++++++----------- 7 files changed, 43 insertions(+), 47 deletions(-) diff --git a/lib/Crater/Gallery.rakumod b/lib/Crater/Gallery.rakumod index ea92c47..19b0d69 100644 --- a/lib/Crater/Gallery.rakumod +++ b/lib/Crater/Gallery.rakumod @@ -3,13 +3,16 @@ class Crater::Gallery { method list() { my @gallery; - for dir($!directory).sort(*.modified) { + for $!directory.dir.sort(*.modified) { if .IO.d { } elsif .IO.f { my Str $ext = .extension.lc; if $ext eq "jpg"|"png" { - push @gallery, %( :type, :src($_.relative($!directory)) ); + push @gallery, %( + :type, :src($_.relative($!directory)), + :alt($_) + ); } elsif $ext eq "0" { push @gallery, %( :type, :text($_.slurp) ); } elsif $ext eq "txt" { @@ -19,7 +22,6 @@ class Crater::Gallery { } } } - return @gallery; } } diff --git a/lib/Crater/Routes/Gallery.rakumod b/lib/Crater/Routes/Gallery.rakumod index 04c8d74..cf79cc6 100644 --- a/lib/Crater/Routes/Gallery.rakumod +++ b/lib/Crater/Routes/Gallery.rakumod @@ -19,7 +19,7 @@ sub gallery-routes( redirect '/login', :see-other; } get -> *@path { - static $gallery.directory, @path; + static $gallery.directory.add(".crater/thumbnails"), @path; } } } diff --git a/resources/css/style.css b/resources/css/style.css index 0c51bab..a380707 100644 --- a/resources/css/style.css +++ b/resources/css/style.css @@ -1,5 +1,3 @@ -@import 'colors.css'; - ::selection { background-color: var(--bg-hl-alt-intense); } diff --git a/resources/js/gallery.js b/resources/js/gallery.js index ae0fd90..bab4d1d 100644 --- a/resources/js/gallery.js +++ b/resources/js/gallery.js @@ -24,7 +24,9 @@ const instance = Bricks({ instance .on('pack', () => console.log('ALL grid items packed.')) .on('update', () => console.log('NEW grid items packed.')) - .on('resize', size => console.log('The grid has be re-packed to accommodate a new BREAKPOINT.', size)); + .on('resize', size => console.log( + 'The grid has be re-packed to accommodate a new BREAKPOINT.', size + )); // start it up, when the DOM is ready. note that if images are in the // grid, you may need to wait for document.readyState === 'complete'. diff --git a/templates/base.crotmp b/templates/base.crotmp index f200241..41c0420 100644 --- a/templates/base.crotmp +++ b/templates/base.crotmp @@ -1,14 +1,15 @@ <:macro page($title)> - - + + - - - <$title> - Crater - + + + <$title> - Crater + + - <:body> + <:body> - + diff --git a/templates/gallery.crotmp b/templates/gallery.crotmp index 25c55ea..6afef0a 100644 --- a/templates/gallery.crotmp +++ b/templates/gallery.crotmp @@ -1,24 +1,18 @@ <:use 'templates/base.crotmp'> -<|page(.title)> - + +
+ + -- cgit 1.4.1-2-gfad0