From f4596f41e4af4dfccb287eaf993859d6fa18891e Mon Sep 17 00:00:00 2001 From: Dominik Polakovics Date: Fri, 13 Dec 2024 02:46:22 +0100 Subject: [PATCH] add initial news design --- .chatgpt_config.yaml | 1 + .../Sets/SitePackage/page.typoscript | 13 -- .../Sets/SitePackage/setup.typoscript | 9 + .../Extensions/News/Partials/List/Item.html | 12 ++ .../News/Partials/List/Pagination.html | 45 ++++ .../News/Partials/News/ItemFeatured.html | 13 -- .../News/Partials/News/ItemGrid.html | 12 -- .../News/Partials/News/ItemSide.html | 12 -- .../Extensions/News/Templates/News/List.html | 110 +++++----- .../Public/Scss/abstracts/_mixins.scss | 6 + .../Public/Scss/abstracts/_variables.scss | 4 + .../Public/Scss/components/_news.scss | 193 ++++++------------ 12 files changed, 205 insertions(+), 225 deletions(-) delete mode 100644 packages/base/Configuration/Sets/SitePackage/page.typoscript create mode 100644 packages/base/Resources/Private/Extensions/News/Partials/List/Item.html create mode 100644 packages/base/Resources/Private/Extensions/News/Partials/List/Pagination.html delete mode 100644 packages/base/Resources/Private/Extensions/News/Partials/News/ItemFeatured.html delete mode 100644 packages/base/Resources/Private/Extensions/News/Partials/News/ItemGrid.html delete mode 100644 packages/base/Resources/Private/Extensions/News/Partials/News/ItemSide.html diff --git a/.chatgpt_config.yaml b/.chatgpt_config.yaml index 8a33774..e786a25 100644 --- a/.chatgpt_config.yaml +++ b/.chatgpt_config.yaml @@ -1,3 +1,4 @@ +project_name: "lena-schilling-website" default_prompt_blocks: - "basic-prompt" - "typo3-development" diff --git a/packages/base/Configuration/Sets/SitePackage/page.typoscript b/packages/base/Configuration/Sets/SitePackage/page.typoscript deleted file mode 100644 index a579f5f..0000000 --- a/packages/base/Configuration/Sets/SitePackage/page.typoscript +++ /dev/null @@ -1,13 +0,0 @@ -# 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 35146e7..2ed780b 100644 --- a/packages/base/Configuration/Sets/SitePackage/setup.typoscript +++ b/packages/base/Configuration/Sets/SitePackage/setup.typoscript @@ -6,6 +6,15 @@ plugin.tx_news { templateRootPaths.100 = EXT:base/Resources/Private/Extensions/News/Templates/ partialRootPaths.100 = EXT:base/Resources/Private/Extensions/News/Partials/ } + + settings { + list { + pagination { + # Maximum number of pages shown in pagination + maxPagesToShow = 5 + } + } + } } # Define footerMenu here diff --git a/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html b/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html new file mode 100644 index 0000000..c0d9517 --- /dev/null +++ b/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html @@ -0,0 +1,12 @@ +
    + + + +
    + +
    {newsItem.firstCategory.title}
    +     +
    {newsItem.title}
    + +
    +
    diff --git a/packages/base/Resources/Private/Extensions/News/Partials/List/Pagination.html b/packages/base/Resources/Private/Extensions/News/Partials/List/Pagination.html new file mode 100644 index 0000000..efe872d --- /dev/null +++ b/packages/base/Resources/Private/Extensions/News/Partials/List/Pagination.html @@ -0,0 +1,45 @@ + diff --git a/packages/base/Resources/Private/Extensions/News/Partials/News/ItemFeatured.html b/packages/base/Resources/Private/Extensions/News/Partials/News/ItemFeatured.html deleted file mode 100644 index 6f84e94..0000000 --- a/packages/base/Resources/Private/Extensions/News/Partials/News/ItemFeatured.html +++ /dev/null @@ -1,13 +0,0 @@ -
    - - - -
    - - -
    {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 deleted file mode 100644 index 3f621fa..0000000 --- a/packages/base/Resources/Private/Extensions/News/Partials/News/ItemGrid.html +++ /dev/null @@ -1,12 +0,0 @@ -
    - - - -
    - -
    {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 deleted file mode 100644 index f327e23..0000000 --- a/packages/base/Resources/Private/Extensions/News/Partials/News/ItemSide.html +++ /dev/null @@ -1,12 +0,0 @@ -
    - - - -
    - -
    {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 index 9e08d1c..b7def99 100644 --- a/packages/base/Resources/Private/Extensions/News/Templates/News/List.html +++ b/packages/base/Resources/Private/Extensions/News/Templates/News/List.html @@ -1,55 +1,65 @@ + - - - -
    - - -
    -
    - - - - - - - -
    -
    - - - - - - - -
    -
    -     + - - -
    - - - - - - - -
    -     + - - -
    - Alle anzeigen -
    + + + + + + + + + + -
    -     - -

    No news available.

    -     -     + +     + + +
    +
    +

    {contentObjectData.header}

    +
    + + Alle Artikel + +
    + + + +
    + + + + + + + + + + + + + + + +
    +     + +
    + +
    +     +     + +     + diff --git a/packages/base/Resources/Public/Scss/abstracts/_mixins.scss b/packages/base/Resources/Public/Scss/abstracts/_mixins.scss index 31617f1..c3dc2d9 100644 --- a/packages/base/Resources/Public/Scss/abstracts/_mixins.scss +++ b/packages/base/Resources/Public/Scss/abstracts/_mixins.scss @@ -8,3 +8,9 @@ @content; } } + +@mixin media-breakpoint-up($breakpoint) { + @media (min-width: $breakpoint) { + @content; + } +} diff --git a/packages/base/Resources/Public/Scss/abstracts/_variables.scss b/packages/base/Resources/Public/Scss/abstracts/_variables.scss index c7fd041..129217d 100644 --- a/packages/base/Resources/Public/Scss/abstracts/_variables.scss +++ b/packages/base/Resources/Public/Scss/abstracts/_variables.scss @@ -9,6 +9,10 @@ $breakpoint-sm: 576px; $breakpoint-md: 768px; $breakpoint-lg: 992px; $breakpoint-xl: 1200px; +$sm: 576px; +$md: 768px; +$lg: 992px; +$xl: 1200px; // variables.scss // Breakpoint Variables diff --git a/packages/base/Resources/Public/Scss/components/_news.scss b/packages/base/Resources/Public/Scss/components/_news.scss index 6eac846..8c8e50f 100644 --- a/packages/base/Resources/Public/Scss/components/_news.scss +++ b/packages/base/Resources/Public/Scss/components/_news.scss @@ -1,144 +1,87 @@ -.news-list-container { - margin: 2rem 0; -} +// .frame-type-news_newsliststicky { +// .header { +// display:flex; +// margin-bottom: 2.5rem; +// +// .title { +// flex: 1; +// align-content: center; +// +// h2 { +// margin: 0; +// } +// } +// } +// } -/* Mobile-first: single column by default */ -/* All items in a single column */ -.news-featured-wrapper, -.news-side-items, -.news-list-grid { +.news-list-view { display: grid; - grid-template-columns: 1fr; + grid-template-columns: repeat(6, 1fr); gap: 1rem; -} + grid-auto-rows: auto; -.news-item-featured, -.news-item-side, -.news-item-grid { - position: relative; - border-radius: 0.5rem; - overflow: hidden; -} - -.news-item-featured-image, -.news-item-side-image, -.news-item-grid-image { - width: 100%; - height: auto; - display: block; -} - -.news-item-featured-content, -.news-item-side-content, -.news-item-grid-content { - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: 1rem; - background: #215A2A; - color: #fff; -} - -.news-item-category { - font-size: 0.9rem; - opacity: 0.9; -} - -.news-item-title { - font-size: 1.2rem; - font-weight: bold; - margin-top: 0.5rem; -} - -.news-item-link { - position: absolute; - top: 0; left: 0; right: 0; bottom: 0; -} - -.news-show-all { - margin-top: 2rem; - text-align: center; -} - -.btn-show-all { - display: inline-block; - background: #6B8E23; - color: #fff; - padding: 0.5rem 1rem; - border-radius: 0.5rem; - text-decoration: none; - font-weight: bold; -} - -/* Adjust the title size for side and grid items */ -.news-item-side-content .news-item-title, -.news-item-grid-content .news-item-title { - font-size: 1rem; -} - -@media (min-width: 768px) and (max-width: 991px) { - /* On medium screens: switch to a 3-column grid for the first four items. - First four items are equal size and placed in a 3x grid. */ - .news-featured-wrapper { - grid-template-columns: repeat(3, 1fr); + .news-list-item { + grid-column: span 6; + max-width: 100%; } - /* For the first four items, we treat them all equally: - The first item (featured) plus next three (side items) fill a 3-column grid equally. */ - .news-side-items { - display: contents; /* Merge side items into the same grid */ + @media (max-width: $breakpoint-md) { + .news-list-item { + grid-column: span 2; + } } - /* Additional items still in a 3-column grid */ - .news-list-grid { - grid-template-columns: repeat(3, 1fr); + @media (min-width: $breakpoint-xl) { + .news-list-item { + grid-column: span 2; + + &:first-of-type { + grid-column: 1 / span 4; + grid-row: span 2; + } + &:nth-of-type(2) { + grid-column: 5 / span 2; + grid-row: 1; + } + &:nth-of-type(3) { + grid-column: 5 / span 2; + grid-row: 2; + } + + } + } + + .f3-widget-paginator { + grid-column: span 6; } } -@media (min-width: 992px) { - /* On wide screens: special layout: - - First item bigger: takes 2 columns and 3 rows - - Next 3 items stacked in one column (3 rows) to the right of the big one - - We'll create a 3-column grid for the first 4 items: - The first item (featured) will occupy the first two columns and span 3 rows. - The next 3 side items will each occupy the third column in their own row. - */ - - .news-featured-wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-auto-rows: auto; - gap: 1rem; +.news-list-item { + .readmore { + font-weight: 700; } - /* The featured item (index 0) spans 2 columns and 3 rows */ - .news-featured-item { - grid-column: 1 / span 2; - grid-row: 1 / span 3; + img { + width: 100%; + height: auto; } - /* Side items should appear in the third column, one per row */ - .news-side-items { - display: contents; - } + a { + display: flex; + flex-direction: column; - .news-side-items .news-item-side:nth-of-type(1) { - grid-column: 3; - grid-row: 1; - } - .news-side-items .news-item-side:nth-of-type(2) { - grid-column: 3; - grid-row: 2; - } - .news-side-items .news-item-side:nth-of-type(3) { - grid-column: 3; - grid-row: 3; - } + .body { + position: relative; + padding: .5rem; + } - /* Additional items still in a 3-column grid below the first four */ - .news-list-grid { - grid-template-columns: repeat(3, 1fr); + time { + padding-left: .6rem; + color: var(--bs-gray-900); + } + + .readmore { + color: var(--bs-primary); + } } }