From cf933d6a56fa20d93093c6421e18c73d1cd3ec76 Mon Sep 17 00:00:00 2001 From: Haoyu Xu Date: Tue, 14 Mar 2023 21:35:19 -0400 Subject: [PATCH] refactor(directory): rewrite stylesheet with scss --- .eslintrc.cjs | 15 - .eslintrc.json | 15 + directory/Version | 2 +- directory/src/App.jsx | 38 +-- directory/src/{App.css => App.scss} | 12 +- .../component/{main_border.jsx => border.jsx} | 6 +- directory/src/component/dropdown.jsx | 2 +- directory/src/component/popup.jsx | 6 +- directory/src/component/return_button.jsx | 2 +- .../border.module.scss} | 0 .../component/{ => scss}/dropdown.module.scss | 2 +- .../component/{ => scss}/popup.module.scss | 14 +- .../{ => scss}/return_button.module.scss | 0 .../component/{ => scss}/switch.module.scss | 0 directory/src/component/switch.jsx | 2 +- .../src/routes/{error-page.jsx => Error.jsx} | 21 +- directory/src/routes/{root.jsx => Root.jsx} | 79 ++--- directory/src/routes/error-page.css | 53 ---- directory/src/routes/index.jsx | 18 +- .../path/{changelogs.jsx => Changelogs.jsx} | 6 +- .../src/routes/path/{home.jsx => Home.jsx} | 6 +- .../path/{operator.jsx => Operator.jsx} | 66 ++-- directory/src/routes/path/home.module.scss | 1 - directory/src/routes/path/operator.css | 241 -------------- directory/src/routes/root.css | 294 ------------------ directory/src/scss/_main_share.scss | 13 + .../_tab_base.scss => scss/_page_base.scss} | 30 +- .../changelogs/Changelogs.module.scss} | 2 +- directory/src/scss/error/Error.module.scss | 54 ++++ directory/src/scss/home/Home.module.scss | 1 + directory/src/scss/root/Root.module.scss | 95 ++++++ directory/src/scss/root/drawer.module.scss | 54 ++++ directory/src/scss/root/footer.module.scss | 35 +++ directory/src/scss/root/header.module.scss | 74 +++++ jsconfig.json | 16 +- libs/directory.js | 26 ++ vite.config.js | 25 -- 37 files changed, 526 insertions(+), 800 deletions(-) delete mode 100644 .eslintrc.cjs create mode 100644 .eslintrc.json rename directory/src/{App.css => App.scss} (71%) rename directory/src/component/{main_border.jsx => border.jsx} (61%) rename directory/src/component/{main_border.module.scss => scss/border.module.scss} (100%) rename directory/src/component/{ => scss}/dropdown.module.scss (99%) rename directory/src/component/{ => scss}/popup.module.scss (100%) rename directory/src/component/{ => scss}/return_button.module.scss (100%) rename directory/src/component/{ => scss}/switch.module.scss (100%) rename directory/src/routes/{error-page.jsx => Error.jsx} (89%) rename directory/src/routes/{root.jsx => Root.jsx} (74%) delete mode 100644 directory/src/routes/error-page.css rename directory/src/routes/path/{changelogs.jsx => Changelogs.jsx} (93%) rename directory/src/routes/path/{home.jsx => Home.jsx} (97%) rename directory/src/routes/path/{operator.jsx => Operator.jsx} (85%) delete mode 100644 directory/src/routes/path/home.module.scss delete mode 100644 directory/src/routes/path/operator.css delete mode 100644 directory/src/routes/root.css create mode 100644 directory/src/scss/_main_share.scss rename directory/src/{routes/path/_tab_base.scss => scss/_page_base.scss} (89%) rename directory/src/{routes/path/changelogs.module.scss => scss/changelogs/Changelogs.module.scss} (90%) create mode 100644 directory/src/scss/error/Error.module.scss create mode 100644 directory/src/scss/home/Home.module.scss create mode 100644 directory/src/scss/root/Root.module.scss create mode 100644 directory/src/scss/root/drawer.module.scss create mode 100644 directory/src/scss/root/footer.module.scss create mode 100644 directory/src/scss/root/header.module.scss diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index 4dabfd5..0000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1,15 +0,0 @@ -module.exports = { - "env": { - "browser": true, - "es2021": true - }, - "extends": [ - 'eslint:recommended', - "plugin:react/recommended", - "plugin:react-hooks/recommended" - ], - "parserOptions": { - "ecmaVersion": "latest", - "sourceType": "module" - }, -} \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..a799da1 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,15 @@ +{ + "env": { + "browser": true, + "es2021": true + }, + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:react-hooks/recommended" + ], + "parserOptions": { + "ecmaVersion": "latest", + "sourceType": "module" + } +} diff --git a/directory/Version b/directory/Version index e92964f..c678b02 100644 --- a/directory/Version +++ b/directory/Version @@ -1 +1 @@ -1.0.17 \ No newline at end of file +1.0.18 \ No newline at end of file diff --git a/directory/src/App.jsx b/directory/src/App.jsx index 88d7860..4c0bd4d 100644 --- a/directory/src/App.jsx +++ b/directory/src/App.jsx @@ -2,40 +2,20 @@ import React from 'react'; import ReactDOM from 'react-dom/client' import { createBrowserRouter, - createRoutesFromElements, RouterProvider, - Route } from "react-router-dom"; -import Root from "@/routes/root"; -import ErrorPage from "@/routes/error-page"; +import Root from "@/routes/Root"; +import Error from "@/routes/Error"; import routes from "@/routes"; -import '@/App.css'; +import '@/App.scss'; import 'reset-css'; -const router = createBrowserRouter( - createRoutesFromElements( - - } - errorElement={} - > - {routes.map((route) => { - return ( - - ) - })} - - ) -); +const router = createBrowserRouter([{ + path: "/", + element: , + errorElement: , + children: routes.filter((item) => item.routeable), +},]); ReactDOM.createRoot(document.getElementById('root')).render( diff --git a/directory/src/App.css b/directory/src/App.scss similarity index 71% rename from directory/src/App.css rename to directory/src/App.scss index 920b6ba..db90372 100644 --- a/directory/src/App.css +++ b/directory/src/App.scss @@ -3,17 +3,17 @@ @import 'https://fonts.cdnfonts.com/css/geometos'; :root { - --text-color: rgba(255 255 255 87%); + --text-color: rgba(255, 255, 255, 87%); --text-color-full: #fff; --secondary-text-color: #686a72; - --date-color: rgba(255 255 255 20%); + --date-color: rgba(255, 255, 255, 20%); --border-color: #707070; --link-highlight-color: #33b5e5; - --drawer-background-color: rgba(0 0 0 88%); + --drawer-background-color: rgba(0, 0, 0, 88%); --root-background-color: #131313; - --home-item-hover-background-color: rgba(67 67 67 30%); - --home-item-background-linear-gradient-color: rgba(255 255 255 10%); - --home-item-outline-color: rgba(214 214 214 30%); + --home-item-hover-background-color: rgba(67, 67, 67, 30%); + --home-item-background-linear-gradient-color: rgba(255, 255, 255, 10%); + --home-item-outline-color: rgba(214, 214, 214, 30%); --button-color: #666; font-family: Geometos, "Noto Sans SC", sans-serif; diff --git a/directory/src/component/main_border.jsx b/directory/src/component/border.jsx similarity index 61% rename from directory/src/component/main_border.jsx rename to directory/src/component/border.jsx index 4ec1133..d97bba9 100644 --- a/directory/src/component/main_border.jsx +++ b/directory/src/component/border.jsx @@ -1,14 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classes from './main_border.module.scss'; +import classes from './scss/border.module.scss'; -export default function MainBorder(props) { +export default function Border(props) { return (
{props.children}
) } -MainBorder.propTypes = { +Border.propTypes = { children: PropTypes.node, }; \ No newline at end of file diff --git a/directory/src/component/dropdown.jsx b/directory/src/component/dropdown.jsx index 4adb0a6..307ccce 100644 --- a/directory/src/component/dropdown.jsx +++ b/directory/src/component/dropdown.jsx @@ -2,7 +2,7 @@ import React, { useState } from 'react' import PropTypes from 'prop-types'; -import classes from './dropdown.module.scss' +import classes from './scss/dropdown.module.scss' export default function Dropdown(props) { const [hidden, setHidden] = useState(true) diff --git a/directory/src/component/popup.jsx b/directory/src/component/popup.jsx index b51f5ec..d1e081c 100644 --- a/directory/src/component/popup.jsx +++ b/directory/src/component/popup.jsx @@ -1,9 +1,9 @@ import React, { useState, } from 'react' -import classes from './popup.module.scss'; +import classes from './scss/popup.module.scss'; import ReturnButton from '@/component/return_button'; -import MainBorder from '@/component/main_border'; +import Border from '@/component/border'; import PropTypes from 'prop-types'; export default function Popup(props) { @@ -20,7 +20,7 @@ export default function Popup(props) {
{props.title}
- +
{props.children}
diff --git a/directory/src/component/return_button.jsx b/directory/src/component/return_button.jsx index e0480df..f61598d 100644 --- a/directory/src/component/return_button.jsx +++ b/directory/src/component/return_button.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classes from './return_button.module.scss' +import classes from './scss/return_button.module.scss' export default function ReturnButton(props) { diff --git a/directory/src/component/main_border.module.scss b/directory/src/component/scss/border.module.scss similarity index 100% rename from directory/src/component/main_border.module.scss rename to directory/src/component/scss/border.module.scss diff --git a/directory/src/component/dropdown.module.scss b/directory/src/component/scss/dropdown.module.scss similarity index 99% rename from directory/src/component/dropdown.module.scss rename to directory/src/component/scss/dropdown.module.scss index a5c3cab..9536ff4 100644 --- a/directory/src/component/dropdown.module.scss +++ b/directory/src/component/scss/dropdown.module.scss @@ -68,7 +68,7 @@ &:hover, &:focus, - &:active { + &.active { .text { color: currentColor; } diff --git a/directory/src/component/popup.module.scss b/directory/src/component/scss/popup.module.scss similarity index 100% rename from directory/src/component/popup.module.scss rename to directory/src/component/scss/popup.module.scss index 17a2be8..22234d8 100644 --- a/directory/src/component/popup.module.scss +++ b/directory/src/component/scss/popup.module.scss @@ -41,6 +41,13 @@ align-items: center; text-transform: uppercase; font-family: "Geometos", "Noto Sans SC", sans-serif; + .return-button { + color: var(--button-color); + transition: color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s; + &:hover { + color: var(--text-color); + } + } } .text { flex-grow: 1; @@ -66,13 +73,6 @@ opacity: 0.5; visibility: visible; } - .return-button { - color: var(--button-color); - transition: color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s; - &:hover { - color: var(--text-color); - } - } } &.active { opacity: 1; diff --git a/directory/src/component/return_button.module.scss b/directory/src/component/scss/return_button.module.scss similarity index 100% rename from directory/src/component/return_button.module.scss rename to directory/src/component/scss/return_button.module.scss diff --git a/directory/src/component/switch.module.scss b/directory/src/component/scss/switch.module.scss similarity index 100% rename from directory/src/component/switch.module.scss rename to directory/src/component/scss/switch.module.scss diff --git a/directory/src/component/switch.jsx b/directory/src/component/switch.jsx index 563837d..c02a531 100644 --- a/directory/src/component/switch.jsx +++ b/directory/src/component/switch.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; -import classes from './switch.module.scss'; +import classes from './scss/switch.module.scss'; import { useI18n } from '@/state/language' diff --git a/directory/src/routes/error-page.jsx b/directory/src/routes/Error.jsx similarity index 89% rename from directory/src/routes/error-page.jsx rename to directory/src/routes/Error.jsx index b8b1029..33c46e9 100644 --- a/directory/src/routes/error-page.jsx +++ b/directory/src/routes/Error.jsx @@ -9,7 +9,8 @@ import { useNavigate, useRouteError } from "react-router-dom"; -import './error-page.css' +import header from '@/scss/root/header.module.scss' +import classes from '@/scss/error/Error.module.scss' import { useAtom } from 'jotai' import { atomWithStorage } from 'jotai/utils'; import Switch from '@/component/switch'; @@ -27,7 +28,8 @@ const obj = config.files[Math.floor((Math.random() * config.files.length))] const filename = obj.key.replace("#", "%23") const padding = obj.paddings -export default function ErrorPage() { +export default function Error() { + // eslint-disable-next-line no-unused-vars const _trackEvt = useUmami('/error') const error = useRouteError(); const navigate = useNavigate(); @@ -52,8 +54,8 @@ export default function ErrorPage() { useEffect(() => { console.log(error) fetch(`/${import.meta.env.VITE_DIRECTORY_FOLDER}/${filename}.json`).then(res => res.json()).then(data => { - setSpineData(data) - }) + setSpineData(data) + }) }, [error]) useEffect(() => { @@ -130,10 +132,9 @@ export default function ErrorPage() { }, [playVoice, spineData]); return ( -
-
+
+
navigate(-1, { replace: true })} /> setVoiceOn(!voiceOn)} />
-
+
{ content.map((item, index) => { return ( -
+
diff --git a/directory/src/routes/root.jsx b/directory/src/routes/Root.jsx similarity index 74% rename from directory/src/routes/root.jsx rename to directory/src/routes/Root.jsx index 0182657..2899546 100644 --- a/directory/src/routes/root.jsx +++ b/directory/src/routes/Root.jsx @@ -10,9 +10,12 @@ import { Link, NavLink, useNavigate, - ScrollRestoration, + ScrollRestoration } from "react-router-dom"; -import './root.css' +import classes from '@/scss/root/Root.module.scss' +import header from '@/scss/root/header.module.scss' +import footer from '@/scss/root/footer.module.scss' +import drawer from '@/scss/root/drawer.module.scss' import routes from '@/routes' import { useConfig } from '@/state/config'; import { useHeader } from '@/state/header'; @@ -25,7 +28,7 @@ import { useBackgrounds } from '@/state/background'; import Dropdown from '@/component/dropdown'; import Popup from '@/component/popup'; import ReturnButton from '@/component/return_button'; -import MainBorder from '@/component/main_border'; +import Border from '@/component/border'; import CharIcon from '@/component/char_icon'; const currentYear = new Date().getFullYear() @@ -77,39 +80,39 @@ export default function Root() { return ( <> -
+
toggleDrawer()} > -
-
-
+
+
+
-
-
+
+
{extraArea}
-