feat: Try another design for fip validity

MoritzWeber0 · MoritzWeber0 · commit 1f80d9858f9e · 2025-11-21T23:03:05.000+01:00
diff --git a/assets/sass/fipValidity.scss b/assets/sass/fipValidity.scss
@@ -5,40 +5,8 @@
   margin-bottom: 1.2rem;
 
   &__tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.6rem;
-  }
-
-  &__footnotes {
     display: flex;
     flex-direction: column;
-    gap: 0.4rem;
-    font-size: 0.9em;
-  }
-
-  &__footnote {
-    display: flex;
-    gap: 0.4rem;
-    align-items: baseline;
-  }
-
-  &__footnote-number {
-    font-weight: 600;
-    flex-shrink: 0;
-  }
-
-  &__footnote-text {
-    p {
-      margin: 0;
-      display: inline;
-    }
-  }
-
-  &__note {
-    p {
-      margin: 0;
-      display: inline;
-    }
+    gap: 0.8rem;
   }
 }
diff --git a/assets/sass/fipValidityItem.scss b/assets/sass/fipValidityItem.scss
@@ -0,0 +1,31 @@
+.a-fip-validity-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  font-size: 0.95em;
+  font-weight: 400;
+  line-height: 1.2em;
+
+  @each $name, $color in $tag-colors {
+    &--#{$name} {
+      color: var(--tag-#{$name}-color);
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  &__note {
+    font-size: 0.8em;
+    color: var(--color-body);
+    font-weight: 400;
+
+    p {
+      margin: 0;
+      display: inline;
+    }
+  }
+}
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -20,3 +20,4 @@
 @import "trainCategory.scss";
 @import "tag.scss";
 @import "fipValidity.scss";
+@import "fipValidityItem.scss";
diff --git a/assets/sass/tag.scss b/assets/sass/tag.scss
@@ -15,8 +15,4 @@
       border: 0.1rem solid var(--tag-#{$name}-border);
     }
   }
-
-  &__footnote {
-    font-weight: 600;
-  }
 }
diff --git a/content/operator/sncf/index.en.md b/content/operator/sncf/index.en.md
@@ -29,7 +29,7 @@ SNCF (Société Nationale des Chemins de fer Français) is the French national r
 
 ## Validity of FIP Tickets
 
