From a16588c220ab1950aa0b1df559c6f529de814b56 Mon Sep 17 00:00:00 2001 From: Dominik Polakovics Date: Sat, 14 Dec 2024 01:11:53 +0100 Subject: [PATCH 1/2] 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; + } +} From de23d5214ce03374a28a6f32ca073a14c2934110 Mon Sep 17 00:00:00 2001 From: Dominik Polakovics Date: Sat, 14 Dec 2024 01:20:10 +0100 Subject: [PATCH 2/2] fix: tiktok icon size --- .../Public/Scss/abstracts/_icons.scss | 43 ++++++++++--------- 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/packages/base/Resources/Public/Scss/abstracts/_icons.scss b/packages/base/Resources/Public/Scss/abstracts/_icons.scss index 540f3b1..0b14134 100644 --- a/packages/base/Resources/Public/Scss/abstracts/_icons.scss +++ b/packages/base/Resources/Public/Scss/abstracts/_icons.scss @@ -1,26 +1,41 @@ -.ci { +.ci, +a[href*="instagram.com"], +a[href*="tiktok.com"], +a[href*="linkedin.com"], +a[href*="twitter.com"], +a[href*="x.com"] { + display: inline-block; + vertical-align: middle; + line-height: 1; position: relative; } -.ci::before { - position: relative; - top: 3px; +.ci::before, +a[href*="instagram.com*"]::before, +a[href*="tiktok.com"]::before, +a[href*="linkedin.com"]::before, +a[href*="x.com"]::before { display: inline-block; content: ' '; width: 1em; height: 1em; - mask-size: 1em; + mask-size: contain; mask-repeat: no-repeat; - background-color: currentColor; mask-position: center; + background-color: currentColor; + vertical-align: middle; } .ci-instagram::before { mask-image: url(../Icons/instagram.svg); } + .ci-tiktok::before { mask-image: url(../Icons/tiktok.svg); + width: 0.9em; + height: 0.9em; } + .ci-linkedin::before { mask-image: url(../Icons/linkedin.svg); } @@ -34,24 +49,13 @@ 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; - display: inline-block; - content: ' '; - width: 1em; - height: 1em; - mask-size: 1em; - mask-repeat: no-repeat; - background-color: currentColor; - mask-position: center; -} - a[href*="instagram.com*"]::before { mask-image: url(../Icons/instagram.svg); } a[href*="tiktok.com"]::before { mask-image: url(../Icons/tiktok.svg); + width: 0.9em; + height: 0.9em; } a[href*="linkedin.com"]::before { mask-image: url(../Icons/linkedin.svg); @@ -60,7 +64,6 @@ 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); }