Skip to content

Commit 268c7cc

Browse files
NEKOYASANNEKOYASAN
authored
Merge pull request #134 from kaizumaki/feature/issue-122-add-class-list-page
クラス選択ページ作成
2 parents 74c0098 + 25a3006 commit 268c7cc

File tree

3 files changed

+232
-0
lines changed

3 files changed

+232
-0
lines changed

‎src/components/BottomSheetLayer.vue‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<template>
2+
<v-bottom-sheet
3+
v-model="layer"
4+
persistent
5+
scrollable
6+
:fullscreen="fullscreen"
7+
>
8+
<v-card class="Layer">
9+
<v-card-title class="Layer-CardElements Layer-CardTitle">
10+
<v-container class="Layer-Container">
11+
<div class="Layer-Header">
12+
<span class="TitleEn">{{ titleEn }}</span>
13+
<h2 class="Title">{{ title }}</h2>
14+
</div>
15+
</v-container>
16+
</v-card-title>
17+
<v-card-text class="Layer-CardText">
18+
<v-container class="Layer-FormContainer">
19+
<slot name="LayerContents" />
20+
</v-container>
21+
</v-card-text>
22+
<v-card-actions class="Layer-CardElements Layer-CardActions">
23+
<v-container class="Layer-Container">
24+
<slot name="LayerFooter" />
25+
</v-container>
26+
</v-card-actions>
27+
</v-card>
28+
</v-bottom-sheet>
29+
</template>
30+
31+
<script lang="ts">
32+
import Vue from 'vue'
33+
34+
type DataType = {
35+
layer: boolean
36+
}
37+
38+
export default Vue.extend({
39+
props: {
40+
expanded: {
41+
type: Boolean,
42+
required: false,
43+
default: true
44+
},
45+
title: {
46+
type: String,
47+
required: true
48+
},
49+
titleEn: {
50+
type: String,
51+
required: true
52+
},
53+
fullscreen: {
54+
type: Boolean,
55+
required: false,
56+
default: false
57+
}
58+
},
59+
data(): DataType {
60+
return {
61+
layer: this.expanded
62+
}
63+
},
64+
watch: {
65+
expanded(newValue) {
66+
this.layer = newValue
67+
}
68+
}
69+
})
70+
</script>
71+
72+
<style lang="scss" scoped>
73+
.Layer {
74+
background-color: $color-base-color-07;
75+
border-radius: 24px 24px 0 0 !important;
76+
padding: 16px !important;
77+
}
78+
.Layer-CardElements {
79+
padding: 0 !important;
80+
}
81+
.Layer-CardTitle {
82+
margin-bottom: 16px;
83+
}
84+
.Layer-CardActions {
85+
margin-top: 24px;
86+
}
87+
.Layer-CardText {
88+
padding: 0 !important;
89+
}
90+
.Layer-FormContainer {
91+
padding: 0 !important;
92+
}
93+
.Layer-Container {
94+
padding: 0;
95+
}
96+
.Layer-Header {
97+
display: flex;
98+
flex-direction: column;
99+
align-items: center;
100+
color: $color-white;
101+
border-bottom: 1px solid $color-base-color-01;
102+
padding: 0 0 4px !important;
103+
104+
.TitleEn {
105+
font-size: 12px;
106+
font-weight: bold;
107+
}
108+
109+
.Title {
110+
font-size: 20px;
111+
}
112+
}
113+
</style>

‎src/layouts/background.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<v-app>
3+
<v-overlay :value="loading" color="#0071C2" opacity="1" z-index="9999">
4+
<div class="loader">
5+
Loading
6+
</div>
7+
</v-overlay>
8+
<v-app-bar fixed app class="bar" elevation="0">
9+
<header-logo />
10+
</v-app-bar>
11+
<v-content class="LayerContent">
12+
<nuxt />
13+
</v-content>
14+
</v-app>
15+
</template>
16+
17+
<script lang="ts">
18+
import Vue from 'vue'
19+
import HeaderLogo from '@/assets/svgs/header_logo.svg'
20+
21+
type DataType = {
22+
loading: boolean
23+
}
24+
25+
export default Vue.extend({
26+
components: {
27+
HeaderLogo
28+
},
29+
data(): DataType {
30+
return {
31+
loading: true
32+
}
33+
},
34+
mounted(): void {
35+
this.loading = false
36+
}
37+
})
38+
</script>
39+
40+
<style scoped lang="scss">
41+
.LayerContent {
42+
background-color: $color-base-color-01;
43+
}
44+
</style>

‎src/pages/user/classlist.vue‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<bottom-sheet-layer title="クラス一覧" title-en="CLASS LIST" fullscreen>
3+
<template v-slot:LayerContents>
4+
<v-list>
5+
<v-radio-group v-model="selectedItem">
6+
<v-list-item
7+
v-for="(item, index) in items"
8+
:key="index"
9+
class="ClassList-Item"
10+
>
11+
<v-radio :value="item.num">
12+
<template v-slot:label>
13+
<span class="ClassList-Label">{{ item.name }}</span>
14+
</template>
15+
</v-radio>
16+
</v-list-item>
17+
</v-radio-group>
18+
</v-list>
19+
</template>
20+
<template v-slot:LayerFooter>
21+
<action-button
22+
theme="primary"
23+
text="選択クラスでログインする"
24+
class="ClassList-Button"
25+
/>
26+
<action-button theme="secondary" text="クラスを登録する" />
27+
</template>
28+
</bottom-sheet-layer>
29+
</template>
30+
31+
<script lang="ts">
32+
import Vue from 'vue'
33+
import BottomSheetLayer from '@/components/BottomSheetLayer.vue'
34+
import ActionButton from '@/components/ActionButton.vue'
35+
36+
type DataType = {
37+
items: Object[]
38+
selectedItem: number
39+
}
40+
41+
export default Vue.extend({
42+
components: { BottomSheetLayer, ActionButton },
43+
layout: 'background',
44+
data(): DataType {
45+
return {
46+
items: [
47+
{ name: 'ほげほげ学校１年２組', num: 1 },
48+
{ name: 'ほげほげ学校１年２組', num: 2 },
49+
{ name: 'ほげほげ学校１年２組', num: 3 },
50+
{ name: 'ほげほげ学校１年２組', num: 4 },
51+
{ name: 'ほげほげ学校１年２組', num: 5 },
52+
{ name: 'ほげほげ学校１年２組', num: 6 },
53+
{ name: 'ほげほげ学校１年２組', num: 7 },
54+
{ name: 'ほげほげ学校１年２組', num: 8 },
55+
{ name: 'ほげほげ学校１年２組', num: 9 }
56+
],
57+
selectedItem: 1
58+
}
59+
}
60+
})
61+
</script>
62+
63+
<style lang="scss" scoped>
64+
.ClassList-Item {
65+
&:nth-child(2n) {
66+
background-color: $color-back-gray;
67+
}
68+
}
69+
.ClassList-Label {
70+
color: $color-gray;
71+
}
72+
.ClassList-Button {
73+
margin-bottom: 16px;
74+
}
75+
</style>

0 commit comments

Comments
 (0)