aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd')
-rw-r--r--FrontEnd/.editorconfig30
-rw-r--r--FrontEnd/package.json3
-rw-r--r--FrontEnd/pnpm-lock.yaml33
-rw-r--r--FrontEnd/src/components/AppBar.css182
-rw-r--r--FrontEnd/src/components/AppBar.tsx4
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}>