Show thicker border for 'selected' thumbnail

IDR · Nov 21, 2024 · 2e5eceb · 2e5eceb
1 parent 5e8fc67
commit 2e5eceb
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/idr_gallery/static/idr_gallery/css/search_form_styles.css b/idr_gallery/static/idr_gallery/css/search_form_styles.css
@@ -148,7 +148,10 @@
     background-color: #ddd;
   }
   .studyThumb img:hover {
-    border: solid 4px #64a3e1;
+    border: solid 3px #64a3e1;
+  }
+  .studyThumb .selected img {
+    border: solid 5px #64a3e1;
   }
   .imgLinks {
     position: absolute;

diff --git a/idr_gallery/templates/idr_gallery/search.html b/idr_gallery/templates/idr_gallery/search.html
@@ -293,6 +293,9 @@ <h2 id="popover_imagename">Image Name</h2>
     event.preventDefault();
     document.getElementById("popover_kvp").innerHTML = `<div style='padding:10px'>Loading Attributes...</div>`;
     document.getElementById("kvp_popover").showPopover();
+    let $thumb = $(event.target);
+    $(".studyThumb a").removeClass("selected");
+    $thumb.parents(".studyThumb").find("a").addClass("selected");
 
     let image_id = event.target.dataset.image_id;
     let image_name = event.target.dataset.image_name;