Adrien/carrramba-encore-rate
1
0
Fork 0
Code Issues 1 Pull Requests 1 Projects Releases Wiki Activity

💄 Replace css files with scss and factorize CSS rules

Browse Source
This commit is contained in:
Adrien
2023-03-05 12:49:20 +01:00
parent a9d918fb0f
commit f09ba4cc58
15 changed files with 459 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@@ -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"
}

6
frontend/src/App.module.css → frontend/src/App.scss
View File

@@ -10,12 +10,14 @@
display: flex;
text-align: center;
}
.panel {
.panel {
min-width: 100%;
height: inherit;
width: inherit;
scroll-snap-align: center;
background-color: var(--idfm-black);
}
}

21
frontend/src/App.tsx
View File

@@ -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 (
<BusinessDataProvider>
<SearchProvider>
<AppContextProvider>
<HopeProvider>
<div class={styles.App} data-panelsnap-id="1">
<div class={styles.panel}>
<StopsManager />
<div class="App">
<div class="panel">
<StopsSearchMenu />
</div>
<div class={styles.panel}>
<div class="panel">
<PassagesDisplay />
</div>
</div>
</HopeProvider>
</SearchProvider>
</AppContextProvider>
</BusinessDataProvider>
);
};

51
frontend/src/passagesDisplay.module.css → frontend/src/_common.scss
View File

@@ -1,5 +1,5 @@
/* 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 */
@@ -7,8 +7,6 @@
display: flex;
flex-direction: column;
background-color: var(--idfm-black);
}
/* Idfm: 1800x100px (margin: 17px 60px) */
@@ -25,54 +23,18 @@
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%);
@@ -83,10 +45,13 @@
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%);

31
frontend/src/_utils.scss Normal file
View File

@@ -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;
}

0
frontend/src/index.css → frontend/src/index.scss
View File

2
frontend/src/index.tsx
View File

@@ -1,7 +1,7 @@
/* @refresh reload */
import { render } from 'solid-js/web';
import './index.css';
import './index.scss';
import App from './App';
render(() => (<App/>), document.getElementById('root') as HTMLElement);

60
frontend/src/passagesDisplay.scss Normal file
View File

@@ -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
}
}

18
frontend/src/passagesDisplay.tsx
View File

