From b8984e455c05d33652ffa9da6e5d24bc509c292d Mon Sep 17 00:00:00 2001 From: Adrien Date: Mon, 23 Jan 2023 21:16:47 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=9A=20Add=20a=20dedicated=20CSS=20file?= =?UTF-8?q?=20for=20NextPassagePanel=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/nextPassagePanel.module.css | 128 +++++++++++++++++++ frontend/src/nextPassagesDisplay.module.css | 130 -------------------- frontend/src/nextPassagesPanel.tsx | 3 +- 3 files changed, 129 insertions(+), 132 deletions(-) create mode 100644 frontend/src/nextPassagePanel.module.css diff --git a/frontend/src/nextPassagePanel.module.css b/frontend/src/nextPassagePanel.module.css new file mode 100644 index 0000000..91cb046 --- /dev/null +++ b/frontend/src/nextPassagePanel.module.css @@ -0,0 +1,128 @@ +.nextPassagesContainer { + height: 100%; + width: 100%; + + display: none; + + position: relative; +} + +.displayed { + display: block; +} + +.nextPassagesContainer .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 { + aspect-ratio : 1 / 1; + height: calc(100/176*100%); + margin: 0 calc(15/1920*100%); +} + +.tramLinePicto { + aspect-ratio : 1 / 1; + height: calc(100/176*100%); + margin-right: calc(23/1920*100%); +} + +.busLinePicto { + aspect-ratio : 2.25; + height: calc(70/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%); +} + +.unavailableSecondNextPassage svg { + font-family: IDFVoyageur-regular; +} diff --git a/frontend/src/nextPassagesDisplay.module.css b/frontend/src/nextPassagesDisplay.module.css index b24889f..bd13fc9 100644 --- a/frontend/src/nextPassagesDisplay.module.css +++ b/frontend/src/nextPassagesDisplay.module.css @@ -77,136 +77,6 @@ border-radius: calc(15/1920*100%); } -.nextPassagesContainer { - height: 100%; - width: 100%; - - display: none; - - position: relative; -} - -.nextPassagesContainer .line:last-child { - border-bottom: 0; - /* To make up for the bottom border deletion */ - padding-bottom: calc(2px); -} - -.displayed { - display: block; -} - - -/* 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 { - aspect-ratio : 1 / 1; - height: calc(100/176*100%); - margin: 0 calc(15/1920*100%); -} - -.tramLinePicto { - aspect-ratio : 1 / 1; - height: calc(100/176*100%); - margin-right: calc(23/1920*100%); -} - -.busLinePicto { - aspect-ratio : 2.25; - height: calc(70/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%); -} - -.unavailableSecondNextPassage svg { - font-family: IDFVoyageur-regular; -} - /* Idfm: 1800x54px (margin: 0px 50px) */ .footer { width: calc(1820/1920*100%); diff --git a/frontend/src/nextPassagesPanel.tsx b/frontend/src/nextPassagesPanel.tsx index 7da6798..598dc75 100644 --- a/frontend/src/nextPassagesPanel.tsx +++ b/frontend/src/nextPassagesPanel.tsx @@ -1,12 +1,11 @@ import { Component } from 'solid-js'; -import { createStore } from 'solid-js/store'; import { createDateNow, getTime } from '@solid-primitives/date'; import { Motion } from "@motionone/solid"; import { TrafficStatus } from './types'; import { renderLineTransportMode, renderLinePicto } from './utils'; -import styles from './nextPassagesDisplay.module.css'; +import styles from "./nextPassagePanel.module.css"; export const NextPassagesPanel: Component = (props) => {