A site's screenshot is a thumbnail that opens larger on a click

The screenshot on a site's page took the full width of the page.  It is now a
small thumbnail, and clicking it opens it large in a dialog, with a link to
the full size image.  Escape or a click outside closes it.

Author: hackrange

app/web/static/app.css

@@ -1137,3 +1137,12 @@ th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
 .ext-fields label.check { display: flex; gap: .5rem; align-items: flex-start; margin: .5rem 0; }
 .ext-fields > label:not(.check) { display: block; margin: .5rem 0; }
 .modal-body > label.check { display: flex; gap: .5rem; align-items: flex-start; margin: .5rem 0; }
+/* The site's screenshot: small on the page, large on a click. */
+.shot-thumb-btn { background: none; border: 0; padding: 0; cursor: zoom-in;
+  display: inline-flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
+.shot-small { width: 360px; max-width: 100%; height: auto; display: block;
+  border: 1px solid var(--border); border-radius: 6px; }
+.shot-thumb-btn:hover .shot-small, .shot-thumb-btn:focus-visible .shot-small { border-color: var(--border-strong); }
+.modal.shot-modal { max-width: min(1320px, 95vw); }
+.shot-modal-body { overflow: auto; padding: .5rem; }
+.shot-large { width: 100%; height: auto; display: block; border-radius: 4px; }

app/web/templates/external_site.html

@@ -49,7 +49,10 @@
     <span class="faint small" style="font-weight:400">{{ tele.final_url or ('https://' ~ asset.host ~ '/') }}{% if asset.telemetry_at %}, {{ asset.telemetry_at | dt('%Y-%m-%d %H:%M') }}{% endif %}</span></div>
   <div class="card-body">
     {% if asset.screenshot == 'ok' %}
-    <a href="{{ base }}/external/{{ asset.id }}/screenshot.png" target="_blank" rel="noopener"><img class="shot-hero" alt="Screenshot of {{ asset.host }}" src="{{ base }}/external/{{ asset.id }}/screenshot.png?v={{ asset.telemetry_at.timestamp() | int if asset.telemetry_at else 0 }}"></a>
+    {% set shot_src = base ~ '/external/' ~ asset.id ~ '/screenshot.png?v=' ~ (asset.telemetry_at.timestamp() | int if asset.telemetry_at else 0) %}
+    <button type="button" class="shot-thumb-btn" data-modal="shot-modal" title="Show it larger">
+      <img class="shot-small" alt="Screenshot of {{ asset.host }}, click to enlarge" src="{{ shot_src }}">
+      <span class="small faint">Click to enlarge</span></button>
     {% else %}
     <div class="shot-hero-none">{{ {'waf':'A firewall block page answered, so the screenshot is left out.','blank':'The page rendered blank.','nobrowser':'No headless browser on this server.','blocked':'The browser brought back no image.'}.get(asset.screenshot, 'No screenshot yet.  Refresh telemetry to take one.') }}
       {% if tele.shot_detail %}<div class="small faint">{{ tele.shot_detail }}</div>{% endif %}</div>
@@ -251,6 +254,21 @@
   </div>
 </div>
 
+{% if asset.screenshot == 'ok' %}
+<div class="modal-backdrop" id="shot-modal" hidden>
+  <div class="modal shot-modal">
+    <div class="modal-head">{{ tele.final_url or asset.host }}
+      <button type="button" class="modal-close" data-close-modal aria-label="Close">&times;</button></div>
+    <div class="modal-body shot-modal-body">
+      <img class="shot-large" alt="Screenshot of {{ asset.host }}" src="{{ shot_src }}" loading="lazy">
+    </div>
+    <div class="modal-foot">
+      <a class="btn" href="{{ shot_src }}" target="_blank" rel="noopener">Open full size</a>
+      <button type="button" class="btn" data-close-modal>Close</button></div>
+  </div>
+</div>
+{% endif %}
+
 <div class="modal-backdrop" id="edit-modal" hidden>
   <div class="modal wide"><form method="post" action="{{ base }}/external/{{ asset.id }}/edit">
     <div class="modal-head">Edit {{ asset.host }} <button type="button" class="modal-close" data-close-modal>&times;</button></div>