Skip to content

Commit d69d11c

Browse files
NEKOYASANNEKOYASAN
authored
Merge pull request #110 from kaizumaki/feature/classes-index
閲覧者（学生側）ページ作成
2 parents 8ac922b + 862d226 commit d69d11c

File tree

6 files changed

+153
-61
lines changed

6 files changed

+153
-61
lines changed

‎src/components/CalendarBar.vue‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,6 @@ export default class CalendarBar extends Vue {
276276
background: rgba(0, 0, 0, 0);
277277
height: 68px;
278278
min-width: 12px;
279-
font-family: 'Noto Sans JP', sans-serif;
280279
281280
.title {
282281
color: $color-base-color-01;
@@ -308,12 +307,12 @@ export default class CalendarBar extends Vue {
308307
flex-direction: column;
309308
background: $color-white;
310309
height: 68px;
311-
min-width: 16px;
312-
border-radius: 30px !important;
310+
min-width: 1rem;
311+
max-width: 3rem;
312+
border-radius: 3em !important;
313313
align-items: center;
314314
justify-content: center;
315315
color: $color-gray;
316-
font-family: 'Noto Sans JP', sans-serif;
317316
margin: 0 3px;
318317
}
319318

‎src/components/ContentCard.vue‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<v-card class="ContentCard">
3-
<v-card-actions>
2+
<v-card class="ContentCard elevation-4">
3+
<v-card-actions class="ContentCard-Actions">
44
<subject-tag
55
v-for="(item, idx) in subjects"
66
:key="idx"
@@ -10,11 +10,20 @@
1010
:icon-color="item.iconColor || 'white'"
1111
:background-color="item.backgroundColor || '#A5D8FF'"
1212
/>
13+
<subject-tag
14+
class="ContentCard-SubjectTag"
15+
:name="'動画'"
16+
:icon="'mdi-video'"
17+
:icon-color="'#424242'"
18+
:background-color="'#E0E0E0'"
19+
/>
1320
</v-card-actions>
1421
<v-card-title>
1522
<h2 class="ContentCard-Title">{{ title }}</h2>
1623
</v-card-title>
17-
<v-card-text class="ContentCard-Description">{{ description }}</v-card-text>
24+
<v-card-text>
25+
<p class="ContentCard-Description">{{ description }}</p>
26+
</v-card-text>
1827
</v-card>
1928
</template>
2029

@@ -43,27 +52,23 @@ export default Vue.extend({
4352

4453
<style scoped lang="scss">
4554
.ContentCard {
46-
color: 'black';
55+
color: $color-gray;
4756
border-radius: 14px !important;
57+
.ContentCard-Actions {
58+
padding: 16px 16px 0;
59+
}
4860
.ContentCard-SubjectTag {
4961
margin-right: 4px;
5062
}
5163
.ContentCard-Title {
52-
font-family: 'Noto Sans', sans-serif;
53-
font-style: normal;
5464
font-weight: bold;
5565
font-size: 14px;
56-
line-height: 19px;
57-
color: #424242;
66+
line-height: 1.75;
5867
}
5968
.ContentCard-Description {
60-
white-space: pre-wrap;
61-
font-family: 'Noto Sans', sans-serif;
62-
font-style: normal;
63-
font-weight: normal;
6469
font-size: 12px;
65-
line-height: 16px;
66-
color: #424242;
70+
color: $color-gray;
71+
margin: 0;
6772
}
6873
}
6974
</style>

‎src/components/PeriodCard.vue‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<template>
2+
<div class="PeriodCard">
3+
<div class="PeriodCard-NumberBlock">
4+
<div class="PeriodCard-Number">
5+
<span class="PeriodCard-Number-Num">1</span>
6+
<span class="PeriodCard-Number-Text">時間目</span>
7+
</div>
8+
<div class="PeriodCard-Time">
9+
<span>00:00</span>
10+
<span>|</span>
11+
<span>00:00</span>
12+
</div>
13+
</div>
14+
<v-row>
15+
<v-col
16+
v-for="(item, i) in classData.getLessonsByDisplayDate"
17+
:key="i"
18+
cols="12"
19+
md="6"
20+
>
21+
<content-card
22+
:description="formatDate(item.startTime)"
23+
:title="item.content"
24+
:subjects="[{ name: item.subject }]"
25+
/>
26+
</v-col>
27+
</v-row>
28+
</div>
29+
</template>
30+
31+
<script lang="ts">
32+
import Vue from 'vue'
33+
import dayjs from 'dayjs'
34+
import ContentCard from '@/components/ContentCard.vue'
35+
36+
export default Vue.extend({
37+
components: { ContentCard },
38+
props: {
39+
classData: {
40+
type: Object,
41+
default: () => {}
42+
}
43+
},
44+
methods: {
45+
formatDate(date: Date): string {
46+
return dayjs(date).format('HH:MM')
47+
}
48+
}
49+
})
50+
</script>
51+
52+
<style scoped lang="scss">
53+
.PeriodCard {
54+
display: flex;
55+
border-bottom: 1px solid $color-base-color-02;
56+
padding-bottom: 12px;
57+
margin-bottom: 12px;
58+
59+
&:last-child {
60+
border: none;
61+
}
62+
63+
.PeriodCard-NumberBlock {
64+
display: flex;
65+
flex-direction: column;
66+
margin: 12px;
67+
}
68+
69+
.PeriodCard-Number {
70+
display: flex;
71+
flex-direction: column;
72+
align-items: center;
73+
color: $color-white;
74+
background-color: $color-base-color-06;
75+
width: 40px;
76+
border-radius: 3em;
77+
padding: 12px 4px;
78+
margin-bottom: 8px;
79+
80+
.PeriodCard-Number-Num {
81+
font-size: 22px;
82+
}
83+
84+
.PeriodCard-Number-Text {
85+
font-size: 8px;
86+
font-weight: bold;
87+
}
88+
}
89+
90+
.PeriodCard-Time {
91+
display: flex;
92+
flex-direction: column;
93+
justify-content: center;
94+
text-align: center;
95+
font-size: 10px;
96+
color: $color-white;
97+
}
98+
}
99+
</style>

‎src/components/SubjectTag.vue‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,15 +43,11 @@ export default Vue.extend({
4343
padding: 4px 12px;
4444
.SubjectIcon {
4545
border-radius: 0;
46-
height: 7px;
47-
fill: #fff;
4846
}
4947
.SubjectTagText {
50-
font-family: 'Noto Sans', sans-serif;
51-
font-style: normal;
5248
font-weight: bold;
5349
font-size: 12px;
54-
color: #424242;
50+
color: $color-gray;
5551
margin: 8px;
5652
}
5753
}

‎src/layouts/classes.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@
88
<v-app-bar fixed app class="bar" elevation="0">
99
<HeaderLogo />
1010
<v-spacer />
11-
<v-btn outlined rounded color="#0071C2">
12-
ログアウト
13-
<v-icon right>mdi-exit-to-app</v-icon>
11+
<v-btn fab small outlined rounded color="#0071C2">
12+
<v-icon>mdi-clipboard-account</v-icon>
1413
</v-btn>
1514
<template v-slot:extension>
1615
<div class="header-calender">
@@ -19,7 +18,7 @@
1918
</template>
2019
</v-app-bar>
2120
<v-content class="content">
22-
<v-container class="px-4 py-8">
21+
<v-container class="classes-container px-4 py-8">
2322
<nuxt />
2423
</v-container>
2524
</v-content>
@@ -62,8 +61,6 @@ export default Vue.extend({
6261

6362
<style scoped lang="scss">
6463
.v-btn {
65-
font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
66-
font-style: normal;
6764
font-weight: bold;
6865
font-size: 12px;
6966
line-height: 16px;
@@ -91,4 +88,7 @@ export default Vue.extend({
9188
max-width: 640px;
9289
height: 40px;
9390
}
91+
.classes-container {
92+
height: 100%;
93+
}
9494
</style>

‎src/pages/classes/index.vue‎

Lines changed: 25 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,18 @@
11
<template>
22
<div class="MainPage">
3-
<v-row v-if="classData.getLessonsByDisplayDate.length" class="DataBlock">
4-
<v-col
5-
v-for="(item, i) in classData.getLessonsByDisplayDate"
6-
:key="i"
7-
cols="12"
8-
md="6"
9-
>
10-
<ContentCard
11-
:description="formatDate(item.startTime)"
12-
:title="item.content"
13-
:subjects="[{ name: item.subject }]"
14-
/>
15-
</v-col>
16-
</v-row>
17-
18-
<v-row v-else-if="today" class="DataBlock">
19-
<h1 style="color: white; width: 100vw; text-align: center;">
3+
<div v-if="classData.getLessonsByDisplayDate.length">
4+
<period-card :class-data="classData" />
5+
</div>
6+
<div v-else-if="today" class="Classes-Outer">
7+
<h1 class="Classes-Title">
208
今日の時間割はまだ届いていないみたいです
219
</h1>
22-
</v-row>
23-
<v-row v-else class="DataBlock">
24-
<h1 style="color: white; width: 100vw; text-align: center;">
10+
</div>
11+
<div v-else class="Classes-Outer">
12+
<h1 class="Classes-Title">
2513
{{ dateTitle }} の時間割はまだ届いていないみたいです
2614
</h1>
27-
</v-row>
15+
</div>
2816
</div>
2917
</template>
3018

@@ -33,7 +21,7 @@ import Vue from 'vue'
3321
import dayjs from 'dayjs'
3422
import isToday from 'date-fns/isToday'
3523
import { vxm } from '@/store'
36-
import ContentCard from '@/components/ContentCard.vue'
24+
import PeriodCard from '@/components/PeriodCard.vue'
3725
3826
type Data = {
3927
classData: typeof vxm.classData
@@ -42,7 +30,7 @@ type Data = {
4230
}
4331
4432
export default Vue.extend({
45-
components: { ContentCard },
33+
components: { PeriodCard },
4634
layout: 'classes',
4735
data(): Data {
4836
return {
@@ -67,14 +55,19 @@ export default Vue.extend({
6755

6856
<style lang="scss" scoped>
6957
.MainPage {
70-
.Logo {
71-
text-align: center;
72-
}
73-
.DataBlock {
74-
margin: 0 -12px;
75-
.studycard {
76-
margin-bottom: 20px;
77-
}
78-
}
58+
display: flex;
59+
flex-direction: column;
60+
height: 100%;
61+
}
62+
.Classes-Outer {
63+
display: flex;
64+
align-items: center;
65+
justify-content: center;
66+
flex: 1 0 auto;
67+
}
68+
.Classes-Title {
69+
font-size: 21px;
70+
font-weight: normal;
71+
color: $color-white;
7972
}
8073
</style>

0 commit comments

Comments
 (0)