From 1b5c170ccaa37936dee1236a5dfb312aa4efadec Mon Sep 17 00:00:00 2001
From: Carl Richter <carl.richter@tyclipso.net>
Date: Mon, 2 Aug 2021 13:20:53 +0200
Subject: [PATCH] fix: refactor 'open-in-new' button, display image wrapper
 properly on images below content-size and in lists

---
 client/themes/tyclipso/scss/components/_image.scss    | 11 ++++++++++-
 .../html-tyclipso/components/ImageOverlay.js          |  7 ++++---
 server/modules/rendering/html-tyclipso/renderer.js    |  4 ++--
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/themes/tyclipso/scss/components/_image.scss b/client/themes/tyclipso/scss/components/_image.scss
index bb7f45a6..5087a243 100644
--- a/client/themes/tyclipso/scss/components/_image.scss
+++ b/client/themes/tyclipso/scss/components/_image.scss
@@ -1,12 +1,21 @@
 .ty-image-wrapper {
   @include elevation(2);
-  display: block;
+  display: inline-block;
   overflow: hidden;
   margin: 12px 0;
   border-radius: 4px;
   position: relative;
   text-decoration: none;
   color: currentColor;
+
+  img {
+    display: block;
+  }
+
+  ol &,
+  ul & {
+    margin: 0;
+  }
 }
 
 .ty-image-overlay {
diff --git a/server/modules/rendering/html-tyclipso/components/ImageOverlay.js b/server/modules/rendering/html-tyclipso/components/ImageOverlay.js
index 5e2af3b2..9833ff6f 100644
--- a/server/modules/rendering/html-tyclipso/components/ImageOverlay.js
+++ b/server/modules/rendering/html-tyclipso/components/ImageOverlay.js
@@ -5,10 +5,11 @@
 function ImageOverlay(src) {
   return `
     <div class="ty-image-overlay">
-      <a href="${src}" target="_blank" class="v-btn v-btn--contained v-size--default primary" aria-label="In neuem Tab öffnen">
+      <a href="${src}" target="_blank"
+         class="v-btn v-btn--icon v-btn--round v-size--default elevation-2 white grey--text text--darken-3"
+         aria-label="In neuem Tab öffnen">
         <span class="v-btn__content">
-            <i aria-hidden="true" class="v-icon v-icon--left notranslate mdi mdi-open-in-new"></i>
-            In neuem Tab öffnen
+            <i aria-hidden="true" class="v-icon notranslate mdi mdi-open-in-new"></i>
         </span>
       </a>
     </div>
diff --git a/server/modules/rendering/html-tyclipso/renderer.js b/server/modules/rendering/html-tyclipso/renderer.js
index 9a4b93de..0b5be05f 100644
--- a/server/modules/rendering/html-tyclipso/renderer.js
+++ b/server/modules/rendering/html-tyclipso/renderer.js
@@ -2,9 +2,9 @@ const ImageOverlay = require('./components/ImageOverlay')
 const AnchorCopyButton = require('./components/AnchorCopyButton')
 
 module.exports = {
-  init($, config) {
+  init($) {
     // wrap images
-    $('p > img').each((i, element) => {
+    $('p > img, ul img, ol img').each((i, element) => {
       const src = $(element).attr('src');
       $(element).wrap(`<div class="ty-image-wrapper"></div>`)
       $(element).parent().append(ImageOverlay(src))