From a16588c220ab1950aa0b1df559c6f529de814b56 Mon Sep 17 00:00:00 2001 From: Dominik Polakovics Date: Sat, 14 Dec 2024 01:11:53 +0100 Subject: [PATCH] add icons, fix news linking --- .../Extensions/News/Partials/List/Item.html | 2 +- .../Extensions/News/Templates/News/List.html | 17 +++++++--- .../Resources/Public/Icons/angle-left.svg | 3 ++ .../Resources/Public/Icons/angle-right.svg | 3 ++ .../base/Resources/Public/Icons/skip-back.svg | 3 ++ .../Resources/Public/Icons/skip-forward.svg | 3 ++ .../Public/Scss/abstracts/_icons.scss | 18 +++++++++- .../Public/Scss/components/_news.scss | 33 +++++++++++++------ 8 files changed, 66 insertions(+), 16 deletions(-) create mode 100644 packages/base/Resources/Public/Icons/angle-left.svg create mode 100644 packages/base/Resources/Public/Icons/angle-right.svg create mode 100644 packages/base/Resources/Public/Icons/skip-back.svg create mode 100644 packages/base/Resources/Public/Icons/skip-forward.svg diff --git a/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html b/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html index 091f3aa..b8df56a 100644 --- a/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html +++ b/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html @@ -1,5 +1,5 @@
- + 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 50b86b3..cf09fbc 100644 --- a/packages/base/Resources/Private/Extensions/News/Templates/News/List.html +++ b/packages/base/Resources/Private/Extensions/News/Templates/News/List.html @@ -1,6 +1,6 @@ + xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers" + data-namespace-typo3-fluid="true"> + Alle Artikel +
@@ -52,7 +55,13 @@ - + + + + + Alle Artikel + +
diff --git a/packages/base/Resources/Public/Icons/angle-left.svg b/packages/base/Resources/Public/Icons/angle-left.svg new file mode 100644 index 0000000..4e24f33 --- /dev/null +++ b/packages/base/Resources/Public/Icons/angle-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/base/Resources/Public/Icons/angle-right.svg b/packages/base/Resources/Public/Icons/angle-right.svg new file mode 100644 index 0000000..b0b8cbb --- /dev/null +++ b/packages/base/Resources/Public/Icons/angle-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/base/Resources/Public/Icons/skip-back.svg b/packages/base/Resources/Public/Icons/skip-back.svg new file mode 100644 index 0000000..30a1631 --- /dev/null +++ b/packages/base/Resources/Public/Icons/skip-back.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/base/Resources/Public/Icons/skip-forward.svg b/packages/base/Resources/Public/Icons/skip-forward.svg new file mode 100644 index 0000000..f2b4ac2 --- /dev/null +++ b/packages/base/Resources/Public/Icons/skip-forward.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/base/Resources/Public/Scss/abstracts/_icons.scss b/packages/base/Resources/Public/Scss/abstracts/_icons.scss index b5d12ce..540f3b1 100644 --- a/packages/base/Resources/Public/Scss/abstracts/_icons.scss +++ b/packages/base/Resources/Public/Scss/abstracts/_icons.scss @@ -34,7 +34,6 @@ mask-image: url(../Icons/phone.svg); } - a[href*="instagram.com"], a[href*="tiktok.com"], a[href*="linkedin.com"], a[href*="twitter.com"], a[href*="x.com"] { position: relative; top: 3px; @@ -60,3 +59,20 @@ a[href*="linkedin.com"]::before { a[href*="x.com"]::before { mask-image: url(../Icons/x.svg); } + +/* Newly added icons */ +.ci-angle-right::before { + mask-image: url(../Icons/angle-right.svg); +} + +.ci-angle-left::before { + mask-image: url(../Icons/angle-left.svg); +} + +.ci-skip-forward::before { + mask-image: url(../Icons/skip-forward.svg); +} + +.ci-skip-back::before { + mask-image: url(../Icons/skip-back.svg); +} diff --git a/packages/base/Resources/Public/Scss/components/_news.scss b/packages/base/Resources/Public/Scss/components/_news.scss index fecccf1..f12a085 100644 --- a/packages/base/Resources/Public/Scss/components/_news.scss +++ b/packages/base/Resources/Public/Scss/components/_news.scss @@ -9,12 +9,6 @@ max-width: 100%; } - // @media (min-width: $breakpoint-md) { - // .news-list-item { - // grid-column: span 2; - // } - // } - @media (min-width: $breakpoint-lg) { .news-list-item { grid-column: span 2; @@ -75,10 +69,6 @@ } } } - - .previous a, .next a, .first a, .last a { - // these are also styled as circles - } } } @@ -128,3 +118,26 @@ } } } + +.header { + display: flex; + align-items: center; + justify-content: space-between; +} + +/* Show header button only on desktop */ +.header-btn { + display: none; + @media (min-width: $breakpoint-lg) { + display: inline-block; + } +} + +/* Show mobile button only below desktop breakpoint */ +.mobile-btn { + display: block; + margin-top: 1rem; + @media (min-width: $breakpoint-lg) { + display: none; + } +}