Add new footers

client/src/layouts/DefaultFooter.vue

@@ -0,0 +1,78 @@
+<template>
+  <footer class="default-footer">
+    <div class="default-footer__section">
+      <div class="default-footer__info">
+        <div class="default-footer__who-are-we who-are-we">
+          <h5 class="who-are-we__title">Wer sind wir?</h5>
+          <p class="who-are-we__text">
+            mySkillbxox ­ist ein Angebot des hep verlags in Zusammenarbeit mit dem Eidgenössischen Hochschulinstitut für
+            Berufsbildung (EHB)
+          </p>
+        </div>
+
+        <div class="default-footer__logo-hep">
+          HEP
+        </div>
+        <div class="default-footer__logo-ehb">
+          EHB
+        </div>
+      </div>
+    </div>
+    <div class="default-footer__section">
+      <div class="default-footer__links">
+        <a href="https://www.hep-verlag.ch/datenschutz" target="_blank" class="default-footer__link">Datenschutz</a>
+        <a href="https://www.hep-verlag.ch/impressum" target="_blank" class="default-footer__link">Impressum</a>
+        <a href="https://www.hep-verlag.ch/agb" target="_blank" class="default-footer__link">AGB</a>
+        <a href="https://www.hep-verlag.ch/kontakt-verlag" target="_blank" class="default-footer__link">Kontakt</a>
+        <a href="https://www.hep-verlag.ch/kundenservice" target="_blank" class="default-footer__link">Hilfe</a>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .default-footer {
+    background-color: $color-silver-light;
+
+    &__section {
+      width: 100%;
+      border-bottom: $color-silver 1px solid;
+      display: flex;
+      justify-content: center;
+    }
+
+    &__info {
+      width: $footer-width;
+      padding: 2*$large-spacing 0;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    &__who-are-we {
+      width: 330px;
+    }
+
+    &__links {
+      width: $footer-width;
+      padding: $large-spacing 0;
+    }
+
+    &__link {
+      @include aside-with-cheese;
+      margin-right: $large-spacing;
+    }
+  }
+
+  .who-are-we {
+    &__title {
+      @include heading-4;
+    }
+
+    &__text {
+      @include aside-text;
+    }
+  }
+</style>

client/src/layouts/DefaultLayout.vue

@@ -1,13 +1,15 @@
 <template>
-  <div class="container skillbox" :class="specialContainerClass">
+  <div class="container skillbox layout" :class="specialContainerClass">
     <profile-sidebar></profile-sidebar>
-    <header-bar class="header skillbox__header">
+    <header-bar class="header layout__header">
     </header-bar>
 
-    <mobile-header class="header skillbox__header skillbox__header--mobile"></mobile-header>
+    <mobile-header
+      class="header layout__header layout__header--mobile"
+    ></mobile-header>
 
-    <router-view class="skillbox__content"></router-view>
+    <router-view class="layout__content"></router-view>
-    <footer class="skillbox__footer">Footer</footer>
+    <default-footer class="layout__footer"></default-footer>
   </div>
 </template>
 
@@ -15,12 +17,14 @@
   import HeaderBar from '@/components/HeaderBar';
   import MobileHeader from '@/components/MobileHeader';
   import ProfileSidebar from '@/components/profile/ProfileSidebar';
+  import DefaultFooter from '@/layouts/DefaultFooter';
 
   export default {
     components: {
       HeaderBar,
       MobileHeader,
-      ProfileSidebar
+      ProfileSidebar,
+      DefaultFooter
     },
 
     computed: {

client/src/layouts/FullScreenLayout.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="container skillbox" :class="specialContainerClass">
+  <div class="container layout layout--fullscreen" :class="specialContainerClass">
     <div class="close-button" v-on:click="back">
       <cross class="close-button__icon"></cross>
     </div>
 
-    <router-view class="skillbox__content"></router-view>
+    <router-view class="layout__content"></router-view>
   </div>
 </template>
 

client/src/layouts/PublicLayout.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="skillbox public">
+  <div class="layout layout--public public">
     <logo class="public__logo"></logo>
-    <router-view class="skillbox__content"></router-view>
+    <router-view class="layout__content"></router-view>
-    <footer class="skillbox__footer">Footer</footer>
+    <footer class="layout__footer">Footer</footer>
   </div>
 </template>
 

client/src/layouts/SimpleFooter.vue

@@ -0,0 +1,31 @@
+<template>
+  <footer class="simple-footer">
+    <p class="simple-footer__strong">Copyright © 2020 hep Verlag, in Zusammenarbeit mit dem EHB</p>
+    <p class="simple-footer__regular">Alle Inhalte von mySkillbox, insbesondere Texte und Grafiken, sind urheberrechtlich geschützt. </p>
+  </footer>
+</template>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .simple-footer {
+    width: 100%;
+    justify-self: center;
+    padding: $large-spacing 0;
+    background-color: $color-silver-light;
+    display: grid;
+    grid-template-columns: 1fr $footer-width 1fr;
+
+    &__strong {
+      @include aside-with-cheese;
+      font-weight: 600;
+      grid-column: 2;
+    }
+
+    &__regular {
+      @include aside-text;
+      grid-column: 2;
+    }
+  }
+</style>

client/src/layouts/SimpleLayout.vue

@@ -1,13 +1,33 @@
 <template>
-  <div class="skillbox layout--simple">
+  <div class="skillbox layout layout--simple">
     <div class="close-button" v-on:click="back">
       <cross class="close-button__icon"></cross>
     </div>
     <router-view></router-view>
+    <simple-footer class="layout__footer"></simple-footer>
   </div>
 </template>
 
+<script>
+  import Cross from '@/components/icons/Cross';
+  import SimpleFooter from '@/layouts/SimpleFooter';
+
+  export default {
+    components: {
+      Cross,
+      SimpleFooter
+    },
+
+    methods: {
+      back() {
+        this.$router.go(-1);
+      }
+    }
+  }
+</script>
+
 <style lang="scss" scoped>
+  @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
 
   .layout {
@@ -16,11 +36,12 @@
       @supports (display: grid) {
         display: grid;
       }
-      padding: 20px;
+
       width: 100%;
 
       @include desktop {
         grid-template-columns: 1fr 640px 1fr;
+        grid-template-rows: 60px 1fr 105px;
         -ms-grid-columns: 1fr 640px 1fr;
 
         & > :nth-child(2) {
@@ -28,7 +49,10 @@
           -ms-grid-column: 2;
         }
       }
+    }
 
+    &__footer {
+      grid-column: 1 / span 3;
     }
   }
 
@@ -42,6 +66,8 @@
     @include desktop {
       grid-column: 3;
       -ms-grid-column: 3;
+      margin-right: $medium-spacing;
+      margin-top: $medium-spacing;
     }
 
     &__icon {
@@ -50,20 +76,3 @@
     }
   }
 </style>
-
-<script>
-  import Cross from '@/components/icons/Cross';
-
-  export default {
-    components: {
-      Cross
-    },
-
-    methods: {
-      back() {
-        this.$router.go(-1);
-      }
-    }
-  }
-
-</script>

client/src/styles/_default-layout.scss

@@ -1,7 +1,9 @@
 @import "@/styles/_variables.scss";
 @import "@/styles/_mixins.scss";
 
-.skillbox {
+.layout {
+  $footer-height: 287px;
+
   margin: 0 auto;
   width: 100%;
   /*
@@ -12,17 +14,17 @@
   @supports (display: grid) {
     display: grid;
   }
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas: "h" "c" "f";
   min-height: 100vh;
   grid-auto-rows: 1fr;
 
-  grid-template-areas: "h" "c";
+
-  padding-bottom: 50px;
 
   &--show-filter {
-    grid-template-rows: auto auto 1fr;
+    grid-template-rows: auto auto 1fr $footer-height;
-    -ms-grid-rows: 50px 50px 30px 1fr; // 1 extra row for gap
+    -ms-grid-rows: 50px 50px 30px 1fr $footer-height; // 1 extra row for gap
-    grid-template-areas: "h" "." "c";
+    grid-template-areas: "h" "." "c" "f";
   }
 
   /*
@@ -48,6 +50,5 @@
 
   &__footer {
     grid-area: f;
-    display: none;
   }
 }

client/src/styles/_mixins.scss

@@ -117,6 +117,16 @@
   font-size: toRem(16px);
 }
 
+@mixin aside-text {
+  @include regular-text;
+  font-size: toRem(14px);
+}
+
+@mixin aside-with-cheese {
+  @include aside-text;
+  font-weight: 600;
+}
+
 @mixin meta-title {
   color: $color-silver-dark;
   font-size: toRem(36px);

client/src/styles/_survey.scss

@@ -159,7 +159,6 @@
 }
 
 .question {
-
   $question: &;
 
   &--error #{$question}__input {

client/src/styles/_variables.scss

@@ -75,3 +75,5 @@ $default-heading-line-height: 1.2;
 
 // popover
 $popover-default-bottom: -110px;
+
+$footer-width: 800px;