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/6] 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/6] 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/6] 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 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 4/6] 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 From 0e7e8f26a123aca22553614f5eab52b48d82f3eb 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 5/6] fixed submission toolbar styling --- .../AnnotatedSubmissionBottomToolbar.vue | 154 +++++++++++------- 1 file changed, 96 insertions(+), 58 deletions(-) diff --git a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue index 0005c11b..891c567b 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> -- GitLab From d7a95812c49de68588ab87812d6ecdcb8b570b5a 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 6/6] 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