[merge] merge dev2

src/assets/scss/footer.scss

@@ -3,7 +3,7 @@
 // varible declare
 $fontColor: white;
 $backgroundColor: #1f4163;
-$fontFamily: 'Noto Sans CJK TC', monospace;
+$fontFamily: 'Noto Sans TC', monospace;
 
 @mixin fontSize() {
   font-size: 14pt;

src/assets/scss/main.scss

@@ -32,7 +32,7 @@ body {
   flex-direction: column;
   
   font-size: 13pt;
-  font-family: 'Noto Sans CJK TC', sans-serif;
+  font-family: 'Noto Sans TC', sans-serif;
 }
 
 #app {

src/assets/scss/news/agenda.scss

@@ -22,12 +22,29 @@ $max-width-small-3: 360px;
 // .info-container
 @mixin infoContainer() {
   max-width: 80%;
+<<<<<<< HEAD
   // padding-left: 7%;
   @media only screen and (max-width: 1030px){
       max-width: 100%;
       padding-left: 40px;
       padding-right: 40px;
   } 
+=======
+  @media screen and (max-width: 1365px) {
+    margin: 0 120px;
+  }
+
+  @media screen and (max-width: 1023px) {
+    margin: 0 100px;
+  }
+  
+  @media screen and (max-width: $max-width-small-0) {
+    margin: 0;
+    max-width: 100%;
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+>>>>>>> dev2
 }
 
 // .info-section
@@ -215,10 +232,10 @@ $max-width-small-3: 360px;
 @mixin qaTitleFontsize() {
   font-size: 18pt;
   @media only screen and (max-width: $max-width-medium-0) {
-    font-size: 17pt;
+    font-size: 16pt;
   }
   @media only screen and (max-width: $max-width-medium-1) {
-    font-size: 15pt;
+    font-size: 14pt;
   }
   @media only screen and (max-width: $max-width-small-0) {
     font-size: 11pt;
@@ -360,7 +377,7 @@ $max-width-small-3: 360px;
 
   &-container {
     @include infoContainer();
-    margin: 0 auto;
+    margin: 0 280px;
     // float: left;
   }
 

src/assets/scss/news/header.scss

@@ -346,82 +346,3 @@ $fontFamily: Noto Sans TC, monospace;
     }
   }
 }
-
-.news-nav {
-  position: fixed;
-  text-align: end;
-  top: 25px;
-  right: 50px;
-  display: flex;
-  flex-direction: column;
-  border-radius: 15px;
-  padding: 10px;
-  box-shadow: 3px 3px 15px $mid-blue;
-  background: white;
-  z-index: 5;
-  &-item {
-    margin: 0 8px;
-    padding: 5px 1em;
-    color: $mid-blue;
-    font-family: $fontFamily;
-    cursor: point;
-    border-right: 3px solid $sky-blue;
-
-    &.active {
-      font-weight: 900;
-      border-right: 3px solid $mid-blue;
-    }
-  }
-  &-button {
-    color: $mid-blue;
-    border: none;
-    background: transparent;
-    font-size: 20px;
-    cursor: point;
-    &:focus {
-      outline: none;
-    }
-  }
-  &-contribute-button {
-    display: inline-block;
-    border-radius: 6px;
-    background: $mid-blue;
-    color: $white;
-    font-weight: 900;
-    padding: 0.5em 1em;
-    font-size: 1.2em;
-    margin: 1em auto;
-  }
-}
-
-.nav-control-button {
-  color: $mid-blue;
-  position: fixed;
-  z-index: 5;
-  top: 25px;
-  right: 50px;
-  border-radius: 5px;
-  border: none;
-  font-size: 24px;
-  position: flex;
-  flex-direction: column;
-  width: 55px;
-  background-color: white;
-  box-shadow: -2px 0 15px $mid-blue;
-  padding: 0 15px;
-  cursor: pointer;
-  p {
-    text-align: end;
-  }
-}
-
-@media screen and (max-width: 1024px) {
-  .nav-control-button {
-    top: 250px;
-    right: 0;
-    width: 35px;
-    font-size: 16px;
-    text-align: left;
-    padding: 0 10px;
-  }
-}

src/assets/scss/news/navbar.scss

@@ -0,0 +1,114 @@
+@import '../color';
+@import '../font';
+
+$mobileView: 1024px;
+
+#news-nav {
+  font-size: 13pt;
+  line-height: 1em;
+  z-index: 2;
+
+  position: sticky;
+  top: 25px;
+
+  &.fixed {
+    position: fixed;
+    top: 25px;
+    right: 50px;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  .news-nav {
+    float: right;
+    text-align: end;
+    display: flex;
+    flex-direction: column;
+    border-radius: 15px;
+    padding: 10px;
+    box-shadow: 3px 3px 15px $mid-blue;
+    background: white;
+    z-index: 5;
+
+    transform: translateX(0);
+    transition: transform 0.5s ease-in-out;
+
+    &-item {
+      margin: 0 8px;
+      padding: 5px 1em;
+      color: $mid-blue;
+      font-family: $fontFamily;
+      cursor: point;
+      border-right: 3px solid $sky-blue;
+  
+      &.active {
+        font-weight: 900;
+        border-right: 3px solid $mid-blue;
+      }
+    }
+    &-button {
+      color: $mid-blue;
+      border: none;
+      background: transparent;
+      padding: 0.5em 0;
+      font-size: 20px;
+      cursor: pointer;
+      &:focus {
+        outline: none;
+      }
+    }
+    &-contribute-button {
+      display: inline-block;
+      border-radius: 6px;
+      background: $mid-blue;
+      color: $white;
+      font-weight: 900;
+      padding: 0.5em 1em;
+      font-size: 1.2em;
+      margin: 1em auto;
+    }
+  }
+  
+  .nav-control-button {
+    color: $mid-blue;
+    position: fixed;
+    z-index: 5;
+    top: 25px;
+    right: 50px;
+    border-radius: 5px;
+    border: none;
+    font-size: 24px;
+    position: flex;
+    flex-direction: column;
+    width: 55px;
+    background-color: white;
+    box-shadow: -2px 0 15px $mid-blue;
+    padding: 0 15px;
+    cursor: pointer;
+    p {
+      text-align: end;
+    }
+  }
+  
+  @media screen and (max-width: $mobileView) {
+    .nav-control-button {
+      top: 250px;
+      right: 0;
+      width: 35px;
+      font-size: 16px;
+      text-align: left;
+      padding: 0 10px;
+    }
+  }
+}
+
+@media screen and (max-width: $mobileView) {
+  #news-nav,
+  #news-nav.fixed {
+    position: fixed;
+    top: 25px;
+    right: 20px;
+  }
+}

