Skip to content

Commit 6c42f4c

Browse files
MoritzWeber0MoritzWeber0
committed
feat: Add train category expander
1 parent 7021cdb commit 6c42f4c

File tree

5 files changed

+282
-47
lines changed

5 files changed

+282
-47
lines changed

‎assets/sass/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,4 @@
1717
@import "startpage.scss";
1818
@import "interactiveMap.scss";
1919
@import "dropdown.scss";
20+
@import "trainCategory.scss";

‎assets/sass/trainCategory.scss‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
.o-train-category__header {
2+
width: 100%;
3+
4+
&-content {
5+
display: flex;
6+
flex-direction: column;
7+
gap: 0.8rem;
8+
width: 100%;
9+
}
10+
}
11+
12+
.o-train-category__title-wrapper {
13+
width: 100%;
14+
}
15+
16+
.o-train-category__title {
17+
display: flex;
18+
align-items: center;
19+
gap: 0.5rem;
20+
font-weight: 600;
21+
font-size: 1.6rem;
22+
23+
&-text {
24+
flex: 1;
25+
}
26+
}
27+
28+
.o-train-category__tags {
29+
display: flex;
30+
flex-wrap: wrap;
31+
gap: 0.6rem;
32+
}
33+
34+
.o-train-category__tag {
35+
display: flex;
36+
align-items: center;
37+
gap: 0.4rem;
38+
padding: 0.4rem 0.8rem;
39+
border-radius: var(--border-radius-s);
40+
font-size: 1.2rem;
41+
font-weight: 500;
42+
white-space: nowrap;
43+
44+
&--accepted {
45+
background: #d4edda;
46+
color: #155724;
47+
border: 0.1rem solid #c3e6cb;
48+
}
49+
50+
&--rejected {
51+
background: #f8d7da;
52+
color: #721c24;
53+
border: 0.1rem solid #f5c6cb;
54+
}
55+
56+
&--required {
57+
background: #fff3cd;
58+
color: #856404;
59+
border: 0.1rem solid #ffeaa7;
60+
}
61+
62+
&--possible {
63+
background: #cce7ff;
64+
color: #004085;
65+
border: 0.1rem solid #b3d9ff;
66+
}
67+
68+
&--none {
69+
background: #e2e3e5;
70+
color: #383d41;
71+
border: 0.1rem solid #d6d8db;
72+
}
73+
74+
&--info {
75+
background: #e7f3ff;
76+
color: #0c5460;
77+
border: 0.1rem solid #bee5eb;
78+
}
79+
}
80+
81+
.o-train-category__content {
82+
margin-top: 1rem;
83+
}
84+
85+
.o-train-category__info {
86+
padding: 0.8rem;
87+
margin-bottom: 1rem;
88+
background: #e7f3ff;
89+
border: 0.1rem solid #bee5eb;
90+
border-radius: var(--border-radius-s);
91+
color: #0c5460;
92+
font-style: italic;
93+
}
94+
95+
.o-expander__summary--train-category {
96+
&:hover,
97+
&:focus {
98+
.o-train-category__title-text {
99+
text-decoration: underline;
100+
}
101+
}
102+
}
103+
104+
html[data-theme="dark"] {
105+
.o-train-category {
106+
&__info {
107+
background: #0c3544;
108+
border-color: #17a2b8;
109+
color: #bee5eb;
110+
}
111+
112+
&__tag {
113+
&--accepted {
114+
background: #2d5a3d;
115+
color: #a3d5ab;
116+
border-color: #4a7c59;
117+
}
118+
119+
&--rejected {
120+
background: #5a2d32;
121+
color: #f5a3ab;
122+
border-color: #7c4a52;
123+
}
124+
125+
&--required {
126+
background: #5a4d2d;
127+
color: #f5e6a3;
128+
border-color: #7c6a4a;
129+
}
130+
131+
&--possible {
132+
background: #2d4a5a;
133+
color: #a3d5f5;
134+
border-color: #4a6a7c;
135+
}
136+
137+
&--none {
138+
background: #3d3d3d;
139+
color: #d0d0d0;
140+
border-color: #5a5a5a;
141+
}
142+
143+
&--info {
144+
background: #0c3544;
145+
color: #bee5eb;
146+
border-color: #17a2b8;
147+
}
148+
}
149+
}
150+
}

‎content/operator/sncf/index.en.md‎

Lines changed: 53 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -37,78 +37,84 @@ Reservations are mandatory on all `TGV`, almost all `IC` trains, and some region
3737

3838
### Long-distance
3939

