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..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,25 +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,3 +63,19 @@ a[href*="linkedin.com"]::before { a[href*="x.com"]::before { mask-image: url(../Icons/x.svg); } + +.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; + } +}