diff --git a/frontend/src/components/student_list/StudentList.vue b/frontend/src/components/student_list/StudentList.vue
index bc87cf04b68d269864ecea435b00941d911b833a..05862c0c4f8f48ebe8a4883e255097dad22c0e9c 100644
--- a/frontend/src/components/student_list/StudentList.vue
+++ b/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 () {
diff --git a/frontend/src/components/student_list/StudentListHelpCard.vue b/frontend/src/components/student_list/StudentListHelpCard.vue
index de93b48dd50ef6eb8df76d6336a671564c7ff1a3..637443a44f0f16268c6d27a4df8b9f3a92f5f442 100644
--- a/frontend/src/components/student_list/StudentListHelpCard.vue
+++ b/frontend/src/components/student_list/StudentListHelpCard.vue
@@ -1,5 +1,5 @@
<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>
diff --git a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
index 0005c11b5d9fbbb3ef787bddcaa8892ccbd77d8d..891c567b15c8ce9c5d9a0e38c8520f23fe2a23e4 100644
--- a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
+++ b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
@@ -1,61 +1,78 @@
+<!-- TODO: remove inline stylings -->
+
<template>
- <v-toolbar dense class="bottom-toolbar">
- <v-tooltip top v-if="skippable">
- <v-btn
- slot="activator"
- id="skip-submission"
- outline round color="grey darken-2"
- @click="skipSubmission"
- >Skip</v-btn>
- <span>Skip this submission</span>
- </v-tooltip>
- <v-spacer/>
- <v-alert
- class="score-alert ma-3"
- color="error"
- icon="warning"
- :value="scoreError"
- >{{ scoreError }}</v-alert>
- <span class="mr-2">Score:</span>
- <input
- class="score-text-field"
- type="number"
- id="score-input"
- v-model="score"
- @input="validateScore"
- @change="validateScore"
- />
- <span> / {{fullScore}}</span>
- <v-btn
- outline round flat
- id="score-zero"
- @click="score = 0"
- color="red lighten-1"
- class="score-button">0</v-btn>
- <v-btn
- outline round flat
- id="score-full"
- @click="score = fullScore"
- color="blue darken-3"
- class="score-button">{{fullScore}}</v-btn>
- <v-tooltip top v-if="showFinalCheckbox">
- <v-toolbar-items slot="activator" style="margin-top: 28px;">
- <v-checkbox slot="activator" v-model="isFinal" class="final-checkbox"/>
- <span>Final</span>
- </v-toolbar-items>
- <span>Non final feedback will be sent to the reviewer.</span>
- </v-tooltip>
- <v-tooltip top>
- <v-btn
- color="success"
- slot="activator"
- id="submit-feedback"
- :loading="loading"
- @click="submit"
- >Submit<v-icon>chevron_right</v-icon></v-btn>
- <span>Submit and continue</span>
- </v-tooltip>
- </v-toolbar>
+ <v-container class="bottom-container">
+ <v-layout wrap>
+ <v-flex sm4 md4 lg2>
+ <v-tooltip top v-if="skippable">
+ <v-btn slot="activator" outline round
+ id="skip-submission"
+ color="grey darken-2"
+ @click="skipSubmission">Skip</v-btn>
+ <span>Skip this submission</span>
+ </v-tooltip>
+ <v-spacer />
+ <v-alert class="score-alert ma-3"
+ color="error"
+ icon="warning"
+ :value="scoreError">{{ scoreError }}</v-alert>
+ </v-flex>
+ <v-flex>
+ <v-layout wrap class="score-submit-container">
+ <v-flex xs5 class="score-flex">
+ <span class="mr-2">Score:</span>
+ <input class="score-text-field"
+ id="score-input"
+ type="number"
+ v-model="score"
+ @input="validateScore"
+ @change="validateScore" />
+ <span> / {{fullScore}}</span>
+ <v-btn outline round flat
+ id="score-zero"
+ class="score-button"
+ @click="score=0"
+ color="red lighten-1">0
+ </v-btn>
+ <v-btn outline round flat
+ id="score-full"
+ @click="score=fullScore"
+ color="blue darken-3"
+ class="score-button">{{fullScore}}
+ </v-btn>
+ </v-flex>
+ <v-flex class="submit-flex" xs3 sm3>
+ <v-layout>
+ <v-flex xs4>
+ <v-tooltip top v-if="showFinalCheckbox">
+ <v-toolbar-items class="final-container"
+ slot="activator">
+ <label>Final</label>
+ <v-checkbox slot="activator"
+ v-model="isFinal"
+ class="final-checkbox" />
+ </v-toolbar-items>
+ <span>Non final feedback will be sent to the reviewer.</span>
+ </v-tooltip>
+ </v-flex>
+ <v-flex xs>
+ <v-tooltip top>
+ <v-btn color="success"
+ id="submit-feedback"
+ slot="activator"
+ :loading="loading"
+ @click="submit">Submit
+ <v-icon>chevron_right</v-icon>
+ </v-btn>
+ <span>Submit and continue</span>
+ </v-tooltip>
+ </v-flex>
+ </v-layout>
+ </v-flex>
+ </v-layout>
+ </v-flex>
+ </v-layout>
+ </v-container>
</template>
<script>
@@ -158,6 +175,9 @@ export default {
</script>
<style scoped>
+ .bottom-container {
+ padding: 0px;
+ }
.bottom-toolbar {
font-size: large;
}
@@ -174,7 +194,25 @@ export default {
.score-button {
min-width: 0px;
}
+ .final-container {
+ margin-top: 15px;
+ height: 10px;
+ }
.final-checkbox {
- float: left;
+ margin-left: 10px;
+ padding-top: 0;
+ margin-top: 0;
+ }
+ .submit-flex {
+ min-width: 190px;
+ margin-left: 10px;
+ }
+ .score-flex {
+ margin-left: 10px;
+ min-width: 250px;
+
+ }
+ .score-submit-container {
+ justify-content: space-between;
}
</style>
diff --git a/frontend/src/pages/reviewer/StudentOverviewPage.vue b/frontend/src/pages/reviewer/StudentOverviewPage.vue
index 190a887fd7b8652a7757d3fab06ecd7c82f14f36..94262fc084ad3817449b04dc6f760aff67b9b48f 100644
--- a/frontend/src/pages/reviewer/StudentOverviewPage.vue
+++ b/frontend/src/pages/reviewer/StudentOverviewPage.vue
@@ -1,28 +1,48 @@
<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>