@@ -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 (
<div class={styles.header}>
<div class="header">
<Show when={transportModeUrls() !== undefined} >
<For each={transportModeUrls()}>
{(url) =>
<div class={styles.transportMode}>
<div class="transportMode">
<img src={url} />
</div>
}
</For>
</Show>
<div class={styles.title}>
<div class="title">
<svg viewBox="0 0 1260 50">
<text x="0" y="50%" dominant-baseline="middle" font-size="50" style="fill: #ffffff">
{props.title}
</text>
</svg>
</div>
<div class={styles.menu}>
<div class="menu">
<Menu>
<MenuTrigger
as={IconButton}
@@ -150,7 +150,7 @@ const Header: VoidComponent<{ title: string }> = (props) => {
</MenuContent>
</Menu>
</div>
<div class={styles.clock}>
<div class="clock">
<svg viewBox="0 0 115 43">
<text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle" font-size="43" style="fill: #ffffff">
{format(dateNow(), "HH:mm")}
@@ -171,7 +171,7 @@ const Footer: VoidComponent<{}> = () => {
const { getDisplayedPanelId, getPanels } = passagesDisplayStore;
return (
<div class={styles.footer}>
<div class="footer">
<For each={getPanels()}>
{(panel) => {
const position = panel.position;
@@ -244,7 +244,7 @@ const Body: ParentComponent<{ maxPassagesPerPanel: number, syncPeriodMsec: numbe
});
return (
<div class={styles.panelsContainer}>
<div class="body">
{() => {
setPanels([]);
@@ -296,7 +296,7 @@ export const PassagesDisplay: ParentComponent = () => {
const panelSwitchPeriodMsec = 4 * 1000;
return (
<div class={styles.passagesDisplay}>
<div class="passagesDisplay">
<PassagesDisplayProvider>
<Header title="Prochains passages" />
<Body maxPassagesPerPanel={MAX_PASSAGES_PER_PANEL} syncPeriodMsec={syncPeriodMsec} panelSwitchPeriodMsec={panelSwitchPeriodMsec} />

64
frontend/src/passagesPanel.module.css → frontend/src/passagesPanel.scss
View File

@@ -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;
padding-right: calc(30/1920*100%);
/* TODO: compute the border weight according to the parent width */
border-right: solid calc(5px);
}
.withPlatformFirstPassage .passage {
.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 {
.platform {
margin-top: auto;
margin-bottom: calc(5/176*100%);
}
.withPlatformFirstPassage .platform rect {
rect {
background-color: var(--idfm-black);
}
}
.withPlatformFirstPassage .platform text {
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%);
}
.withPlatformSecondPassage .passage {
.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 svg {
svg {
font-family: IDFVoyageur-regular;
}
}
.withPlatformSecondPassage .platform rect {
.platform {
rect {
background-color: var(--idfm-black);
}
}
.withPlatformSecondPassage .platform text {
text {
vertical-align: middle;
font-family: IDFVoyageur-bold;
}
}
}

30
frontend/src/passagesPanel.tsx
View File

@@ -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 (
<svg class={styles.platform} viewBox={`0 0 ${viewBoxWidthPx} 40`}>
<svg class="platform" viewBox={`0 0 ${viewBoxWidthPx} 40`}>
<rect ref={rectRef} x="0" y="0" height="100%" rx="9" ry="9" />
<text ref={textRef} x="100%" y="55%" dominant-baseline="middle" text-anchor="end" font-size="25" style={{ fill: "#ffffff" }}>
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 = <svg class={styles.passage} viewBox={`0 0 215 ${props.fontSize}`}>
const text = <svg class="passage" viewBox={`0 0 215 ${props.fontSize}`}>
<Motion.text
x="100%" y="55%"
dominant-baseline="middle" text-anchor="end"
@@ -142,12 +142,12 @@ const DestinationPassages: VoidComponent<{ line: Line, destination: string }> =
});
return (
<div class={styles.line}>
<div class={styles.transportMode}>
<div class="line">
<div class="transportMode">
{renderLineTransportMode(props.line)}
</div>
{renderLinePicto(props.line, styles)}
<div class={styles.destination}>
{renderLinePicto(props.line)}
<div class="destination">
<svg ref={destinationViewboxRef} viewBox="0 0 600 40">
<text ref={destinationTextRef} x="0" y="50%"
dominant-baseline="middle"
@@ -157,17 +157,17 @@ const DestinationPassages: VoidComponent<{ line: Line, destination: string }> =
</text>
</svg>
</div>
<div class={styles.trafficStatus}>
<div class="trafficStatus">
<svg viewBox="0 0 51 51">
<circle cx="50%" cy="50%" r="24" stroke="#231f20" stroke-width="3" style={trafficStatusStyle} />
</svg>
</div>
<TtwPassage line={props.line} destination={props.destination} index={0}
style={styles.firstPassage} withPlatformStyle={styles.withPlatformFirstPassage}
fontSize={50} fallbackStyle={styles.unavailableFirstPassage} />
style="firstPassage" withPlatformStyle="withPlatformFirstPassage"
fontSize={50} fallbackStyle="unavailableFirstPassage" />
<TtwPassage line={props.line} destination={props.destination} index={1}
style={styles.secondPassage} withPlatformStyle={styles.withPlatformSecondPassage}
fontSize={45} fallbackStyle={styles.unavailableSecondPassage} />
style="secondPassage" withPlatformStyle="withPlatformSecondPassage"
fontSize={45} fallbackStyle="unavailableSecondPassage" />
</div >
);
}
@@ -189,15 +189,13 @@ export const PassagesPanel: PassagesPanelComponent = (props) => {
const [lines] = createResource<Line[], string[]>(props.lineIds, getLines);
return (
<div classList={{ [styles.passagesContainer]: true, [styles.displayed]: props.show }} >
<div classList={{ ["passagesContainer"]: true, ["displayed"]: props.show }} >
<Show when={lines() !== undefined} >
<For each={lines()}>
{(line) =>
<Show when={getLineDestinations(line.id) !== undefined}>
<For each={getLineDestinations(line.id)}>
{(destination) =>
<DestinationPassages line={line} destination={destination} />
}
{(destination) => <DestinationPassages line={line} destination={destination} />}
</For>
</Show>
}

33
frontend/src/stopManager.module.css
View File

@@ -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;
}

242
frontend/src/stopsSearchMenu.scss Normal file
View File

@@ -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;
// }
// }
// }
// }
}

6
frontend/src/stopsManager.tsx → frontend/src/stopsSearchMenu.tsx
View File

@@ -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(<div class={styles.transportMode}>{renderLineTransportMode(line)}</div>);
reprs.push(renderLinePicto(line, styles));
reprs.push(<div class="transportMode">{renderLineTransportMode(line)}</div>);
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: <div class={styles.transportMode}>{renderLineTransportMode(line)}</div>
mode: <div class="transportMode">{renderLineTransportMode(line)}</div>,
};
}
byModeReprs[line.transportMode][line.shortName] = renderLinePicto(line, styles);

26
frontend/src/utils.tsx
View File

@@ -27,9 +27,9 @@ export function renderLineTransportMode(line: Line): JSX.Element {
return <img src={getTransportModeSrc(line.transportMode)} />
}
function renderBusLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
function renderBusLinePicto(line: Line): JSX.Element {
return (
<div class={styles.busLinePicto}>
<div class="busLinePicto">
<svg viewBox="0 0 31.5 14">
<rect x="0" y="0" width="31.5" height="14" rx="1.5" ry="1.5" style={{ fill: `#${line.backColorHexa}` }} />
<text x="50%"
@@ -45,10 +45,10 @@ function renderBusLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
);
}
function renderTramLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
function renderTramLinePicto(line: Line): JSX.Element {
const lineStyle = { fill: `#${line.backColorHexa}` };
return (
<div class={styles.tramLinePicto}>
<div class="tramLinePicto">
<svg viewBox="0 0 20 20">
<rect x="0" y="0" width="20" height="3" rx="1" ry="1" style={lineStyle} />
<rect x="0" y="17" width="20" height="3" rx="1" ry="1" style={lineStyle} />
@@ -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 (
<div class={styles.metroLinePicto}>
<div class="metroLinePicto">
<svg viewBox="0 0 20 20">
<circle cx="10" cy="10" r="10" style={{ fill: `#${line.backColorHexa}` }} />
<text x="50%"
@@ -82,9 +82,9 @@ function renderMetroLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element
);
}
function renderTrainLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
function renderTrainLinePicto(line: Line): JSX.Element {
return (
<div class={styles.trainLinePicto}>
<div class="trainLinePicto">
<svg viewBox="0 0 20 20">
<rect x="0" y="0" width="20" height="20" rx="4.5" ry="4.5" style={{ fill: `#${line.backColorHexa}` }} />
<text x="50%"
@@ -100,19 +100,19 @@ function renderTrainLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element
);
}
export function renderLinePicto(line: Line, styles: CSSModuleClasses): JSX.Element {
export function renderLinePicto(line: Line): JSX.Element {
switch (line.transportMode) {
case "bus":
case "funicular":
return renderBusLinePicto(line, styles);
return renderBusLinePicto(line);
case "tram":
return renderTramLinePicto(line, styles);
return renderTramLinePicto(line);
/* case "val": */
case "metro":
return renderMetroLinePicto(line, styles);
return renderMetroLinePicto(line);
case "transilien":
case "rer":
case "ter":
return renderTrainLinePicto(line, styles);
return renderTrainLinePicto(line);
}
}