Add control menu to classification and seq2seq pages

frontend/pages/projects/_id/classification/index.vue

@@ -1,73 +1,52 @@
 <template>
-  <div>
-    <side-bar-labeling
-      :labels="labels"
-      :progress="progress"
-      :metadata="metadata"
-    />
-    <v-content>
-      <v-container fluid fill-height>
-        <v-layout justify-center>
-          <v-flex>
-            <text-classification />
-            <paginator class="mt-3" />
-          </v-flex>
-        </v-layout>
-      </v-container>
-    </v-content>
-  </div>
+  <v-content>
+    <v-container fluid>
+      <v-row
+        no-gutters
+        class="d-none d-sm-flex"
+      >
+        <v-col>
+          <guideline-button />
+        </v-col>
+        <v-spacer />
+        <v-col>
+          <paginator />
+        </v-col>
+      </v-row>
+      <bottom-navigator class="d-flex d-sm-none" />
+      <v-row justify="center">
+        <v-col cols="12" md="9">
+          <text-classification />
+        </v-col>
+        <v-col cols="12" md="3">
+          <metadata-box :metadata="JSON.parse(metadata)" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-content>
 </template>
 
 <script>
 import TextClassification from '~/components/containers/TextClassification'
-import SideBarLabeling from '~/components/organisms/SideBarLabeling'
 import Paginator from '~/components/containers/Paginator'
+import GuidelineButton from '@/components/containers/GuidelineButton'
+import MetadataBox from '@/components/organisms/MetadataBox'
+import BottomNavigator from '@/components/organisms/BottomNavigator'
 
 export default {
   layout: 'annotation',
 
   components: {
+    BottomNavigator,
     TextClassification,
-    SideBarLabeling,
-    Paginator
+    Paginator,
+    GuidelineButton,
+    MetadataBox
   },
 
   data() {
     return {
-      progress: 30,
-      metadata: '{"wikiPageId":2}',
-      labels: [
-        {
-          id: 1,
-          name: 'Location',
-          color: '#E91E63',
-          shortcut: 'l'
-        },
-        {
-          id: 2,
-          name: 'Organization',
-          color: '#03A9F4',
-          shortcut: 'o'
-        },
-        {
-          id: 3,
-          name: 'Person',
-          color: '#009688',
-          shortcut: 'p'
-        },
-        {
-          id: 4,
-          name: 'Date',
-          color: '#FF6F00',
-          shortcut: 'd'
-        },
-        {
-          id: 5,
-          name: 'Other',
-          color: '#333333',
-          shortcut: 't'
-        }
-      ]
+      metadata: '{"wikiPageId":2}'
     }
   },
 

frontend/pages/projects/_id/seq2seq/index.vue

@@ -1,74 +1,52 @@
 <template>
-  <div>
-    <side-bar-labeling
-      :labels="labels"
-      :progress="progress"
-      :metadata="metadata"
-    />
-    <v-content>
-      <v-container fluid fill-height>
-        <v-layout justify-center>
-          <v-flex>
-            <seq2seq-container />
-            <paginator class="mt-3" />
-          </v-flex>
-        </v-layout>
-      </v-container>
-    </v-content>
-  </div>
+  <v-content>
+    <v-container fluid>
+      <v-row
+        no-gutters
+        class="d-none d-sm-flex"
+      >
+        <v-col>
+          <guideline-button />
+        </v-col>
+        <v-spacer />
+        <v-col>
+          <paginator />
+        </v-col>
+      </v-row>
+      <bottom-navigator class="d-flex d-sm-none" />
+      <v-row justify="center">
+        <v-col cols="12" md="9">
+          <seq2seq-container />
+        </v-col>
+        <v-col cols="12" md="3">
+          <metadata-box :metadata="JSON.parse(metadata)" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-content>
 </template>
 
 <script>
 import Seq2seqContainer from '~/components/containers/Seq2seqContainer'
-import SideBarLabeling from '~/components/organisms/SideBarLabeling'
 import Paginator from '~/components/containers/Paginator'
+import GuidelineButton from '@/components/containers/GuidelineButton'
+import MetadataBox from '@/components/organisms/MetadataBox'
+import BottomNavigator from '@/components/organisms/BottomNavigator'
 
 export default {
   layout: 'annotation',
 
   components: {
     Seq2seqContainer,
-    SideBarLabeling,
-    Paginator
+    Paginator,
+    GuidelineButton,
+    MetadataBox,
+    BottomNavigator
   },
 
   data() {
     return {
-      progress: 30,
-      metadata: '{"wikiPageId":2}',
-      search: '',
-      labels: [
-        {
-          id: 1,
-          name: 'Location',
-          color: '#E91E63',
-          shortcut: 'l'
-        },
-        {
-          id: 2,
-          name: 'Organization',
-          color: '#03A9F4',
-          shortcut: 'o'
-        },
-        {
-          id: 3,
-          name: 'Person',
-          color: '#009688',
-          shortcut: 'p'
-        },
-        {
-          id: 4,
-          name: 'Date',
-          color: '#FF6F00',
-          shortcut: 'd'
-        },
-        {
-          id: 5,
-          name: 'Other',
-          color: '#333333',
-          shortcut: 't'
-        }
-      ]
+      metadata: '{"wikiPageId":2}'
     }
   },
 
@@ -77,6 +55,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-</style>