Add gene information as cards

frontend/src/views/GeneDetail.vue

 <template>
   <div class="gene">
-     {{ gene_id }} {{ gene_detail }} {{ kegg_detail }}
+     <v-flex>
+      <v-toolbar class="secondary white--text">
+        <v-toolbar-title>Gene details: {{ gene_id }}</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-btn icon>
+          <v-icon>search</v-icon>
+        </v-btn>
+      </v-toolbar>
+
+      <v-card>
+        <v-container
+          fluid
+          grid-list-md
+        >
+          <v-layout row wrap>
+            <v-flex xs12 md6 lg4>
+              <v-card>
+                  <v-toolbar-title class="secondary white--text">Gene information</v-toolbar-title>
+                  <v-list>
+                    <template v-for="(item, index) in gene_detail">
+                      <v-divider
+                        v-if="item.divider"
+                        :key="index"
+                        :inset="item.inset"
+                      ></v-divider>
+                      <v-list-tile-content :key="item.content">
+                        <v-list-tile-title v-html="item.title"></v-list-tile-title>
+                        <v-list-tile-sub-title v-html="item.content"></v-list-tile-sub-title>
+                      </v-list-tile-content>
+                    </template>
+                  </v-list>
+              </v-card>
+            </v-flex>
+            <v-flex xs12 md6 lg4>
+              <v-card>
+                  <v-toolbar-title class="secondary white--text">KEGG Function</v-toolbar-title>
+                  <v-list>
+                    <template v-for="(item, index) in kegg_detail">
+                      <v-divider
+                        v-if="item.divider"
+                        :key="index"
+                        :inset="item.inset"
+                      ></v-divider>
+                      <v-list-tile-content :key="item.content">
+                        <v-list-tile-title v-html="item.title"></v-list-tile-title>
+                        <v-list-tile-sub-title v-html="item.content"></v-list-tile-sub-title>
+                      </v-list-tile-content>
+                    </template>
+                  </v-list>
+              </v-card>
+            </v-flex>
+          </v-layout>
+        </v-container>
+      </v-card>
+    </v-flex>
   </div>
 </template>
 
@@ -12,9 +66,9 @@ export default {
   data() {
     return {
       gene_id: "",
-      gene_detail: {},
+      gene_detail: [],
       kegg_id: "",
-      kegg_detail: {},
+      kegg_detail: [],
     };
   },
   mounted() {
@@ -29,7 +83,22 @@ export default {
         },
       })
       .then((response) => {
-        this.gene_detail = response.data;
+        this.gene_detail = [
+          {
+            title: 'ID',
+            content: response.data.gene_id,
+          },
+          {
+            title: 'Name',
+            content: response.data.gene_name,
+            divider: true,
+          },
+          {
+            title: 'Length',
+            content: response.data.length,
+            divider: true,
+          },
+        ];
         var kegg_id = response.data.functions[0];
         return axios.get('http://togows.org/entry/kegg-orthology/' + kegg_id + '.json', {
           headers: {
@@ -38,7 +107,22 @@ export default {
         })
       })
       .then((response) => {
-        this.kegg_detail = response.data[0]
+        this.kegg_detail = [
+          {
+            title: 'ID',
+            content: response.data[0].entry_id,
+          },
+          {
+            title: 'Name',
+            content: response.data[0].name,
+            divider: true,
+          },
+          {
+            title: 'Definition',
+            content: response.data[0].definition,
+            divider: true,
+          },
+        ];
       })
       .catch((error) => {
         console.log(error);

frontend/src/views/Genes.vue

 <template>
   <div class="genes">
-
     <v-container fluid>
       <v-layout row wrap>
         <v-flex xs12>