From 9f410a339e03e5d18a07732408e6d6ba62c9e07a Mon Sep 17 00:00:00 2001 From: Dominik Polakovics Date: Fri, 13 Dec 2024 00:04:56 +0100 Subject: [PATCH 1/2] fix: sticky nav --- .../Resources/Public/JavaScript/navigation.js | 19 ++--------- .../Public/Scss/components/_navigation.scss | 32 ++++++++++--------- 2 files changed, 20 insertions(+), 31 deletions(-) diff --git a/packages/base/Resources/Public/JavaScript/navigation.js b/packages/base/Resources/Public/JavaScript/navigation.js index 0aaa628..a986230 100644 --- a/packages/base/Resources/Public/JavaScript/navigation.js +++ b/packages/base/Resources/Public/JavaScript/navigation.js @@ -1,8 +1,6 @@ document.addEventListener('DOMContentLoaded', function () { const nav = document.getElementById('mainNav'); const toggle = document.getElementById('navToggle'); - const navLinks = document.getElementById('navLinks'); - let lastScrollTop = 0; // Toggle menu on mobile toggle.addEventListener('click', function () { @@ -10,19 +8,9 @@ document.addEventListener('DOMContentLoaded', function () { toggle.classList.toggle('active'); }); - // Sticky on scroll - window.addEventListener('scroll', function () { - const currentScroll = window.pageYOffset || document.documentElement.scrollTop; - if (currentScroll > 0) { - nav.classList.add('sticky'); - } else { - nav.classList.remove('sticky'); - } - lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; - }); - - // Optionally handle dropdowns on mobile (if desired) - // For example: + // No need to add or remove sticky class here since CSS handles position: sticky + // We simply rely on the CSS-based sticky behavior and reserved space via body padding. + const submenuParents = document.querySelectorAll('.nav-item.has-submenu'); submenuParents.forEach(parent => { parent.addEventListener('click', (e) => { @@ -31,7 +19,6 @@ document.addEventListener('DOMContentLoaded', function () { const subMenu = parent.querySelector('.sub-menu'); if (subMenu) { const isOpen = subMenu.style.display === 'block'; - // Close all open submenus first (optional) document.querySelectorAll('.sub-menu').forEach(sm => sm.style.display = 'none'); subMenu.style.display = isOpen ? 'none' : 'block'; } diff --git a/packages/base/Resources/Public/Scss/components/_navigation.scss b/packages/base/Resources/Public/Scss/components/_navigation.scss index 6886b9a..57e86a8 100644 --- a/packages/base/Resources/Public/Scss/components/_navigation.scss +++ b/packages/base/Resources/Public/Scss/components/_navigation.scss @@ -1,23 +1,26 @@ -.main-nav { - width: 100%; - background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat; - position: relative; - z-index: 1000; +// 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 - &.sticky { - position: fixed; - top: 0; - left: 0; - right: 0; - box-shadow: 0 2px 5px rgba(0,0,0,0.1); - } +header { + width: 100%; + height: $nav-height; + line-height: $nav-height; + background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat; + position: sticky; + top: 0; + z-index: 1000; +} + +.main-nav { .container { display: flex; align-items: center; justify-content: space-between; margin: 0 auto; - padding: 1rem; + height: 100%; + padding: 0 1rem; } .nav-logo { @@ -82,6 +85,7 @@ .nav-links { display: flex; list-style: none; + align-items: center; .nav-item { margin: 0 1rem; @@ -102,13 +106,11 @@ } } - // Responsive: show hamburger and collapse menu on smaller screens @media (max-width: $breakpoint-lg) { .nav-toggle { display: block; } - // Hide links by default on mobile and show only when toggled .nav-links { position: absolute; top: 100%; From 52e962ae83e72c3239ed030e8358c6ff6b1d6741 Mon Sep 17 00:00:00 2001 From: Dominik Polakovics Date: Fri, 13 Dec 2024 01:07:46 +0100 Subject: [PATCH 2/2] feat: add a textimage element, add news design, add a footer --- config/sites/default/config.yaml | 2 +- .../Sets/SitePackage/page.typoscript | 13 ++ .../Sets/SitePackage/setup.typoscript | 22 +++ .../TCA/Overrides/tt_content.php | 19 ++- .../textimage/assets/frontend.css | 55 +++++++ .../ContentElements/textimage/config.yaml | 19 +++ .../textimage/language/labels.xlf | 14 ++ .../textimage/templates/backend-preview.html | 26 ++++ .../textimage/templates/frontend.html | 29 ++++ .../Extensions/News/Layouts/Default.html | 9 ++ .../News/Partials/News/ItemFeatured.html | 13 ++ .../News/Partials/News/ItemGrid.html | 12 ++ .../News/Partials/News/ItemSide.html | 12 ++ .../Extensions/News/Templates/News/List.html | 55 +++++++ .../Private/Language/locallang_db.xlf | 8 +- .../Private/PageView/Layouts/Default.html | 32 ++-- .../Public/Scss/components/_footer.scss | 81 ++++++++++ .../Public/Scss/components/_news.scss | 144 ++++++++++++++++++ packages/base/Resources/Public/Scss/main.scss | 3 + 19 files changed, 546 insertions(+), 22 deletions(-) create mode 100644 packages/base/Configuration/Sets/SitePackage/page.typoscript create mode 100644 packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css create mode 100644 packages/base/ContentBlocks/ContentElements/textimage/config.yaml create mode 100644 packages/base/ContentBlocks/ContentElements/textimage/language/labels.xlf create mode 100644 packages/base/ContentBlocks/ContentElements/textimage/templates/backend-preview.html create mode 100644 packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html create mode 100644 packages/base/Resources/Private/Extensions/News/Layouts/Default.html create mode 100644 packages/base/Resources/Private/Extensions/News/Partials/News/ItemFeatured.html create mode 100644 packages/base/Resources/Private/Extensions/News/Partials/News/ItemGrid.html create mode 100644 packages/base/Resources/Private/Extensions/News/Partials/News/ItemSide.html create mode 100644 packages/base/Resources/Private/Extensions/News/Templates/News/List.html create mode 100644 packages/base/Resources/Public/Scss/components/_footer.scss create mode 100644 packages/base/Resources/Public/Scss/components/_news.scss diff --git a/config/sites/default/config.yaml b/config/sites/default/config.yaml index 18b5f37..240eb80 100644 --- a/config/sites/default/config.yaml +++ b/config/sites/default/config.yaml @@ -1,8 +1,8 @@ base: / dependencies: - georgringer/news - - cloonar-typo3/base - typo3/redirects + - cloonar-typo3/base languages: - title: German diff --git a/packages/base/Configuration/Sets/SitePackage/page.typoscript b/packages/base/Configuration/Sets/SitePackage/page.typoscript new file mode 100644 index 0000000..a579f5f --- /dev/null +++ b/packages/base/Configuration/Sets/SitePackage/page.typoscript @@ -0,0 +1,13 @@ +# Footer menu from a pid defined in constants: page.footerMenuPid +lib.footerMenu = HMENU +lib.footerMenu { + special = directory + special.value = {$page.footerMenuPid} + 1 = TMENU + 1 { + NO { + wrapItemAndSub =
  • |
    • + stdWrap.noTrimWrap = | | | + } + } +} diff --git a/packages/base/Configuration/Sets/SitePackage/setup.typoscript b/packages/base/Configuration/Sets/SitePackage/setup.typoscript index 5a93f26..35146e7 100644 --- a/packages/base/Configuration/Sets/SitePackage/setup.typoscript +++ b/packages/base/Configuration/Sets/SitePackage/setup.typoscript @@ -1 +1,23 @@ @import './TypoScript/' + +# Override tx_news templates +plugin.tx_news { + view { + templateRootPaths.100 = EXT:base/Resources/Private/Extensions/News/Templates/ + partialRootPaths.100 = EXT:base/Resources/Private/Extensions/News/Partials/ + } +} + +# Define footerMenu here +lib.footerMenu = HMENU +lib.footerMenu { + special = directory + special.value = {$page.footerMenuPid} + 1 = TMENU + 1 { + NO { + wrapItemAndSub =
  • |
    • + stdWrap.noTrimWrap = | | | + } + } +} diff --git a/packages/base/Configuration/TCA/Overrides/tt_content.php b/packages/base/Configuration/TCA/Overrides/tt_content.php index 834afe9..ee4eb4b 100644 --- a/packages/base/Configuration/TCA/Overrides/tt_content.php +++ b/packages/base/Configuration/TCA/Overrides/tt_content.php @@ -1,13 +1,12 @@ 'header, number1, label1, number2, label2, number3, label3, number4, label4' -// ]; - -// The above is optional if Content Blocks extension is in use and config.yaml fields are applied automatically. +// Force imageorient to only have items 25 and 26 +$GLOBALS['TCA']['tt_content']['columns']['imageorient']['config'] = [ + 'type' => 'select', + 'renderType' => 'selectSingle', + 'items' => [ + ['LLL:EXT:base/Resources/Private/Language/locallang_db.xlf:imageorient.25', 25], + ['LLL:EXT:base/Resources/Private/Language/locallang_db.xlf:imageorient.26', 26], + ], +]; diff --git a/packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css b/packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css new file mode 100644 index 0000000..ca9388e --- /dev/null +++ b/packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css @@ -0,0 +1,55 @@ +.frame-type-cloonar_textimage { + margin: 2rem 0; +} + +/* Mobile-first: column layout by default */ +.textimage-container { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.textimage-wrapper { + width: 100%; +} + +.textimage-header { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 1rem; +} + +.textimage-text { + font-size: 1rem; + line-height: 1.5; +} + +.textimage-image-wrapper { + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.textimage-image { + max-width: 100%; + height: auto; + border-radius: 0.5rem; +} + +/* Image positions: 25 = left, 26 = right + On larger screens, adjust the layout */ +@media (min-width: 768px) { + .textimage-container.image-pos-25 { + flex-direction: row; + } + + .textimage-container.image-pos-26 { + flex-direction: row-reverse; + } + + .textimage-wrapper, + .textimage-image-wrapper { + flex: 1 1 50%; + } +} diff --git a/packages/base/ContentBlocks/ContentElements/textimage/config.yaml b/packages/base/ContentBlocks/ContentElements/textimage/config.yaml new file mode 100644 index 0000000..6eae087 --- /dev/null +++ b/packages/base/ContentBlocks/ContentElements/textimage/config.yaml @@ -0,0 +1,19 @@ +name: cloonar/textimage +typeName: cloonar_textimage +group: default +prefixFields: true +prefixType: full +fields: + - identifier: header + useExistingField: true + - identifier: bodytext + type: Textarea + enableRichtext: true + useExistingField: true + - identifier: image + type: File + properties: + allowed: [jpg, jpeg, png, gif] + useExistingField: true + - identifier: imageorient + useExistingField: true diff --git a/packages/base/ContentBlocks/ContentElements/textimage/language/labels.xlf b/packages/base/ContentBlocks/ContentElements/textimage/language/labels.xlf new file mode 100644 index 0000000..caa4551 --- /dev/null +++ b/packages/base/ContentBlocks/ContentElements/textimage/language/labels.xlf @@ -0,0 +1,14 @@ + + + +
    + + + Text/Image Element + + + A text and image element with adjustable image position. + + + + diff --git a/packages/base/ContentBlocks/ContentElements/textimage/templates/backend-preview.html b/packages/base/ContentBlocks/ContentElements/textimage/templates/backend-preview.html new file mode 100644 index 0000000..9152d9c --- /dev/null +++ b/packages/base/ContentBlocks/ContentElements/textimage/templates/backend-preview.html @@ -0,0 +1,26 @@ + + + + + + + {data.header} + Text/Image Element + + + + + + + +

    Preview: {data.bodytext}

    +     + +

    No text available

    +     +     +     + diff --git a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html new file mode 100644 index 0000000..013b29f --- /dev/null +++ b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html @@ -0,0 +1,29 @@ + + + + + + +
    +
    + +

    {data.header}

    +     + +
    + {data.bodytext} +
    +     +
    +
    + + + + + +

    No image available

    +     +     +
    +
    +     diff --git a/packages/base/Resources/Private/Extensions/News/Layouts/Default.html b/packages/base/Resources/Private/Extensions/News/Layouts/Default.html new file mode 100644 index 0000000..b10389a --- /dev/null +++ b/packages/base/Resources/Private/Extensions/News/Layouts/Default.html @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/base/Resources/Private/Extensions/News/Partials/News/ItemFeatured.html b/packages/base/Resources/Private/Extensions/News/Partials/News/ItemFeatured.html new file mode 100644 index 0000000..6f84e94 --- /dev/null +++ b/packages/base/Resources/Private/Extensions/News/Partials/News/ItemFeatured.html @@ -0,0 +1,13 @@ +
    + + + +
    + + +
    {newsItem.firstCategory.title}
    +     +

    {newsItem.title}

    + +
    +
    diff --git a/packages/base/Resources/Private/Extensions/News/Partials/News/ItemGrid.html b/packages/base/Resources/Private/Extensions/News/Partials/News/ItemGrid.html new file mode 100644 index 0000000..3f621fa --- /dev/null +++ b/packages/base/Resources/Private/Extensions/News/Partials/News/ItemGrid.html @@ -0,0 +1,12 @@ +
    + + + +
    + +
    {newsItem.firstCategory.title}
    +     +
    {newsItem.title}
    + +
    +
    diff --git a/packages/base/Resources/Private/Extensions/News/Partials/News/ItemSide.html b/packages/base/Resources/Private/Extensions/News/Partials/News/ItemSide.html new file mode 100644 index 0000000..f327e23 --- /dev/null +++ b/packages/base/Resources/Private/Extensions/News/Partials/News/ItemSide.html @@ -0,0 +1,12 @@ +
    + + + +
    + +
    {newsItem.firstCategory.title}
    +     +

    {newsItem.title}

    + +
    +
    diff --git a/packages/base/Resources/Private/Extensions/News/Templates/News/List.html b/packages/base/Resources/Private/Extensions/News/Templates/News/List.html new file mode 100644 index 0000000..9e08d1c --- /dev/null +++ b/packages/base/Resources/Private/Extensions/News/Templates/News/List.html @@ -0,0 +1,55 @@ + + + + +
    + + +
    +
    + + + + + + + +
    +
    + + + + + + + +
    +
    +     + + + +
    + + + + + + + +
    +     + + + +
    + Alle anzeigen +
    +     +
    +     + +

    No news available.

    +     +     +     diff --git a/packages/base/Resources/Private/Language/locallang_db.xlf b/packages/base/Resources/Private/Language/locallang_db.xlf index 3a6225f..ce62dbc 100644 --- a/packages/base/Resources/Private/Language/locallang_db.xlf +++ b/packages/base/Resources/Private/Language/locallang_db.xlf @@ -1,11 +1,17 @@ - +
    Test test@test.at
    + + Image on left + + + Image on right +     diff --git a/packages/base/Resources/Private/PageView/Layouts/Default.html b/packages/base/Resources/Private/PageView/Layouts/Default.html index abe30d6..498f28c 100644 --- a/packages/base/Resources/Private/PageView/Layouts/Default.html +++ b/packages/base/Resources/Private/PageView/Layouts/Default.html @@ -8,14 +8,26 @@ -