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

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