diff --git a/packages/base/Configuration/Sets/SitePackage/page.tsconfig b/packages/base/Configuration/Sets/SitePackage/page.tsconfig index b727dba..2c8665d 100644 --- a/packages/base/Configuration/Sets/SitePackage/page.tsconfig +++ b/packages/base/Configuration/Sets/SitePackage/page.tsconfig @@ -9,10 +9,11 @@ RTE { TCEFORM { tt_content { CType { - keepItems = cloonar_text,cloonar_textimage,cloonar_hero,form_formframework + keepItems = cloonar_text,cloonar_textimage,cloonar_hero,cloonar_cards,form_formframework } } } TCEMAIN { } + diff --git a/packages/base/ContentBlocks/ContentElements/card_container/config.yaml b/packages/base/ContentBlocks/ContentElements/card_container/config.yaml new file mode 100644 index 0000000..2fed8a0 --- /dev/null +++ b/packages/base/ContentBlocks/ContentElements/card_container/config.yaml @@ -0,0 +1,35 @@ +name: cloonar/cards +typeName: cloonar_cards +group: default +prefixFields: true +prefixType: full +iconIdentifier: 'content-card-container' +fields: + - + identifier: header + useExistingField: true + - + identifier: bodytext + type: Textarea + enableRichtext: false + useExistingField: true + - + identifier: cards + type: Collection + labelField: header + fields: + - + identifier: header + type: Text + - + identifier: bodytext + type: Textarea + enableRichtext: true + rows: 15 + - + identifier: images + type: File + extendedPalette: false + minitems: 1 + maxitems: 1 + allowed: common-image-types diff --git a/packages/base/ContentBlocks/ContentElements/card_container/language/labels.xlf b/packages/base/ContentBlocks/ContentElements/card_container/language/labels.xlf new file mode 100644 index 0000000..710ed32 --- /dev/null +++ b/packages/base/ContentBlocks/ContentElements/card_container/language/labels.xlf @@ -0,0 +1,14 @@ + + + +
+ + + Cards + + + Card Element will show a list of cards + + + + diff --git a/packages/base/ContentBlocks/ContentElements/card_container/templates/backend-preview.html b/packages/base/ContentBlocks/ContentElements/card_container/templates/backend-preview.html new file mode 100644 index 0000000..33c5693 --- /dev/null +++ b/packages/base/ContentBlocks/ContentElements/card_container/templates/backend-preview.html @@ -0,0 +1,12 @@ + + + + + + Card Container + +

Header: {data.header}

+ + + + diff --git a/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html new file mode 100644 index 0000000..69f30bf --- /dev/null +++ b/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html @@ -0,0 +1,55 @@ + + + + + + + +
+ +

{data.header}

+ + + +
+

{data.bodytext}

+
+ + + + +
+ +
+
+
+ + + + + +
+ No Image +
+ + +
+

{card.header}

+
+
+ +
+

{card.header}

+
+ {card.bodytext} +
+
+
+
+ +
+ +
+ + + diff --git a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html index 8262b9d..62f9c93 100644 --- a/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html +++ b/packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html @@ -3,7 +3,7 @@ -
+
@@ -48,9 +48,9 @@
+ class="absolute top-2/3 -translate-y-1/2 right-[-3rem] z-20"> + class="w-24 h-24 text-5xl bg-primary border-8 border-white text-white rounded-full inline-flex items-center justify-center hover:bg-opacity-90"> Scroll down @@ -80,13 +80,13 @@
- + - + - +
diff --git a/packages/base/ContentBlocks/ContentElements/text/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/text/templates/frontend.html index 7f400dd..0fbfe24 100644 --- a/packages/base/ContentBlocks/ContentElements/text/templates/frontend.html +++ b/packages/base/ContentBlocks/ContentElements/text/templates/frontend.html @@ -1,6 +1,6 @@ -
+

{data.header}

 diff --git a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html index d7e1238..a5e70b5 100644 --- a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html +++ b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html @@ -11,7 +11,7 @@ -
+
diff --git a/packages/base/Resources/Private/PageView/Layouts/Default.html b/packages/base/Resources/Private/PageView/Layouts/Default.html index 9aa5492..f35accb 100644 --- a/packages/base/Resources/Private/PageView/Layouts/Default.html +++ b/packages/base/Resources/Private/PageView/Layouts/Default.html @@ -45,13 +45,13 @@
- + - + - +
diff --git a/packages/base/Resources/Public/Icons/content-card-container.svg b/packages/base/Resources/Public/Icons/content-card-container.svg new file mode 100644 index 0000000..e69de29 diff --git a/packages/base/Resources/Public/Icons/content-card.svg b/packages/base/Resources/Public/Icons/content-card.svg new file mode 100644 index 0000000..e69de29 diff --git a/packages/base/Resources/Public/Scss/base/_container.scss b/packages/base/Resources/Public/Scss/base/_container.scss index 10162e7..98ac1e1 100644 --- a/packages/base/Resources/Public/Scss/base/_container.scss +++ b/packages/base/Resources/Public/Scss/base/_container.scss @@ -1,6 +1,7 @@ .container { margin: auto; /* padding: 3rem 1rem; */ + @apply px-4 py-6 md:py-12; @include respond($breakpoint-sm) { max-width: 540px; diff --git a/packages/base/Resources/Public/Scss/components/_card-container.scss b/packages/base/Resources/Public/Scss/components/_card-container.scss new file mode 100644 index 0000000..f052862 --- /dev/null +++ b/packages/base/Resources/Public/Scss/components/_card-container.scss @@ -0,0 +1,51 @@ +.card-container { + // Container styles if needed +} + +.perspective { + perspective: 1000px; +} + +.preserve-3d { + transform-style: preserve-3d; +} + +.rotate-y-180 { + transform: rotateX(180deg); +} + +.backface-hidden { + backface-visibility: hidden; + -webkit-backface-visibility: hidden; /* Safari */ +} + +// Ensure the back is initially hidden and rotated +.card-back { + transform: rotateX(180deg); +} + +// Flip on hover/focus-within the group +.group:hover .card-flip-inner, +.group:focus-within .card-flip-inner { + transform: rotateX(180deg); +} + +// Style the front overlay and title +.card-front { + .absolute { // The overlay div + transition: background-color 0.3s ease; + } + h3 { + transition: opacity 0.3s ease; + } +} + +// Fade out overlay slightly on hover to reveal image more +.group:hover .card-front .absolute { + background-color: rgba(0, 0, 0, 0.2); +} + +// Optional: Hide front title on hover if desired +// .group:hover .card-front h3 { +// opacity: 0; +// } diff --git a/packages/base/Resources/Public/Scss/components/_navigation.scss b/packages/base/Resources/Public/Scss/components/_navigation.scss index 1d0005a..0ff9235 100644 --- a/packages/base/Resources/Public/Scss/components/_navigation.scss +++ b/packages/base/Resources/Public/Scss/components/_navigation.scss @@ -1,153 +1,5 @@ -// Define a fixed height for the navigation and apply that as padding-top on the body -// so that when it becomes sticky, the content doesn't jump. -$nav-height: 60px; // Adjust as needed - -// Use an absolute path to the extension’s public folder to avoid rewriting of URLs by the build process. -// Ensure this path is correct for your TYPO3 installation. -// Typically: /typo3conf/ext//Resources/Public/Images/... - -body > header { - width: 100%; - line-height: $nav-height; - position: sticky; - top: 0; - z-index: 1000; -} - .main-nav { .container { - display: flex; - align-items: center; - margin: 0 auto; - height: 100%; padding: 0 1rem; } - - .nav-logo { - img { - display: block; - max-height: 50px; - height: auto; - width: auto; - } - } - - .nav-toggle { - background: none; - border: none; - cursor: pointer; - display: none; // hidden by default on desktop - position: relative; - width: 30px; - height: 30px; - - .nav-toggle-icon { - width: 100%; - height: 2px; - background: $primary-color; - display: block; - position: relative; - @include transition(all, 0.3s); - - &::before, - &::after { - content: ''; - width: 100%; - height: 2px; - background: $primary-color; - position: absolute; - left: 0; - @include transition(all, 0.3s); - } - - &::before { - top: -8px; - } - - &::after { - top: 8px; - } - } - - &.active .nav-toggle-icon { - background: transparent; - - &::before { - transform: rotate(45deg) translate(5px, 5px); - } - - &::after { - transform: rotate(-45deg) translate(5px, -5px); - } - } - } - - .nav-links { - display: flex; - list-style: none; - align-items: center; - margin: auto; - - font-family: 'Hajime Sans', sans-serif; - font-size: 1.75rem; - - a { - font-weight: 400; - } - } - - .nav-item { - margin: 0 1rem; - - .nav-link { - text-decoration: none; - color: $primary-color; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - font-size: 1rem; - @include transition(color); - - &:hover { - color: $brand-color; - } - } - } - - @media (max-width: $breakpoint-lg) { - .nav-toggle { - display: block; - margin-left: auto; // move toggle to the right on mobile - } - - .nav-links { - position: absolute; - top: 100%; - left: 0; - right: 0; - flex-direction: column; - max-height: 0; - overflow: hidden; - background: #fff; // Add white background for mobile dropdown - @include transition(max-height, 0.4s); - - .nav-item { - margin: 0; - padding: 1rem; - border-top: 1px solid rgba(0,0,0,0.1); - - &:first-child { - border-top: none; - } - - .nav-link { - display: block; - } - } - } - - &.open .nav-links { - max-height: 500px; // Adjust to fit all items - } - } } diff --git a/packages/base/Resources/Public/Scss/components/form.scss b/packages/base/Resources/Public/Scss/components/form.scss index 951a76b..bde2ba8 100644 --- a/packages/base/Resources/Public/Scss/components/form.scss +++ b/packages/base/Resources/Public/Scss/components/form.scss @@ -1,3 +1,3 @@ .frame-type-form_formframework { - @apply py-16; + @apply py-6 md:py-12; } diff --git a/packages/base/Resources/Public/Scss/main.scss b/packages/base/Resources/Public/Scss/main.scss index 25ff5b4..72b038c 100644 --- a/packages/base/Resources/Public/Scss/main.scss +++ b/packages/base/Resources/Public/Scss/main.scss @@ -9,7 +9,7 @@ @import 'abstracts/icons'; @import 'abstracts/fade-in'; @import 'base/base'; -/* @import 'components/navigation'; */ +@import 'components/navigation'; /* @import 'components/images'; */ /* @import 'components/news'; */ /* @import "components/news_detail"; */ @@ -17,5 +17,6 @@ @import 'components/text'; @import 'components/buttons'; @import 'components/form'; +@import 'components/card-container'; @import 'layouts/home-page'; diff --git a/packages/base/ext_localconf.php b/packages/base/ext_localconf.php index 942c964..b3713e8 100644 --- a/packages/base/ext_localconf.php +++ b/packages/base/ext_localconf.php @@ -4,3 +4,18 @@ defined('TYPO3') or die('Access denied.'); // Add default RTE configuration $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['base'] = 'EXT:base/Configuration/RTE/Default.yaml'; + +// Register Icon for Content Element "Card Container" +$iconRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Imaging\IconRegistry::class); +$iconRegistry->registerIcon( + 'content-card-container', // Icon Identifier + \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class, + ['source' => 'EXT:base/Resources/Public/Icons/content-card-container.svg'] +); + +// Register Icon for Card RecordType +$iconRegistry->registerIcon( + 'content-card', // Icon Identifier + \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class, + ['source' => 'EXT:base/Resources/Public/Icons/content-card.svg'] +);