💄 Replace css files with scss and factorize CSS rules

2023-03-05 12:49:20 +01:00
parent a9d918fb0f
commit f09ba4cc58
15 changed files with 459 additions and 184 deletions
--- a/frontend/src/passagesPanel.scss
+++ b/frontend/src/passagesPanel.scss
@@ -0,0 +1,205 @@
+@use "_utils.scss";
+
+.passagesContainer {
+	height: 100%;
+	width: 100%;
+
+	display: none;
+
+	position: relative;
+}
+
+.displayed {
+	display: block;
+}
+
+/* TODO: Remove the bottom border only if there are 5 displayed lines. */
+.passagesContainer .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 {
+	@extend %transportMode;
+
+	height: calc(100/176*100%);
+	margin: 0 calc(15/1920*100%);
+}
+
+.busLinePicto {
+	@extend %busLinePicto;
+
+	height: calc(70/176*100%);
+	margin-right: calc(23/1920*100%);
+}
+
+.metroLinePicto, .tramLinePicto, .trainLinePicto {
+	aspect-ratio : 1 / 1;
+	height: calc(100/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%);
+}
+
+.unavailableSecondPassage svg {
+	font-family: IDFVoyageur-regular;
+}
+
+%withPlatformPassage {
+	height: calc(120/176*100%);
+
+	display: flex;
+	flex-direction: column;
+}
+
+.withPlatformFirstPassage {
+	@extend %withPlatformPassage;
+
+	aspect-ratio: 250/120;
+
+	padding-right: calc(30/1920*100%);
+	/* TODO: compute the border weight according to the parent width */
+	border-right: solid calc(5px);
+
+	.passage {
+		aspect-ratio: 215/50;
+		height: calc(1/2*100%);
+
+		font-family: IDFVoyageur-bold;
+		margin-top: calc(5/176*100%);
+	}
+
+	.platform {
+		margin-top: auto;
+		margin-bottom: calc(5/176*100%);
+
+		rect {
+			background-color: var(--idfm-black);
+		}
+
+		text {
+			vertical-align: middle;
+			font-family: IDFVoyageur-bold;
+		}
+	}
+}
+
+.withPlatformSecondPassage {
+	@extend %withPlatformPassage;
+
+	aspect-ratio: 215/120;
+
+	align-items: end;
+	justify-content: center;
+
+	margin-right: calc(30/1920*100%);
+
+	.passage {
+		aspect-ratio: 215/45;
+		height: calc(45/120*100%);
+		/* 5px + (first passage font size - second passage font size/2) to align passages... */
+		/* There must exist a better way to align them. */
+		margin-top: calc(7.5/176*100%);
+	}
+
+	svg {
+		font-family: IDFVoyageur-regular;
+	}
+
+	.platform {
+		rect {
+			background-color: var(--idfm-black);
+		}
+
+		text {
+			vertical-align: middle;
+			font-family: IDFVoyageur-bold;
+		}
+	}
+}