💄 Delete unused CSS rules and reformat PassagePanel ones

frontend/src/passagesPanel.scss

@@ -1,27 +1,23 @@
 @use "_utils.scss";
 
-.passagesContainer {
+.body {
+	.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 {
+		/* TODO: Remove the bottom border only if there are 5 displayed lines. */
+		.line:last-child {
 			border-bottom: 0;
 			/* To make up for the bottom border deletion */
 			padding-bottom: calc(2px);
-}
+		}
 
-/* Idfm: 1880x176px (margin: 0px 20px) */
-.line {
+		/* Idfm: 1880x176px (margin: 0px 20px) */
+		.line {
 			width: calc(1880/1920*100%);
 			height: calc(100% / 5);
 			margin: 0 calc(20/1920*100%);
@@ -32,44 +28,45 @@
 			/* 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 {
+			svg {
 				font-family: IDFVoyageur-bold;
 				max-width: 100%;
 				max-height: 100%;
-}
+			}
 
-/* Idfm: 100x100px (margin: 0px 15px) */
-.transportMode {
+		}
+
+		/* Idfm: 100x100px (margin: 0px 15px) */
+		.transportMode {
 			@extend %transportMode;
 
 			height: calc(100/176*100%);
 			margin: 0 calc(15/1920*100%);
-}
+		}
 
-.busLinePicto {
+		.busLinePicto {
 			@extend %busLinePicto;
 
 			height: calc(70/176*100%);
 			margin-right: calc(23/1920*100%);
-}
+		}
 
-.metroLinePicto, .tramLinePicto, .trainLinePicto {
+		.metroLinePicto, .tramLinePicto, .trainLinePicto {
 			aspect-ratio : 1 / 1;
 			height: calc(100/176*100%);
 			margin-right: calc(23/1920*100%);
-}
+		}
 
-.destination {
+		.destination {
 			height: calc(60/176*100%);
 			width: 50%;
 
 			font-family: IDFVoyageur-bold;
 			text-align: left;
-}
+		}
 
-.trafficStatus {
+		.trafficStatus {
 			height: calc(50/176*100%);
 			aspect-ratio: 35/50;
 			margin-left: auto;
@@ -77,13 +74,13 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-}
 
-.trafficStatus svg {
+			svg {
 				width: 100%;
-}
+			}
+		}
 
-.firstPassage {
+		.firstPassage {
 			height: calc(100/176*100%);
 			aspect-ratio: 2.5;
 
@@ -95,50 +92,49 @@
 
 			/* TODO: compute the border weight according to the parent width */
 			border-right: solid calc(5px);
-}
 
-.unavailableFirstPassage {
+			svg {
+				aspect-ratio: 215/50;
+				height: calc(50%);
+			}
+		}
+
+		.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 {
+		.secondPassage {
 			height: calc(45/176*100%);
 			aspect-ratio: calc(230/45);
 			margin-right: calc(30/1920*100%);
-}
 
-.secondPassage svg {
+			svg {
 				font-family: IDFVoyageur-regular;
-}
+			}
+		}
 
-.unavailableSecondPassage {
+		.unavailableSecondPassage {
 			height: calc(100/176*100%);
 			aspect-ratio: calc(230/100);
 			margin-right: calc(30/1920*100%);
-}
 
-.unavailableSecondPassage svg {
+			svg {
 				font-family: IDFVoyageur-regular;
-}
+			}
+		}
 
-%withPlatformPassage {
+		%withPlatformPassage {
 			height: calc(120/176*100%);
 
 			display: flex;
 			flex-direction: column;
-}
+		}
 
-.withPlatformFirstPassage {
+		.withPlatformFirstPassage {
 			@extend %withPlatformPassage;
 
 			aspect-ratio: 250/120;
@@ -168,9 +164,9 @@
 					font-family: IDFVoyageur-bold;
 				}
 			}
-}
+		}
 
-.withPlatformSecondPassage {
+		.withPlatformSecondPassage {
 			@extend %withPlatformPassage;
 
 			aspect-ratio: 215/120;
@@ -202,4 +198,11 @@
 					font-family: IDFVoyageur-bold;
 				}
 			}
+		}
+
+	}
+
+	.displayed {
+		display: block;
+	}
 }

