Refactor: layout

This commit is contained in:
2022-11-04 17:44:32 +01:00
parent 56820b25c6
commit f5d0734e84
11 changed files with 121 additions and 61 deletions

View File

@@ -1,26 +1,56 @@
<template>
<v-container fluid class="pa-0">
<v-sheet class="rounded-lg pa-2">
<span class="text-h4 text--secondary">{{ courseID.toUpperCase() }}</span>
<span class="text-h4">{{ $store.getters.getCourseByID(courseID).name }}</span>
</v-sheet>
<v-container>
<v-row>
<v-col v-if="isAuthorized" cols="12">
<TutorPanel :course-id="courseID" />
</v-col>
<v-col cols="12">
<Challenge :course-id="courseID" />
</v-col>
<v-col cols="12">
<Coop :course-id="courseID" />
</v-col>
</v-row>
</v-container>
<v-row>
<v-col cols="12" sm="6">
<v-card height="100%" class="d-flex align-center pa-2">
<v-row no-gutters>
<v-col cols="12">
<span class="text-h5 text--secondary">{{ courseID.toUpperCase() }}</span>
</v-col>
<v-col cols="12">
<span class="text-h5">{{ $store.getters.getCourseByID(courseID).name }}</span>
</v-col>
</v-row>
</v-card>
</v-col>
<v-col cols="12" sm="6">
<v-card>
<v-card-title>Tutor</v-card-title>
<v-card-text>
<v-row align="center">
<v-col cols="auto">
<v-avatar size="64">
<img src="https://www.w3schools.com/howto/img_avatar.png" />
</v-avatar>
</v-col>
<v-col>
<div>{{ tutorName }}</div>
<div>{{ tutorEmail }}</div>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12">
<v-row>
<v-col v-if="isAuthorized" cols="12">
<TutorPanel :course-id="courseID" />
</v-col>
<v-col cols="12">
<Challenge :course-id="courseID" />
</v-col>
<v-col cols="12">
<Coop :course-id="courseID" />
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
</template>
<script>
import _capitalize from 'lodash-es/capitalize'
export default {
name: 'CourseIndexPage',
data() {
@@ -33,6 +63,17 @@ export default {
const isTutor = this.$auth.currentUser.email.endsWith('@iu.org')
const isAdmin = this.$store.getters.isAdmin
return isTutor || isAdmin
},
tutorEmail () {
return this.$store.getters.getCourseByID(this.courseID).tutor
},
tutorName () {
const nameParsed = this.tutorEmail.split('@')[0]
const nameParts = []
for (const namePart of nameParsed.split('.')) {
nameParts.push(_capitalize(namePart))
}
return nameParts.join(' ')
}
},
created () {

View File

@@ -27,7 +27,7 @@
</v-row>
</v-container>
<v-container v-else fluid class="fill-height">
<v-card flat color="transparent" class="mx-auto">
<v-card color="transparent" class="mx-auto">
<v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
</v-card>
</v-container>