From d6de390808bdd9eed7ff379abf9e8d5095611a9c Mon Sep 17 00:00:00 2001
From: kPherox <admin@mail.kr-kp.com>
Date: Mon, 20 May 2019 01:38:56 +0900
Subject: [PATCH] Add toolbar block

---
 src/components/Main.vue            | 18 +++++++++++++++++-
 src/components/Timeline/Column.vue |  9 +++++++++
 src/views/App.vue                  |  1 +
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/Main.vue b/src/components/Main.vue
index 4d4e86d0..60a0e389 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -1,7 +1,10 @@
 <template>
   <div id="main">
     <!-- idを渡してそのIDのTL情報をとってきてもらうつもり -->
-    <Column v-for="id in timelines" :key="id" :id="id"/>
+    <div id="timelines">
+      <Column v-for="id in timelines" :key="id" :id="id"/>
+    </div>
+    <div id="toolbar"></div>
   </div>
 </template>
 
@@ -43,6 +46,19 @@ export default class Main extends Vue {
 
 <style lang="postcss">
 #main {
+  width: 100vw;
   height: 100vh;
+  overflow-x: hidden;
+}
+#timelines {
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 40px);
+  overflow-x: scroll;
+}
+#toolbar {
+  width: 100vw;
+  height: 40px;
+  background-color: var(--toolbar);
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Timeline/Column.vue b/src/components/Timeline/Column.vue
index 696ee258..b96abc31 100644
--- a/src/components/Timeline/Column.vue
+++ b/src/components/Timeline/Column.vue
@@ -115,7 +115,16 @@ export default class Column extends Vue {
 <style scoped lang="postcss">
 .timeline {
   height: 100%;
+  flex-grow: 1;
+  flex-shrink: 1;
   overflow-y: scroll;
+  overflow-x: hidden;
+
+  & + .timeline {
+    border-left: solid 1px;
+    border-right: none;
+  }
+
   .header {
     position: sticky;
     top: 0;
diff --git a/src/views/App.vue b/src/views/App.vue
index 29935823..dd375645 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -34,6 +34,7 @@ export default class App extends Vue {
     return {
       '--color': this.isDarkMode ? 'white' : 'black',
       '--bg-color': this.isDarkMode ? '#212121' : 'white',
+      '--toolbar': this.isDarkMode ? '#424242' : '#eeeeee',
       '--font-size': this.fontSize,
     }
   }