frontend/src/stopsSearchMenu.scss

@@ -35,7 +35,6 @@
 			overflow-y: scroll;
 
 			.stopPanel {
-				// display: None;
 				scroll-snap-align: center;
 
 				.stop {
@@ -78,11 +77,6 @@
 							height: 50%;
 						}
 
-						.break {
-							flex-basis: 100%;
-							height: 0;
-						}
-
 						.linesRepresentationMatrix {
 							@extend %busLinePicto; // Use the larger picto aspect-ratio
 							width: 75%;
@@ -91,12 +85,6 @@
 							display: flex;
 							flex-flow: row;
 							flex-wrap: wrap;
-							// justify-content: space-around;
-
-							// .break {
-							// 	flex-basis: 100%;
-							// 	height: 0;
-							// }
 
  							%picto {
 								margin-left: 1%;
@@ -126,22 +114,19 @@
 							}
 
 							.metroLinePicto {
-								@extendnd %metroLinePicto;
+								@extend %metroLinePicto;
 								@extend %singleLinePicto;
 							}
 
 							.busLinePicto {
 								@extend %busLinePicto;
 								@extend %picto;
+
+								height: 40%;
 							}
 						}
 					}
 				}
-				// .stop:last-child {
-				// 	border-bottom: 0;
-				// 	/* to make up for the bottom border deletion */
-				// 	padding-bottom: calc(2px);
-				// }
 			}
 			.displayed {
 				display: block;
@@ -153,93 +138,4 @@
 			width: 50%;
 		}
 	}
-
-	// .lineTable {
-	// 	height: 100%;
-	// 	width: 50%;
-
-	// 	tr {
-	// 		height: 100%;
-
-	// 		display: flex;
-	// 		flex-flow: row;
-	// 	}
-
-	// 	td {
-	// 		height: 100%;
-
-	// 		display: flex;
-	// 		flex-flow: row;
-	// 	}
-	// }
-
-	// .stop {
-	// 	height: 100%;
-
-	// 	display: flex;
-	// 	flex-direction: row;
-	// 	align-items: center;
-
-	// 	.lineRepr {
-	// 		height: 100%;
-	// 		aspect-ratio: 5;
-
-	// 		display: flex;
-	// 		flex-direction: row;
-	// 		flex-wrap: wrap;
-	// 		align-items: center;
-
-	// 		.break {
-	// 			flex-basis: 100%;
-	// 			height: 0;
-	// 		}
-
-
-	// 		.linesRepresentationMatrix {
-	// 			@extend %busLinePicto; // Use the larger picto aspect-ratio
-	// 			height: 100%;
-	// 			aspect-ratio: 3;
-
-	// 			display: flex;
-	// 			flex-flow: row;
-	// 			flex-wrap: wrap;
-
-	// 			.break {
-	// 				flex-basis: 100%;
-	// 				height: 0;
-	// 			}
-
- 	// 			%picto {
-	// 				margin-left: 1%;
-	// 				align-self: center;
-	// 				justify-self: center;
-	// 			}
-
-	// 			.transportMode {
-	// 				@extend %transportMode;
-	// 				@extend %picto;
-	// 			}
-
-	// 			.tramLinePicto {
-	// 				@extendnd %tramLinePicto;
-	// 				@extend %picto;
-	// 			}
-
-	// 			.trainLinePicto {
-	// 				@extend %trainLinePicto;
-	// 				@extend %picto;
-	// 			}
-
-	// 			.metroLinePicto {
-	// 				@extendnd %metroLinePicto;
-	// 				@extend %picto;
-	// 			}
-
-	// 			.busLinePicto {
-	// 				@extend %busLinePicto;
-	// 				@extend %picto;
-	// 			}
-	// 		}
-	// 	}
-	// }
 }