Feat/agenda styl enhancement

components/AgendaCard.vue

@@ -10,7 +10,7 @@
       h2.agendacard__title.f5.mt3.fw5 {{title}}
       .agendacard__speakers.mt3.mb4.f6.lh-title(v-if="speakers") {{speakers}}
       .flex.flex-wrap.mt3(v-if="hasTagsToShow")
-        .agendacard__tag.agendacard__tag--hl.db.dn-l(v-if="room") {{room}}
+        .agendacard__tag.agendacard__tag--hl.db.dn-ns(v-if="room") {{room}}
         .agendacard__tag(v-if="format") {{format}}
         .agendacard__tag(v-if="lang") {{$t(lang)}}
 </template>

components/DailyAgenda.vue

@@ -9,7 +9,7 @@
     )
       agenda-card(:agenda="agenda")
     template(v-for="room in regularRooms")
-      .dailyagenda__header.dn.db-l.mb2(:key="room.name")
+      .dailyagenda__header.dn.db-ns.mb2(:key="room.name")
         room-card(:name="room.name")
       .dailyagenda__item(
         v-for="agenda in room.agendaList"
@@ -27,7 +27,7 @@ import RoomCard from '~/components/RoomCard'
 import AgendaCard from '~/components/AgendaCard'
 
 const CARD_WIDTH = 13
-const GUTTER_WIDTH = 1
+const GUTTER_WIDTH = 4
 const GAP_WIDTH = 0.5
 
 // each row is 5 min
@@ -138,7 +138,7 @@ export default {
 .dailyagenda {
   display: flex;
   flex-direction: column;
-  @include large-screen {
+  @include not-small-screen {
     display: grid;
   }
   align-items: stretch;
@@ -152,7 +152,7 @@ export default {
 
   &__item {
     padding: 0 0.5rem;
-    @include large-screen {
+    @include not-small-screen {
       padding: 0;
     }
   }

layouts/default.vue

@@ -74,7 +74,7 @@ export default {
 .content {
   min-width: 100%;
   max-width: 100vw;
-  @include large-screen {
+  @include not-small-screen {
     max-width: none;
   }
 }
@@ -107,7 +107,7 @@ export default {
   z-index: 1;
   // this corrupt position fixed XD
   // https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container
-  will-change: transform;
+  // will-change: transform;
   background-color: #FFF; /* A background-color is required */
 }
 

package.json

@@ -49,6 +49,7 @@
     "@nuxtjs/eslint-config": "^2.0.0",
     "@nuxtjs/eslint-module": "^1.0.0",
     "@nuxtjs/style-resources": "^1.0.0",
+    "@sentry/node": "^5.24.2",
     "@vue/test-utils": "^1.0.0-beta.27",
     "airtable": "^0.8.1",
     "babel-eslint": "^10.0.1",

pages/agenda/_date.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .agenda
-    .agenda__menu.justify-center.dn.flex-l
+    .agenda__menu.justify-center.dn.flex-ns
       .datemenu.flex
         nuxt-link.datemenu__item.tc.f4.mh2(
           v-for="date in dateList"
@@ -72,18 +72,26 @@ export default {
       const agendaPerRoom = agendaToday.reduce((perRoom, agenda) => {
         const room = agenda.timeSheet.議程場地
         if (!(room in perRoom)) {
-          perRoom[room] = []
+          perRoom[room] = {
+            list: [],
+            meta: agenda.timeSheet.locationMeta
+          }
         }
-        perRoom[room].push(agenda)
+        perRoom[room].list.push(agenda)
         return perRoom
       }, {})
 
-      return Object.keys(agendaPerRoom).map((room) => {
-        return {
-          name: room,
-          agendaList: agendaPerRoom[room]
-        }
-      })
+      return Object.keys(agendaPerRoom)
+        .map((room) => {
+          return {
+            name: room,
+            meta: agendaPerRoom[room].meta,
+            agendaList: agendaPerRoom[room].list
+          }
+        })
+        .sort((l, r) => {
+          return l.meta.order - r.meta.order
+        })
     }
   },
   watch: {
@@ -120,13 +128,13 @@ export default {
     padding: 2.5rem 0;
     background-position: left -6rem top 15rem, right -4.5rem top;
   }
-  @include large-screen {
+  @include not-small-screen {
     padding: 5rem 0;
     background-position: left top 15rem, right top;
   }
 
   &__content {
-    @include large-screen {
+    @include not-small-screen {
       margin-top: 5.25rem;
     }
   }
@@ -148,14 +156,14 @@ export default {
     position: sticky;
     bottom: 0;
     background: white;
-    @include large-screen {
+    @include not-small-screen {
       display: none;
     }
   }
 }
 
 .datemenu {
-  .nuxt-link-exact-active {
+  .nuxt-link-active {
     .datemenu__date {
       border-color: $pink-1;
       color: $pink-1;
@@ -174,7 +182,7 @@ export default {
 }
 
 .mobilemenu {
-  .nuxt-link-exact-active {
+  .nuxt-link-active {
     .mobilemenu__title {
       border-color: $pink-1;
       color: $pink-1;