💄 Delete unused CSS rules and reformat PassagePanel ones

frontend/src/passagesPanel.scss

@@ -1,205 +1,208 @@
 @use "_utils.scss";
 
-.passagesContainer {
+.body {
-	height: 100%;
+	.passagesContainer {
-	width: 100%;
+		height: 100%;
+		width: 100%;
 
-	display: none;
+		display: none;
 
-	position: relative;
+		position: relative;
-}
 
-.displayed {
+		/* TODO: Remove the bottom border only if there are 5 displayed lines. */
-	display: block;
+		.line:last-child {
-}
+			border-bottom: 0;
-
+			/* To make up for the bottom border deletion */
-/* TODO: Remove the bottom border only if there are 5 displayed lines. */
+			padding-bottom: calc(2px);
-.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 {
+		/* Idfm: 1880x176px (margin: 0px 20px) */
-			vertical-align: middle;
+		.line {
-			font-family: IDFVoyageur-bold;
+			width: calc(1880/1920*100%);
-		}
+			height: calc(100% / 5);
-	}
+			margin: 0 calc(20/1920*100%);
-}
+
-
+			display: flex;
-.withPlatformSecondPassage {
+			align-items: center;
-	@extend %withPlatformPassage;
+
-
+			/* TODO: compute the border weight according to the parent height */
-	aspect-ratio: 215/120;
+			/* TODO: Disable border-bottom for the last .line  */
-
+			border-bottom: solid calc(2px);
-	align-items: end;
+
-	justify-content: center;
+			svg {
-
+				font-family: IDFVoyageur-bold;
-	margin-right: calc(30/1920*100%);
+				max-width: 100%;
-
+				max-height: 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. */
+		/* Idfm: 100x100px (margin: 0px 15px) */
-		margin-top: calc(7.5/176*100%);
+		.transportMode {
-	}
+			@extend %transportMode;
-
+
-	svg {
+			height: calc(100/176*100%);
-		font-family: IDFVoyageur-regular;
+			margin: 0 calc(15/1920*100%);
-	}
+		}
-
+
-	.platform {
+		.busLinePicto {
-		rect {
+			@extend %busLinePicto;
-			background-color: var(--idfm-black);
+
-		}
+			height: calc(70/176*100%);
-
+			margin-right: calc(23/1920*100%);
-		text {
+		}
-			vertical-align: middle;
+
+		.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;
+
+			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);
+
+			svg {
+				aspect-ratio: 215/50;
+				height: calc(50%);
+			}
+		}
+
+		.unavailableFirstPassage {
+			height: calc(100/176*100%);
+			aspect-ratio: calc(230/100);
+
+			/* TODO: compute the border weight according to the parent width */
+			border-right: solid calc(5px);
+		}
+
+		.secondPassage {
+			height: calc(45/176*100%);
+			aspect-ratio: calc(230/45);
+			margin-right: calc(30/1920*100%);
+
+			svg {
+				font-family: IDFVoyageur-regular;
+			}
+		}
+
+		.unavailableSecondPassage {
+			height: calc(100/176*100%);
+			aspect-ratio: calc(230/100);
+			margin-right: calc(30/1920*100%);
+
+			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;
+				}
+			}
+		}
+
+	}
+
+	.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;
-	// 			}
-	// 		}
-	// 	}
-	// }
 }