[merge] merge agenda

2021-04-01 10:35:56 +08:00 · 2021-04-01 10:35:56 +08:00 · 2105d9b1fb
commit 2105d9b1fb
parent 6cc0d12baf 39d778ab43
8 changed files with 156 additions and 26 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -41,6 +41,16 @@ export default class App extends Vue {
    }
  }

+  public isRoot(): boolean {
+    if (
+      this.$route.name == "CFP" ||
+      this.$route.name === "news" ||
+      this.$route.name === "ocfp-news"
+    )
+      return false;
+    else return true;
+  }
+
  private detectDeviceType (mq: (MediaQueryList | MediaQueryListEvent)): void {
    const isDesktop: boolean = mq.matches;

@ -50,17 +60,6 @@ export default class App extends Vue {
      this.toggleDevice(DeviceType.MOBILE);
    }
  }
-  private isRoot (): boolean {
-    if (
-      this.$route.name === 'CFP' ||
-      this.$route.name === 'news' ||
-      this.$route.name === 'ocfp-news'
-    ) {
-      return false;
-    } else {
-      return true;
-    }
-  }
 }
 </script>
 <style lang="scss">
--- a/src/assets/images/arrow-left.svg
+++ b/src/assets/images/arrow-left.svg
@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="74.204" height="98.826" viewBox="0 0 74.204 98.826">
-    <path fill="#1060ff" d="M146.837 161.345l22.812-22.812-19.928-19.928a6.763 6.763 0 0 0-9.559 0l-42.736 42.74a6.757 6.757 0 0 0 0 9.559l42.568 42.568a6.757 6.757 0 0 0 9.559 0l19.928-19.928-22.644-22.644a6.763 6.763 0 0 1 0-9.555z" transform="translate(-95.445 -116.627)"/>
+    <path fill="#2d477b" d="M146.837 161.345l22.812-22.812-19.928-19.928a6.763 6.763 0 0 0-9.559 0l-42.736 42.74a6.757 6.757 0 0 0 0 9.559l42.568 42.568a6.757 6.757 0 0 0 9.559 0l19.928-19.928-22.644-22.644a6.763 6.763 0 0 1 0-9.555z" transform="translate(-95.445 -116.627)"/>
 </svg>
--- a/src/assets/images/arrow-right.svg
+++ b/src/assets/images/arrow-right.svg
@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="74.204" height="98.826" viewBox="0 0 74.204 98.826">
-    <path fill="#1060ff" d="M220.093 161.177l-42.568-42.572a6.763 6.763 0 0 0-9.559 0l-19.928 19.928 22.644 22.644a6.759 6.759 0 0 1 0 9.556l-22.812 22.812 19.93 19.927a6.757 6.757 0 0 0 9.559 0l42.736-42.74a6.753 6.753 0 0 0-.002-9.555z" transform="translate(-147.87 -116.627)"/>
+    <path fill="#2d477b" d="M220.093 161.177l-42.568-42.572a6.763 6.763 0 0 0-9.559 0l-19.928 19.928 22.644 22.644a6.759 6.759 0 0 1 0 9.556l-22.812 22.812 19.93 19.927a6.757 6.757 0 0 0 9.559 0l42.736-42.74a6.753 6.753 0 0 0-.002-9.555z" transform="translate(-147.87 -116.627)"/>
 </svg>
--- a/src/assets/images/title-block.svg
+++ b/src/assets/images/title-block.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30.252" height="30.252" viewBox="0 0 30.252 30.252">
+    <path fill="#1060ff" d="M87.79 130.265l-6.932-6.932-6.1-6.1a2.07 2.07 0 0 0-2.926 0L58.75 130.316a2.068 2.068 0 0 0 0 2.926l13.031 13.031a2.068 2.068 0 0 0 2.926 0l6.1-6.1 6.983-6.983a2.069 2.069 0 0 0 0-2.925z" transform="translate(-58.143 -116.627)"/>
+</svg>
--- a/src/assets/scss/agenda.scss
+++ b/src/assets/scss/agenda.scss
@ -1,16 +1,56 @@
+@import './breakpoint';
+@import './color';
+
+$fontFamily: "Noto Serif CJK TC -Black";
+
 #agenda {
-    margin: 0 auto;
-    max-width: 1200px;
+  margin: 0 auto;
+  max-width: 1200px;

-    div.event.container {
-        display: grid;
-        grid-template-columns: min-content repeat(6, 1fr) min-content;
-        column-gap: 30px;
+  font-family: $fontFamily;
+  font-size: 22px;

-        img.arrow {
-            margin: auto;
-            width: fit-content;
-            height: calc(99/217 * 100%);
-        }
+  article {
+    white-space: pre-wrap;
+    line-height: 2;
+  }
+
+  p.vote {
+    text-align: center;
+    padding: 80px 0;
+
+    a.vote.button {
+      display: inline-block;
+      padding: 7px 20px;
+     
+      background-color: $indigo-blue;
+      border: none;
+      border-radius: 32px;
+      
+      font: inherit;
+      color: white;
+      font-size: 26px;
+      line-height: 1.44;
    }
+  }
+
+  ol.vote.rule {
+    counter-reset: 0;
+
+    li {
+      line-height: 2;
+    }
+  }
+
+  div.event.container {
+    display: grid;
+    grid-template-columns: min-content repeat(6, 1fr) min-content;
+    column-gap: 30px;
+
+    img.arrow {
+      margin: auto;
+      width: fit-content;
+      height: calc(99/217 * 100%);
+    }
+  }
 }
