diff --git a/frontend/src/passagesPanel.scss b/frontend/src/passagesPanel.scss index 6727b47..1852727 100644 --- a/frontend/src/passagesPanel.scss +++ b/frontend/src/passagesPanel.scss @@ -1,204 +1,208 @@ @use "_utils.scss"; -.passagesContainer { - height: 100%; - width: 100%; +.body { + .passagesContainer { + height: 100%; + width: 100%; - display: none; + display: none; - position: relative; -} + 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); - - /* 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); + /* 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); } - 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; + /* 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); + + 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; + + 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; } } diff --git a/frontend/src/stopsSearchMenu.scss b/frontend/src/stopsSearchMenu.scss index 24e500b..b1c1bf4 100644 --- a/frontend/src/stopsSearchMenu.scss +++ b/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; - // } - // } - // } - // } }