From 001adb848e81c943e319a0c4a872a60116dcdadf Mon Sep 17 00:00:00 2001 From: O3H Date: Thu, 14 Nov 2024 22:40:39 +0000 Subject: [PATCH] Wrap necessary views in a new `Viewport` component. Also made the following changes: - Sidebar looks and feels a lot nicer to use. - Fixed primary color for default preset being violet instead of purple. - Migrated Dashboard to use newer `Tabs` component. - Faint borders are now more consistent by using a single CSS var. --- frontend/index.html | 7 +- frontend/src/App.vue | 1 + frontend/src/assets/styles/global.css | 6 +- frontend/src/components/general/Sidebar.vue | 146 +++++++++--------- frontend/src/components/index.ts | 1 + .../reusable/PlatformSelectPanels.vue | 7 +- frontend/src/components/reusable/Viewport.vue | 22 +++ frontend/src/main.ts | 12 +- frontend/src/util.ts | 2 +- frontend/src/views/Dashboard.vue | 92 +++++------ frontend/src/views/GameSelection.vue | 40 ++--- frontend/src/views/SelectedGame.vue | 6 +- .../views/mod-dev-tools/PlatformSelection.vue | 20 ++- 13 files changed, 186 insertions(+), 176 deletions(-) create mode 100644 frontend/src/components/reusable/Viewport.vue diff --git a/frontend/index.html b/frontend/index.html index 39d40a0..bc9f0e0 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -6,8 +6,13 @@ - + + + + + diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 133597c..1d829aa 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -96,6 +96,7 @@ onBeforeUnmount(() => { display: flex; justify-content: end; width: 100%; + /* border-bottom: 1px solid var(--border-faint) */ } .app-container { diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css index 6927858..89ab324 100644 --- a/frontend/src/assets/styles/global.css +++ b/frontend/src/assets/styles/global.css @@ -4,6 +4,8 @@ font-variation-settings: normal; --font-family: "Inter var", sans-serif; --font-feature-settings: "cv02", "cv03", "cv04", "cv11"; + --border-faint: rgba(255, 255, 255, 0.2); + --border-faint-alt: rgba(255, 255, 255, 0.3); } @font-face { @@ -83,9 +85,9 @@ a { } .border-faint { - border: 1px solid rgba(190, 190, 190, 0.2); + border: 1px solid var(--border-faint); } .border-top-faint { - border-top: 1px solid rgba(190, 190, 190, 0.2); + border-top: 1px solid var(--border-faint); } \ No newline at end of file diff --git a/frontend/src/components/general/Sidebar.vue b/frontend/src/components/general/Sidebar.vue index b30fd9e..40c1734 100644 --- a/frontend/src/components/general/Sidebar.vue +++ b/frontend/src/components/general/Sidebar.vue @@ -23,21 +23,31 @@ const ModDevTools = () => router.push('/mod-dev-tools') - - -
-
-
-
+
-
-
- +