diff --git a/contao/dca/tl_content.php b/contao/dca/tl_content.php index fc751bf..8b55633 100644 --- 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,21 +204,35 @@ $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" ]; @@ -226,7 +240,7 @@ '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 index a92fd94..4daf20e 100644 --- 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 index 53f3b75..bd3ae32 100644 --- 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 index b01658f..063bb2c 100644 --- a/contao/templates/elements/mate/ce_mate_teaserbox.html5 +++ b/contao/templates/elements/mate/ce_mate_teaserbox.html5 @@ -2,35 +2,45 @@
block('content'); ?> - addImage && !$this->backgroundText): ?> + addImage && $this->mateTeaserBoxPlus): ?> +
+ + + addImage): ?> + page != ""): ?>target ?>rel ?>> + insert('image', $this->arrData); ?> + page != ""): ?> + + + mateTeaserBoxPlus): ?> +
page != ""): ?>target ?>rel ?>> - insert('image', $this->arrData); ?> + backgroundText ?> page != ""): ?> - +
+ - mateTeaserBoxPlus): ?> -
- backgroundText ?> -
- - - subheadline): ?>
subheadline ?>
- - headline): ?> - <hl ?>> - page != ""): ?> - headline ?> - page != ""): ?> - hl ?>> - - - text ?> - - pageText != ""): ?> -
- pageText ?> -
- + addImage && $this->mateTeaserBoxPlus): ?> +
+ + + subheadline): ?>
subheadline ?>
+ + headline): ?> + <hl ?>> + page != ""): ?> + headline ?> + page != ""): ?> + hl ?>> + + + text ?> + + pageText != ""): ?> +
+ pageText ?> +
+ endblock(); ?>
diff --git a/public/sass/style.scss b/public/sass/style.scss index 89d4828..ccaea25 100644 --- 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 index 3a94415..4910e26 100644 --- 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'][] = ''; + $GLOBALS['TL_BODY'][] = ''; + } + + if ($this->mateTeaserBoxPlus_bgHover) { + $GLOBALS['TL_BODY'][] = ''; + } + + if ($this->mateTeaserBoxPlus_colorHover) { + $GLOBALS['TL_BODY'][] = ''; } } }