From: Mark Wooding <mdw@distorted.org.uk>
Date: Wed, 21 Jun 2023 09:55:23 +0000 (+0100)
Subject: mason/dhandler (.contact), static/tgal.css: Adaptive thumbnail sizes.
X-Git-Url: https://git.distorted.org.uk/~mdw/tgal/commitdiff_plain/84ffdea7357ad52e4ad8df5ad57b90c7c097252b

mason/dhandler (.contact), static/tgal.css: Adaptive thumbnail sizes.

Scale the thumbnails according to the window width.  I think this is the
most useful thing to do here.
---

diff --git a/mason/dhandler b/mason/dhandler
index 78f0f95..c6f0f33 100755
--- a/mason/dhandler
+++ b/mason/dhandler
@@ -83,11 +83,13 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
 	}
 	(my $nosl = $path) =~ s!/$!!;
 
-	my $size = "medthumb";
+	my @size = ("smallthumb", "medthumb", "bigthumb");
 	my %tn;
 	my %count;
-	for my $f (@$ff)
-	  { $tn{$f} = TrivGal::Image->new($path . $f->name)->scale($size); }
+	for my $f (@$ff) {
+	  my $img = TrivGal::Image->new($path . $f->name);
+	  for my $size (@size) { $tn{$f}{$size} = $img->scale($size); }
+	}
 	for my $d (@$dd) {
 	  my $p = join_paths $path, $d->name;
 	  my ($ddd, $fff, $iii);
@@ -101,7 +103,8 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
 	  DIR: for (;;) {
 	    if (defined $iii) {
 	      my $index = join_paths $p, $iii->name;
-	      $tn{$d} = TrivGal::Image->new($index)->scale($size);
+	      my $img = TrivGal::Image->new($index);
+	      for my $size (@size) { $tn{$d}{$size} = $img->scale($size); }
 	      last DIR;
 	    }
 	    if (!@$ddd) { $tn{$d} = undef; last DIR; }
@@ -129,25 +132,30 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
 %
 % if (@$dd) {
 <h2>Subfolders</h2>
+%   for my $size (@size) {
 <div class="gallery <% $size %>">
+%     for my $d (@$dd) {
   <& .thumbnail, target => $d->name, comment => $d->comment,
-		 tn => $tn{$d}, size => $size,
+		 tn => $tn{$d}{$size}, size => $size,
 		 caption =>
 		   $m->interp->apply_escapes($d->name, "h") .
 		   " [$count{$d}]" &>\
-%   }
+%     }
 </div>
+%   }
 % }
 %
 % if (@$ff) {
 <h2>Images</h2>
+%   for my $size (@size) {
 <div class="gallery <% $size %>">
-%   for my $f (@$ff) {
+%     for my $f (@$ff) {
   <& .thumbnail, target => $f->name, comment => $f->comment,
-		 tn => $tn{$f}, size => $size,
+		 tn => $tn{$f}{$size}, size => $size,
 		 caption => $m->interp->apply_escapes($f->name, "h") &>\
-%   }
+%     }
 </div>
+%   }
 % }
 %
 <div class=fill></div>
diff --git a/static/tgal.css b/static/tgal.css
index 73e3933..c4753e4 100644
--- a/static/tgal.css
+++ b/static/tgal.css
@@ -91,7 +91,6 @@ div.gallery {
 	flex-direction: row; flex-wrap: wrap;
 	align-items: start; justify-content: space-evenly;
 }
-div.gallery.medthumb { display: flex; }
 
 figure.thumb {
 	display: inline-block;
@@ -123,6 +122,7 @@ figure.thumb figcaption { display: block; }
 figcaption { text-align: center; }
 figcaption span.name { font-family: sans-serif; }
 figcaption span.comment { font-style: italic; margin-inline-start: 1em; }
+.smallthumb figcaption { font-size: 80%; }
 
 div.viewnav {
 	flex-grow: 1; flex-basis: 0;
@@ -169,9 +169,9 @@ div.thumbstrip {
 	flex-direction: row; align-self: center;
 }
 
-div.thumbstrip.smallthumb { display: flex; }
-div.thumbstrip.medthumb { display: none; }
-div.thumbstrip.bigthumb { display: none; }
+div.thumbstrip.smallthumb, div.gallery.smallthumb { display: flex; }
+div.thumbstrip.medthumb, div.gallery.medthumb { display: none; }
+div.thumbstrip.bigthumb, div.gallery.bigthumb { display: none; }
 @media (min-height: 1200px) and (max-height: 1599px) {
 	div.thumbstrip.smallthumb { display: none; }
 	div.thumbstrip.medthumb { display: flex; }
@@ -182,5 +182,15 @@ div.thumbstrip.bigthumb { display: none; }
 	div.thumbstrip.medthumb { display: none; }
 	div.thumbstrip.bigthumb { display: flex; }
 }
+@media (min-width: 760px) and (max-width: 1079px) {
+	div.gallery.smallthumb { display: none; }
+	div.gallery.medthumb { display: flex; }
+	div.gallery.bigthumb { display: none; }
+}
+@media (min-width: 1080px) {
+	div.gallery.smallthumb { display: none; }
+	div.gallery.medthumb { display: none; }
+	div.gallery.bigthumb { display: flex; }
+}
 
 /*----- That's all, folks -------------------------------------------------*/