From 6cb34edfe992c37585dd65e82fa531a44e34c7ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20B=C3=B6hmer?= <jan.h.boehmer@gmx.de>
Date: Thu, 6 Feb 2020 19:41:15 +0100
Subject: [PATCH] Use popovers to show a bigger picture of the part image.

---
 assets/css/app.css               |  6 ------
 assets/ts_src/event_listeners.ts | 11 +++++++++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index b063ac71..d1dc0c53 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -358,12 +358,6 @@ btn-xs
     margin-right: auto;
 }
 
-.hoverpic:hover {
-    transform: scale(6);
-    background: white;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-}
-
 .darkmode--activated .hoverpic:hover {
     background: black;
 }
diff --git a/assets/ts_src/event_listeners.ts b/assets/ts_src/event_listeners.ts
index 7305d168..c2a53437 100644
--- a/assets/ts_src/event_listeners.ts
+++ b/assets/ts_src/event_listeners.ts
@@ -361,8 +361,15 @@ $(document).on("ajaxUI:reload ajaxUI:start", function () {
  * Load the higher resolution version of hover pictures.
  */
 $(document).on("ajaxUI:reload ajaxUI:start ajaxUI:dt_loaded", function () {
-    $(".hoverpic[data-thumbnail]").mouseenter(function() {
-        $(this).attr('src', $(this).data('thumbnail'));
+
+    $('.hoverpic[data-thumbnail]').popover({
+        html: true,
+        trigger: 'hover',
+        placement: 'right',
+        container: 'body',
+        content: function () {
+            return '<img class="img-fluid" src="' + $(this).data('thumbnail') + '" />';
+        }
     });
 });