From f5dfd52f6efece2f4cad227044ecf4dd66301bbc Mon Sep 17 00:00:00 2001 From: crupest Date: Sat, 26 Aug 2023 21:36:58 +0800 Subject: ... --- FrontEnd/src/components/AppBar.css | 87 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 FrontEnd/src/components/AppBar.css (limited to 'FrontEnd/src/components/AppBar.css') diff --git a/FrontEnd/src/components/AppBar.css b/FrontEnd/src/components/AppBar.css new file mode 100644 index 00000000..a0d975b5 --- /dev/null +++ b/FrontEnd/src/components/AppBar.css @@ -0,0 +1,87 @@ +.app-bar { + height: 56px; + position: fixed; + z-index: 1030; + top: 0; + left: 0; + right: 0; + background-color: var(--cru-primary-color); +} + +.app-bar { + display: flex; +} + +.app-bar .app-bar-brand { + display: flex; + align-items: center; +} + +.app-bar .app-bar-brand-icon { + height: 2em; +} + +.app-bar .app-bar-user-area { + display: flex; + margin-left: auto; +} + +.app-bar a { + background-color: var(--cru-primary-color); + color: var(--cru-push-button-text-color); + text-decoration: none; + display: flex; + align-items: center; + padding: 0 1em; + transition: all 0.5s; +} + +.app-bar a:hover { + background-color: var(--cru-clickable-primary-hover-color); +} + +.app-bar a:focus { + background-color: var(--cru-clickable-primary-focus-color); +} + +.app-bar a:active { + background-color: var(--cru-clickable-primary-active-color); +} + +/* the current page */ +.app-bar a.active { + background-color: var(--cru-clickable-primary-focus-color); +} + +.app-bar .app-bar-avatar img { + width: 45px; + height: 45px; + background-color: white; + border-radius: 50%; +} + +.app-bar.desktop .app-bar-link-area { + display: flex; +} + +.app-bar.mobile .app-bar-link-area { + position: absolute; + z-index: -1; + top: 56px; + left: 0; + right: 0; + transition: transform 0.5s; +} + +.app-bar.mobile a { + height: 56px; +} + +.app-bar.mobile.collapse .app-bar-link-area { + transform: translateY(-100%); +} + +.app-bar .toggler { + font-size: 2em; + margin-right: 0.5em; +} \ No newline at end of file -- cgit v1.2.3 From 49d444fa9dfac5877cd980a18d2eb84281b02e50 Mon Sep 17 00:00:00 2001 From: crupest Date: Tue, 12 Sep 2023 18:34:27 +0800 Subject: Fix app bar toggle problem. --- FrontEnd/.editorconfig | 30 +++--- FrontEnd/package.json | 3 +- FrontEnd/pnpm-lock.yaml | 33 +++++++ FrontEnd/src/components/AppBar.css | 182 +++++++++++++++++++------------------ FrontEnd/src/components/AppBar.tsx | 4 +- 5 files changed, 149 insertions(+), 103 deletions(-) (limited to 'FrontEnd/src/components/AppBar.css') diff --git a/FrontEnd/.editorconfig b/FrontEnd/.editorconfig index 779719e0..7747f7a7 100644 --- a/FrontEnd/.editorconfig +++ b/FrontEnd/.editorconfig @@ -1,14 +1,16 @@ -root = true -end_of_line = lf - -[*.ts] -tab_width = 2 - -[*.tsx] -tab_width = 2 - -[*.css] -tab_width = 2 - -[*.sass] -tab_width = 2 +root = true +end_of_line = lf +indent_style = space + +[*.ts] +indent_size = 2 + +[*.tsx] +indent_size = 2 + +[*.css] +indent_size = 2 + +[*.sass] +indent_size = 2 + diff --git a/FrontEnd/package.json b/FrontEnd/package.json index 42cf9a6f..6bb8b6e4 100644 --- a/FrontEnd/package.json +++ b/FrontEnd/package.json @@ -61,6 +61,7 @@ "prettier": "^3.0.0", "process": "^0.11.10", "ts-node": "^10.9.1", - "typescript": "^5.1.6" + "typescript": "^5.1.6", + "typescript-language-server": "^3.3.2" } } \ No newline at end of file diff --git a/FrontEnd/pnpm-lock.yaml b/FrontEnd/pnpm-lock.yaml index 24e81c7c..3f62918b 100644 --- a/FrontEnd/pnpm-lock.yaml +++ b/FrontEnd/pnpm-lock.yaml @@ -151,6 +151,9 @@ devDependencies: typescript: specifier: ^5.1.6 version: 5.1.6 + typescript-language-server: + specifier: ^3.3.2 + version: 3.3.2 packages: @@ -3893,6 +3896,15 @@ packages: is-typed-array: 1.1.10 dev: true + /typescript-language-server@3.3.2: + resolution: {integrity: sha512-jzun53CIkTbpAki0nP+hk5baGW+86SNNlVhyIj2ZUy45zUkCnmoetWuAtfRRQYrlIr8x4QB3ymGJPuwDQSd/ew==} + engines: {node: '>=14.17'} + hasBin: true + dependencies: + vscode-jsonrpc: 5.0.1 + vscode-languageserver-protocol: 3.17.3 + dev: true + /typescript@5.1.6: resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==} engines: {node: '>=14.17'} @@ -3951,6 +3963,27 @@ packages: engines: {node: '>=0.10.0'} dev: false + /vscode-jsonrpc@5.0.1: + resolution: {integrity: sha512-JvONPptw3GAQGXlVV2utDcHx0BiY34FupW/kI6mZ5x06ER5DdPG/tXWMVHjTNULF5uKPOUUD0SaXg5QaubJL0A==} + engines: {node: '>=8.0.0 || >=10.0.0'} + dev: true + + /vscode-jsonrpc@8.1.0: + resolution: {integrity: sha512-6TDy/abTQk+zDGYazgbIPc+4JoXdwC8NHU9Pbn4UJP1fehUyZmM4RHp5IthX7A6L5KS30PRui+j+tbbMMMafdw==} + engines: {node: '>=14.0.0'} + dev: true + + /vscode-languageserver-protocol@3.17.3: + resolution: {integrity: sha512-924/h0AqsMtA5yK22GgMtCYiMdCOtWTSGgUOkgEDX+wk2b0x4sAfLiO4NxBxqbiVtz7K7/1/RgVrVI0NClZwqA==} + dependencies: + vscode-jsonrpc: 8.1.0 + vscode-languageserver-types: 3.17.3 + dev: true + + /vscode-languageserver-types@3.17.3: + resolution: {integrity: sha512-SYU4z1dL0PyIMd4Vj8YOqFvHu7Hz/enbWtpfnVbJHU4Nd1YNYx8u0ennumc6h48GQNeOLxmwySmnADouT/AuZA==} + dev: true + /warning@4.0.3: resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==} dependencies: diff --git a/FrontEnd/src/components/AppBar.css b/FrontEnd/src/components/AppBar.css index a0d975b5..ae2a5879 100644 --- a/FrontEnd/src/components/AppBar.css +++ b/FrontEnd/src/components/AppBar.css @@ -1,87 +1,95 @@ -.app-bar { - height: 56px; - position: fixed; - z-index: 1030; - top: 0; - left: 0; - right: 0; - background-color: var(--cru-primary-color); -} - -.app-bar { - display: flex; -} - -.app-bar .app-bar-brand { - display: flex; - align-items: center; -} - -.app-bar .app-bar-brand-icon { - height: 2em; -} - -.app-bar .app-bar-user-area { - display: flex; - margin-left: auto; -} - -.app-bar a { - background-color: var(--cru-primary-color); - color: var(--cru-push-button-text-color); - text-decoration: none; - display: flex; - align-items: center; - padding: 0 1em; - transition: all 0.5s; -} - -.app-bar a:hover { - background-color: var(--cru-clickable-primary-hover-color); -} - -.app-bar a:focus { - background-color: var(--cru-clickable-primary-focus-color); -} - -.app-bar a:active { - background-color: var(--cru-clickable-primary-active-color); -} - -/* the current page */ -.app-bar a.active { - background-color: var(--cru-clickable-primary-focus-color); -} - -.app-bar .app-bar-avatar img { - width: 45px; - height: 45px; - background-color: white; - border-radius: 50%; -} - -.app-bar.desktop .app-bar-link-area { - display: flex; -} - -.app-bar.mobile .app-bar-link-area { - position: absolute; - z-index: -1; - top: 56px; - left: 0; - right: 0; - transition: transform 0.5s; -} - -.app-bar.mobile a { - height: 56px; -} - -.app-bar.mobile.collapse .app-bar-link-area { - transform: translateY(-100%); -} - -.app-bar .toggler { - font-size: 2em; - margin-right: 0.5em; -} \ No newline at end of file +.app-bar { + height: 56px; + position: fixed; + z-index: 1030; + top: 0; + left: 0; + right: 0; + background-color: var(--cru-primary-color); +} + +.app-bar { + display: flex; +} + +.app-bar > * { + background-color: var(--cru-primary-color); +} + +.app-bar .app-bar-brand { + display: flex; + align-items: center; +} + +.app-bar .app-bar-brand-icon { + height: 2em; +} + +.app-bar .app-bar-space { + flex-grow: 1; +} + +.app-bar .app-bar-user-area { + display: flex; +} + +.app-bar a { + background-color: var(--cru-primary-color); + color: var(--cru-push-button-text-color); + text-decoration: none; + display: flex; + align-items: center; + padding: 0 1em; + transition: all 0.5s; +} + +.app-bar a:hover { + background-color: var(--cru-clickable-primary-hover-color); +} + +.app-bar a:focus { + background-color: var(--cru-clickable-primary-focus-color); +} + +.app-bar a:active { + background-color: var(--cru-clickable-primary-active-color); +} + +/* the current page */ +.app-bar a.active { + background-color: var(--cru-clickable-primary-focus-color); +} + +.app-bar .app-bar-avatar img { + width: 45px; + height: 45px; + background-color: white; + border-radius: 50%; +} + +.app-bar.desktop .app-bar-link-area { + display: flex; +} + +.app-bar.mobile .app-bar-link-area { + position: absolute; + z-index: -1; + top: -100%; + left: 0; + right: 0; + transition: transform 0.5s; +} + +.app-bar.mobile a { + height: 56px; +} + +.app-bar.mobile.expand .app-bar-link-area { + transform: translateY(100%); +} + +.app-bar .toggler { + font-size: 2em; + padding-right: 0.5em; +} + diff --git a/FrontEnd/src/components/AppBar.tsx b/FrontEnd/src/components/AppBar.tsx index 9dfec3e1..d40c8105 100644 --- a/FrontEnd/src/components/AppBar.tsx +++ b/FrontEnd/src/components/AppBar.tsx @@ -57,7 +57,7 @@ export default function AppBar() { className={classnames( isMobile ? "mobile" : "desktop", "app-bar", - isCollapse && "collapse", + isCollapse || "expand", )} > @@ -81,6 +81,8 @@ export default function AppBar() { )} +
+
{user != null ? ( -- cgit v1.2.3 From 8bd0c7eba40be17daf7c445654f125f0a42e0e83 Mon Sep 17 00:00:00 2001 From: crupest Date: Tue, 12 Sep 2023 18:34:27 +0800 Subject: Fix app bar toggle problem. v2 --- FrontEnd/src/components/AppBar.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'FrontEnd/src/components/AppBar.css') diff --git a/FrontEnd/src/components/AppBar.css b/FrontEnd/src/components/AppBar.css index ae2a5879..38497478 100644 --- a/FrontEnd/src/components/AppBar.css +++ b/FrontEnd/src/components/AppBar.css @@ -74,9 +74,10 @@ .app-bar.mobile .app-bar-link-area { position: absolute; z-index: -1; - top: -100%; left: 0; right: 0; + top: 100%; + translate: 0 -100%; transition: transform 0.5s; } -- cgit v1.2.3