style: remove pinboard outer padding

contao/dca/tl_pinnwand.php

@@ -97,7 +97,7 @@ $GLOBALS['TL_DCA']['tl_pinnwand'] = [
             'exclude' => true,
             'search' => true,
             'inputType' => 'textarea',
-            'eval' => ['mandatory' => true, 'maxlength' => 3000, 'tl_class' => 'clr'],
+            'eval' => ['mandatory' => false, 'maxlength' => 3000, 'tl_class' => 'clr'],
             'sql' => 'text NULL',
         ],
         'link' => [

contao/templates/frontend/pinnwand.html.twig

@@ -5,20 +5,15 @@
 <section class="pinboard" data-pinboard>
   <div class="pinboard__surface" data-pinboard-surface>
     {% for entry in entries %}
+      {% set isImageOnly = entry.imageFigure and not entry.headline and not entry.text and not entry.link %}
       <article
-        class="pin-note{% if entry.highlighted %} is-highlighted{% endif %}"
+        class="pin-note{% if entry.highlighted %} is-highlighted{% endif %}{% if isImageOnly %} pin-note--image-only{% endif %}"
         data-pin-note
         data-highlighted="{{ entry.highlighted ? '1' : '0' }}"
         data-seed="{{ entry.id }}"
         aria-label="{{ entry.headline }}"
       >
         <div class="pin-note__inner" data-pin-note-inner>
-          {% if entry.imageFigure %}
-            <figure class="pin-note__image-wrap">
-              {% with {figure: entry.imageFigure} %}{{ block('figure_component') }}{% endwith %}
-            </figure>
-          {% endif %}
-
           {% if entry.headline %}
             <h3 class="pin-note__headline">{{ entry.headline }}</h3>
           {% endif %}
@@ -27,6 +22,12 @@
             <div class="pin-note__text">{{ entry.text|e|nl2br }}</div>
           {% endif %}
 
+          {% if entry.imageFigure %}
+            <figure class="pin-note__image-wrap">
+              {% with {figure: entry.imageFigure} %}{{ block('figure_component') }}{% endwith %}
+            </figure>
+          {% endif %}
+
           {% if entry.link %}
             <p class="pin-note__link-wrap">
               <a href="{{ entry.link }}" class="pin-note__link" target="_blank" rel="noopener">Mehr erfahren</a>

public/assets/pinboard.css

@@ -2,12 +2,15 @@
   width: 100%;
   max-width: 1400px;
   margin: 0 auto;
-  padding: 2em;
+  padding: 0;
   box-sizing: border-box;
 }
 
 .pinboard {
   --pin-gap: 1.25rem;
+  margin-top: -80px;
+  position: relative;
+  z-index: 1;
 }
 
 .pinboard__surface {
@@ -15,7 +18,7 @@
   min-height: 42rem;
   padding: 1.2rem;
   border: 30px solid #cba888;
-  border-radius: 1.2rem;
+  border-radius: 0.7rem;
   overflow: hidden;
   background:
     radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.18), transparent 42%),
@@ -56,6 +59,7 @@
   width: 18px;
   height: 18px;
   transform: translateX(-50%);
+  z-index: 1;
   border-radius: 50%;
   background: radial-gradient(circle at 35% 35%, #f2f2f2, #979797 68%, #707070 100%);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
@@ -73,6 +77,26 @@
   margin: 0 0 0.7rem;
 }
 
+.pin-note--image-only .pin-note__inner {
+  min-height: 0;
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.pin-note--image-only .pin-note__image-wrap {
+  margin: 0;
+}
+
+.pin-note--image-only .pin-note__image-wrap img,
+.pin-note--image-only .pin-note__image {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 0.3rem;
+  box-shadow: 0 10px 22px rgba(20, 10, 5, 0.34);
+}
+
 .pin-note__image {
   display: block;
   width: 100%;
@@ -80,6 +104,10 @@
   border-radius: 0.25rem;
 }
 
+figure.pin-note__image-wrap a:hover img {
+  transform: none;
+}
+
 .pin-note__headline {
   margin: 0 0 0.5rem;
   font-size: 1.1rem;