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 7e25ecf178dcc9d8d81e0cdf9f7e9fdb19122d98..4e02f83528150dadc83e8e04a72f3400ce1e0a64 100644
--- a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
+++ b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
@@ -1,56 +1,73 @@
+<!-- TODO: remove inline stylings -->
+
<template>
- <v-toolbar dense class="bottom-toolbar">
- <v-tooltip top v-if="skippable">
- <v-btn
- slot="activator"
- 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"
- v-model="score"
- @input="validateScore"
- @change="validateScore"
- />
- <span> / {{fullScore}}</span>
- <v-btn
- outline round flat
- @click="score = 0"
- color="red lighten-1"
- class="score-button">0</v-btn>
- <v-btn
- outline round flat
- @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"
- :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
+ 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"
+ type="number"
+ v-model="score"
+ @input="validateScore"
+ @change="validateScore" />
+ <span> / {{fullScore}}</span>
+ <v-btn outline round flat
+ class="score-button"
+ @click="score=0"
+ color="red lighten-1">0
+ </v-btn>
+ <v-btn outline round flat
+ @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"
+ 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>
@@ -153,6 +170,9 @@ export default {
</script>
<style scoped>
+ .bottom-container {
+ padding: 0px;
+ }
.bottom-toolbar {
font-size: large;
}
@@ -169,7 +189,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>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 53dc85ed565afe3320cd963f30b75617bc51b581..fb837ff4e93c37734ba6d95c388bde0a7fda57d2 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -10,7 +10,7 @@ import PageNotFound from '@/pages/PageNotFound.vue'
import StartPageSelector from '@/pages/StartPageSelector.vue'
import LayoutSelector from '@/pages/LayoutSelector.vue'
import StudentSubmissionSideView from '@/pages/StudentSubmissionSideView.vue'
-import StudentListHelpCard from '@/components/student_list/StudentListHelpCard.vue'
+import StudentList from '@/components/student_list/StudentList.vue'
import FeedbackHistoryPage from '@/pages/base/FeedbackHistoryPage.vue'
import FeedbackTable from '@/components/feedback_list/FeedbackTable.vue'
import FeedbackListHelpCard from '@/components/feedback_list/FeedbackListHelpCard.vue'
@@ -131,7 +131,7 @@ const router = new Router({
{
path: '',
name: 'student-overview',
- component: StudentListHelpCard
+ component: StudentList
},
{
path: 'student/:studentPk/submission/:submissionPk',