diff --git a/CHANGELOG.md b/CHANGELOG.md index fa76649..5572315 100644 --- 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 index e781adb..fc751bf 100644 --- 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 index 94db25a..a92fd94 100644 --- 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 index 99fecab..53f3b75 100644 --- 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 index 0c2a1a7..b01658f 100644 --- a/contao/templates/elements/mate/ce_mate_teaserbox.html5 +++ b/contao/templates/elements/mate/ce_mate_teaserbox.html5 @@ -1,13 +1,19 @@ -
cssID ?>style): ?> style="style ?>"> +
cssID ?>style): ?> style="style ?>">
block('content'); ?> - addImage): ?> + addImage && !$this->backgroundText): ?> page != ""): ?>target ?>rel ?>> insert('image', $this->arrData); ?> page != ""): ?> + mateTeaserBoxPlus): ?> +
+ backgroundText ?> +
+ + subheadline): ?>
subheadline ?>
headline): ?> diff --git a/public/sass/style.scss b/public/sass/style.scss index 5ad1b9f..89d4828 100644 --- 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 index 4e1c0b4..3a94415 100644 --- 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'][] = ''; + } + } } } diff --git a/src/Module/MateThemeSetup.php b/src/Module/MateThemeSetup.php index 5384f58..90d902c 100644 --- 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';