Add teaserbox plus feature

contao-themes-net · Mar 22, 2024 · 158f1da · 158f1da
1 parent 2f9429e
commit 158f1da
Show file tree

Hide file tree

Showing 8 changed files with 188 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,10 @@ Types of changes
     Security in case of vulnerabilities.
 )
 
+## [3.4.0](https://github.com/contao-themes-net/mate-theme-bundle/tree/3.4.0) – 2024-xx-xx
+
+- [Added] Add teaserbox plus feature (use text with background instead of image)
+
 ## [3.3.2](https://github.com/contao-themes-net/mate-theme-bundle/tree/3.3.2) – 2024-03-15
 
 - [Fixed] Click on header search icon starts reload of start page ([#183](https://github.com/contao-themes-net/mate-theme-bundle/issues/183))

diff --git a/contao/dca/tl_content.php b/contao/dca/tl_content.php
@@ -8,7 +8,7 @@
  * Add palette to tl_content
  */
 
-$GLOBALS['TL_DCA']['tl_content']['palettes']['mateTeaserBox'] = '{type_legend},type,headline;{text_legend},text,mateTeaserbox_subHeadline;{image_legend},addImage;{mateTeaserBoxSettings},mateTeaserBox_page,mateTeaserBox_pageText,mateTeaserBox_class;{template_legend:hide},mateTeaserBox_customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID;{invisible_legend:hide},invisible,start,stop';
+$GLOBALS['TL_DCA']['tl_content']['palettes']['mateTeaserBox'] = '{type_legend},type,headline;{text_legend},text,mateTeaserbox_subHeadline;{image_legend},addImage;{mateTeaserBoxSettings},mateTeaserBox_page,mateTeaserBox_pageText,mateTeaserBox_class;{mateTeaserBoxPlus_legend},mateTeaserBoxPlus;{template_legend:hide},mateTeaserBox_customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID;{invisible_legend:hide},invisible,start,stop';
 
 $GLOBALS['TL_DCA']['tl_content']['palettes']['mateContentBox'] = '{type_legend},type,headline;{text_legend},text;{image_legend},addImage;{mateContentBoxSettings},mateContentBox_page,mateContentBox_pageText;{template_legend:hide},mateContentBox_customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID;{invisible_legend:hide},invisible,start,stop';
 
@@ -18,6 +18,9 @@
 
 $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';
+
 /**
  * Add fields to tl_content
  */
@@ -191,6 +194,42 @@
     'sql' => "text NULL"
 ];
 
+$GLOBALS['TL_DCA']['tl_content']['fields']['mateTeaserBoxPlus'] = [
+    'exclude' => true,
+    'inputType' => 'checkbox',
+    'eval' => ['tl_class'=>'w50 clr', 'submitOnChange'=>true],
+    'sql' => ['type' => 'boolean', 'default' => false]
+];
+
+$GLOBALS['TL_DCA']['tl_content']['fields']['mateTeaserBoxPlus_bg'] = [
+    'exclude' => true,
+    'inputType' => 'text',
+    'eval' => ['tl_class'=>'w25'],
+    'sql' => "text NULL"
+];
+
+$GLOBALS['TL_DCA']['tl_content']['fields']['mateTeaserBoxPlus_text'] = [
+    'exclude' => true,
+    'inputType' => 'text',
+    'eval' => ['tl_class'=>'w25'],
+    'sql' => "text NULL"
+];
+
+$GLOBALS['TL_DCA']['tl_content']['fields']['mateTeaserBoxPlus_color'] = [
+    'exclude' => true,
+    'inputType' => 'text',
+    'eval' => ['tl_class'=>'w25'],
+    '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'],
+    'sql' => "varchar(64) NOT NULL default 'normal'"
+];
+
 class tl_content_mate extends Backend {
     /**
      * Return all content element templates as array

diff --git a/contao/languages/de/tl_content.php b/contao/languages/de/tl_content.php
@@ -23,3 +23,14 @@
 $GLOBALS['TL_LANG']['tl_content']['modal_link_legend'] = 'Link-Einstellungen';
 $GLOBALS['TL_LANG']['tl_content']['modal_headline_legend'] = 'Überschrift des Modalen Dialog';
 $GLOBALS['TL_LANG']['tl_content']['modal_text_legend'] = 'Inhalt des Modalen Dialog';
+$GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_legend'] = 'Teaserbox Plus Einstellungen';
+$GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus'] = ['Text mit Hintergrund statt Bild anzeigen', 'An der Stelle des Bildes kann ein Text sowie eine Hintergrundfarbe definiert werden.'];
+$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_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';
+$GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_size']['options']['normal'] = 'normal';
+$GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_size']['options']['large'] = 'groß';
+$GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_size']['options']['veryLarge'] = 'sehr groß';
diff --git a/contao/languages/en/tl_content.php b/contao/languages/en/tl_content.php
@@ -23,3 +23,14 @@
 $GLOBALS['TL_LANG']['tl_content']['modal_link_legend'] = 'Link Settings';
 $GLOBALS['TL_LANG']['tl_content']['modal_headline_legend'] = 'ModalElement Headline';
 $GLOBALS['TL_LANG']['tl_content']['modal_text_legend'] = 'ModalElement Content';
+$GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_legend'] = 'Teaserbox plus settings';
+$GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus'] = ['Display text with background instead of image', 'A text and a background colour can be defined in place of the image.'];
+$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_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';
+$GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_size']['options']['normal'] = 'normal';
+$GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_size']['options']['large'] = 'large';
+$GLOBALS['TL_LANG']['tl_content']['mateTeaserBoxPlus_size']['options']['veryLarge'] = 'very large';
diff --git a/contao/templates/elements/mate/ce_mate_teaserbox.html5 b/contao/templates/elements/mate/ce_mate_teaserbox.html5
@@ -1,13 +1,19 @@
-<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
+<div class="<?= $this->class ?> mateTeaserBox<?= $this->id ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
 	<div class="inside hc-bg-grey-dark">
     <?php $this->block('content'); ?>
 
-      <?php if ($this->addImage): ?>
+      <?php if ($this->addImage && !$this->backgroundText): ?>
         <?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->fontSize ?>">
+          <span><?= $this->backgroundText ?></span>
+        </div>
+      <?php endif; ?>
+
       <?php if($this->subheadline): ?><div class="subheadline"><?= $this->subheadline ?></div><?php endif; ?>
 
       <?php if ($this->headline): ?>

diff --git a/public/sass/style.scss b/public/sass/style.scss
@@ -2093,13 +2093,58 @@ nav .brand-logo {
 }
 
 .ce_mateTeaserBox, .ce_ct_teaserBox {
-  margin-bottom: 30px;
-  margin-top: 30px;
+  margin-bottom: 15px;
+  margin-top: 15px;
 
   &.block {
     overflow: visible;
   }
 
+  .background-text {
+    aspect-ratio: 450 / 270;
+    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;
+
+    span {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding: 25px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &.small {
+      font-size: 2rem;
+    }
+
+    &.verySmall {
+      font-size: 1.5rem;
+    }
+
+    &.large {
+      font-size: 3.5rem;
+    }
+
+    &.veryLarge {
+      font-size: 4rem;
+    }
+  }
+
   .pageLink {
     padding: 0 15px;
 
@@ -4199,6 +4244,21 @@ div.klaro {
       }
     }
   }
+
+  /* Teaserbox */
+  .ce_mateTeaserBox, .ce_ct_teaserBox {
+    .background-text {
+      font-size: 2.5rem;
+
+      &.small {
+        font-size: 1.5rem;
+      }
+
+      &.large, &.veryLarge {
+        font-size: 2.5rem;
+      }
+    }
+  }
 }
 
 @media (max-width: 767px) {
@@ -4545,6 +4605,21 @@ div.klaro {
       }
     }
   }
