[add & optimize] add wip component & rwd

agenda sample rwd
add wip component for work in process
fixed ts warning

src/App.vue

@@ -41,14 +41,16 @@ export default class App extends Vue {
     }
   }
 
-  public isRoot(): boolean {
+  public isRoot (): boolean {
     if (
-      this.$route.name == "CFP" ||
+      this.$route.name === 'CFP' ||
-      this.$route.name === "news" ||
+      this.$route.name === 'news' ||
-      this.$route.name === "ocfp-news"
+      this.$route.name === 'ocfp-news'
-    )
+    ) {
       return false;
-    else return true;
+    } else {
+      return true;
+    }
   }
 
   private detectDeviceType (mq: (MediaQueryList | MediaQueryListEvent)): void {

src/assets/scss/agenda.scss

@@ -1,23 +1,65 @@
 @import './breakpoint';
 @import './color';
 
-$fontFamily: "Noto Serif CJK TC -Black";
+$fontFamily: "Noto Serif CJK TC -SemiBold";
+$fontFamilyVote: "Noto Serif CJK TC -Black";
+
+@mixin RWDFontSize {
+  font-size: 14pt;
+  @media screen and (max-width: $max-width-medium-0) {
+    font-size: 12pt;
+  }
+  @media screen and (max-width: $max-width-small-0) {
+    font-size: 10pt;
+  }
+  @media screen and (max-width: $max-width-small-2) {
+    font-size: 8pt
+  }
+}
+@mixin RWDWidth {
+  max-width: 80%;
+  @media screen and (max-width: $max-width-medium-0) {
+    max-width: 85%;
+  }
+  @media screen and (max-width: $max-width-small-0) {
+    max-width: 85%;
+  }
+  @media screen and (max-width: $max-width-small-2) {
+    max-width: 85%;
+  }
+}
+@mixin RWDButton {
+  font-size: 16pt;
+  line-height: 1.44;
+  @media screen and (max-width: $max-width-medium-0) {
+    
+  }
+  @media screen and (max-width: $max-width-small-0) {
+    font-size: 14pt;
+    line-height: 1.3;
+  }
+  @media screen and (max-width: $max-width-small-2) {
+    
+  }
+}
 
 #agenda {
   margin: 0 auto;
-  max-width: 1200px;
+  @include RWDWidth;
+  padding-top: 50px;
 
   font-family: $fontFamily;
-  font-size: 22px;
+  @include RWDFontSize;
 
   article {
     white-space: pre-wrap;
     line-height: 2;
+    margin: 50px 0;
   }
 
   p.vote {
     text-align: center;
-    padding: 80px 0;
+    padding: 50px 0;
 
     a.vote.button {
       display: inline-block;
@@ -27,18 +69,20 @@ $fontFamily: "Noto Serif CJK TC -Black";
       border: none;
       border-radius: 32px;
       
-      font: inherit;
+      font-family: $fontFamilyVote;
+      //font-size: 16pt;
       color: white;
-      font-size: 26px;
+      //line-height: 1.44;
-      line-height: 1.44;
+      @include RWDButton;
     }
   }
 
   ol.vote.rule {
     counter-reset: 0;
+    list-style-type: decimal;
 
     li {
-      line-height: 2;
+      line-height: 3;
     }
   }
 

src/components/WIP.vue

@@ -0,0 +1,39 @@
+<template>
+    <div id="wip">
+        <img
+			class="wip-dev-icon"
+			src="~@/assets/images/teams/dev.svg"
+		/>
+        <h1>施工中．．．</h1>
+    </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+@Component
+export default class WIP extends Vue {
+
+}
+</script>
+<style lang="scss">
+
+$fontFamily: "Noto Serif CJK TC -Black";
+
+#wip {
+    width: 70%;
+    margin: 150px auto;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    .wip-dev-icon {
+        width: 150px;
+        margin: 20px 0;
+    }
+    h1 {
+        font-size: 24pt;
+        font-family: $fontFamily;
+    }
+}
+
+</style>

src/pages/Agenda.vue

