Skip to content

Commit 38a4933

Browse files
MoritzWeber0MoritzWeber0
committed
feat: Show image and other news on news pages
1 parent ee62d51 commit 38a4933

File tree

18 files changed

+167
-95
lines changed

18 files changed

+167
-95
lines changed

‎CONTRIBUTING.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ You can find the instructions in the official [Hugo documentation](https://gohug
2020

2121
Validate the installation by running `hugo version` in the command line.
2222

23-
In addition, we use some node packages, for example bootstrap as UI toolkit. To install the packages,
23+
In addition, we use some node packages, for example pagefind for the search. To install the packages,
2424
install the node package manager `npm` on your machine. Instructions are available in the [official documentation](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
2525

2626
Validate the installation by running `npm --version` in the command line.

‎assets/sass/_variables.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
$breakpoint-sm: 576px;
2+
$breakpoint-md: 768px;
3+
$breakpoint-lg: 992px;
4+
$breakpoint-xl: 1200px;
5+
16
body {
27
--bs-light-rgb: 219, 224, 229;
38
--pagefind-ui-scale: 1;

‎assets/sass/footer.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
justify-content: normal;
99
flex-wrap: wrap;
1010

11-
@include media-breakpoint-up(lg) {
11+
@media (min-width: #{$breakpoint-lg}) {
1212
justify-content: flex-end;
1313
}
1414
}
@@ -25,7 +25,7 @@
2525
color: var(--link-hovered);
2626
}
2727

28-
@include media-breakpoint-up(lg) {
28+
@media (min-width: #{$breakpoint-lg}) {
2929
margin-left: 1.6rem;
3030
margin-right: 0;
3131
}

‎assets/sass/form.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
margin-left: 0;
44
margin-right: 0;
55

6-
@include media-breakpoint-down(md) {
6+
@media (max-width: #{$breakpoint-md}) {
77
max-width: fit-content;
88
}
99

@@ -19,7 +19,7 @@
1919
border-color: var(--color-onLight);
2020
padding: 1.2rem;
2121

22-
@include media-breakpoint-up(md) {
22+
@media (min-width: #{$breakpoint-md}) {
2323
width: 50%;
2424
}
2525
}

‎assets/sass/navigation.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
display: flex;
1414
justify-content: space-between;
1515

16-
@include media-breakpoint-up(md) {
16+
@media (min-width: #{$breakpoint-md}) {
1717
justify-content: unset;
1818
}
1919
}
@@ -30,7 +30,7 @@
3030
display: flex;
3131
justify-content: flex-end;
3232

33-
@include media-breakpoint-up(md) {
33+
@media (min-width: #{$breakpoint-md}) {
3434
display: block;
3535
}
3636
}
@@ -39,15 +39,15 @@
3939
width: 100%;
4040
display: none;
4141

42-
@include media-breakpoint-up(md) {
42+
@media (min-width: #{$breakpoint-md}) {
4343
display: block;
4444
}
4545
}
4646

4747
.o-header__nav nav h2 {
4848
display: block;
4949

50-
@include media-breakpoint-up(md) {
50+
@media (min-width: #{$breakpoint-md}) {
5151
display: none;
5252
}
5353
}
@@ -152,7 +152,7 @@
152152
.o-header__item .o-header__item-countries {
153153
display: flex;
154154

155-
@include media-breakpoint-up(md) {
155+
@media (min-width: #{$breakpoint-md}) {
156156
display: none;
157157
z-index: 2;
158158
position: absolute;
@@ -172,21 +172,21 @@
172172
.o-nav__menu-button {
173173
display: flex;
174174

175-
@include media-breakpoint-up(md) {
175+
@media (min-width: #{$breakpoint-md}) {
176176
display: none;
177177
}
178178
}
179179

180180
.o-header__expand-button {
181181
display: none;
182182

183-
@include media-breakpoint-up(md) {
183+
@media (min-width: #{$breakpoint-md}) {
184184
display: flex;
185185
}
186186
}
187187

188188
.o-header__nav--open nav {
189-
@include media-breakpoint-down(md) {
189+
@media (max-width: #{$breakpoint-md}) {
190190
display: flex;
191191
flex-direction: column;
192192
align-items: flex-end;

‎assets/sass/sidemenu.scss

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
.sidemenu {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 1rem;
5+
flex-wrap: wrap;
6+
}
7+
18
.o-aside {
29
position: sticky;
310
top: 8rem;
@@ -10,21 +17,16 @@
1017

1118
z-index: 3;
1219

13-
@include media-breakpoint-up(lg) {
14-
margin-right: 1.2rem;
20+
@media (min-width: #{$breakpoint-lg}) {
1521
margin-bottom: 0;
1622
}
1723

18-
@include media-breakpoint-down(lg) {
24+
@media (max-width: #{$breakpoint-lg}) {
1925
display: none;
2026
}
2127

22-
.o-single__container {
23-
margin-bottom: 1.6rem;
24-
}
25-
2628
.o-aside__mobile-container--open {
27-
@include media-breakpoint-down(lg) {
29+
@media (max-width: #{$breakpoint-lg}) {
2830
display: block;
2931
}
3032
}
@@ -36,7 +38,7 @@
3638
padding-left: 0;
3739
}
3840

39-
.tableOfContents a {
41+
.sidemenu a {
4042
text-decoration-line: none;
4143
display: flex;
4244
align-items: center;
@@ -76,3 +78,13 @@
7678
background-color: var(--link-default);
7779
}
7880
}
81+
82+
.news-list {
83+
list-style-type: none;
84+
list-style-position: outside;
85+
padding-left: 0;
86+
}
87+
88+
.news-date {
89+
padding-left: 2.5rem;
90+
}

‎assets/sass/stage.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
display: flex;
3333
z-index: 2;
3434

35-
@include media-breakpoint-up(md) {
35+
@media (min-width: #{$breakpoint-md}) {
3636
width: 60%;
3737
max-width: 792px; // 1320*0.6
3838
}

‎assets/sass/styles.scss

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,14 +76,23 @@ main > .container {
7676
border-radius: var(--border-radius-l);
7777
padding: 2rem;
7878

79-
@include media-breakpoint-down(sm) {
79+
@media (max-width: #{$breakpoint-sm}) {
8080
margin-top: 1.6rem;
8181
}
8282
}
8383

8484
main > .container:is(.o-single--with-sidemenu) {
8585
background-color: unset;
8686
padding: 0;
87+
88+
display: grid;
89+
grid-template-columns: 1fr 2fr;
90+
gap: 1.5rem;
91+
92+
@media (max-width: #{$breakpoint-lg}) {
93+
display: flex;
94+
flex-direction: column;
95+
}
8796
}
8897

8998
img {
@@ -103,7 +112,9 @@ img {
103112

104113
.o-list__link-wrapper {
105114
display: flex;
115+
gap: 2rem;
106116
margin-bottom: 0;
117+
padding-left: 0;
107118

108119
li {
109120
list-style-type: none;
@@ -117,7 +128,7 @@ img {
117128
}
118129

119130
.container {
120-
@include media-breakpoint-down(sm) {
131+
@media (max-width: #{$breakpoint-sm}) {
121132
max-width: calc(100% - 3.6rem);
122133
}
123134
}
@@ -149,7 +160,7 @@ img {
149160
.o-single__header__title {
150161
display: flex;
151162
align-items: center;
152-
gap: 1rem; // Adjust spacing between the image and the heading
163+
gap: 1.5rem;
153164
}
154165

155166
.o-single__header__title h1 {
@@ -165,9 +176,14 @@ img {
165176
background-color: var(--bg-default);
166177
padding: 2rem;
167178
border-radius: var(--border-radius-l);
168-
margin-bottom: 2.4rem;
169179
}
170180

171181
.pagefind-highlight {
172182
padding: 0px;
173183
}
184+
185+
.content {
186+
display: flex;
187+
flex-direction: column;
188+
gap: 1.5rem;
189+
}

‎assets/sass/teaser.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
color: var(--link-special);
44

55
&:nth-child(-n+3) {
6-
@include media-breakpoint-down(lg) {
6+
@media (max-width: #{$breakpoint-lg}) {
77
margin-bottom: 2rem;
88
}
99
}
@@ -13,7 +13,7 @@
1313
margin-bottom: 2.4rem;
1414
display: flex;
1515

16-
@include media-breakpoint-down(md) {
16+
@media (max-width: #{$breakpoint-md}) {
1717
flex-flow: wrap;
1818
}
1919

‎i18n/de.yaml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ highlight:
1616
inofficial: Inoffizielle Information
1717
tip: Persönlicher Tipp
1818
news-headline: Was gibt's Neues?
19+
news-other: Weitere Neuigkeiten
1920
_operator__list_title: Betreiber mit FIP
2021
updateDate: Zuletzt aktualisiert
2122
related: Verwandte Seiten

‎i18n/en.yaml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ highlight:
1616
inofficial: Unofficial Information
1717
tip: Personal Tip
1818
news-headline: What's new?
19+
news-other: Other News
1920
_operator__list_title: Operators supporting FIP
2021
updateDate: Last updated
2122
related: Related Pages

‎layouts/_default/single.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,5 @@ <h2 data-pagefind-meta="title">{{ .Title }}</h2>
88
<div class="content" data-pagefind-body>
99
{{ .Content }}
1010
</div>
11-
12-
{{ partial "related.html" . }}
1311
</article>
1412
{{ end }}

‎layouts/country/single.html

Lines changed: 28 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,43 +3,39 @@
33

44
<div class="curtain" aria-hidden="true"></div>
55
<article class="container o-single o-single--with-sidemenu">
6-
<div class="row">
7-
<div class="col-12 col-lg-4 sidemenu">
8-
{{ partial "sidemenu.html" . }}
9-
</div>
10-
11-
<div class="col-12 col-lg-8" data-pagefind-body>
12-
<div class="o-single__container content_with_heading">
13-
<div class="o-single__header">
14-
<div class="o-single__header__title">
15-
{{ $object := replace .Path (printf "/%s/" .Page.Type) "" }}
16-
{{ $image := resources.Get (printf "images/flags/%s.webp" $object) }}
17-
<img data-pagefind-meta="image[src]" src="{{ $image.RelPermalink }}" alt="" />
18-
<h1 data-pagefind-meta="title">{{ .Title }}</h1>
19-
</div>
20-
{{ partial "updateDate.html" . }}
21-
</div>
6+
<div class="sidemenu">
7+
{{ partial "sidemenu.html" . }}
8+
</div>
229

23-
<div class="content" data-pagefind-weight="2">
24-
{{- with .Content -}}
25-
{{ . | replaceRE "(<h[2] id=\"([^\"]+)\".+)(</h[2]+>)" (print `<span class="a-anchorlink">${1}${3}<a href="#${2}" class="a-anchorlink__link" title="` (T "anchorLink.copy") `">` (partial "icon" "link") `</a></span>`) | safeHTML }}
26-
{{- end -}}
10+
<div class="content" data-pagefind-body>
11+
<div class="o-single__container content_with_heading">
12+
<div class="o-single__header">
13+
<div class="o-single__header__title">
14+
{{ $object := replace .Path (printf "/%s/" .Page.Type) "" }}
15+
{{ $image := resources.Get (printf "images/flags/%s.webp" $object) }}
16+
<img data-pagefind-meta="image[src]" src="{{ $image.RelPermalink }}" alt="" />
17+
<h1 data-pagefind-meta="title">{{ .Title }}</h1>
2718
</div>
19+
{{ partial "updateDate.html" . }}
2820
</div>
29-
<div class="o-single__container">
30-
<h3 id="related">{{ T "_operator__list_title"}} in {{ .Title }}</h3>
31-
<div class="row">
32-
<ul class="o-list__link-wrapper row">
33-
{{ range $related }}
34-
<li class="col-12 col-lg-3 col-sm-6">
35-
{{ partial "operator-list-item" . }}
36-
</li>
37-
{{ end }}
38-
</ul>
39-
</div>
21+
22+
<div data-pagefind-weight="2">
23+
{{- with .Content -}}
24+
{{ . | replaceRE "(<h[2] id=\"([^\"]+)\".+)(</h[2]+>)" (print `<span class="a-anchorlink">${1}${3}<a href="#${2}" class="a-anchorlink__link" title="` (T "anchorLink.copy") `">` (partial "icon" "link") `</a></span>`) | safeHTML }}
25+
{{- end -}}
4026
</div>
41-
{{ partial "image" (partial "helper/contentImage" .) }}
4227
</div>
28+
<div class="o-single__container">
29+
<h3 id="related">{{ T "_operator__list_title"}} in {{ .Title }}</h3>
30+
<ul class="o-list__link-wrapper">
31+
{{ range $related }}
32+
<li class="col-12 col-lg-3 col-sm-6">
33+
{{ partial "operator-list-item" . }}
34+
</li>
35+
{{ end }}
36+
</ul>
37+
</div>
38+
{{ partial "image" (partial "helper/contentImage" . ) }}
4339
</div>
4440
</article>
4541
{{ end }}

‎layouts/news/list.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{{ define "main" }}
2+
<div class="container o-list">
3+
<div class="row">
4+
<h2 data-pagefind-meta="title">{{ .Title }}</h2>
5+
{{ .Content }} {{ range .Pages }}
6+
{{ partial "teaser.html" (dict "listview" "true" "page" .) }}
7+
{{ end }}
8+
</div>
9+
</div>
10+
{{ end }}

0 commit comments

Comments
 (0)