-{{< fip-validity fip_global_fare_footnote="For international `TGV` trains, see [International TGV inOui / ICE trains](#international-tgv-inoui--ice-trains)">}}
+{{< fip-validity fip_global_fare_footnote="Only for international `TGV` trains, see [International TGV inOui / ICE trains](#international-tgv-inoui--ice-trains)">}}
 
 FIP Coupons and FIP 50 Tickets are valid on SNCF services. For cross-border journeys on local trains, either a continuous FIP 50 Ticket or FIP Coupons for both countries are required. For international long-distance services (`TGV` or `ICE`), global fares apply (see [International TGV inOui / ICE trains](#international-tgv-inoui--ice-trains)).
 
diff --git a/layouts/partials/fip-validity-item.html b/layouts/partials/fip-validity-item.html
@@ -0,0 +1,9 @@
+<div class="a-fip-validity-item a-fip-validity-item--{{ .Type }}">
+  {{ partial "icon" .Icon }}
+  <div class="a-fip-validity-item__content">
+    <span class="a-fip-validity-item__text">{{ i18n .Text }}</span>
+    {{- with .Note -}}
+      <span class="a-fip-validity-item__note">{{ . }}</span>
+    {{- end -}}
+  </div>
+</div>
diff --git a/layouts/partials/tag.html b/layouts/partials/tag.html
@@ -1,8 +1,4 @@
 <span class="a-tag a-tag--{{ .Type }}">
   {{ partial "icon" .Icon }}
-  <span class="a-tag__text"
-    >{{ i18n .Text }}{{- with .Footnote -}}
-      <sup class="a-tag__footnote">{{ . }}</sup>
-    {{- end -}}</span
-  >
+  <span class="a-tag__text">{{ i18n .Text }}</span>
 </span>
diff --git a/layouts/shortcodes/fip-validity.html b/layouts/shortcodes/fip-validity.html
@@ -1,108 +1,70 @@
 {{- $page := .Page -}}
-{{- $footnotes := dict -}}
-
-{{- with .Get "fip_coupon_footnote" -}}
-  {{- $footnotes = merge $footnotes (dict "fip_coupon" .) -}}
-{{- end -}}
-{{- with .Get "fip_coupon_relatives_footnote" -}}
-  {{- $footnotes = merge $footnotes (dict "fip_coupon_relatives" .) -}}
-{{- end -}}
-{{- with .Get "fip_50_ticket_footnote" -}}
-  {{- $footnotes = merge $footnotes (dict "fip_50_ticket" .) -}}
-{{- end -}}
-{{- with .Get "fip_global_fare_footnote" -}}
-  {{- $footnotes = merge $footnotes (dict "fip_global_fare" .) -}}
-{{- end -}}
-
-{{- $footnoteCounter := 0 -}}
-{{- $footnoteMap := dict -}}
 
 
 <div class="o-fip-validity">
   <div class="o-fip-validity__tags">
     {{- if isset $page.Params "fip_coupon" -}}
       {{- $accepted := $page.Params.fip_coupon -}}
-      {{- $footnoteNum := "" -}}
-      {{- if isset $footnotes "fip_coupon" -}}
-        {{- $footnoteCounter = add $footnoteCounter 1 -}}
-        {{- $footnoteNum = printf "%d)" $footnoteCounter -}}
-        {{- $footnoteMap = merge $footnoteMap (dict (string $footnoteCounter) (index $footnotes "fip_coupon")) -}}
+      {{- $note := "" -}}
+      {{- with .Get "fip_coupon_footnote" -}}
+        {{- $note = $page.RenderString . -}}
       {{- end -}}
-      {{- partial "tag" (
+      {{- partial "fip-validity-item" (
         dict
         "Icon" (cond $accepted "check_circle" "cancel")
         "Text" "fipValidity.fip-coupon"
         "Type" (cond $accepted "success" "error")
-        "Footnote" $footnoteNum
+        "Note" $note
         )
       }}
     {{- end -}}
 
     {{- if isset $page.Params "fip_coupon_relatives" -}}
       {{- $accepted := $page.Params.fip_coupon_relatives -}}
-      {{- $footnoteNum := "" -}}
-      {{- if isset $footnotes "fip_coupon_relatives" -}}
-        {{- $footnoteCounter = add $footnoteCounter 1 -}}
-        {{- $footnoteNum = printf "%d)" $footnoteCounter -}}
-        {{- $footnoteMap = merge $footnoteMap (dict (string $footnoteCounter) (index $footnotes "fip_coupon_relatives")) -}}
+      {{- $note := "" -}}
+      {{- with .Get "fip_coupon_relatives_footnote" -}}
+        {{- $note = $page.RenderString . -}}
       {{- end -}}
-      {{- partial "tag" (
+      {{- partial "fip-validity-item" (
         dict
         "Icon" (cond $accepted "check_circle" "cancel")
         "Text" "fipValidity.fip-coupon-relatives"
         "Type" (cond $accepted "success" "error")
-        "Footnote" $footnoteNum
+        "Note" $note
         )
       }}
     {{- end -}}
 
     {{- if isset $page.Params "fip_50_ticket" -}}
       {{- $accepted := $page.Params.fip_50_ticket -}}
-      {{- $footnoteNum := "" -}}
-      {{- if isset $footnotes "fip_50_ticket" -}}
-        {{- $footnoteCounter = add $footnoteCounter 1 -}}
-        {{- $footnoteNum = printf "%d)" $footnoteCounter -}}
-        {{- $footnoteMap = merge $footnoteMap (dict (string $footnoteCounter) (index $footnotes "fip_50_ticket")) -}}
+      {{- $note := "" -}}
+      {{- with .Get "fip_50_ticket_footnote" -}}
+        {{- $note = $page.RenderString . -}}
       {{- end -}}
-      {{- partial "tag" (
+      {{- partial "fip-validity-item" (
         dict
         "Icon" (cond $accepted "check_circle" "cancel")
         "Text" "fipValidity.fip-50-ticket"
         "Type" (cond $accepted "success" "error")
-        "Footnote" $footnoteNum
+        "Note" $note
         )
       }}
     {{- end -}}
 
     {{- if isset $page.Params "fip_global_fare" -}}
       {{- $accepted := $page.Params.fip_global_fare -}}
-      {{- $footnoteNum := "" -}}
-      {{- if isset $footnotes "fip_global_fare" -}}
-        {{- $footnoteCounter = add $footnoteCounter 1 -}}
-        {{- $footnoteNum = printf "%d)" $footnoteCounter -}}
-        {{- $footnoteMap = merge $footnoteMap (dict (string $footnoteCounter) (index $footnotes "fip_global_fare")) -}}
+      {{- $note := "" -}}
+      {{- with .Get "fip_global_fare_footnote" -}}
+        {{- $note = $page.RenderString . -}}
       {{- end -}}
-      {{- partial "tag" (
+      {{- partial "fip-validity-item" (
         dict
         "Icon" (cond $accepted "check_circle" "cancel")
         "Text" "fipValidity.fip-global-fare"
         "Type" (cond $accepted "success" "error")
-        "Footnote" $footnoteNum
+        "Note" $note
         )
       }}
     {{- end -}}
   </div>
-
-  {{- if gt (len $footnoteMap) 0 -}}
-    <div class="o-fip-validity__footnotes">
-      {{- range $index, $text := $footnoteMap -}}
-        <div class="o-fip-validity__footnote">
-          <span class="o-fip-validity__footnote-number">{{ $index }})</span>
-          <span class="o-fip-validity__footnote-text"
-            >{{ $text | $page.RenderString }}</span
-          >
-        </div>
-      {{- end -}}
-    </div>
-  {{- end -}}
 </div>

Original file line number	Diff line number	Diff line change
`@@ -15,8 +15,4 @@`
`15`	`15`	`border: 0.1rem solid var(--tag-#{$name}-border);`
`16`	`16`	`}`
`17`	`17`	`}`
`18`		`-`
`19`		`- &__footnote {`
`20`		`- font-weight: 600;`
`21`		`- }`
`22`	`18`	`}`