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 (executable)
--- 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 (file)
--- 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 -------------------------------------------------*/