use fontawesome and start #84

frontend/package-lock.json

@@ -817,6 +817,12 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.12.0.tgz",
+      "integrity": "sha512-vKDJUuE2GAdBERaQWmmtsciAMzjwNrROXA5KTGSZvayAsmuTGjam5z6QNqNPCwDfVljLWuov1nEC3mEQf/n6fQ==",
+      "dev": true
+    },
     "@hapi/address": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.0.0.tgz",

frontend/package.json

@@ -22,6 +22,7 @@
     "vuex": "^3.0.1"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.12.0",
     "@vue/cli-plugin-babel": "^3.8.0",
     "@vue/cli-plugin-e2e-nightwatch": "^3.8.0",
     "@vue/cli-plugin-eslint": "^3.8.0",

frontend/src/components/Histogram.vue

@@ -46,7 +46,6 @@ export default {
     },
     updateChartOptions() {
       this.options = {
-        aspectRatio: 1,
         legend: {
           position: 'top',
           labels: {

frontend/src/components/KeggCard.vue

@@ -2,7 +2,7 @@
   <v-flex xs12 md6 lg4>
     <v-card>
       <v-toolbar class="kegg white--text" dense>
-        <v-icon class="white--text">dialpad</v-icon>
+        <v-icon class="white--text">fa-braille</v-icon>
         <v-toolbar-title class="kegg white--text">
           KEGG Function
         </v-toolbar-title>

frontend/src/components/Navbar.vue

@@ -31,9 +31,9 @@ export default {
     return {
       drawer: false,
       items: [
-        { title: 'Home', icon: 'home', route: '/' },
-        { title: 'Catalog Statistics', icon: 'bar_chart', route: '/stats' },
-        { title: 'Genes', icon: 'list', route: '/genes' },
+        { title: 'Home', icon: 'fa-home', route: '/' },
+        { title: 'Catalog Statistics', icon: 'far fa-chart-bar', route: '/stats' },
+        { title: 'Genes', icon: 'format_list_bulleted', route: '/genes' },
         { title: 'About', icon: 'contact_support', route: '/about' },
       ],
       right: null,

frontend/src/components/TaxonomyCard.vue

@@ -2,7 +2,7 @@
   <v-flex xs12 md6 lg4>
     <v-card>
       <v-toolbar class="taxonomy white--text" dense>
-        <v-icon class="white--text">account_tree</v-icon>
+        <v-icon class="white--text">fa-sitemap</v-icon>
         <v-toolbar-title class="taxonomy white--text">
           Taxonomy
         </v-toolbar-title>
@@ -23,10 +23,16 @@
             :key="index"
           ></v-divider>
           <v-list-tile v-if="item.content" :key="item.title">
+            <div class="function" style="width: 6px;height: 82%;margin-right: 10px; margin-left: -5px;"></div>
             <v-list-tile-content :key="item.title">
               <v-list-tile-title v-html="item.title"></v-list-tile-title>
               <v-list-tile-sub-title v-html="item.content.name"></v-list-tile-sub-title>
             </v-list-tile-content>
+            <v-list-tile-action>
+              <v-btn icon flat class="taxonomy--text">
+                <v-icon>open_in_new</v-icon>
+              </v-btn>
+            </v-list-tile-action>
           </v-list-tile>
         </template>
       </v-list>

frontend/src/main.js

@@ -6,9 +6,11 @@ import store from './store';
 import './registerServiceWorker';
 import 'vuetify/dist/vuetify.min.css';
 import './assets/styles/fonts.css';
+import '@fortawesome/fontawesome-free/css/all.css';
 
 Vue.config.productionTip = false;
 Vue.use(Vuetify, {
+  iconfont: 'fa',
   theme: {
     // Theme colors
     primary: '#263238',

frontend/src/views/GeneDetail.vue

@@ -2,7 +2,7 @@
   <div class="gene-detail">
      <v-flex>
       <v-toolbar class="secondary darken-1 white--text" dense>
-        <v-icon class="white--text">list_alt</v-icon>
+        <v-icon class="white--text">fa-clipboard</v-icon>
         <v-toolbar-title>Gene details: {{ gene_id }}</v-toolbar-title>
         <v-spacer></v-spacer>
         <v-btn dark icon>

frontend/src/views/Stats.vue

@@ -2,7 +2,7 @@
   <div class="stats">
     <v-flex>
       <v-toolbar class="secondary darken-1 white--text" dense>
-        <v-icon class="white--text">list_alt</v-icon>
+        <v-icon class="white--text">far fa-chart-bar</v-icon>
         <v-toolbar-title>Catalog Statistics</v-toolbar-title>
         <v-spacer></v-spacer>
         <v-btn dark icon>
@@ -31,7 +31,7 @@
                 dark
                 dense
               >
-                <v-icon class="white--text">bar_chart</v-icon>
+                <v-icon class="white--text">far fa-chart-bar</v-icon>
                 <v-toolbar-title>Gene length distribution</v-toolbar-title>
                 <v-spacer></v-spacer>
                 <v-flex xs2 md1>
@@ -60,7 +60,7 @@
                 dark
                 dense
               >
-                <v-icon class="white--text">account_tree</v-icon>
+                <v-icon class="white--text">fa-sitemap</v-icon>
                 <v-toolbar-title>Taxonomical annotation</v-toolbar-title>
                 <v-spacer></v-spacer>
                 <v-flex xs3 md2>