💄 Delete unused CSS rules and reformat PassagePanel ones

frontend/src/passagesPanel.scss

@@ -1,5 +1,6 @@
 @use "_utils.scss";
 
+.body {
 	.passagesContainer {
 		height: 100%;
 		width: 100%;
@@ -7,14 +8,9 @@
 		display: none;
 
 		position: relative;
-}
-
-.displayed {
-	display: block;
-}
 
 		/* TODO: Remove the bottom border only if there are 5 displayed lines. */
-.passagesContainer .line:last-child {
+		.line:last-child {
 			border-bottom: 0;
 			/* To make up for the bottom border deletion */
 			padding-bottom: calc(2px);
@@ -32,14 +28,15 @@
 			/* 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 {
 			@extend %transportMode;
@@ -77,11 +74,11 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-}
 
-.trafficStatus svg {
+			svg {
 				width: 100%;
 			}
+		}
 
 		.firstPassage {
 			height: calc(100/176*100%);
@@ -95,6 +92,11 @@
 
 			/* TODO: compute the border weight according to the parent width */
 			border-right: solid calc(5px);
+
+			svg {
+				aspect-ratio: 215/50;
+				height: calc(50%);
+			}
 		}
 
 		.unavailableFirstPassage {
@@ -105,30 +107,25 @@
 			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 {
+			svg {
 				font-family: IDFVoyageur-regular;
 			}
+		}
 
 		.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 {
 			height: calc(120/176*100%);
@@ -202,3 +199,10 @@
 				}
 			}
 		}
+
+	}
+
+	.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;
-	// 			}
-	// 		}
-	// 	}
-	// }
 }