From f09ba4cc58e3cf1e05441086c8cee2a34517b420 Mon Sep 17 00:00:00 2001 From: Adrien Date: Sun, 5 Mar 2023 12:49:20 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Replace=20css=20files=20with=20s?= =?UTF-8?q?css=20and=20factorize=20CSS=20rules?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package.json | 1 + frontend/src/{App.module.css => App.scss} | 14 +- frontend/src/App.tsx | 21 +- ...assagesDisplay.module.css => _common.scss} | 65 ++--- frontend/src/_utils.scss | 31 +++ frontend/src/{index.css => index.scss} | 0 frontend/src/index.tsx | 2 +- frontend/src/passagesDisplay.scss | 60 +++++ frontend/src/passagesDisplay.tsx | 18 +- ...gesPanel.module.css => passagesPanel.scss} | 94 +++---- frontend/src/passagesPanel.tsx | 30 +-- frontend/src/stopManager.module.css | 33 --- frontend/src/stopsSearchMenu.scss | 242 ++++++++++++++++++ .../{stopsManager.tsx => stopsSearchMenu.tsx} | 6 +- frontend/src/utils.tsx | 26 +- 15 files changed, 459 insertions(+), 184 deletions(-) rename frontend/src/{App.module.css => App.scss} (57%) rename frontend/src/{passagesDisplay.module.css => _common.scss} (58%) create mode 100644 frontend/src/_utils.scss rename frontend/src/{index.css => index.scss} (100%) create mode 100644 frontend/src/passagesDisplay.scss rename frontend/src/{passagesPanel.module.css => passagesPanel.scss} (72%) delete mode 100644 frontend/src/stopManager.module.css create mode 100644 frontend/src/stopsSearchMenu.scss rename frontend/src/{stopsManager.tsx => stopsSearchMenu.tsx} (97%) diff --git a/frontend/package.json b/frontend/package.json index 11b2a8e..4b0abca 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -28,6 +28,7 @@ "date-fns": "^2.29.3", "leaflet": "^1.9.3", "matrix-widget-api": "^1.1.1", + "sass": "^1.58.3", "solid-js": "^1.6.6", "solid-transition-group": "^0.0.10" } diff --git a/frontend/src/App.module.css b/frontend/src/App.scss similarity index 57% rename from frontend/src/App.module.css rename to frontend/src/App.scss index a606582..9506539 100644 --- a/frontend/src/App.module.css +++ b/frontend/src/App.scss @@ -10,12 +10,14 @@ display: flex; text-align: center; -} -.panel { - min-width: 100%; - height: inherit; - width: inherit; + .panel { + min-width: 100%; + height: inherit; + width: inherit; - scroll-snap-align: center; + scroll-snap-align: center; + + background-color: var(--idfm-black); + } } diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 9678daa..9e517d1 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -3,11 +3,12 @@ import { IVisibilityActionRequest, MatrixCapabilities, WidgetApi, WidgetApiToWid import { HopeProvider } from "@hope-ui/solid"; import { BusinessDataProvider } from './businessData'; -import { SearchProvider } from './search'; -import { PassagesDisplay } from './passagesDisplay'; -import { StopsManager } from './stopsManager'; +import { AppContextProvider } from './appContext'; -import styles from './App.module.css'; +import { PassagesDisplay } from './passagesDisplay'; +import { StopsSearchMenu } from './stopsSearchMenu'; + +import "./App.scss"; function parseFragment() { @@ -44,18 +45,18 @@ const App: Component = () => { return ( - + -
-
- +
+
+
-
+
- + ); }; diff --git a/frontend/src/passagesDisplay.module.css b/frontend/src/_common.scss similarity index 58% rename from frontend/src/passagesDisplay.module.css rename to frontend/src/_common.scss index 243740b..c77e86b 100644 --- a/frontend/src/passagesDisplay.module.css +++ b/frontend/src/_common.scss @@ -1,14 +1,12 @@ /* Idfm: 1860x1080px */ -.passagesDisplay { +%widget { aspect-ratio: 16/9; --reverse-aspect-ratio: 9/16; /* height is set according to the aspect-ratio, don´t touch it */ width: 100%; - - display: flex; - flex-direction: column; - background-color: var(--idfm-black); + display: flex; + flex-direction: column; } /* Idfm: 1800x100px (margin: 17px 60px) */ @@ -18,79 +16,46 @@ /*Percentage margin are computed relatively to the nearest block container's width, not height */ /* cf. https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom */ margin: calc(17/1080*var(--reverse-aspect-ratio)*100%) calc(60/1920*100%); - + display: flex; align-items: center; font-family: IDFVoyageur-bold; } -.header .transportMode { - aspect-ratio: 1/1; - height: 100%; - margin: 0; - margin-right: calc(23/1920*100%); -} - -.header .title { +// .header .title { +%title { height: 50%; width: 70%; margin-right: auto; } -.header .menu { - height: calc(80/100*100%); - aspect-ratio: 1; - margin-right: calc(30/1920*100%); -} -.header .menu button { - height: 100%; - aspect-ratio: 1; - - background-color: var(--idfm-black); - border: solid var(--idfm-white) 3px; - border-radius: calc(9/86*100%); -} - -.header .clock { - width: calc(175/1920*100%); - height: calc(80/100*100%); - - display: flex; - align-items: center; - justify-content: center; - - border:solid var(--idfm-white) 3px; - border-radius: calc(9/86*100%); -} - -.header .clock svg { - aspect-ratio: 2.45; - height: calc(0.7*100%); -} /* Idfm: 1860x892px (margin: 0px 30px) */ -.panelsContainer { +%body { width: calc(1860/1920*100%); height: calc(892/1080*100%); margin: 0 calc(30/1920*100%); - + display: flex; flex-direction: column; - + background-color: white; - + border-collapse:separate; - border:solid var(--idfm-black) 1px; + // border:solid var(--idfm-black) 1px; border-radius: calc(15/1920*100%); } + + + /* Idfm: 1800x54px (margin: 0px 50px) */ .footer { width: calc(1820/1920*100%); - height: calc(54/1080*100%); + height: calc(54/1080*100%); margin: 0 calc(50/1920*100%); display: flex; diff --git a/frontend/src/_utils.scss b/frontend/src/_utils.scss new file mode 100644 index 0000000..7c0d7f0 --- /dev/null +++ b/frontend/src/_utils.scss @@ -0,0 +1,31 @@ +%transportMode { + aspect-ratio : 1 / 1; +} + +%linePicto { + font-family: IDFVoyageur-bold; +} + +%tramLinePicto { + @extend %linePicto; + + aspect-ratio : 1 / 1; +} + +%trainLinePicto { + @extend %linePicto; + + aspect-ratio : 1 / 1; +} + +%metroLinePicto { + @extend %linePicto; + + aspect-ratio : 1 / 1; +} + +%busLinePicto { + @extend %linePicto; + + aspect-ratio : 2.25; +} diff --git a/frontend/src/index.css b/frontend/src/index.scss similarity index 100% rename from frontend/src/index.css rename to frontend/src/index.scss diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 3fe2a6a..4f244f7 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -1,7 +1,7 @@ /* @refresh reload */ import { render } from 'solid-js/web'; -import './index.css'; +import './index.scss'; import App from './App'; render(() => (), document.getElementById('root') as HTMLElement); diff --git a/frontend/src/passagesDisplay.scss b/frontend/src/passagesDisplay.scss new file mode 100644 index 0000000..2fc8d35 --- /dev/null +++ b/frontend/src/passagesDisplay.scss @@ -0,0 +1,60 @@ +@use "_common"; +@use "_utils"; + +.passagesDisplay { + @extend %widget; + + .header { + $header-element-height: calc(80/100*100%); + $component-border: solid var(--idfm-white) calc(0.25*1vh); + $component-border-radius: calc(9/86*100%); + .transportMode { + @extend %transportMode; + + height: 100%; + margin: 0; + margin-right: calc(23/1920*100%); + } + + .title { + @extend %title; + } + + .menu { + height: $header-element-height; + aspect-ratio: 1; + margin-right: calc(30/1920*100%); + margin-left: auto; + + button { + height: 100%; + aspect-ratio: 1; + + background-color: var(--idfm-black); + border: $component-border; + border-radius: $component-border-radius; + } + } + + .clock { + width: calc(175/1920*100%); + height: $header-element-height; + + display: flex; + align-items: center; + justify-content: center; + + border: $component-border; + border-radius: $component-border-radius; + + svg { + aspect-ratio: 2.45; + height: calc(0.7*100%); + } + } + } + + .body { + @extend %body + } +} diff --git a/frontend/src/passagesDisplay.tsx b/frontend/src/passagesDisplay.tsx index b705f60..a900ad8 100644 --- a/frontend/src/passagesDisplay.tsx +++ b/frontend/src/passagesDisplay.tsx @@ -11,7 +11,6 @@ import { getTransportModeSrc } from "./utils"; import { PassagesPanel } from "./passagesPanel"; import { IconHamburgerMenu } from './extra/iconHamburgerMenu'; -import styles from "./passagesDisplay.module.css"; type PositionnedPanel = { @@ -19,6 +18,7 @@ type PositionnedPanel = { // TODO: Should be PassagesPanelComponent ? panel: JSX.Element; }; +import "./passagesDisplay.scss"; interface PassagesDisplayStore { @@ -122,24 +122,24 @@ const Header: VoidComponent<{ title: string }> = (props) => { }); return ( -
+
{(url) => -
+
} -
+
{props.title}
-
+
= (props) => {
-
+
{format(dateNow(), "HH:mm")} @@ -171,7 +171,7 @@ const Footer: VoidComponent<{}> = () => { const { getDisplayedPanelId, getPanels } = passagesDisplayStore; return ( -
+
{(panel) => { const position = panel.position; @@ -244,7 +244,7 @@ const Body: ParentComponent<{ maxPassagesPerPanel: number, syncPeriodMsec: numbe }); return ( -
+
{() => { setPanels([]); @@ -296,7 +296,7 @@ export const PassagesDisplay: ParentComponent = () => { const panelSwitchPeriodMsec = 4 * 1000; return ( -
+
diff --git a/frontend/src/passagesPanel.module.css b/frontend/src/passagesPanel.scss similarity index 72% rename from frontend/src/passagesPanel.module.css rename to frontend/src/passagesPanel.scss index a81f0e5..82b37e1 100644 --- a/frontend/src/passagesPanel.module.css +++ b/frontend/src/passagesPanel.scss @@ -1,3 +1,5 @@ +@use "_utils.scss"; + .passagesContainer { height: 100%; width: 100%; @@ -40,13 +42,15 @@ /* Idfm: 100x100px (margin: 0px 15px) */ .transportMode { - aspect-ratio : 1 / 1; + @extend %transportMode; + height: calc(100/176*100%); margin: 0 calc(15/1920*100%); } .busLinePicto { - aspect-ratio : 2.25; + @extend %busLinePicto; + height: calc(70/176*100%); margin-right: calc(23/1920*100%); } @@ -127,71 +131,75 @@ font-family: IDFVoyageur-regular; } -.withPlatformFirstPassage { +%withPlatformPassage { height: calc(120/176*100%); - aspect-ratio: 250/120; 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); -} -.withPlatformFirstPassage .passage { - aspect-ratio: 215/50; - height: calc(1/2*100%); + .passage { + aspect-ratio: 215/50; + height: calc(1/2*100%); - font-family: IDFVoyageur-bold; - margin-top: calc(5/176*100%); -} + font-family: IDFVoyageur-bold; + margin-top: calc(5/176*100%); + } -.platform { - margin-top: auto; - margin-bottom: calc(5/176*100%); -} + .platform { + margin-top: auto; + margin-bottom: calc(5/176*100%); -.withPlatformFirstPassage .platform rect { - background-color: var(--idfm-black); -} + rect { + background-color: var(--idfm-black); + } -.withPlatformFirstPassage .platform text { - vertical-align: middle; - font-family: IDFVoyageur-bold; + text { + vertical-align: middle; + font-family: IDFVoyageur-bold; + } + } } .withPlatformSecondPassage { - height: calc(120/176*100%); + @extend %withPlatformPassage; + aspect-ratio: 215/120; - display: flex; align-items: end; justify-content: center; - flex-direction: column; 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%); + } -.withPlatformSecondPassage .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; + } -.withPlatformSecondPassage svg { - font-family: IDFVoyageur-regular; -} + .platform { + rect { + background-color: var(--idfm-black); + } -.withPlatformSecondPassage .platform rect { - background-color: var(--idfm-black); -} - -.withPlatformSecondPassage .platform text { - vertical-align: middle; - font-family: IDFVoyageur-bold; + text { + vertical-align: middle; + font-family: IDFVoyageur-bold; + } + } } diff --git a/frontend/src/passagesPanel.tsx b/frontend/src/passagesPanel.tsx index 8369aa5..0d469ed 100644 --- a/frontend/src/passagesPanel.tsx +++ b/frontend/src/passagesPanel.tsx @@ -9,7 +9,7 @@ import { Line, TrafficStatus } from './types'; import { renderLineTransportMode, renderLinePicto } from './utils'; import { BusinessDataContext, BusinessDataStore } from "./businessData"; -import styles from './passagesPanel.module.css'; +import "./passagesPanel.scss"; const UnavailablePassage: VoidComponent<{ style: string }> = (props) => { @@ -45,7 +45,7 @@ const Platform: VoidComponent<{ name: string }> = (props) => { }); return ( - + QUAI {props.name} @@ -77,7 +77,7 @@ const TtwPassage: VoidComponent<{ const ttwRepr = ttwSec < 3600 ? `${Math.floor(ttwSec / 60).toString().padStart(2, "0")} min` : format(refTs * 1000, "HH:mm"); const isApproaching = ttwSec <= 60; - const text = + const text = = }); return ( -
-
+
+
{renderLineTransportMode(props.line)}
- {renderLinePicto(props.line, styles)} -
+ {renderLinePicto(props.line)} +
=
-
+
+ style="firstPassage" withPlatformStyle="withPlatformFirstPassage" + fontSize={50} fallbackStyle="unavailableFirstPassage" /> + style="secondPassage" withPlatformStyle="withPlatformSecondPassage" + fontSize={45} fallbackStyle="unavailableSecondPassage" />
); } @@ -189,15 +189,13 @@ export const PassagesPanel: PassagesPanelComponent = (props) => { const [lines] = createResource(props.lineIds, getLines); return ( -
+
{(line) => - {(destination) => - - } + {(destination) => } } diff --git a/frontend/src/stopManager.module.css b/frontend/src/stopManager.module.css deleted file mode 100644 index 276d6b2..0000000 --- a/frontend/src/stopManager.module.css +++ /dev/null @@ -1,33 +0,0 @@ -svg { - font-family: IDFVoyageur-bold; -} - -.transportMode { - aspect-ratio : 1 / 1; - height: 70%; - margin-left: 1%; -} - -.tramLinePicto { - height: 70%; - margin-left: 1%; - aspect-ratio : 1 / 1; -} - -.trainLinePicto { - height: 70%; - margin-left: 1%; - aspect-ratio : 1 / 1; -} - -.metroLinePicto { - height: 70%; - margin-left: 1%; - aspect-ratio : 1 / 1; -} - -.busLinePicto { - height: 70%; - margin-left: 1%; - aspect-ratio : 2.25; -} diff --git a/frontend/src/stopsSearchMenu.scss b/frontend/src/stopsSearchMenu.scss new file mode 100644 index 0000000..599a4f6 --- /dev/null +++ b/frontend/src/stopsSearchMenu.scss @@ -0,0 +1,242 @@ +@use "_common"; +@use "_utils"; + +.stopSearchMenu { + @extend %widget; + + .inputGroup { + width: 50%; + // height: 5%; + + // TODO: Setup hop-ui to avoid to have to overrride rules. + input { + color: var(--idfm-white); + font-family: IDFVoyageur-regular; + } + } + + .title { + @extend %title; + + display: flex; + justify-content: center; + } + + .body { + @extend %body; + + flex-direction: row; + + .stopsPanels { + width: 50%; + height: 100%; + + scroll-snap-type: y mandatory; + overflow-y: scroll; + + .stopPanel { + // display: None; + scroll-snap-align: center; + + .stop { + width: calc(1880/1920*100%); + height: calc(100% / 5); + // margin: 0 calc(20/1920*100%); + margin: 0 calc(10/1920*100%); + + display: flex; + align-items: center; + flex-direction: row; + + /* TODO: compute the border weight according to the parent height */ + /* TODO: Disable border-bottom for the last .line */ + border-bottom: solid calc(2px); + + .name { + width: 60%; + + font-family: IDFVoyageur-bold; + } + + .lineRepr { + // height: 100%; + width: 40%; + aspect-ratio: 2.5; + // margin-left: auto; + + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + + .transportMode { + @extend %transportMode; + + height: 50%; + } + + .break { + flex-basis: 100%; + height: 0; + } + + .linesRepresentationMatrix { + @extend %busLinePicto; // Use the larger picto aspect-ratio + width: 75%; + aspect-ratio: 3; + + display: flex; + flex-flow: row; + flex-wrap: wrap; + // justify-content: space-around; + + // .break { + // flex-basis: 100%; + // height: 0; + // } + + %picto { + margin-left: 1%; + align-self: center; + justify-self: center; + } + + %singleLinePicto { + @extend %picto; + + height: 80%; + } + + .transportMode { + @extend %transportMode; + @extend %picto; + } + + .tramLinePicto { + @extendnd %tramLinePicto; + @extend %singleLinePicto; + } + + .trainLinePicto { + @extend %trainLinePicto; + @extend %singleLinePicto; + } + + .metroLinePicto { + @extendnd %metroLinePicto; + @extend %singleLinePicto; + } + + .busLinePicto { + @extend %busLinePicto; + @extend %picto; + } + } + } + } + // .stop:last-child { + // border-bottom: 0; + // /* to make up for the bottom border deletion */ + // padding-bottom: calc(2px); + // } + } + .displayed { + display: block; + } + } + + .map { + height: 100%; + 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; + // } + // } + // } + // } +} diff --git a/frontend/src/stopsManager.tsx b/frontend/src/stopsSearchMenu.tsx similarity index 97% rename from frontend/src/stopsManager.tsx rename to frontend/src/stopsSearchMenu.tsx index 4d3c6b7..fe5b6bd 100644 --- a/frontend/src/stopsManager.tsx +++ b/frontend/src/stopsSearchMenu.tsx @@ -30,8 +30,8 @@ const StopRepr: VoidComponent<{ stop: Stop }> = (props) => { for (const lineId of lineIds) { const line = await getLine(lineId); if (line !== undefined) { - reprs.push(
{renderLineTransportMode(line)}
); - reprs.push(renderLinePicto(line, styles)); + reprs.push(
{renderLineTransportMode(line)}
); + reprs.push(renderLinePicto(line)); } } return reprs; @@ -73,7 +73,7 @@ const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => { if (line !== undefined) { if (!(line.transportMode in byModeReprs)) { byModeReprs[line.transportMode] = { - mode:
{renderLineTransportMode(line)}
+ mode:
{renderLineTransportMode(line)}
, }; } byModeReprs[line.transportMode][line.shortName] = renderLinePicto(line, styles); diff --git a/frontend/src/utils.tsx b/frontend/src/utils.tsx index b9c0187..01ef21b 100644 --- a/frontend/src/utils.tsx +++ b/frontend/src/utils.tsx @@ -27,9 +27,9 @@ export function renderLineTransportMode(line: Line): JSX.Element { return } -function renderBusLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element { +function renderBusLinePicto(line: Line): JSX.Element { return ( -
+
+
@@ -65,9 +65,9 @@ function renderTramLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element ); } -function renderMetroLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element { +function renderMetroLinePicto(line: Line): JSX.Element { return ( -
+
+