Remove 'Open full image' link; make entire image clickable; turn scre…

…enshots into flex box for better scaling. (#29)

pyproject.toml

@@ -3,7 +3,7 @@ name = "uw-webdriver-recorder"
 # This version string is typically managed by the CI workflow,
 # and is changed anytime `poetry version [new version]` is run.
 # Do not revert this manually.
-version = "5.0.0"
+version = "5.0.1"
 description = "A pytest plugin for recording screenshots of selenium interactions, with other convenient features too."
 authors = ["Tom Thorogood <[email protected]>"]
 license = "Apache Software License 3.0"

webdriver_recorder/templates/help.html

@@ -21,9 +21,9 @@ <h5>Test Summary</h5>
     <h5>Test Details</h5>
     <ul>
         <li>When test details are expanded, all screenshots are rendered as
-            thumbnails. Click on the 'Open full image' link to open the
-            image in a new tab; you can also now share image URLs.</li>
-        <li>Along with thumbnails, you will usually find "context" messages
+            thumbnails. Click on an image to open it in a new tab; you can also now
+            share image URLs for reports stored accessed through identity-artifact</li>
+        <li>Along with thumbnails, you will usually find captions
             that were set automatically, or by the test implementer, to help
             narrate the storyboard.</li>
         <li>Context messages that appear in

webdriver_recorder/templates/static/style.css

@@ -60,6 +60,21 @@ body {
   margin-bottom: 1em;
 }
 
+a.linked-card {
+  text-decoration: none;
+  color: #4b2e83; /* UW Purple */
+}
+
+a.linked-card:hover {
+  text-decoration: none;
+}
+
+a.linked-card:visited {
+  color: #4b2e83;
+  text-decoration: none;
+}
+
+
 .card.screenshot {
   max-width: 15rem;
   max-height: 25rem;

webdriver_recorder/templates/test_screenshots.html

@@ -1,19 +1,20 @@
-<div class="row row-cols-1 row-cols-md-4 g-4">
+<div class="d-flex flex-wrap justify-items-evenly">
     {% for png in result.pngs %}
-        <div class="col">
-            <div class="card text-center screenshot">
-                <img class="card-img-top img-thumbnail mx-auto"
-                     src="{{ png.url }}"
-                     alt='Screenshot #{{ loop.index }} for test "{{ result.test_name }}"'
-                >
-                <div class="card-title snap-caption {% if png.is_error %}text-danger{%
-                        endif %}">
-                    {{ png.caption or " " }}
+        <div class="p-2 flex-fill">
+            <a href="{{ png.url }}" target="_blank" class="linked-card">
+                <div class="card text-center screenshot">
+                    <img class="card-img-top img-thumbnail mx-auto"
+                         loading="lazy"
+                         src="{{ png.url }}"
+                         alt='[loading] Screenshot #{{ loop.index }} for test "{{ result .test_name }}"' >
+                    {% if png.caption %}
+                        <div
+                            class="card-footer snap-caption {% if png.is_error %}text-danger{% endif %}">
+                            {{ png.caption }}
+                        </div>
+                    {% endif %}
                 </div>
-                <div class="card-footer image-link">
-                    <a href="{{ png.url }}" target="_blank">Open full image</a>
-                </div>
-            </div>
+            </a>
         </div>
     {% endfor %}
 </div>