@@ -9,17 +9,18 @@
     <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">
+      <ol class="vote rule" start="0" type="1">
-        <li>0. 事前人氣投票結果，將作為議程組與審稿委員會於安排議程時段與會議廳的參考依據之一。</li>
+        <li>事前人氣投票結果，將作為議程組與審稿委員會於安排議程時段與會議廳的參考依據之一。</li>
-        <li>1. 投票為「記名投票」，使用 KKTIX 四碼檢查碼作為投票依據。議程組以檢查碼辨識投票的人是否持有年會門票，不對外公布各組檢查碼的具體投票內容。</li>
+        <li>投票為「記名投票」，使用 KKTIX 四碼檢查碼作為投票依據。議程組以檢查碼辨識投票的人是否持有年會門票，不對外公布各組檢查碼的具體投票內容。</li>
-        <li>2. 三個議程種類（Espresso、Double Espresso 與 Presentation）可各選擇投給 1 個議程。</li>
+        <li>三個議程種類（Espresso、Double Espresso 與 Presentation）可各選擇投給 1 個議程。</li>
-        <li>3. 若同一議程種類選擇超過一個議程，或不選擇任何議程，視為無效票。各個議程種類的選票有效性互相獨立，無效票不影響其他議程種類的選票認定，舉例來說，若 Espresso 選擇 2 個議程、Double Espresso 選擇 1 個議程、Presentation 選擇 0 個議程，則 Double Espresso 的部分為有效票，其他二種議程為無效票。</li>
+        <li>若同一議程種類選擇超過一個議程，或不選擇任何議程，視為無效票。各個議程種類的選票有效性互相獨立，無效票不影響其他議程種類的選票認定，舉例來說，若 Espresso 選擇 2 個議程、Double Espresso 選擇 1 個議程、Presentation 選擇 0 個議程，則 Double Espresso 的部分為有效票，其他二種議程為無效票。</li>
-        <li>4. 此投票表單使用 Google Forms「隨機決定問題順序」功能決定各個議程的顯示順序。</li>
+        <li>此投票表單使用 Google Forms「隨機決定問題順序」功能決定各個議程的顯示順序。</li>
-        <li>5. 在投票截止前，可以使用同一組檢查碼重複投票。計票時以最新一筆投票記錄為準。</li>
+        <li>在投票截止前，可以使用同一組檢查碼重複投票。計票時以最新一筆投票記錄為準。</li>
       </ol>
     </article>
     <!-- Vote Section End -->
     <!-- Event Section -->
+    <!-- wip
     <BlockTitle text="活動" id="#event" />
     <div v-if="!isMobile()" class="event container">
       <img class="arrow" src="@/assets/images/arrow-left.svg">
@@ -31,6 +32,7 @@
       <EventBlock text="開放式\n議程"/>
       <img class="arrow" src="@/assets/images/arrow-right.svg">
     </div>
+    -->
     <div v-if="isMobile()" class="mobile event container">
       <!-- TODO -->
     </div>

src/pages/Team.vue

@@ -1,7 +1,15 @@
-<template> </template>
+<template>
+    <WIP></WIP>
+</template>
 <script>
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-@Component({})
+import WIP from '@/components/WIP.vue';
+
+@Component({
+    components: {
+        WIP
+    }
+})
 export default class Team extends Vue {}
 </script>

src/pages/Traffic.vue

@@ -1,7 +1,15 @@
-<template> </template>
+<template>
+    <WIP></WIP>
+</template>
 <script>
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-@Component({})
+import WIP from '@/components/WIP.vue';
+
+@Component({
+    components: {
+        WIP
+    }
+})
 export default class Traffic extends Vue {}
 </script>

src/pages/Venue.vue

@@ -1,7 +1,15 @@
-<template> </template>
+<template>
+    <WIP></WIP>
+</template>
 <script>
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-@Component({})
+import WIP from '@/components/WIP.vue';
+
+@Component({
+    components: {
+        WIP
+    }
+})
 export default class Venue extends Vue {}
 </script>