From 7d396345873f4ed24d088b8e410dc8ebcea38989 Mon Sep 17 00:00:00 2001
From: Tony Yang <t510599@gmail.com>
Date: Tue, 2 Feb 2021 13:30:59 +0800
Subject: [PATCH 1/6] [Fix] missing webfont Noto Sans CJK TC -> Noto Sans TC

---
 src/assets/scss/footer.scss        | 2 +-
 src/assets/scss/main.scss          | 2 +-
 src/assets/scss/news/schedule.scss | 2 --
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/assets/scss/footer.scss b/src/assets/scss/footer.scss
index 769b053..02ffff3 100644
--- a/src/assets/scss/footer.scss
+++ b/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;
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 5d1877b..cf12d53 100644
--- a/src/assets/scss/main.scss
+++ b/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 {
diff --git a/src/assets/scss/news/schedule.scss b/src/assets/scss/news/schedule.scss
index 735ddac..a3baedc 100644
--- a/src/assets/scss/news/schedule.scss
+++ b/src/assets/scss/news/schedule.scss
@@ -4,8 +4,6 @@
 // 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;

From 02116e36828a5bba5b2ba4dfc8de761566566a6b Mon Sep 17 00:00:00 2001
From: Tony Yang <t510599@gmail.com>
Date: Tue, 2 Feb 2021 13:57:05 +0800
Subject: [PATCH 2/6] [Style] keep horizontal padding consistent Keep
 horizontal padding consistent in different section

---
 src/assets/scss/news/agenda.scss   | 19 ++++++++++---------
 src/assets/scss/news/schedule.scss | 13 +++++++++++--
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/assets/scss/news/agenda.scss b/src/assets/scss/news/agenda.scss
index c865f13..c5808de 100644
--- a/src/assets/scss/news/agenda.scss
+++ b/src/assets/scss/news/agenda.scss
@@ -22,15 +22,16 @@ $max-width-small-3: 360px;
 // .info-container
 @mixin infoContainer() {
   max-width: 80%;
-  // padding-left: 7%;
-  @media only screen and (max-width: $max-width-small-0) {
-    // width: 89%;
-    max-width: 100%;
-    padding-left: 40px;
-    padding-right: 40px;
+  @media screen and (max-width: 1365px) {
+    margin: 0 120px;
   }
-  @media only screen and (max-width: $max-width-small-1) {
-    // width: 89%;
+
+  @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;
@@ -367,7 +368,7 @@ $max-width-small-3: 360px;
 
   &-container {
     @include infoContainer();
-    margin: 0 auto;
+    margin: 0 280px;
     // float: left;
   }
 
diff --git a/src/assets/scss/news/schedule.scss b/src/assets/scss/news/schedule.scss
index a3baedc..557f222 100644
--- a/src/assets/scss/news/schedule.scss
+++ b/src/assets/scss/news/schedule.scss
@@ -7,7 +7,7 @@
 #news-schedule {
   position: relative;
   max-width: 80vw;
-  margin: 0 auto;
+  margin: 0 280px;
 
   font-family: $fontFamily;
   font-size: 15pt;
@@ -94,8 +94,16 @@
   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;
@@ -110,6 +118,7 @@
 
 @media screen and (max-width: $max-width-small-0) {
   #news-schedule {
+    margin: 0;
     max-width: 100vw;
     padding: 0 40px;
     font-size: 11pt;

From dca32cab030b5958682e6ce72053ae1198389628 Mon Sep 17 00:00:00 2001
From: Tony Yang <t510599@gmail.com>
Date: Wed, 3 Feb 2021 01:31:54 +0800
Subject: [PATCH 3/6] [Fix] Font size too big due to changed padding Changed QA
 title font size

---
 src/assets/scss/news/agenda.scss   | 4 ++--
 src/assets/scss/news/schedule.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/assets/scss/news/agenda.scss b/src/assets/scss/news/agenda.scss
index c5808de..ad4ce64 100644
--- a/src/assets/scss/news/agenda.scss
+++ b/src/assets/scss/news/agenda.scss
@@ -223,10 +223,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;
diff --git a/src/assets/scss/news/schedule.scss b/src/assets/scss/news/schedule.scss
index 557f222..f4d06fc 100644
--- a/src/assets/scss/news/schedule.scss
+++ b/src/assets/scss/news/schedule.scss
@@ -1,6 +1,6 @@
 @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';
 

From 2f379e8372d44493869f1e6f17e70bc473608d74 Mon Sep 17 00:00:00 2001
From: Tony Yang <t510599@gmail.com>
Date: Wed, 3 Feb 2021 01:33:32 +0800
Subject: [PATCH 4/6] [Fix] el not defined in scrollspydirective bind ->
 inserted

---
 src/components/news/ScrollSpyDirective.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/news/ScrollSpyDirective.ts b/src/components/news/ScrollSpyDirective.ts
index ab1150a..914f2cb 100644
--- a/src/components/news/ScrollSpyDirective.ts
+++ b/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

From 16f2fa5b02701b107ba70f20f4ed3c6ca7917ba0 Mon Sep 17 00:00:00 2001
From: Tony Yang <t510599@gmail.com>
Date: Wed, 3 Feb 2021 01:35:30 +0800
Subject: [PATCH 5/6] [Component] news-navbar Seperate navbar from news header
 RWD done transition WIP

---
 src/assets/scss/news/header.scss |  79 ---------------------
 src/assets/scss/news/navbar.scss | 114 +++++++++++++++++++++++++++++++
 src/components/news/Header.vue   |  36 +---------
 src/components/news/Navbar.vue   |  82 ++++++++++++++++++++++
 src/components/news/Schedule.vue |   5 +-
 5 files changed, 202 insertions(+), 114 deletions(-)
 create mode 100644 src/assets/scss/news/navbar.scss
 create mode 100644 src/components/news/Navbar.vue

diff --git a/src/assets/scss/news/header.scss b/src/assets/scss/news/header.scss
index 083f4e5..4304529 100644
--- a/src/assets/scss/news/header.scss
+++ b/src/assets/scss/news/header.scss
@@ -355,82 +355,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;
-  }
-}
\ No newline at end of file
diff --git a/src/assets/scss/news/navbar.scss b/src/assets/scss/news/navbar.scss
new file mode 100644
index 0000000..c31e249
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/src/components/news/Header.vue b/src/components/news/Header.vue
index 980d0b1..7f327fe 100644
--- a/src/components/news/Header.vue
+++ b/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,23 +63,10 @@ interface Countdown {
   d: number;
 }
 
-@Component({
-  directives: {
-    scrollspy: ScrollSpyDirective
-  }
-})
+@Component({})
 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,
diff --git a/src/components/news/Navbar.vue b/src/components/news/Navbar.vue
new file mode 100644
index 0000000..4e7ca63
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/news/Schedule.vue b/src/components/news/Schedule.vue
index cbcb88e..a66da06 100644
--- a/src/components/news/Schedule.vue
+++ b/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 {

From d5fac119823cd21e3a085edb2d4aff7c89601cfd Mon Sep 17 00:00:00 2001
From: Tony Yang <t510599@gmail.com>
Date: Wed, 3 Feb 2021 01:38:07 +0800
Subject: [PATCH 6/6] [Fix] remove unused navbar variable in Header.vue

---
 src/components/news/Header.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/news/Header.vue b/src/components/news/Header.vue
index 7f327fe..baa92ee 100644
--- a/src/components/news/Header.vue
+++ b/src/components/news/Header.vue
@@ -66,8 +66,6 @@ interface Countdown {
 @Component({})
 export default class CfpHeader extends Vue {
   private timerId!: number;
-
-  private navVisible = false;
   private countdown: Countdown = {
     s: 0,
     m: 0,