Add filter bar and checkbox components

client/src/App.vue

@@ -4,22 +4,25 @@
       <top-navigation></top-navigation>
       <router-link to="/" class="skillbox__header-logo">skillbox</router-link>
       <profile></profile>
+      <filter-bar></filter-bar>
     </header>
     <router-view></router-view>
-    <footer skillbox__footer>Footer</footer>
+    <footer class="skillbox__footer">Footer</footer>
   </div>
 </template>
 
 <script>
   import TopNavigation from '@/components/TopNavigation.vue';
   import Profile from '@/components/Profile.vue';
+  import FilterBar from '@/components/FilterBar.vue';
 
   export default {
     name: 'App',
 
     components: {
       TopNavigation,
-      Profile
+      Profile,
+      FilterBar
     },
 
     data() {
@@ -39,7 +42,7 @@
     width: 100%;
     //max-width: 1440px;
     display: grid;
-    grid-template-rows: 72px auto 50px;
+    grid-template-rows: auto 1fr 50px;
     grid-row-gap: 32px;
     min-height: 100vh;
     grid-template-areas: "h" "c" "f";
@@ -50,6 +53,7 @@
       display: grid;
       align-items: center;
       justify-content: space-around;
+
       grid-template-columns: auto 1fr auto;
     }
 

client/src/components/Checkbox.vue

@@ -0,0 +1,81 @@
+<template>
+  <label class="checkbox-container">
+    <input type="checkbox" class="checkbox-container__input" v-model="checked">
+    <span class="checkbox-container__checkbox">
+        <tick></tick>
+    </span>
+    <span class="checkbox-container__label">{{label}}</span>
+  </label>
+
+</template>
+
+<script>
+  import Tick from '@/components/images/Tick.vue';
+
+  export default {
+    props: {
+      label: String,
+      checked: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    components: {
+      Tick
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .checkbox-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-right: 10px;
+
+    svg {
+      width: 12px;
+    }
+
+    &__input {
+      display: none;
+    }
+
+    &__input:checked + &__checkbox {
+      border: 0;
+      background-color: $color-brand;
+
+
+      svg{
+        display: block;
+        fill: white;
+      }
+    }
+
+    &__checkbox {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      border: 2px solid $color-grey;
+      justify-content: center;
+      align-items: center;
+      border-radius: 3px;
+      box-sizing: border-box;
+      margin-right: 10px;
+
+      transition: background-color 0.5s;
+
+      svg {
+        display: none;
+        transition: all 0.7s;
+      }
+    }
+
+    &__label {
+      font-family: $sans-serif-font-family;
+    }
+  }
+</style>

client/src/components/FilterBar.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="filter-bar">
+
+    <checkbox label="Alles" :checked="true"></checkbox>
+    <checkbox label="Klasse 3b - 2018/2019"></checkbox>
+    <checkbox label="Klasse 1a - 2018/2019"></checkbox>
+    <checkbox label="Klasse 2c"></checkbox>
+  </div>
+</template>
+
+<script>
+  import Checkbox from '@/components/Checkbox.vue';
+
+  export default {
+    components: {
+      Checkbox
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .filter-bar {
+    padding: 0px 24px;
+    height: 50px;
+    background-color: $color-lightgrey;
+    display: flex;
+    align-items: center;
+    justify-items: left;
+    grid-column: span 3;
+    border: 1px solid rgba(228, 228, 228, 0.9);
+    border-left: 0;
+    border-right: 0;
+
+  }
+</style>

client/src/components/Profile.vue

@@ -20,7 +20,7 @@
   @import "@/styles/_variables.scss";
 
   .user-profile {
-    padding: 24px;
+    padding: 20px;
     color: $color-grey;
     display: flex;
     align-items: center;

client/src/components/images/Tick.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>tick</title>
+    <polygon points="41.46 77.72 10 46.26 16.89 39.37 41.46 63.93 83.11 22.28 90 29.18 41.46 77.72"/>
+  </svg>
+</template>