From c8d92ba6f9a1cc1d6bb29171fab1230fe2ee2823 Mon Sep 17 00:00:00 2001
From: "Jan C. Borchardt" <hey@jancborchardt.net>
Date: Mon, 24 Aug 2020 21:16:31 +0200
Subject: [PATCH] Add shadow behind navigation when Dashboard is scrolled
Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
---
apps/dashboard/css/dashboard.scss | 40 ++++++++++++++++++++++++++-----
apps/dashboard/src/App.vue | 13 +---------
2 files changed, 35 insertions(+), 18 deletions(-)
diff --git a/apps/dashboard/css/dashboard.scss b/apps/dashboard/css/dashboard.scss
index b79b52eae13..c9dabc9ce46 100644
--- a/apps/dashboard/css/dashboard.scss
+++ b/apps/dashboard/css/dashboard.scss
@@ -1,11 +1,39 @@
-// Show Dashboard background image beneath header
-#body-user #header {
- background-size: cover !important;
- background-position: center 50% !important;
- background-repeat: no-repeat !important;
- background-attachment: fixed !important;
+#header {
+ background: transparent !important;
+ --color-header: rgba(24, 24, 24, 1);
+
+ #body-user.dashboard--dark & {
+ --color-header: rgba(255, 255, 255, 1);
+ }
+
+ // Show gradient below navigation for visibility of icons when scrolled
+ &:before {
+ content: ' ';
+ display: block;
+ position: absolute;
+ background-image: linear-gradient(180deg, var(--color-header) 0%, transparent 100%);
+ width: 100%;
+ height: 70px;
+ top: 0;
+ margin-top: -70px;
+ transition: margin-top var(--animation-slow);
+
+ #body-user.dashboard--scrolled & {
+ margin-top: 0;
+ }
+ }
+
+ // Use flat color instead of gradient for high contrast theme
+ #body-user.theme--highcontrast & {
+ background-color: var(--color-header) !important;
+
+ &:before {
+ display: none;
+ }
+ }
}
+// Move content up so it scrolls below navigation
#content {
padding-top: 0 !important;
}
diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index e7668468a50..fac1aab2805 100644
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -225,13 +225,6 @@ export default {
}
}
},
- backgroundImage: {
- immediate: true,
- handler() {
- const header = document.getElementById('header')
- header.style.backgroundImage = `url(${this.backgroundImage})`
- },
- },
},
mounted() {
this.updateGlobalStyles()
@@ -366,7 +359,7 @@ export default {
this.saveStatuses()
},
handleScroll() {
- if (window.scrollY > 50) {
+ if (window.scrollY > 70) {
document.body.classList.add('dashboard--scrolled')
} else {
document.body.classList.remove('dashboard--scrolled')
@@ -376,10 +369,6 @@ export default {
}
</script>
-<style lang="scss">
-
-</style>
-
<style lang="scss" scoped>
#app-dashboard {
width: 100%;
--
GitLab