--- a/src/assets/scss/blocktitle.scss
+++ b/src/assets/scss/blocktitle.scss
@ -0,0 +1,37 @@
+$fontFamily: "Noto Serif CJK TC -Black";
+
+div.block.title {
+    display: flex;
+    justify-content: center;
+
+    font-size: 26px;
+    font-family: $fontFamily;
+    font-weight: bold;
+
+    line-height: 1.44;
+    
+    margin: 36px 0;
+    
+    span.text {
+        display: contents;
+
+        &::before, &::after {
+            display: inline-block;
+            content: '';
+            width: 1.44em;
+            height: 1.44em;
+            margin: auto;
+            vertical-align: middle;
+            background-image: url('../assets/images/title-block.svg');
+            background-size: contain;
+        }
+    
+        &::before {
+            margin-right: 18px;
+        }
+    
+        &::after {
+            margin-left: 18px;
+        }
+    }
+}
--- a/src/components/BlockTitle.vue
+++ b/src/components/BlockTitle.vue
@ -0,0 +1,17 @@
+<template>
+  <div class="block title">
+    <span class="text">{{ text }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class BlockTitle extends Vue {
+  @Prop({ default: '' }) private text!: string;
+}
+</script>
+<style lang="scss">
+@import '@/assets/scss/blocktitle';
+</style>
--- a/src/pages/Agenda.vue
+++ b/src/pages/Agenda.vue
@ -1,6 +1,27 @@
 <template>
  <div id="agenda">
-    <div class="event container">
+    <!-- Vote Section -->
+    <BlockTitle text="人氣投票" id="#vote" />
+    <article>
+      投票時間：4/2 (五) 20:00 至 4/9 (五) 23:59（UTC+8）<br />
+      投票資格：於 4/9 (五) 23:59 前取得 2021 年會門票的與會者（不分票種）、2021 年會志工、2021 年會講者
+    </article>
+    <p class="vote"><a class="vote button" href="https://docs.google.com/forms/d/e/1FAIpQLSdWJtLP96bqXWukmOEar0xiBfGScm3qAlp-Xii05-cmU2Gxlg/viewform" target="_blank" rel="noopeener">投票去</a></p>
+    <article>
+     【注意事項】
+      <ol class="vote rule">
+        <li>0. 事前人氣投票結果，將作為議程組與審稿委員會於安排議程時段與會議廳的參考依據之一。</li>
+        <li>1. 投票為「記名投票」，使用 KKTIX 四碼檢查碼作為投票依據。議程組以檢查碼辨識投票的人是否持有年會門票，不對外公布各組檢查碼的具體投票內容。</li>
+        <li>2. 三個議程種類（Espresso、Double Espresso 與 Presentation）可各選擇投給 1 個議程。</li>
+        <li>3. 若同一議程種類選擇超過一個議程，或不選擇任何議程，視為無效票。各個議程種類的選票有效性互相獨立，無效票不影響其他議程種類的選票認定，舉例來說，若 Espresso 選擇 2 個議程、Double Espresso 選擇 1 個議程、Presentation 選擇 0 個議程，則 Double Espresso 的部分為有效票，其他二種議程為無效票。</li>
+        <li>4. 此投票表單使用 Google Forms「隨機決定問題順序」功能決定各個議程的顯示順序。</li>
+        <li>5. 在投票截止前，可以使用同一組檢查碼重複投票。計票時以最新一筆投票記錄為準。</li>
+      </ol>
+    </article>
+    <!-- Vote Section End -->
+    <!-- Event Section -->
+    <BlockTitle text="活動" id="#event" />
+    <div v-if="!isMobile()" class="event container">
      <img class="arrow" src="@/assets/images/arrow-left.svg">
      <EventBlock icon="union" text="大地遊戲"/>
      <EventBlock icon="stall-outline" text="社群攤位"/>
@ -10,19 +31,32 @@
      <EventBlock text="開放式\n議程"/>
      <img class="arrow" src="@/assets/images/arrow-right.svg">
    </div>
+    <div v-if="isMobile()" class="mobile event container">
+      <!-- TODO -->
+    </div>
+    <!-- Event Section End -->
  </div>
 </template>
 <script lang="ts">
 import { Watch, Component, Prop, Vue } from 'vue-property-decorator';
+import { Action, Getter } from 'vuex-class';
+
+import { DeviceType } from '@/store/types/app';

 import EventBlock from '../components/EventBlock.vue';
+import BlockTitle from '../components/BlockTitle.vue';
@Component({
  components: {
-    EventBlock
+    EventBlock,
+    BlockTitle
  }
 })
 export default class Agenda extends Vue {
+  @Getter('device', { namespace: 'app' }) private device!: DeviceType;

+  private isMobile (): boolean {
+    return this.device === DeviceType.MOBILE;
+  }
 }
 </script>
 <style lang="scss">