fixed student overview

frontend/src/components/student_list/StudentList.vue

@@ -67,6 +67,7 @@
               small round outline class="submission-button"
               exact
               v-if="props.item[type.pk]"
+              v-on:click="showSubmissionDetails"
               :to="{name: 'submission-side-view', params: {
                 studentPk: props.item.pk,
                 submissionPk: props.item[type.pk].pk
@@ -221,6 +222,9 @@ export default {
         this.loading = true
       }
       this.getStudents().then(() => { this.loading = false })
+    },
+    showSubmissionDetails () {
+      this.$emit('detail-click')
     }
   },
   created () {

frontend/src/components/student_list/StudentListHelpCard.vue

 <template>
-  <v-layout justify-center>
+  <v-layout justify-center class="mg-bottom">
     <v-card class="mt-5">
       <v-card-title class="title">
         This is the student overview page!
@@ -25,5 +25,7 @@ export default {
 </script>
 
 <style scoped>
-
+ .mg-bottom {
+   margin-bottom: 25px;
+ }
 </style>

frontend/src/pages/reviewer/StudentOverviewPage.vue

 <template>
-    <v-layout>
+    <v-layout v-if="this.$vuetify.breakpoint.xl" wrap>
       <v-flex xs6>
         <student-list class="ma-1"></student-list>
       </v-flex>
-      <v-flex xs6 class="right-view">
+      <v-flex xs6>
         <router-view></router-view>
       </v-flex>
     </v-layout>
+    <v-layout v-else>
+      <v-flex xs12>
+        <student-list class="ma-1"
+          v-on:detail-click="openDialog"
+        ></student-list>
+      </v-flex>
+      <v-dialog v-model="dialog">
+        <v-card>
+          <v-card-text>
+            <router-view></router-view>
+          </v-card-text>
+        </v-card>
+      </v-dialog>
+    </v-layout>
 </template>
 
 <script>
 import StudentList from '@/components/student_list/StudentList'
+import StudentListHelpCard from '@/components/student_list/StudentListHelpCard'
 
 export default {
-  components: { StudentList },
-  name: 'student-overview-page'
+  components: { StudentList, StudentListHelpCard },
+  name: 'student-overview-page',
+  data: () => {
+    return {
+      dialog: false
+    }
+  },
+  methods: {
+    openDialog () {
+      this.dialog = true
+    }
+  }
 }
 </script>
 
 <style scoped>
-  .right-view {
-    position: sticky;
-    top: 80px;
-    overflow-y: scroll;
-    height: 90vh;
-  }
+
 </style>