From 52e962ae83e72c3239ed030e8358c6ff6b1d6741 Mon Sep 17 00:00:00 2001 From: Dominik Polakovics Date: Fri, 13 Dec 2024 01:07:46 +0100 Subject: [PATCH] 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 @@ -