Add shadow behind navigation when Dashboard is scrolled

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>

diff --git a/apps/dashboard/css/dashboard.scss b/apps/dashboard/css/dashboard.scss
index b79b52eae1328e0edbb40070f91558c71b9acb1c..c9dabc9ce46b67a556e0a2e39752c04feea82ad0 100644 (file)
--- 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 e7668468a5036369780fe66f0408a3e684bcaca7..fac1aab28051d4fc84d46caf35c45694b5fc60b2 100644 (file)
--- 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%;