diff options
Diffstat (limited to 'FrontEnd')
-rw-r--r-- | FrontEnd/.editorconfig | 30 | ||||
-rw-r--r-- | FrontEnd/package.json | 3 | ||||
-rw-r--r-- | FrontEnd/pnpm-lock.yaml | 33 | ||||
-rw-r--r-- | FrontEnd/src/components/AppBar.css | 182 | ||||
-rw-r--r-- | FrontEnd/src/components/AppBar.tsx | 4 |
5 files changed, 149 insertions, 103 deletions
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", )} > <Link to="/" className="app-bar-brand" onClick={collapse}> @@ -81,6 +81,8 @@ export default function AppBar() { )} </div> + <div className="app-bar-space" /> + <div className="app-bar-user-area"> {user != null ? ( <AppBarNavLink link="/" className="app-bar-avatar" onClick={collapse}> |