[M] Separate course-head from overall-course

This commit is contained in:
Hykilpikonna
2019-10-14 20:27:07 -04:00
parent eb094be9af
commit 68c1fa1216
2 changed files with 41 additions and 30 deletions
@@ -0,0 +1,41 @@
<template>
<div id="course-head" class="course-card-content main vertical-center">
<el-row>
<el-col :span="6" class="course-col-name">
<div class="course-name">{{course.name}}</div>
<div class="course-teacher">{{course.teacherName}}</div>
</el-col>
<el-col :span="12">
&nbsp;
</el-col>
<el-col :span="6" class="course-col-grade">
<div class="course-grade">
<span class="letter">{{course.letterGrade}} </span>
<span class="numeric">{{course.numericGrade.toFixed(2)}}</span>
<span class="percent">%</span>
</div>
<div class="course-updates" :class="unread === 0 ? 'none' : 'unread'">
<span class="unread-number">{{unread}}</span>
<span class="unread-text">new update{{unread >= 2 ? 's' : ''}}</span>
</div>
</el-col>
</el-row>
</div>
</template>
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import {Course} from "@/components/app/app";
@Component({
components: {}
})
export default class CourseHead extends Vue
{
// @ts-ignore
@Prop() unread: number;
// @ts-ignore
@Prop() course: Course;
}
</script>
@@ -1,36 +1,6 @@
<template>
<div id="overall-course">
<el-card class="course-card">
<div class="course-card-content main vertical-center">
<el-row>
<el-col :span="6" class="course-col-name">
<div class="course-name">
{{course.name}}
</div>
<div class="course-teacher">
{{course.teacherName}}
</div>
</el-col>
<el-col :span="12">
&nbsp;
</el-col>
<el-col :span="6" class="course-col-grade">
<div class="course-grade">
<span class="letter">{{course.letterGrade}} </span>
<span class="numeric">{{course.numericGrade.toFixed(2)}}</span>
<span class="percent">%</span>
</div>
<div class="course-updates" :class="countUnread() === 0 ? 'none' : 'unread'">
<span class="unread-number">
{{countUnread()}}
</span>
<span class="unread-text">
new update{{countUnread() >= 2 ? 's' : ''}}
</span>
</div>
</el-col>
</el-row>
</div>
<div class="course-card-content expand notification"
v-if="countUnread() !== 0">
<unread-entry v-for="assignment in unreadAssignments"