From 8b2ba1a68b6ae80012ca8af3d21bcb23385786a4 Mon Sep 17 00:00:00 2001
From: Petar Hristov <hristov@itc.rwth-aachen.de>
Date: Fri, 27 May 2022 15:21:20 +0200
Subject: [PATCH] Fix: Sidebar stays expanded on option selection
---
src/App.vue | 9 +++++++--
src/assets/css/_custom.css | 7 +++++++
src/components/elements/LoadingIndicator.vue | 9 +++++----
src/components/elements/SidebarMenu.vue | 16 +++++++++++++++-
src/main.ts | 1 +
src/modules/project/pages/ListProjects.vue | 2 +-
src/modules/project/pages/ProjectPage.vue | 4 ++--
7 files changed, 38 insertions(+), 10 deletions(-)
create mode 100644 src/assets/css/_custom.css
diff --git a/src/App.vue b/src/App.vue
index 4b66f3f7..acde7cef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
<LoadingIndicator />
<main>
<div class="mr-0 d-flex">
- <SidebarMenu class="pr-2" />
+ <SidebarMenu class="mr-2" />
<div class="container-fluid px-5">
<Pilot />
<Maintenance />
@@ -82,6 +82,11 @@ export default defineComponent({
margin-bottom: 10px;
height: 1px;
width: 100%;
- border-top: 1px solid #bebbbb;
+ border-top: 1px solid var(--light);
+}
+
+#card-deck {
+ /* Used to align the cards' and container's left edges */
+ margin: 0em -0.5em;
}
</style>
diff --git a/src/assets/css/_custom.css b/src/assets/css/_custom.css
new file mode 100644
index 00000000..b4bb2390
--- /dev/null
+++ b/src/assets/css/_custom.css
@@ -0,0 +1,7 @@
+:root {
+ --navbar-height: 2.5rem;
+ --loading-indicator-height: 3px;
+ --loading-indicator-margin: 1rem;
+ --sidebar-offset-top: calc(var(--navbar-height) + var(--loading-indicator-height) + var(--loading-indicator-margin));
+ --sidebar-height: calc(100vh - var(--navbar-height) - calc(var(--loading-indicator-height) + var(--loading-indicator-margin)))
+}
\ No newline at end of file
diff --git a/src/components/elements/LoadingIndicator.vue b/src/components/elements/LoadingIndicator.vue
index ab33c3ba..cd544d12 100644
--- a/src/components/elements/LoadingIndicator.vue
+++ b/src/components/elements/LoadingIndicator.vue
@@ -1,5 +1,5 @@
<template>
- <div id="loading-indicator">
+ <div>
<div v-if="show" class="indicator indicator-active" />
<div v-else class="indicator bg-light" />
</div>
@@ -47,8 +47,9 @@ export default defineComponent({
.indicator {
position: relative;
width: 100%;
- height: 3px;
- margin-bottom: 1rem;
+ /* Heights defined as variables in "@/assets/css/_custom.css" */
+ height: var(--loading-indicator-height);
+ margin-bottom: var(--loading-indicator-margin);
}
.indicator-active {
background-color: #e9ecef;
@@ -57,7 +58,7 @@ export default defineComponent({
width: 40%;
content: "";
position: absolute;
- background-color: #00549f;
+ background-color: var(--primary);
top: 0;
left: 0;
bottom: 0;
diff --git a/src/components/elements/SidebarMenu.vue b/src/components/elements/SidebarMenu.vue
index 05b75f90..aa057be2 100644
--- a/src/components/elements/SidebarMenu.vue
+++ b/src/components/elements/SidebarMenu.vue
@@ -184,6 +184,7 @@ export default defineComponent({
class: "vsm--badge_default",
}
: undefined,
+ exactPath: true,
};
}) as Array<SidebarItem>,
},
@@ -291,10 +292,18 @@ export default defineComponent({
<style lang="scss" scoped>
@import "/src/assets/scss/_custom.scss";
+.v-sidebar-menu {
+ height: var(--sidebar-height);
+ border-radius: 0rem 0.25rem 0.25rem 0rem;
+ background: $light;
+}
+.v-sidebar-menu ::v-deep .vsm--toggle-btn {
+ border-radius: 0rem 0rem 0.25rem 0rem;
+ background-color: var(--secondary);
+}
.v-sidebar-menu.vsm_expanded {
overflow-y: auto;
overflow-x: hidden;
- max-height: calc(100vh - 50px - 30px);
}
.v-sidebar-menu ::v-deep .vsm--badge {
background-color: #ffc107;
@@ -336,4 +345,9 @@ export default defineComponent({
box-shadow: 3px 0px 0px 0px $primary inset;
-webkit-box-shadow: 3px 0px 0px 0px $primary inset;
}
+.v-sidebar-menu ::v-deep .vsm--link_level-2.vsm--link_active {
+ // Use this to edit the second level element when active
+ background-color: var(--primary);
+ color: $white;
+}
</style>
diff --git a/src/main.ts b/src/main.ts
index d0c80729..cf19bfb6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -16,6 +16,7 @@ import "@/plugins/bootstrap-vue";
/* Corporate Design */
import "@/assets/scss/_custom.scss";
+import "@/assets/css/_custom.css";
/* Other */
import App from "@/App.vue";
diff --git a/src/modules/project/pages/ListProjects.vue b/src/modules/project/pages/ListProjects.vue
index cdd0ee2d..7b6427c8 100644
--- a/src/modules/project/pages/ListProjects.vue
+++ b/src/modules/project/pages/ListProjects.vue
@@ -2,7 +2,7 @@
<div id="project">
<CoscineHeadline :headline="$tc('page.listProjects.title', 0)" />
<div class="list">
- <b-card-group deck>
+ <b-card-group id="card-deck" deck>
<CoscineCard
:title="$t('page.listProjects.addProject')"
type="create"
diff --git a/src/modules/project/pages/ProjectPage.vue b/src/modules/project/pages/ProjectPage.vue
index 59ec546a..a4ba4dd3 100644
--- a/src/modules/project/pages/ProjectPage.vue
+++ b/src/modules/project/pages/ProjectPage.vue
@@ -6,7 +6,7 @@
<CoscineHeadline :headline="$tc('page.project.resource', 2)" />
<div class="list">
- <b-card-group deck>
+ <b-card-group id="card-deck" deck>
<CoscineCard
:title="$t('page.project.addResource')"
type="create"
@@ -49,7 +49,7 @@
<CoscineHeadline :headline="$tc('page.project.subProject', 0)" />
<div class="list">
- <b-card-group deck>
+ <b-card-group id="card-deck" deck>
<CoscineCard
:title="$t('page.listProjects.addProject')"
type="create"
--
GitLab