Merge pull request #138 from kaizumaki/feature/issue-124-add-register-page

クラス登録ページ・登録完了ページ作成

Author: NEKOYASAN

src/pages/user/registerClass.vue

@@ -0,0 +1,55 @@
+<template>
+  <bottom-sheet-layer title="クラス登録" title-en="STEP 2">
+    <template v-slot:LayerContents>
+      <dl class="RegisterClass-List">
+        <dt class="RegisterClass-ItemTitle">学校名</dt>
+        <dd>
+          <input-field label="school" placeholder="おひさま小学校" require />
+        </dd>
+        <dt class="RegisterClass-ItemTitle">クラス名</dt>
+        <dd>
+          <input-field label="class" placeholder="2年B組" require />
+          <span class="RegisterClass-ItemNote">
+            クラス名は表示されますのでご注意ください
+          </span>
+        </dd>
+      </dl>
+    </template>
+    <template v-slot:LayerFooter>
+      <action-button theme="primary" text="登録を完了する" />
+    </template>
+  </bottom-sheet-layer>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import BottomSheetLayer from '@/components/BottomSheetLayer.vue'
+import ActionButton from '@/components/ActionButton.vue'
+import InputField from '@/components/InputField.vue'
+
+export default Vue.extend({
+  components: { BottomSheetLayer, ActionButton, InputField },
+  layout: 'background'
+})
+</script>
+
+<style lang="scss" scoped>
+.RegisterClass-List {
+  padding: 24px 0;
+}
+.RegisterClass-ItemTitle {
+  font-size: 16px;
+  font-weight: bold;
+  color: $color-white;
+  text-align: center;
+  margin: 4px 0;
+}
+.RegisterClass-ItemNote {
+  display: block;
+  font-size: 14px;
+  font-weight: bold;
+  color: $color-white;
+  text-align: center;
+  margin: 4px 0;
+}
+</style>

src/pages/user/registered.vue

@@ -0,0 +1,66 @@
+<template>
+  <bottom-sheet-layer title="登録されました！" title-en="THANK YOU!">
+    <template v-slot:LayerContents>
+      <div class="Registered-Contents">
+        <v-icon color="white" class="Registered-Icon">
+          mdi-clipboard-account
+        </v-icon>
+        <p class="Registered-Text">あなたのクラスIDです</p>
+        <div class="Registered-Id">ほげほげほげ</div>
+      </div>
+    </template>
+    <template v-slot:LayerFooter>
+      <action-button
+        theme="primary"
+        text="授業を追加・編集する"
+        class="Registered-Button"
+      />
+      <action-button theme="secondary" text="クラスIDを共有する" />
+    </template>
+  </bottom-sheet-layer>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import BottomSheetLayer from '@/components/BottomSheetLayer.vue'
+import ActionButton from '@/components/ActionButton.vue'
+
+export default Vue.extend({
+  components: { BottomSheetLayer, ActionButton },
+  layout: 'background'
+})
+</script>
+
+<style lang="scss" scoped>
+.Registered-Contents {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 24px 0;
+}
+.Registered-Icon {
+  font-size: 50px;
+}
+.Registered-Text {
+  font-size: 16px;
+  font-weight: bold;
+  color: $color-white;
+  margin: 24px 0 12px;
+}
+.Registered-Id {
+  max-width: 9em;
+  padding: 16px 24px;
+  text-align: center;
+  background-color: $color-white;
+  border: 2px solid $color-base-color-01;
+  border-radius: 14px;
+  letter-spacing: 0.2em;
+  line-height: 1.25;
+  font-size: 30px;
+  color: $color-gray;
+}
+.Registered-Button {
+  margin-bottom: 16px;
+}
+</style>