From b88e33fdd7d1d1d4f35db33d260cea1136be8351 Mon Sep 17 00:00:00 2001
From: Dominik Seeger <dominik.seeger@gmx.net>
Date: Fri, 7 Dec 2018 15:11:11 +0100
Subject: [PATCH 1/5] fixed weird wrapping of BottomToolbar
---
.../AnnotatedSubmissionBottomToolbar.vue | 25 +++++++++++++++----
1 file changed, 20 insertions(+), 5 deletions(-)
diff --git a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
index 7e25ecf1..e7c8390a 100644
--- a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
+++ b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
@@ -1,5 +1,9 @@
+<!-- TODO: remove inline stylings -->
+
<template>
- <v-toolbar dense class="bottom-toolbar">
+<v-layout>
+ <div class="tb-container">
+ <div style="margin-top: 10px;">
<v-tooltip top v-if="skippable">
<v-btn
slot="activator"
@@ -15,6 +19,8 @@
icon="warning"
:value="scoreError"
>{{ scoreError }}</v-alert>
+ </div>
+ <div style="margin-top: 10px;">
<span class="mr-2">Score:</span>
<input
class="score-text-field"
@@ -34,10 +40,12 @@
@click="score = fullScore"
color="blue darken-3"
class="score-button">{{fullScore}}</v-btn>
+ </div>
+ <div style="display: flex; flex-wrap: wrap; margin-left: 20px; margin-top: 10px;">
<v-tooltip top v-if="showFinalCheckbox">
- <v-toolbar-items slot="activator" style="margin-top: 28px;">
+ <v-toolbar-items slot="activator">
<v-checkbox slot="activator" v-model="isFinal" class="final-checkbox"/>
- <span>Final</span>
+ <label style="margin-top: 25%; margin-right: 20px;">Final</label>
</v-toolbar-items>
<span>Non final feedback will be sent to the reviewer.</span>
</v-tooltip>
@@ -50,7 +58,9 @@
>Submit<v-icon>chevron_right</v-icon></v-btn>
<span>Submit and continue</span>
</v-tooltip>
- </v-toolbar>
+ </div>
+ </div>
+</v-layout>
</template>
<script>
@@ -159,6 +169,7 @@ export default {
.score-text-field {
max-width: 50px;
box-sizing: border-box;
+ height: 2.5vh;
border: 1px solid grey;
border-radius: 2px;
padding: 3px;
@@ -170,6 +181,10 @@ export default {
min-width: 0px;
}
.final-checkbox {
- float: left;
+ margin-top: 10px;
+ }
+ .tb-container {
+ display: flex;
+ flex-wrap: wrap;
}
</style>
--
GitLab
From b0aab84b2797a95c162d508dd82babceff2c95bf Mon Sep 17 00:00:00 2001
From: Dominik Seeger <dominik.seeger@gmx.net>
Date: Fri, 7 Dec 2018 18:19:11 +0100
Subject: [PATCH 2/5] fixed linewrapping with only vuetify components
---
.../AnnotatedSubmissionBottomToolbar.vue | 43 ++++++++++++-------
1 file changed, 27 insertions(+), 16 deletions(-)
diff --git a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
index e7c8390a..a6cb0d63 100644
--- a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
+++ b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
@@ -1,9 +1,9 @@
<!-- TODO: remove inline stylings -->
<template>
-<v-layout>
- <div class="tb-container">
- <div style="margin-top: 10px;">
+ <v-container>
+ <v-layout wrap>
+ <v-flex sm4 md4 lg3>
<v-tooltip top v-if="skippable">
<v-btn
slot="activator"
@@ -19,8 +19,8 @@
icon="warning"
:value="scoreError"
>{{ scoreError }}</v-alert>
- </div>
- <div style="margin-top: 10px;">
+ </v-flex>
+ <v-flex xs>
<span class="mr-2">Score:</span>
<input
class="score-text-field"
@@ -40,15 +40,19 @@
@click="score = fullScore"
color="blue darken-3"
class="score-button">{{fullScore}}</v-btn>
- </div>
- <div style="display: flex; flex-wrap: wrap; margin-left: 20px; margin-top: 10px;">
+ </v-flex>
+ <v-flex class="submit-container" xs4 sm4>
+ <v-layout wrap>
+ <v-flex xs4 md3>
<v-tooltip top v-if="showFinalCheckbox">
- <v-toolbar-items slot="activator">
+ <v-toolbar-items class="final-container" slot="activator">
+ <label>Final</label>
<v-checkbox slot="activator" v-model="isFinal" class="final-checkbox"/>
- <label style="margin-top: 25%; margin-right: 20px;">Final</label>
</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"
@@ -58,9 +62,11 @@
>Submit<v-icon>chevron_right</v-icon></v-btn>
<span>Submit and continue</span>
</v-tooltip>
- </div>
- </div>
+ </v-flex>
+ </v-layout>
+ </v-flex>
</v-layout>
+ </v-container>
</template>
<script>
@@ -169,7 +175,6 @@ export default {
.score-text-field {
max-width: 50px;
box-sizing: border-box;
- height: 2.5vh;
border: 1px solid grey;
border-radius: 2px;
padding: 3px;
@@ -180,11 +185,17 @@ export default {
.score-button {
min-width: 0px;
}
+ .final-container {
+ margin-top: 15px;
+ height: 10px;
+ }
.final-checkbox {
- margin-top: 10px;
+ margin-left: 10px;
+ padding-top: 0;
+ margin-top: 0;
}
- .tb-container {
- display: flex;
- flex-wrap: wrap;
+ .submit-container {
+ min-width: 260px;
+ margin-left: 10px;
}
</style>
--
GitLab
From 8a8cb89fa66ef1cb9670b4a396ce9441c653dba5 Mon Sep 17 00:00:00 2001
From: Dominik Seeger <dominik.seeger@gmx.net>
Date: Sun, 9 Dec 2018 12:29:44 +0100
Subject: [PATCH 3/5] further improved line wrapping
---
.../AnnotatedSubmissionBottomToolbar.vue | 146 ++++++++++--------
1 file changed, 79 insertions(+), 67 deletions(-)
diff --git a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
index a6cb0d63..4e02f835 100644
--- a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
+++ b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
@@ -1,72 +1,73 @@
<!-- TODO: remove inline stylings -->
<template>
- <v-container>
- <v-layout wrap>
- <v-flex sm4 md4 lg3>
- <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 xs>
- <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-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 class="submit-container" xs4 sm4>
- <v-layout wrap>
- <v-flex xs4 md3>
- <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-container>
+ <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>
@@ -169,6 +170,9 @@ export default {
</script>
<style scoped>
+ .bottom-container {
+ padding: 0px;
+ }
.bottom-toolbar {
font-size: large;
}
@@ -194,8 +198,16 @@ export default {
padding-top: 0;
margin-top: 0;
}
- .submit-container {
- min-width: 260px;
+ .submit-flex {
+ min-width: 190px;
+ margin-left: 10px;
+ }
+ .score-flex {
margin-left: 10px;
+ min-width: 250px;
+
+ }
+ .score-submit-container {
+ justify-content: space-between;
}
</style>
--
GitLab
From 3e0a113eae0775c3d2a5250e817a867e1ba3e102 Mon Sep 17 00:00:00 2001
From: Dominik Seeger <dominik.seeger@gmx.net>
Date: Thu, 24 Jan 2019 16:06:57 +0100
Subject: [PATCH 4/5] fixed student overview
---
.../components/student_list/StudentList.vue | 4 ++
.../student_list/StudentListHelpCard.vue | 6 ++-
.../pages/reviewer/StudentOverviewPage.vue | 40 ++++++++++++++-----
frontend/src/router/index.ts | 4 +-
4 files changed, 40 insertions(+), 14 deletions(-)
diff --git a/frontend/src/components/student_list/StudentList.vue b/frontend/src/components/student_list/StudentList.vue
index bc87cf04..05862c0c 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 de93b48d..637443a4 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/pages/reviewer/StudentOverviewPage.vue b/frontend/src/pages/reviewer/StudentOverviewPage.vue
index 190a887f..94262fc0 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 53dc85ed..fb837ff4 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',
--
GitLab
From e3736f4346711e472f2b4638f7a9a0ca651f01ce Mon Sep 17 00:00:00 2001
From: Dominik Seeger <dominik.seeger@gmx.net>
Date: Thu, 24 Jan 2019 16:06:57 +0100
Subject: [PATCH 5/5] fixed student overview
---
.../components/student_list/StudentList.vue | 4 ++
.../student_list/StudentListHelpCard.vue | 6 ++-
.../pages/reviewer/StudentOverviewPage.vue | 40 ++++++++++++++-----
3 files changed, 38 insertions(+), 12 deletions(-)
diff --git a/frontend/src/components/student_list/StudentList.vue b/frontend/src/components/student_list/StudentList.vue
index bc87cf04..05862c0c 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 de93b48d..637443a4 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/pages/reviewer/StudentOverviewPage.vue b/frontend/src/pages/reviewer/StudentOverviewPage.vue
index 190a887f..94262fc0 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>
--
GitLab