40-
{{% expander "Train à grande vitesse inOui (TGV inOui) ⚠️ℹ️" traincategory "long-distance" %}}
41-
**Description:** \
40+
{{% train-category
41+
title="Train à grande vitesse inOui (TGV inOui)"
42+
fip_accepted=true
43+
reservation_required=true
44+
info_available=true
45+
%}}
4246
The `TGV` inOui is SNCF's high-speed train, connecting many cities in France and international destinations (e.g. Munich, Frankfurt am Main, Barcelona, Luxembourg, Brussels, Zurich, Milan). [Route overview](https://www.sncf-connect.com/assets/media/2021-05/2014_axes-tgv_0.pdf). Each seat number exists twice in the carriage; the reserved seat is the one with the illuminated number.
4347

44-
ℹ️ SNCF also operates low-cost `TGV` trains under the name OuiGo, which are not valid with FIP.
48+
{{% highlight inofficial %}}
49+
SNCF also operates low-cost `TGV` trains under the name OuiGo, which are not valid with FIP.
50+
{{% /highlight %}}
51+
52+
{{% highlight important %}}
53+
Special conditions apply for international connections, see International TGV inOui / ICE trains section below.
54+
{{% /highlight %}}
4555

46-
⚠️ Special conditions apply for international connections, see [International TGV inOui / ICE trains](#international-tgv-inoui--ice-trains). \
47-
**Reservation possible:** yes \
48-
**Reservation required:** yes ⚠️ \
4956
**Reservation cost:** \
5057
Prices differ between peak and off-peak trains. Off-peak: €1.70 (1st/2nd class); peak: €15 (1st class), €10 (2nd class). The classification is not publicly available.
51-
{{% /expander %}}
58+
{{% /train-category %}}
5259

53-
{{% expander "Train à grande vitesse OuiGo (TGV OuiGo) / OuiGo Train Classique ⛔⚠️ℹ️" traincategory "long-distance" %}}
54-
**Description:** \
60+
{{% train-category
61+
title="Train à grande vitesse OuiGo (TGV OuiGo) / OuiGo Train Classique"
62+
fip_accepted=false
63+
reservation_required=true
64+
%}}
5565
The `TGV` OuiGo is SNCF's low-cost high-speed train, serving many cities in France and some international destinations.
66+
{{% /train-category %}}
5667

57-
ℹ️ SNCF also operates `TGV` trains under the inOui brand, which are valid with FIP. \
58-
**Reservation possible:** yes \
59-
**Reservation required:** yes ⚠️ \
60-
**FIP:** ⛔ FIP not accepted
61-
{{% /expander %}}
62-
63-
{{% expander "Intercity-Express (ICE) ⚠️" traincategory "long-distance" %}}
64-
**Description:** \
68+
{{% train-category
69+
title="Intercity-Express (ICE)"
70+
fip_accepted=true
71+
reservation_required=true
72+
%}}
6573
International high-speed trains operated by SNCF in cooperation with Deutsche Bahn, running between France (Paris Est, Strasbourg) and Germany (Karlsruhe, Mannheim, Frankfurt am Main, Stuttgart, Munich).
6674

67-
⚠️ Special conditions apply for international connections, see [International TGV inOui / ICE trains](#international-tgv-inoui--ice-trains). \
68-
**Reservation possible:** yes \
69-
**Reservation required:** yes ⚠️ \
7075
**Reservation cost:** \
7176
Prices differ between peak and off-peak trains. Off-peak: €1.70 (1st/2nd class); peak: €15 (1st class), €10 (2nd class). The classification is not publicly available.
72-
{{% /expander %}}
77+
{{% /train-category %}}
7378

74-
{{% expander "Intercité (IC) ⚠️" traincategory "long-distance" %}}
75-
**Description:** \
79+
{{% train-category
80+
title="Intercité (IC)"
81+
fip_accepted=true
82+
reservation_required=true
83+
%}}
7684
Intercity trains operated by SNCF, connecting various cities in France, mostly requiring reservations.
7785

78-
SNCF does not provide public information on which `IC` trains require reservations. If in doubt, check with SNCF or purchase a reservation. \
79-
**Reservation possible:** yes \
80-
**Reservation required:** mostly ⚠️ \
86+
SNCF does not provide public information on which `IC` trains require reservations. If in doubt, check with SNCF or purchase a reservation.
87+
8188
**Reservation cost:** \
8289
Prices differ between peak and off-peak trains. Off-peak: €1.70 (1st/2nd class); peak: €15 (1st class), €10 (2nd class). The classification is not publicly available.
83-
{{% /expander %}}
90+
{{% /train-category %}}
91+
92+
{{% train-category
93+
title="Intercité de nuit"
94+
fip_accepted=true
95+
reservation_required=true
96+
%}}
97+
SNCF night trains within France. International Nightjet connections ended in December 2025.
8498

85-
{{% expander "Intercité de nuit ⚠️" traincategory "long-distance" %}}
86-
**Description:** \
87-
SNCF night trains within France. International Nightjet connections ended in December 2025. \
88-
**Reservation possible:** yes \
89-
**Reservation required:** yes ⚠️ \
9099
**Reservation cost:** depends on route and occupancy
91-
{{% /expander %}}
100+
{{% /train-category %}}
92101

93102
### Regional
94103

95-
{{% expander "Train express régional (TER) ⚠️ℹ️" traincategory "regional" %}}
96-
**Description:** \
104+
{{% train-category
105+
title="Train express régional (TER)"
106+
fip_accepted=true
107+
reservation_possible=true
108+
%}}
97109
`TER` is SNCF's regional train, connecting various cities in France.
110+
{{% /train-category %}}
98111

99-
ℹ️ On the Marseille – Toulon – Nice route, FIP is not valid as `TER` trains are operated by Transdev. \
100-
**Reservation possible:** sometimes \
101-
**Reservation required:** sometimes ⚠️ \
102-
Some lines from Paris require reservations, see [Reservation requirement in regional trains](#reservation-requirement-in-regional-trains)
103-
{{% /expander %}}
104-
105-
{{% expander "Réseau Express Régional (RER) ⚠️" traincategory "regional" %}}
106-
**Description:** \
112+
{{% train-category
113+
title="Réseau Express Régional (RER)"
114+
fip_accepted=true
115+
%}}
107116
RER is a suburban train operated by SNCF in Île de France (Greater Paris) and surrounding cities.
108-
109-
⚠️ FIP is only valid on certain RER lines, see [Trains in Greater Paris](#trains-in-greater-paris) \
110-
**Reservation possible:** no
111-
{{% /expander %}}
117+
{{% /train-category %}}
112118

113119
## Ticket and Reservation Purchase
114120

‎layouts/partials/train-category.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<summary class="o-expander__summary o-expander__summary--train-category">
2+
<div class="o-train-category__header">
3+
<div class="o-train-category__header-content">
4+
<div class="o-train-category__title-wrapper">
5+
<div class="o-train-category__title">
6+
{{- partial "icon" "train" -}}
7+
<span class="o-train-category__title-text">{{- .title -}}</span>
8+
</div>
9+
</div>
10+
<div class="o-train-category__tags">
11+
{{- if eq .fip_accepted true -}}
12+
<span class="o-train-category__tag o-train-category__tag--accepted">
13+
{{ partial "icon" "check_circle" }}
14+
FIP Accepted
15+
</span>
16+
{{- else -}}
17+
<span class="o-train-category__tag o-train-category__tag--rejected">
18+
{{ partial "icon" "dangerous" }}
19+
FIP Not Accepted
20+
</span>
21+
{{- end -}}
22+
23+
{{- if eq .reservation_required true -}}
24+
<span class="o-train-category__tag o-train-category__tag--required">
25+
{{ partial "icon" "calendar_month" }}
26+
Reservation Required
27+
</span>
28+
{{- else if eq .reservation_possible true -}}
29+
<span class="o-train-category__tag o-train-category__tag--possible">
30+
{{ partial "icon" "free_cancellation" }}
31+
Reservation Possible
32+
</span>
33+
{{- else -}}
34+
<span class="o-train-category__tag o-train-category__tag--none">
35+
{{ partial "icon" "close" }}
36+
No Reservation Possible
37+
</span>
38+
{{- end -}}
39+
40+
{{- if .info_available -}}
41+
<span class="o-train-category__tag o-train-category__tag--info">
42+
{{ partial "icon" "info" }}
43+
Information Available
44+
</span>
45+
{{- end -}}
46+
</div>
47+
</div>
48+
</div>
49+
{{- partial "icon" "keyboard_arrow_down" -}}
50+
</summary>
51+
<hr aria-hidden="true" />
52+
<div class="o-expander__content">
53+
{{- if .content -}}
54+
<div class="o-train-category__content">
55+
{{- .content -}}
56+
</div>
57+
{{- end -}}
58+
{{- if not (eq .fip_accepted true) -}}
59+
<span>FIP is not accepted for this train category!</span>
60+
{{- end -}}
61+
</div>

‎layouts/shortcodes/train-category.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{{- $data := dict
2+
"title" (.Get "title")
3+
"fip_accepted" (default true (.Get "fip_accepted"))
4+
"reservation_required" (default false (.Get "reservation_required"))
5+
"reservation_possible" (default false (.Get "reservation_possible"))
6+
"info_available" (default false (.Get "info_available"))
7+
"content" (.Inner | .Page.RenderString)
8+
-}}
9+
10+
11+
<details class="details-screen o-expander o-expander--booking">
12+
{{- partial "train-category" $data -}}
13+
</details>
14+
15+
<details open class="details-print o-expander o-expander--booking">
16+
{{- partial "train-category" $data -}}
17+
</details>

0 commit comments

Comments
 (0)