From ae9456d6dd2519a609f24e9c91857a9412e8313d Mon Sep 17 00:00:00 2001 From: He4eT Date: Mon, 12 Jun 2023 02:31:52 +0300 Subject: [PATCH] Views: replace css files with scss modules --- src/App.jsx | 8 +-- src/components/Player/Status/Status.jsx | 2 +- .../Player/Status/Status.module.scss | 6 ++- src/routing.js | 3 ++ src/style/App.module.scss | 49 +++++++++++++++++++ src/style/base.scss | 31 ------------ src/views/GamesView/GamesView.css | 11 ----- src/views/GamesView/GamesView.jsx | 39 +++++++-------- src/views/GamesView/GamesView.module.scss | 13 +++++ src/views/HomeView/HomeView.css | 3 -- src/views/HomeView/HomeView.jsx | 4 +- src/views/{ => NotFoundView}/NotFoundView.jsx | 0 src/views/PlayerView/PlayerView.css | 13 ----- src/views/PlayerView/PlayerView.jsx | 2 - src/views/ThemesView/ThemesView.css | 39 --------------- src/views/ThemesView/ThemesView.jsx | 27 +++++----- src/views/ThemesView/ThemesView.module.scss | 38 ++++++++++++++ 17 files changed, 147 insertions(+), 141 deletions(-) create mode 100644 src/style/App.module.scss delete mode 100644 src/views/GamesView/GamesView.css create mode 100644 src/views/GamesView/GamesView.module.scss delete mode 100644 src/views/HomeView/HomeView.css rename src/views/{ => NotFoundView}/NotFoundView.jsx (100%) delete mode 100644 src/views/PlayerView/PlayerView.css delete mode 100644 src/views/ThemesView/ThemesView.css create mode 100644 src/views/ThemesView/ThemesView.module.scss diff --git a/src/App.jsx b/src/App.jsx index 982db1a..e60af69 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -12,7 +12,9 @@ import HomeView from '~/src/views/HomeView/HomeView' import GamesView from '~/src/views/GamesView/GamesView' import ThemesView from '~/src/views/ThemesView/ThemesView' import PlayerView from '~/src/views/PlayerView/PlayerView' -import NotFoundView from '~/src/views/NotFoundView' +import NotFoundView from '~/src/views/NotFoundView/NotFoundView' + +import * as style from './style/App.module.scss' export default function App () { const themeEngine = useThemeEngine() @@ -30,8 +32,8 @@ export default function App () { return (
diff --git a/src/components/Player/Status/Status.jsx b/src/components/Player/Status/Status.jsx index 2a17f86..6c33e26 100644 --- a/src/components/Player/Status/Status.jsx +++ b/src/components/Player/Status/Status.jsx @@ -3,7 +3,7 @@ import { Link } from 'wouter-preact' import * as s from './Status.module.scss' const fail = (details) => ( -
+

Error

diff --git a/src/components/Player/Status/Status.module.scss b/src/components/Player/Status/Status.module.scss index 494caaf..a219469 100644 --- a/src/components/Player/Status/Status.module.scss +++ b/src/components/Player/Status/Status.module.scss @@ -6,8 +6,12 @@ } .status { - padding: var(--inner-padding); word-break: break-word; + padding-block: var(--inner-padding); + + @media (max-width: 800px) { + padding: var(--inner-padding); + } &.loading > div:after { animation: dots0123 1s infinite; diff --git a/src/routing.js b/src/routing.js index 3ee550e..8896e5a 100644 --- a/src/routing.js +++ b/src/routing.js @@ -9,7 +9,10 @@ export const buildPlayLinkHref = ({ url }) => `/#/play/${encodeURIComponent(url)}` export const extractView = (location) => { + if (location === '/') return 'home' + const currentView = location.split('/').filter(Boolean)[0] + return currentView || '' } diff --git a/src/style/App.module.scss b/src/style/App.module.scss new file mode 100644 index 0000000..f77e2a8 --- /dev/null +++ b/src/style/App.module.scss @@ -0,0 +1,49 @@ +.app { + min-height: 100%; + box-sizing: border-box; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + color: var(--main-color); + background-color: var(--bg-color); + + /* */ + &.home, &.games, &.themes { + padding: var(--inner-padding); + + /* Fix for Jumping Scrollbar Issue */ + @media (min-width: 800px) { + padding-left: calc(100vw - 100% + var(--inner-padding)); + } + } + + /* Player view */ + &.play, &.focus { + height: 100%; + max-height: 100dvh; + + @media (min-width: 800px) { + & > main { + max-height: 90%; + margin: auto; + } + } + } + + /* */ + & > main { + flex: 1 1 auto; + + height: 100%; + width: 100%; + box-sizing: border-box; + + @media (min-width: 800px) { + margin: 5vh 0; + max-width: 800px; + } + } +} diff --git a/src/style/base.scss b/src/style/base.scss index fec64f4..2d14697 100644 --- a/src/style/base.scss +++ b/src/style/base.scss @@ -15,34 +15,3 @@ html, body { #root { height: 100%; } - -.app { - min-height: 100%; - box-sizing: border-box; - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - color: var(--main-color); - background-color: var(--bg-color); - - /* Fix for Jumping Scrollbar Issue */ - @media (min-width: 800px) { - padding-left: calc(100vw - 100%); - } - - & > main { - flex: 1 1 auto; - - height: 100%; - width: 100%; - box-sizing: border-box; - - @media (min-width: 800px) { - margin: 5vh 0; - max-width: 800px; - } - } -} diff --git a/src/views/GamesView/GamesView.css b/src/views/GamesView/GamesView.css deleted file mode 100644 index 8ead004..0000000 --- a/src/views/GamesView/GamesView.css +++ /dev/null @@ -1,11 +0,0 @@ -.app > .view.games { - padding: var(--inner-padding); -} - -.view.games h4 { - margin: 0; -} - -.view.games li { - margin-bottom: 1em; -} diff --git a/src/views/GamesView/GamesView.jsx b/src/views/GamesView/GamesView.jsx index 959b72c..231caac 100644 --- a/src/views/GamesView/GamesView.jsx +++ b/src/views/GamesView/GamesView.jsx @@ -5,7 +5,7 @@ import GameEntry from import top2019 from './top2019' -import './GamesView.css' +import * as s from './GamesView.module.scss' const tutorialGame = { name: 'The Dreamhold', @@ -15,8 +15,7 @@ const tutorialGame = { export default function GamesView () { return ( -
- +

.

-

- Tutorial -

+
+

+ Tutorial +

-

- If you are not familiar with Interactive Fiction, - you should start with this tutorial game - by Andrew Plotkin: -

+

+ If you are not familiar with Interactive Fiction, + you should start with this tutorial game + by Andrew Plotkin: +

-
    -
  • - -
    • -
- -
+
    +
  • + +
    • +
+

Interactive Fiction Top 50 of All Time diff --git a/src/views/GamesView/GamesView.module.scss b/src/views/GamesView/GamesView.module.scss new file mode 100644 index 0000000..989d57e --- /dev/null +++ b/src/views/GamesView/GamesView.module.scss @@ -0,0 +1,13 @@ +.games { + .tutorial { + margin-block: 64px; + } + + h4 { + margin: 0; + } + + li { + margin-bottom: 1em; + } +} diff --git a/src/views/HomeView/HomeView.css b/src/views/HomeView/HomeView.css deleted file mode 100644 index 88a7278..0000000 --- a/src/views/HomeView/HomeView.css +++ /dev/null @@ -1,3 +0,0 @@ -.app > .view.home { - padding: var(--inner-padding); -} diff --git a/src/views/HomeView/HomeView.jsx b/src/views/HomeView/HomeView.jsx index 3240cb6..2bd7b84 100644 --- a/src/views/HomeView/HomeView.jsx +++ b/src/views/HomeView/HomeView.jsx @@ -12,13 +12,11 @@ import TargetURLSelector from import ThemeSelector from '~/src/components/ThemeSelector/ThemeSelector' -import './HomeView.css' - export default function HomeView ({ themeEngine }) { const setLocation = useHashLocation()[1] return ( -
+

ElseIFPlayer

diff --git a/src/views/NotFoundView.jsx b/src/views/NotFoundView/NotFoundView.jsx similarity index 100% rename from src/views/NotFoundView.jsx rename to src/views/NotFoundView/NotFoundView.jsx diff --git a/src/views/PlayerView/PlayerView.css b/src/views/PlayerView/PlayerView.css deleted file mode 100644 index c9ce6f7..0000000 --- a/src/views/PlayerView/PlayerView.css +++ /dev/null @@ -1,13 +0,0 @@ -.app.play, -.app.focus { - height: 100%; - max-height: 100dvh; -} - -@media (min-width: 800px) { - .app.play main, - .app.focus main { - max-height: 90%; - margin: auto; - } -} diff --git a/src/views/PlayerView/PlayerView.jsx b/src/views/PlayerView/PlayerView.jsx index b8d7c86..07d1280 100644 --- a/src/views/PlayerView/PlayerView.jsx +++ b/src/views/PlayerView/PlayerView.jsx @@ -3,8 +3,6 @@ import { useState, useEffect } from 'preact/hooks' import UrlPlayer from '~/src/components/Player/UrlPlayer' import MenuOverlay from '~/src/components/Player/MenuOverlay/MenuOverlay' -import './PlayerView.css' - const decode = (encodedUrl) => decodeURIComponent(encodedUrl) export default function PlayerView ({ diff --git a/src/views/ThemesView/ThemesView.css b/src/views/ThemesView/ThemesView.css deleted file mode 100644 index e6640ce..0000000 --- a/src/views/ThemesView/ThemesView.css +++ /dev/null @@ -1,39 +0,0 @@ -.app > .view.themes { - padding: var(--inner-padding); - --current-border: var(--main-color); -} - -.themePreview { - border: 2px solid var(--current-border); - padding: calc(2 * var(--inner-padding)); - margin-bottom: 32px; - - background-color: var(--bg-color); - color: var(--main-color); -} - -.themePreview.current { - padding: 0; - border: none; - margin-bottom: 64px; -} - -.themePreview .output { - border: 2px solid var(--main-color); - padding: var(--inner-padding); - margin-bottom: 8px; -} - -.themePreview .output .message.subheader { - font-weight: bold; - color: var(--accent-color); - text-transform: capitalize; -} - -.themePreview .output .message.input { - color: var(--input-color); -} - -.themePreview button { - width: 100%; -} diff --git a/src/views/ThemesView/ThemesView.jsx b/src/views/ThemesView/ThemesView.jsx index 52dc913..fc5abe1 100644 --- a/src/views/ThemesView/ThemesView.jsx +++ b/src/views/ThemesView/ThemesView.jsx @@ -1,15 +1,15 @@ import { Link } from 'wouter-preact' -import './ThemesView.css' +import * as s from './ThemesView.module.scss' const Preview = (themeEngine, theme) => -
-
-
+
+
+
> look

-
+
{theme}
@@ -29,7 +29,7 @@ export default function ThemesView ({ themeEngine }) { .map((theme) => Preview(themeEngine, theme)) return ( -
+

Themes Page

@@ -39,17 +39,16 @@ export default function ThemesView ({ themeEngine }) { go back.

-

- Current Theme -

- -
-
-
+
+

+ Current Theme +

+
+
> look

-
+
Selected: {themeEngine.currentTheme}
diff --git a/src/views/ThemesView/ThemesView.module.scss b/src/views/ThemesView/ThemesView.module.scss new file mode 100644 index 0000000..71c0db7 --- /dev/null +++ b/src/views/ThemesView/ThemesView.module.scss @@ -0,0 +1,38 @@ +.themes { + --current-border: var(--main-color); + + .themePreview { + border: 2px solid var(--current-border); + padding: calc(2 * var(--inner-padding)); + margin-bottom: 32px; + + background-color: var(--bg-color); + color: var(--main-color); + + &.current { + padding: 0; + border: none; + margin-block: 64px; + } + + .output { + border: 2px solid var(--main-color); + padding: var(--inner-padding); + margin-bottom: 8px; + + .message.subheader { + font-weight: bold; + color: var(--accent-color); + text-transform: capitalize; + } + + .message.input { + color: var(--input-color); + } + } + + button { + width: 100%; + } + } +}