Add teaserbox plus feature

contao-themes-net · Mar 25, 2024 · eb0615c · eb0615c
1 parent 158f1da
commit eb0615c
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 37 deletions.
diff --git a/contao/dca/tl_content.php b/contao/dca/tl_content.php
@@ -19,7 +19,7 @@
 $GLOBALS['TL_DCA']['tl_content']['palettes']['mateModal'] = '{type_legend},type;{modal_link_legend},mateModal_linkText,mateModal_linkClass;{modal_headline_legend},headline;{modal_text_legend},mateModal_text,mateModal_class;{template_legend:hide},mateModal_customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID;{invisible_legend:hide},invisible,start,stop';
 
 $GLOBALS['TL_DCA']['tl_content']['palettes']['__selector__'][] = 'mateTeaserBoxPlus';
-$GLOBALS['TL_DCA']['tl_content']['subpalettes']['mateTeaserBoxPlus'] = 'mateTeaserBoxPlus_text,mateTeaserBoxPlus_color,mateTeaserBoxPlus_bg,mateTeaserBoxPlus_size';
+$GLOBALS['TL_DCA']['tl_content']['subpalettes']['mateTeaserBoxPlus'] = 'mateTeaserBoxPlus_text,mateTeaserBoxPlus_color,mateTeaserBoxPlus_bg,mateTeaserBoxPlus_colorHover,mateTeaserBoxPlus_bgHover,mateTeaserBoxPlus_size';
 
 /**
  * Add fields to tl_content
@@ -204,29 +204,43 @@
 $GLOBALS['TL_DCA']['tl_content']['fields']['mateTeaserBoxPlus_bg'] = [
     'exclude' => true,
     'inputType' => 'text',
-    'eval' => ['tl_class'=>'w25'],
+    'eval' => ['tl_class'=>'w33'],
+    'sql' => "text NULL"
+];
+
+$GLOBALS['TL_DCA']['tl_content']['fields']['mateTeaserBoxPlus_bgHover'] = [
+    'exclude' => true,
+    'inputType' => 'text',
+    'eval' => ['tl_class'=>'w33'],
     'sql' => "text NULL"
 ];
 
 $GLOBALS['TL_DCA']['tl_content']['fields']['mateTeaserBoxPlus_text'] = [
     'exclude' => true,
     'inputType' => 'text',
-    'eval' => ['tl_class'=>'w25'],
+    'eval' => ['tl_class'=>'w33'],
     'sql' => "text NULL"
 ];
 
 $GLOBALS['TL_DCA']['tl_content']['fields']['mateTeaserBoxPlus_color'] = [
     'exclude' => true,
     'inputType' => 'text',
-    'eval' => ['tl_class'=>'w25'],
+    'eval' => ['tl_class'=>'w33'],
+    'sql' => "text NULL"
+];
+
+$GLOBALS['TL_DCA']['tl_content']['fields']['mateTeaserBoxPlus_colorHover'] = [
+    'exclude' => true,
+    'inputType' => 'text',
+    'eval' => ['tl_class'=>'w33'],
     'sql' => "text NULL"
 ];
 
 $GLOBALS['TL_DCA']['tl_content']['fields']['mateTeaserBoxPlus_size'] = [
     'exclude' => true,
     'inputType' => 'select',
     'options' => &$GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_size']['options'],
-    'eval' => ['chosen'=>true, 'tl_class'=>'w25'],
+    'eval' => ['chosen'=>true, 'tl_class'=>'w33'],
     'sql' => "varchar(64) NOT NULL default 'normal'"
 ];
 

diff --git a/contao/languages/de/tl_content.php b/contao/languages/de/tl_content.php
@@ -28,6 +28,8 @@
 $GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_text'] = ['Text', 'Text, der mittig und groß in dem Bereich angezeigt wird, wo eigentlich das Bild wäre.'];
 $GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_color'] = ['Textfarbe (optional)', 'Hier können Sie die Textfarbe ändern. Mögliche Werte sind z. B. #000, black, rgba(0,0,0) ...'];
 $GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_bg'] = ['Hintergrund (optional)', 'Hier können Sie die Hintergrundfarbe ändern. Möglich Werte sind z. B. #000, black, rgba(0,0,0) ...'];
+$GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_colorHover'] = ['Hover-Textfarbe (optional)', 'Hier können Sie die Hover-Textfarbe ändern. Mögliche Werte sind z. B. #000, black, rgba(0,0,0) ...'];
+$GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_bgHover'] = ['Hover-Hintergrund (optional)', 'Hier können Sie die Hover-Hintergrundfarbe ändern. Möglich Werte sind z. B. #000, black, rgba(0,0,0) ...'];
 $GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_size'] = ['Schriftgröße', 'Hier können Sie die Schriftgröße anpassen.'];
 $GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_size']['options']['verySmall'] = 'sehr klein';
 $GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_size']['options']['small'] = 'klein';

diff --git a/contao/languages/en/tl_content.php b/contao/languages/en/tl_content.php
@@ -28,6 +28,8 @@
 $GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_text'] = ['Text', 'Text that is displayed in the centre and large in the area where the image would actually be.'];
 $GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_color'] = ['Text colour (optional)', 'You can change the text colour here. Possible values are e.g. #000, black, rgba(0,0,0) ...'];
 $GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_bg'] = ['Background (optional)', 'You can change the background colour here. Possible values are e.g. #000, black, rgba(0,0,0) ...'];
+$GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_colorHover'] = ['Text colour on hover (optional)', 'You can change the text colour on hover here. Possible values are e.g. #000, black, rgba(0,0,0) ...'];
+$GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_bgHover'] = ['Background on hover (optional)', 'You can change the background colour on hover here. Possible values are e.g. #000, black, rgba(0,0,0) ...'];
 $GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_size'] = ['Font size', 'You can adjust the font size here.'];
 $GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_size']['options']['verySmall'] = 'very small';
 $GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_size']['options']['small'] = 'small';

diff --git a/contao/templates/elements/mate/ce_mate_teaserbox.html5 b/contao/templates/elements/mate/ce_mate_teaserbox.html5
@@ -2,35 +2,45 @@
 	<div class="inside hc-bg-grey-dark">
     <?php $this->block('content'); ?>
 
-      <?php if ($this->addImage && !$this->backgroundText): ?>
+    <?php if ($this->addImage && $this->mateTeaserBoxPlus): ?>
+      <div class="image">
+    <?php endif; ?>
+
+    <?php if ($this->addImage): ?>
+      <?php if($this->page != ""): ?><a href="<?php if(is_numeric($this->page)): ?>{{link_url::<?= $this->page ?>}}<?php else: ?><?= $this->page ?><?php endif; ?>" title="<?= $this->pageText ?>" <?= $this->target ?><?= $this->rel ?>><?php endif; ?>
+        <?php $this->insert('image', $this->arrData); ?>
+      <?php if($this->page != ""): ?></a><?php endif; ?>
+    <?php endif; ?>
+
+    <?php if ($this->mateTeaserBoxPlus): ?>
+      <div class="background-text <?= $this->backgroundTextClasses ?>">
         <?php if($this->page != ""): ?><a href="<?php if(is_numeric($this->page)): ?>{{link_url::<?= $this->page ?>}}<?php else: ?><?= $this->page ?><?php endif; ?>" title="<?= $this->pageText ?>" <?= $this->target ?><?= $this->rel ?>><?php endif; ?>
-          <?php $this->insert('image', $this->arrData); ?>
+          <span><?= $this->backgroundText ?></span>
         <?php if($this->page != ""): ?></a><?php endif; ?>
-      <?php endif; ?>
+      </div>
+    <?php endif; ?>
 
-      <?php if ($this->mateTeaserBoxPlus): ?>
-        <div class="background-text <?= $this->fontSize ?>">
-          <span><?= $this->backgroundText ?></span>
-        </div>
-      <?php endif; ?>
-
-      <?php if($this->subheadline): ?><div class="subheadline"><?= $this->subheadline ?></div><?php endif; ?>
-
-      <?php if ($this->headline): ?>
-        <<?= $this->hl ?>>
-          <?php if($this->page != ""): ?><a href="<?php if(is_numeric($this->page)): ?>{{link_url::<?= $this->page ?>}}<?php else: ?><?= $this->page ?><?php endif; ?>"><?php endif; ?>
-            <?= $this->headline ?>
-          <?php if($this->page != ""): ?></a><?php endif; ?>
-        </<?= $this->hl ?>>
-      <?php endif; ?>
-
-      <?= $this->text ?>
-
-      <?php if($this->pageText != ""): ?>
-        <div class="pageLink">
-          <a href="<?php if(is_numeric($this->page)): ?>{{link_url::<?= $this->page ?>}}<?php else: ?><?= $this->page ?><?php endif; ?>" class="hc-bg-white"><?= $this->pageText ?></a>
-        </div>
-      <?php endif; ?>
+    <?php if ($this->addImage && $this->mateTeaserBoxPlus): ?>
+      </div>
+    <?php endif; ?>
+
+    <?php if($this->subheadline): ?><div class="subheadline"><?= $this->subheadline ?></div><?php endif; ?>
+
+    <?php if ($this->headline): ?>
+      <<?= $this->hl ?>>
+        <?php if($this->page != ""): ?><a href="<?php if(is_numeric($this->page)): ?>{{link_url::<?= $this->page ?>}}<?php else: ?><?= $this->page ?><?php endif; ?>"><?php endif; ?>
+          <?= $this->headline ?>
+        <?php if($this->page != ""): ?></a><?php endif; ?>
+      </<?= $this->hl ?>>
+    <?php endif; ?>
+
+    <?= $this->text ?>
+
+    <?php if($this->pageText != ""): ?>
+      <div class="pageLink">
+        <a href="<?php if(is_numeric($this->page)): ?>{{link_url::<?= $this->page ?>}}<?php else: ?><?= $this->page ?><?php endif; ?>" class="hc-bg-white"><?= $this->pageText ?></a>
+      </div>
+    <?php endif; ?>
 
     <?php $this->endblock(); ?>
 	</div>

diff --git a/public/sass/style.scss b/public/sass/style.scss
@@ -2105,17 +2105,24 @@ nav .brand-logo {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 25px;
     font-size: 3rem;
     text-align: center;
     line-height: 1.2;
     font-weight: 700;
     cursor: default;
-    background: $button-floating-background;
-    color: $button-flat-color;
     position: relative;
     overflow: hidden;
 
+    a {
+      display: block;
+      width: 100%;
+      height: 100%;
+
+      &:hover span {
+        background: $button-floating-background-hover;
+      }
+    }
+
     span {
       position: absolute;
       top: 0;
@@ -2126,6 +2133,10 @@ nav .brand-logo {
       display: flex;
       align-items: center;
       justify-content: center;
+      padding: 25px;
+      background: $button-floating-background;
+      color: $button-flat-color;
+      transition: all .3s;
     }
 
     &.small {
@@ -2145,6 +2156,18 @@ nav .brand-logo {
     }
   }
 
+  .image {
+    position: relative;
+
+    .background-text {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+    }
+  }
+
   .pageLink {
     padding: 0 15px;
 

diff --git a/src/Mate/TeaserBox.php b/src/Mate/TeaserBox.php
@@ -111,18 +111,31 @@ protected function compile(): void
             $this->Template->backgroundText = $this->mateTeaserBoxPlus_text;
             $this->Template->fontSize = $this->mateTeaserBoxPlus_size;
 
+            $cssClasses = [];
+            $cssClasses[] = $this->mateTeaserBoxPlus_size;
+
+            $this->Template->backgroundTextClasses = implode(' ', $cssClasses);
+
             $styles = [];
 
             if ($this->mateTeaserBoxPlus_bg) {
-                $styles[] = 'background:'.$this->mateTeaserBoxPlus_bg.'';
+                $styles[] = 'background:'.$this->mateTeaserBoxPlus_bg;
             }
 
             if ($this->mateTeaserBoxPlus_color) {
-                $styles[] = 'color:'.$this->mateTeaserBoxPlus_color.'';
+                $styles[] = 'color:'.$this->mateTeaserBoxPlus_color;
             }
 
             if (0 < count($styles)) {
-                $GLOBALS['TL_BODY'][] = '<style>.mateTeaserBox'.$this->id.' .background-text { '.html_entity_decode(implode(';', $styles)).' }</style>';
+                $GLOBALS['TL_BODY'][] = '<style>.mateTeaserBox'.$this->id.' .background-text span { '.html_entity_decode(implode(';', $styles)).' }</style>';
+            }
+
+            if ($this->mateTeaserBoxPlus_bgHover) {
+                $GLOBALS['TL_BODY'][] = '<style>.mateTeaserBox'.$this->id.' .background-text a:hover span { background:'.html_entity_decode($this->mateTeaserBoxPlus_bgHover).'; }</style>';
+            }
+
+            if ($this->mateTeaserBoxPlus_colorHover) {
+                $GLOBALS['TL_BODY'][] = '<style>.mateTeaserBox'.$this->id.' .background-text a:hover span { color:'.html_entity_decode($this->mateTeaserBoxPlus_colorHover).'; }</style>';
             }
         }
     }