From 10a3b4fed376e873e25a89e4a5112eeb812d44e8 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 13 Jan 2022 10:48:07 +0100
Subject: [PATCH] Update styling

---
 client/src/components/ui/Toggle.vue       | 16 ++++++++++++----
 client/src/layouts/DefaultLayout.vue      |  7 ++++++-
 client/src/layouts/SimpleLayout.vue       |  7 ++++++-
 client/src/styles/mixins/_typography.scss |  6 +++++-
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/client/src/components/ui/Toggle.vue b/client/src/components/ui/Toggle.vue
index 8133a2e9..5be5294a 100644
--- a/client/src/components/ui/Toggle.vue
+++ b/client/src/components/ui/Toggle.vue
@@ -1,6 +1,7 @@
 <template>
   <label
     :for="id"
+    :class="{'toggle--bordered': bordered}"
     class="toggle">
     <input
       :id="id"
@@ -26,6 +27,10 @@
         type: Boolean,
         default: false,
       },
+      bordered: {
+        type: Boolean,
+        default: true
+      }
     },
 
     data() {
@@ -43,13 +48,16 @@
   @import '~styles/helpers';
 
   .toggle {
-    @include default-box-shadow;
-    border-radius: $round-border-radius;
-    border: 1px solid $color-silver;
-    padding: $small-spacing $medium-spacing;
     display: flex;
     cursor: pointer;
 
+    &--bordered {
+      @include default-box-shadow;
+      border-radius: $round-border-radius;
+      border: 1px solid $color-silver;
+      padding: $small-spacing $medium-spacing;
+    }
+
     &__toggle-wrapper {
       background-color: $color-silver;
       width: 42px;
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index c4957878..9bdf13b7 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -4,7 +4,9 @@
     class="container skillbox layout">
     <navigation-sidebar/>
     <profile-sidebar/>
-    <header-bar class="header layout__header"/>
+    <header-bar
+      class="header layout__header"
+      v-if="showHeader"/>
 
     <router-view
       :key="$route.fullPath"
@@ -37,6 +39,9 @@
       showFilter() {
         return this.$route.meta.filter;
       },
+      showHeader() {
+        return !this.$route.meta.hideHeader;
+      },
       specialContainerClass() {
         let cls = this.$store.state.specialContainerClass;
         return [cls ? `layout--${cls}` : '', {'skillbox--show-filter': this.showFilter}];
diff --git a/client/src/layouts/SimpleLayout.vue b/client/src/layouts/SimpleLayout.vue
index 1ed799ab..d5ce9c0c 100644
--- a/client/src/layouts/SimpleLayout.vue
+++ b/client/src/layouts/SimpleLayout.vue
@@ -26,7 +26,12 @@
     },
 
     computed: {
-      enableFooter: enableFooter,
+      enableFooter() {
+        if (this.$route.meta.hideFooter) {
+          return false;
+        }
+        return enableFooter();
+      }
     },
 
     methods: {
diff --git a/client/src/styles/mixins/_typography.scss b/client/src/styles/mixins/_typography.scss
index f6d6c687..068087bc 100644
--- a/client/src/styles/mixins/_typography.scss
+++ b/client/src/styles/mixins/_typography.scss
@@ -107,11 +107,15 @@
   font-size: toRem(18px);
 }
 
-@mixin default-link {
+@mixin link-base {
   font-size: toRem(14px);
   font-family: $sans-serif-font-family;
   font-weight: $font-weight-regular;
   cursor: pointer;
+}
+
+@mixin default-link {
+  @include link-base;
 
   &--active {
     color: $color-brand;