🚚 Add a dedicated CSS file for NextPassagePanel component

frontend/src/nextPassagePanel.module.css

@@ -0,0 +1,128 @@
+.nextPassagesContainer {
+	height: 100%;
+	width: 100%;
+
+	display: none;
+
+	position: relative;
+}
+
+.displayed {
+	display: block;
+}
+
+.nextPassagesContainer .line:last-child {
+	border-bottom: 0;
+	/* To make up for the bottom border deletion */
+	padding-bottom: calc(2px);
+}
+
+/* Idfm: 1880x176px (margin: 0px 20px) */
+.line {
+	width: calc(1880/1920*100%);
+	height: calc(100% / 5);
+	margin: 0 calc(20/1920*100%);
+
+	display: flex;
+	align-items: center;
+
+	/* TODO: compute the border weight according to the parent height */
+	/* TODO: Disable border-bottom for the last .line  */
+	border-bottom: solid calc(2px);
+}
+
+.line svg {
+	font-family: IDFVoyageur-bold;
+	max-width: 100%;
+	max-height: 100%;
+}
+
+/* Idfm: 100x100px (margin: 0px 15px) */
+.transportMode {
+	aspect-ratio : 1 / 1;
+	height: calc(100/176*100%);
+	margin: 0 calc(15/1920*100%);
+}
+
+.tramLinePicto {
+	aspect-ratio : 1 / 1;
+	height: calc(100/176*100%);
+	margin-right: calc(23/1920*100%);
+}
+
+.busLinePicto {
+	aspect-ratio : 2.25;
+	height: calc(70/176*100%);
+	margin-right: calc(23/1920*100%);
+}
+
+.destination {
+	height: calc(60/176*100%);
+	width: 50%;
+
+	font-family: IDFVoyageur-bold;
+	text-align: left;
+}
+
+
+.trafficStatus {
+	height: calc(50/176*100%);
+	aspect-ratio: 35/50;
+	margin-left: auto;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.trafficStatus svg {
+	width: 100%;
+}
+
+.firstPassage {
+	height: calc(100/176*100%);
+	aspect-ratio: 2.5;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	padding-right: calc(30/1920*100%);
+
+	/* TODO: compute the border weight according to the parent width */
+	border-right: solid calc(5px);
+}
+
+.unavailableFirstPassage {
+	height: calc(100/176*100%);
+	aspect-ratio: calc(230/100);
+	margin-right: calc(30/1920*100%);
+
+	/* TODO: compute the border weight according to the parent width */
+	border-right: solid calc(5px);
+}
+
+.firstPassage svg {
+	aspect-ratio: 215/50;
+	height: calc(1/2*100%);
+}
+
+.secondPassage {
+	height: calc(45/176*100%);
+	aspect-ratio: calc(230/45);
+	margin-right: calc(30/1920*100%);
+}
+
+.secondPassage svg {
+	font-family: IDFVoyageur-regular;
+}
+
+.unavailableSecondPassage {
+	height: calc(100/176*100%);
+	aspect-ratio: calc(230/100);
+	margin-right: calc(30/1920*100%);
+}
+
+.unavailableSecondNextPassage svg {
+	font-family: IDFVoyageur-regular;
+}

frontend/src/nextPassagesDisplay.module.css

@@ -77,136 +77,6 @@
 	border-radius: calc(15/1920*100%);
 }
 
-.nextPassagesContainer {
-	height: 100%;
-	width: 100%;
-
-	display: none;
-	
-	position: relative;
-}
-
-.nextPassagesContainer .line:last-child {
-	border-bottom: 0;
-	/* To make up for the bottom border deletion */
-	padding-bottom: calc(2px);
-}
-
-.displayed {
-	display: block;
-}
-
-
-/* Idfm: 1880x176px (margin: 0px 20px) */
-.line {
-	width: calc(1880/1920*100%);
-	height: calc(100% / 5);
-	margin: 0 calc(20/1920*100%);
-
-	display: flex;
-	align-items: center;
-
-	/* TODO: compute the border weight according to the parent height */
-	/* TODO: Disable border-bottom for the last .line  */
-	border-bottom: solid calc(2px);
-}
-
-.line svg {
-	font-family: IDFVoyageur-bold;
-	max-width: 100%;
-	max-height: 100%;
-}
-
-/* Idfm: 100x100px (margin: 0px 15px) */
-.transportMode {
-	aspect-ratio : 1 / 1;
-	height: calc(100/176*100%);	   
-	margin: 0 calc(15/1920*100%);
-}
-
-.tramLinePicto {
-	aspect-ratio : 1 / 1;
-	height: calc(100/176*100%);
-	margin-right: calc(23/1920*100%);
-}
-
-.busLinePicto {
-	aspect-ratio : 2.25;
-	height: calc(70/176*100%);
-	margin-right: calc(23/1920*100%);
-}
-
-.destination {
-	height: calc(60/176*100%);
-	width: 50%;
-	
-	font-family: IDFVoyageur-bold;
-	text-align: left;
-}
-
-
-.trafficStatus {
-	height: calc(50/176*100%);
-	aspect-ratio: 35/50;
-	margin-left: auto;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.trafficStatus svg {
-	width: 100%;
-}
-
-.firstPassage {
-	height: calc(100/176*100%);
-	aspect-ratio: 2.5;
-	
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	padding-right: calc(30/1920*100%);
-
-	/* TODO: compute the border weight according to the parent width */
-	border-right: solid calc(5px);
-}
-
-.unavailableFirstPassage {
-	height: calc(100/176*100%);
-	aspect-ratio: calc(230/100);
-	margin-right: calc(30/1920*100%);
-
-	/* TODO: compute the border weight according to the parent width */
-	border-right: solid calc(5px);
-}
-
-.firstPassage svg {
-	aspect-ratio: 215/50;
-	height: calc(1/2*100%);
-}
-
-.secondPassage {
-	height: calc(45/176*100%);
-	aspect-ratio: calc(230/45);
-	margin-right: calc(30/1920*100%);
-}
-
-.secondPassage svg {
-	font-family: IDFVoyageur-regular;
-}
-
-.unavailableSecondPassage {
-	height: calc(100/176*100%);
-	aspect-ratio: calc(230/100);
-	margin-right: calc(30/1920*100%);
-}
-
-.unavailableSecondNextPassage svg {
-	font-family: IDFVoyageur-regular;
-}
-
 /* Idfm: 1800x54px (margin: 0px 50px) */
 .footer {
 	width: calc(1820/1920*100%);

frontend/src/nextPassagesPanel.tsx

@@ -1,12 +1,11 @@
 import { Component } from 'solid-js';
-import { createStore } from 'solid-js/store';
 import { createDateNow, getTime } from '@solid-primitives/date';
 import { Motion } from "@motionone/solid";
 
 import { TrafficStatus } from './types';
 import { renderLineTransportMode, renderLinePicto } from './utils';
 
-import styles from './nextPassagesDisplay.module.css';
+import styles from "./nextPassagePanel.module.css";
 
 
 export const NextPassagesPanel: Component = (props) => {