src/assets/scss/news/schedule.scss

@@ -1,15 +1,13 @@
 @import "../breakpoint";
 @import "../color";
-@import "../font.scss";
+@import "../font";
 // No need to import font; the fonts have been imported in App.vue
 // @import '@/assets/scss/font';
 
-$fontFamily: 'Noto Sans CJK TC', monospace;
-
 #news-schedule {
   position: relative;
   max-width: 80vw;
-  margin: 0 auto;
+  margin: 0 280px;
 
   font-family: $fontFamily;
   font-size: 15pt;
@@ -96,8 +94,16 @@ $fontFamily: 'Noto Sans CJK TC', monospace;
   font-weight: 900;
 }
 
-@include md {
+@media screen and (max-width: 1365px) {
   #news-schedule {
+    margin: 0 120px;
+  }
+}
+
+@media screen and (max-width: 1023px) {
+  #news-schedule {
+    margin: 0 100px;
+
     #presentation-example,
     #espresso-example {
       margin-bottom: unset;
@@ -112,6 +118,7 @@ $fontFamily: 'Noto Sans CJK TC', monospace;
 
 @media screen and (max-width: $max-width-small-0) {
   #news-schedule {
+    margin: 0;
     max-width: 100vw;
     padding: 0 40px;
     font-size: 11pt;

src/components/news/Header.vue

@@ -46,30 +46,11 @@
         </div>
       </div>
     </div>
-    <nav v-if="navVisible">
-        <div class="news-nav" v-scrollspy="{ selectors: navbarItems }">
-          <a class="news-nav-item" href="#schedule">重要時程</a>
-          <a class="news-nav-item" href="#example">投稿主題範例</a>
-          <a class="news-nav-item" href="#code-of-conduct">Code of Conduct</a>
-          <a class="news-nav-item" href="#info-section">議程種類</a>
-          <a class="news-nav-item" href="#process">流程</a>
-          <a class="news-nav-item" href="#methods">投稿方式</a>
-          <a class="news-nav-item" href="#review">審稿方式</a>
-          <a class="news-nav-item" href="#precautions">投稿注意事項</a>
-          <a class="news-nav-contribute-button" target="_blank" rel="noopener" href="https://forms.gle/XoXJSD2P8dL8X8s2A">我要投稿</a>
-          <button class="news-nav-button" @click="(e)=>navVisible=!navVisible">&#9650;</button>
-        </div>
-    </nav>
-    <button v-if="!navVisible" class="nav-control-button" @click="(e)=>navVisible=!navVisible">
-      <p>&#9650;</p>
-      <p>&#9660;</p>
-    </button>
   </header>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import ScrollSpyDirective from './ScrollSpyDirective';
 
 const DEAD_LINE = Math.floor(
   new Date('22 Feb 2021 06:24:00 GMT+8').getTime() / 1000
@@ -82,24 +63,9 @@ interface Countdown {
   d: number;
 }
 
-@Component({
+@Component({})
-  directives: {
-    scrollspy: ScrollSpyDirective
-  }
-})
 export default class CfpHeader extends Vue {
   private timerId!: number;
-  private navbarItems = [
-    '#schedule',
-    '#example',
-    '#code-of-conduct',
-    '#info-section',
-    '#process',
-    '#methods',
-    '#review',
-    '#precautions'
-  ];
-  private navVisible = false;
   private countdown: Countdown = {
     s: 0,
     m: 0,

src/components/news/Navbar.vue

@@ -0,0 +1,82 @@
+<template>
+  <nav id="news-nav" :class="{ fixed: isNavbarFixed }">
+    <div v-show="!isMobileView || navVisible" class="news-nav" v-scrollspy="{ selectors: navbarItems }">
+      <a class="news-nav-item" href="#schedule">重要時程</a>
+      <a class="news-nav-item" href="#example">投稿主題範例</a>
+      <a class="news-nav-item" href="#code-of-conduct">Code of Conduct</a>
+      <a class="news-nav-item" href="#info-section">議程種類</a>
+      <a class="news-nav-item" href="#process">流程</a>
+      <a class="news-nav-item" href="#methods">投稿方式</a>
+      <a class="news-nav-item" href="#review">審稿方式</a>
+      <a class="news-nav-item" href="#precautions">投稿注意事項</a>
+      <a class="news-nav-contribute-button" target="_blank" rel="noopener" href="https://forms.gle/XoXJSD2P8dL8X8s2A" v-show="!isMobileView">我要投稿</a>
+      <button class="news-nav-button" @click="(e)=>navVisible=!navVisible" v-show="isMobileView">&#9650;</button>
+    </div>
+    <button v-show="!navVisible && isMobileView" class="nav-control-button" @click="(e)=>navVisible=!navVisible">
+      <p>&#9650;</p>
+      <p>&#9660;</p>
+    </button>
+  </nav>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import ScrollSpyDirective from './ScrollSpyDirective';
+
+@Component({
+    directives: {
+        scrollspy: ScrollSpyDirective
+    }
+})
+export default class Navbar extends Vue {
+  private isMobileView: boolean = false;
+  private isNavbarFixed = false;
+  private navVisible: boolean = false;
+  private navbarItems: string[] = [
+    '#schedule',
+    '#example',
+    '#code-of-conduct',
+    '#info-section',
+    '#process',
+    '#methods',
+    '#review',
+    '#precautions'
+  ];
+
+  public mounted () {
+    this.$nextTick().then(() => {
+      const query: string = '(max-width: 1024px)';
+      const mq: MediaQueryList = window.matchMedia(query);
+      if (mq.addEventListener) {
+        mq.addEventListener('change', this.matchMediaCallback);
+      } else {
+        mq.addListener(this.matchMediaCallback);
+      }
+      // check first
+      this.matchMediaCallback(mq);
+
+      // observe header: header appears => no fix; header disappears => fix.
+      const fixObserver: IntersectionObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) {
+            this.isNavbarFixed = true;
+          } else {
+            this.isNavbarFixed = false;
+          }
+        });
+      }, { rootMargin: '25px 0px 0px 0px', threshold: 0 });
+      fixObserver.observe(document.querySelector('#news-header') as Element);
+    });
+  }
+
+  private matchMediaCallback (ev: (MediaQueryList | MediaQueryListEvent)) {
+    this.isMobileView = ev.matches;
+    // alaways disable navbar while view changing
+    this.navVisible = false;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/news/navbar';
+</style>

src/components/news/Schedule.vue

@@ -1,5 +1,6 @@
 <template>
     <div>
+        <Navbar />
         <!-- 重要時程 -->
         <section id="schedule">
             <h1>重要時程</h1>
@@ -57,6 +58,7 @@
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import AgendaCard from './AgendaCard.vue';
 import Topic from './Topic.vue';
+import Navbar from './Navbar.vue';
 
 // import data
 import themeExample from '../../../template/themeExample.cfp';
@@ -66,7 +68,8 @@ import presentation from '../../../template/presentation.cfp';
 @Component({
     components: {
         AgendaCard,
-        Topic
+        Topic,
+        Navbar
     }
 })
 export default class Schedule extends Vue {

src/components/news/ScrollSpyDirective.ts

@@ -4,7 +4,7 @@ let selectors!: string[];
 let observer!: IntersectionObserver;
 
 const ScrollSpyDirective: DirectiveOptions = {
-  bind (el: Element, binding: VNodeDirective , vnode: VNode) {
+  inserted (el: Element, binding: VNodeDirective, vnode: VNode) {
     selectors = binding.value.selectors;
 
     // highlight first element