Add option for mobile

client/src/components/ClassSelectionWidget.vue

@@ -5,6 +5,7 @@
     </div>
       <widget-popover v-if="showPopover"
                       @hide-me="showPopover = false"
+                      :mobile="mobile"
                       class="class-selection__popover">
         <li class="popover-links__link popover-links__link--large" v-for="schoolClass in schoolClasses"
           :key="schoolClass.id"
@@ -27,6 +28,13 @@
       WidgetPopover
     },
 
+    props: {
+      mobile: {
+        type: Boolean,
+        default: false
+      }
+    },
+
     apollo: {
       me: {
         query: ME_QUERY

client/src/components/FilterBar.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="filter-bar" v-if="isTeacher">
-    <radiobutton label="Alles" :checked="!currentFilter" v-on:input="updateFilter('')"></radiobutton>
-    <radiobutton
-      v-for="schoolClass in schoolClasses"
-      :key="schoolClass.id"
-      :label="schoolClass.name"
-      :item="schoolClass"
-      :checked="schoolClass.id === currentFilter"
-      v-on:input="updateFilter(schoolClass.id)"
-    ></radiobutton>
-  </div>
-</template>
-
-<script>
-  import {mapActions} from 'vuex';
-  import Radiobutton from '@/components/Radiobutton';
-  import ME_QUERY from '@/graphql/gql/meQuery.gql';
-
-  export default {
-    components: {
-      Radiobutton
-    },
-
-    apollo: {
-      me: {
-        query: ME_QUERY
-      }
-    },
-
-    data() {
-      return {
-        me: {
-          permissions: []
-        }
-      }
-    },
-
-    computed: {
-      currentFilter() {
-        return this.$store.state.filterForSchoolClass;
-      },
-      schoolClasses() {
-        return this.$getRidOfEdges(this.me.schoolClasses);
-      },
-      isTeacher() {
-        return this.me.permissions.includes('users.can_manage_school_class_content');
-      }
-    },
-
-    methods: {
-      ...mapActions({
-        updateFilter: 'setfilterForSchoolClass'
-      })
-    }
-  }
-</script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-
-  .filter-bar {
-    position: sticky;
-    top: -1px;
-    z-index: 9;
-    padding: 0 24px;
-    height: 50px;
-    background-color: $color-silver-light;
-    display: flex;
-    align-items: center;
-    justify-items: left;
-    border: 1px solid rgba(228, 228, 228, 0.9);
-    border-left: 0;
-    border-right: 0;
-  }
-</style>

client/src/components/MobileNavigation.vue

@@ -6,8 +6,8 @@
     </div>
     <div class="mobile-navigation__subnavigation"></div>
     <div class="mobile-navigation__secondary">
-      <class-selection-widget />
+      <class-selection-widget :mobile="true" />
-      <user-widget class="mobile-navigation__user-widget" v-bind="me"></user-widget>
+      <user-widget class="mobile-navigation__user-widget" v-bind="me" :mobile="true"></user-widget>
     </div>
   </div>
 </template>

client/src/components/UserWidget.vue

@@ -5,6 +5,7 @@
       </div>
       <widget-popover v-if="showPopover"
                       @hide-me="showPopover = false"
+                      :mobile="mobile"
                       class="user-widget__popover ">
         <li class="popover-links__link popover-links__link--large popover-links__link--emph">{{firstName}} {{lastName}}</li>
         <li class="popover-links__link popover-links__link--large">
@@ -29,7 +30,21 @@
   import WidgetPopover from '@/components/WidgetPopover';
 
   export default {
-    props: ['firstName', 'lastName', 'avatarUrl', 'date'],
+    props: {
+      firstName: {
+        type: String
+      },
+        lastName: {
+        type: String
+      },
+        avatarUrl: {
+        type: String
+      },
+        mobile: {
+        type: Boolean,
+        default: false
+      }
+    },
 
     data() {
       return {

client/src/components/WidgetPopover.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="widget-popover" v-click-outside="hidePopover">
+  <div class="widget-popover" v-click-outside="hidePopover" :class="{'widget-popover--mobile': mobile}">
     <ul class="widget-popover__links popover-links">
         <slot></slot>
     </ul>
@@ -8,6 +8,7 @@
 
 <script>
   export default {
+    props: ['mobile'],
     methods: {
       hidePopover() {
         this.$emit('hide-me');
@@ -23,13 +24,17 @@
   .widget-popover {
     position: absolute;
     right: 0;
-    // bottom: -110px;
     display: flex;
     flex-direction: column;
     background-color: $color-white;
     padding: 20px;
-    z-index: 10;
+    z-index: 100;
     @include widget-shadow;
+
+    &--mobile {
+      left: 0;
+      right: inherit;
+    }
   }
 
   .popover-links {

client/src/layouts/DefaultLayout.vue

@@ -5,21 +5,17 @@
 
     <mobile-header class="header skillbox__header skillbox__header--mobile"></mobile-header>
 
-    <!--filter-bar v-if="showFilter" class="skillbox__filter-bar"></filter-bar-->
-
     <router-view class="skillbox__content"></router-view>
     <footer class="skillbox__footer">Footer</footer>
   </div>
 </template>
 
 <script>
-  import FilterBar from '@/components/FilterBar';
   import HeaderBar from '@/components/HeaderBar';
   import MobileHeader from '@/components/MobileHeader';
 
   export default {
     components: {
-      FilterBar,
       HeaderBar,
       MobileHeader
     },