+
+  /* Teaserbox */
+  .ce_mateTeaserBox, .ce_ct_teaserBox {
+    .background-text {
+      font-size: 1.5rem;
+
+      &.small, &.verySmall {
+        font-size: 1rem;
+      }
+
+      &.large, &.veryLarge {
+        font-size: 1.5rem;
+      }
+    }
+  }
 }
 
 @media #{$small-and-down} {
@@ -4780,4 +4855,19 @@ div.klaro {
       }
     }
   }
+
+  /* Teaserbox */
+  .ce_mateTeaserBox, .ce_ct_teaserBox {
+    .background-text {
+      font-size: 2.5rem;
+
+      &.small, &.verySmall {
+        font-size: 2rem;
+      }
+
+      &.large, &.veryLarge {
+        font-size: 2.5rem;
+      }
+    }
+  }
 }
diff --git a/src/Mate/TeaserBox.php b/src/Mate/TeaserBox.php
@@ -104,5 +104,26 @@ protected function compile(): void
             $this->Template->target = ' target="_blank"';
             $this->Template->rel = ' rel="noreferrer noopener"';
         }
+
+        // teaserbox plus
+        if ($this->mateTeaserBoxPlus) {
+            $this->Template->mateTeaserBoxPlus = $this->mateTeaserBoxPlus;
+            $this->Template->backgroundText = $this->mateTeaserBoxPlus_text;
+            $this->Template->fontSize = $this->mateTeaserBoxPlus_size;
+
+            $styles = [];
+
+            if ($this->mateTeaserBoxPlus_bg) {
+                $styles[] = 'background:'.$this->mateTeaserBoxPlus_bg.'';
+            }
+
+            if ($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>';
+            }
+        }
     }
 }
diff --git a/src/Module/MateThemeSetup.php b/src/Module/MateThemeSetup.php
@@ -23,7 +23,7 @@
 
 class MateThemeSetup extends BackendModule
 {
-    public const VERSION = '3.3.2';
+    public const VERSION = '3.4.0';
 
     protected $strTemplate = 'be_mateTheme_setup';