Add mobile styling

client/src/components/AddContentBlockButton.vue

@@ -29,9 +29,14 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   .add-content {
-    display: flex;
+    display: none;
+    @include desktop {
+      display: flex;
+    }
+
     justify-content: flex-end;
 
     &__button {

client/src/components/BookSidebar.vue

@@ -29,8 +29,15 @@
 <style scoped lang="scss">
   @import "@/styles/_functions.scss";
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   .book-sidebar {
+    display: none;
+
+    @include desktop {
+      display: block;
+    }
+
     &__title {
       font-size: toRem(17px);
       font-weight: 400;

client/src/components/modules/Module.vue

@@ -10,10 +10,10 @@
     <h3 id="objectives">Lernziele</h3>
 
     <objective-groups :groups="languageCommunicationObjectiveGroups"></objective-groups>
-    <add-objective-group-button type="languageCommunication" :module="module.id"></add-objective-group-button>
+    <add-objective-group-button v-if="!isStudent" type="languageCommunication" :module="module.id"></add-objective-group-button>
 
     <objective-groups :groups="societyObjectiveGroups"></objective-groups>
-    <add-objective-group-button type="society" :module="module.id"></add-objective-group-button>
+    <add-objective-group-button v-if="!isStudent" type="society" :module="module.id"></add-objective-group-button>
 
     <chapter :chapter="chapter" :index="index" v-for="(chapter, index) in module.chapters" :key="chapter.id"></chapter>
     <h3 id="objectives-confirm">Alles klar?</h3>
@@ -30,8 +30,10 @@
   import ObjectiveGroupControl from '@/components/objective-groups/ObjectiveGroupControl.vue';
   import AddObjectiveGroupButton from '@/components/AddObjectiveGroupButton';
   import Chapter from '@/components/Chapter.vue';
+
   import UPDATE_OBJECTIVE_PROGRESS_MUTATION from '@/graphql/gql/mutations/updateObjectiveProgress.gql';
   import OBJECTIVE_QUERY from '@/graphql/gql/objectiveQuery.gql';
+  import ME_QUERY from '@/graphql/gql/meQuery.gql';
 
   import {withoutOwnerFirst} from '@/helpers/sorting';
 
@@ -117,11 +119,14 @@
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
   @import "@/styles/_functions.scss";
+  @import "@/styles/_mixins.scss";
 
   .module {
     display: flex;
     justify-self: center;
-    width: 640px;
+    @include desktop {
+      width: 640px;
+    }
     flex-direction: column;
     padding: 0 15px;
     -webkit-box-sizing: border-box;

client/src/components/modules/ModuleNavigation.vue

@@ -97,6 +97,7 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   @mixin module-navigation-typography {
     font-family: $sans-serif-font-family;
@@ -108,6 +109,11 @@
     position: -webkit-sticky;
     position: sticky;
     top: 75px;
+    display: none;
+
+    @include desktop {
+      display: block;
+    }
 
     &__module-content {
       margin-bottom: 18px;

client/src/components/rooms/AddRoomEntryButton.vue

@@ -24,12 +24,12 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   .add-room-entry-button {
     border: 2px solid $color-white;
     border-radius: 12px;
     height: 150px;
-    display: flex;
     box-sizing: border-box;
     margin-bottom: 25px;
     justify-content: center;
@@ -37,6 +37,11 @@
     break-inside: avoid;
     cursor: pointer;
 
+    display: none;
+    @include desktop {
+      display: flex;
+    }
+
     &__icon {
       width: 80px;
       fill: $color-white;

client/src/layouts/BlankLayout.vue

@@ -7,6 +7,7 @@
 <style lang="scss">
   .blank-layout {
     margin-top: 60px;
+    margin-bottom: 60px;
   }
 </style>
 

client/src/layouts/DefaultLayout.vue

@@ -43,8 +43,7 @@
 
     data() {
       return {
-        me: {
+        me: {}
-        }
       }
     },
 
@@ -67,6 +66,7 @@
     grid-template-rows: auto auto 1fr;
     grid-row-gap: 32px;
     min-height: 100vh;
+
     grid-template-areas: "h" "." "c";
     padding-bottom: 50px;
 
@@ -91,7 +91,9 @@
       grid-auto-rows: 50px;
       width: 100%;
 
-      grid-template-columns: 1fr 1fr 1fr;
+      @include desktop {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
 
       /*
        * For IE10+

client/src/layouts/SimpleLayout.vue

@@ -8,15 +8,20 @@
 </template>
 
 <style lang="scss">
+  @import "@/styles/_mixins.scss";
+
   .layout {
     &--simple {
       display: -ms-grid;
       display: grid;
       padding: 20px;
-      grid-template-columns: 1fr 640px 1fr;
 
-      & > :nth-child(2){
+      @include desktop {
-        grid-column: 2;
+        grid-template-columns: 1fr 640px 1fr;
+
+        & > :nth-child(2) {
+          grid-column: 2;
+        }
       }
 
     }
@@ -25,7 +30,10 @@
   .close-button {
     justify-self: end;
     cursor: pointer;
-    grid-column: 3;
+
+    @include desktop {
+      grid-column: 3;
+    }
 
     &__icon {
       width: 40px;

client/src/pages/book.vue

@@ -21,16 +21,22 @@
 </script>
 
 <style scoped lang="scss">
+  @import "@/styles/_mixins.scss";
+
   .book {
     display: -ms-grid;
     @supports (display: grid) {
       display: grid;
     }
-    grid-template-columns: 305px 1fr;
+
     grid-column-gap: 50px;
 
     justify-items: start;
 
     padding: 0 24px;
+
+    @include desktop {
+      grid-template-columns: 305px 1fr;
+    }
   }
 </style>

client/src/pages/module-base.vue

@@ -16,6 +16,8 @@
 </script>
 
 <style scoped lang="scss">
+  @import "@/styles/_mixins.scss";
+
   .module-page {
     display: -ms-grid;
     @supports (display: grid) {
@@ -23,7 +25,9 @@
     }
     justify-items: center;
 
-    grid-template-columns: 400px minmax(max-content, 1fr) minmax(auto, 400px);
+    @include desktop {
+      grid-template-columns: 400px minmax(max-content, 1fr) minmax(auto, 400px);
+    }
 
     /*
      * For IE10+

client/src/pages/room.vue

@@ -143,6 +143,7 @@
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
   @import "@/styles/_functions.scss";
+  @import "@/styles/_mixins.scss";
 
   .room {
     display: grid;
@@ -164,6 +165,10 @@
 
     &__meta {
       display: flex;
+      flex-direction: column;
+      @include desktop {
+        flex-direction: row-reverse;
+      }
       justify-content: start;
 
       & > :first-child {
@@ -172,9 +177,13 @@
     }
 
     &__content {
-      padding: 50px 60px;
+      padding: 50px 15px;
       background-color: rgba($color-darkgrey-1, 0.18);
-      columns: 4;
+      @include desktop {
+        columns: 4;
+        padding: 50px 60px;
+      }
+
     }
   }
 </style>

client/src/pages/rooms.vue

@@ -60,16 +60,22 @@
 </script>
 
 <style scoped lang="scss">
+  @import "@/styles/_mixins.scss";
+
   .rooms-page {
     display: -ms-grid;
     @supports (display: grid) {
       display: grid;
     }
-    grid-template-columns: repeat(3, 1fr);
+
+    padding: 50px 15px;
+    @include desktop {
+      grid-template-columns: repeat(3, 1fr);
+      padding: 50px 45px;
+    }
     grid-column-gap: 30px;
     grid-row-gap: 30px;
     grid-auto-rows: 260px;
-    padding: 50px 45px;
     max-width: 1440px;
     width: 100%;
     justify-self: center;

client/src/pages/start.vue

@@ -62,6 +62,7 @@
 <style scoped lang="scss">
 
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   .start-page {
 
@@ -79,23 +80,29 @@
   }
 
   .start-sections {
-    padding-left: 120px;
+    @include desktop {
-    padding-right: 120px;
+      padding-left: 120px;
+      padding-right: 120px;
+    }
     display: -ms-grid;
     margin-bottom: 90px;
     @supports (display: grid) {
       display: grid;
     }
-    grid-template-columns: 1fr 1fr 1fr;
+    @include desktop {
-    grid-column-gap: 50px;
+      grid-template-columns: 1fr 1fr 1fr;
+    }
 
+    grid-row-gap: 15px;
+    grid-column-gap: 50px;
     justify-items: start;
   }
 
   .news {
-
+    @include desktop {
-    padding-left: 120px;
+      padding-left: 120px;
-    padding-right: 120px;
+      padding-right: 120px;
+    }
 
     &__title {
       font-family: $serif-font-family;
@@ -110,7 +117,12 @@
       @supports (display: grid) {
         display: grid;
       }
-      grid-template-columns: 1fr 1fr 1fr;
+
+      @include desktop {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+
+      grid-row-gap: 15px;
       grid-column-gap: 50px;
     }
   }

client/src/pages/submissions.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="submissions-page">
     <assignment-with-submissions v-if="!$apollo.queries.assignment.loading"
-      :assignment="assignment"></assignment-with-submissions>
+                                 :assignment="assignment"></assignment-with-submissions>
   </div>
 
 </template>
@@ -43,7 +43,11 @@
 </script>
 
 <style scoped lang="scss">
+  @import "@/styles/_mixins.scss";
+
   .submissions-page {
-    width: 800px;
+    @include desktop {
+      width: 800px;
+    }
   }
 </style>

client/src/pages/topic.vue

@@ -53,6 +53,7 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   .topic {
     &__teaser {
@@ -70,10 +71,12 @@
       @supports (display: grid) {
         display: grid;
       }
-      grid-template-columns: repeat(3, 1fr);
       grid-column-gap: 40px;
       grid-row-gap: 30px;
 
+      @include desktop {
+        grid-template-columns: repeat(3, 1fr);
+      }
     }
   }
 </style>

client/src/styles/_mixins.scss

@@ -44,3 +44,9 @@
     background-color: $color-white;
   }
 }
+
+@mixin desktop {
+  @media (min-width: 1024px) {
+    @content
+  }
+}

client/src/styles/_typography.scss

@@ -1,5 +1,6 @@
 @import "variables";
 @import "functions";
+@import "mixins";
 
 * {
   font-size: $base-font-size;
@@ -27,10 +28,14 @@ a {
 }
 
 h1 {
-  font-size: 4rem; // 64px
+  font-size: 2rem;
   font-weight: 800;
   color: $header-color;
   margin-bottom: 35px;
+
+  @include desktop {
+    font-size: 4rem; // 64px
+  }
 }
 
 h2 {