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

@@ -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 {

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>
+            <i aria-hidden="true" class="v-icon notranslate mdi mdi-open-in-new"></i>
-            In neuem Tab öffnen
         </span>
       </a>
     </div>

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))