From ee49dd672e2ee67a37cd98dc55c59185dd900f7e Mon Sep 17 00:00:00 2001
From: Aaron Mussig <aaronmussig@gmail.com>
Date: Fri, 14 Jul 2023 11:42:25 +1000
Subject: [PATCH] feat(twitter): Add twitter footer to main page

---
 components/layout/TwitterFooter.vue | 36 +++++++++++++++++++++++++++++
 pages/index.vue                     | 26 +++++++++++++--------
 2 files changed, 53 insertions(+), 9 deletions(-)
 create mode 100644 components/layout/TwitterFooter.vue

diff --git a/components/layout/TwitterFooter.vue b/components/layout/TwitterFooter.vue
new file mode 100644
index 0000000..37165e7
--- /dev/null
+++ b/components/layout/TwitterFooter.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="twitter-footer d-flex fill-height justify-center align-center">
+    <a href="https://twitter.com/ace_gtdb" target="_blank" class="no-link">
+
+      <v-icon color="#1D9BF0">
+        {{ mdiTwitterSvg }}
+      </v-icon>
+    <span class="ml-1">
+      @ace-gtdb
+    </span>
+    </a>
+  </div>
+</template>
+
+<script lang="ts">
+import {mdiTwitter} from '@mdi/js';
+import Vue from 'vue';
+
+export default Vue.extend({
+  data: () => ({
+    mdiTwitterSvg: mdiTwitter,
+  }),
+})
+</script>
+
+<style scoped>
+.twitter-footer {
+  background-color: #000000;
+  color: #b7b7b7;
+}
+
+.no-link {
+  color: #b7b7b7;
+  text-decoration: none;
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index 032d78f..6def751 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,10 +1,10 @@
 <template>
 
-  <!-- make this flex column when small -->
-  <div class="d-flex fill-height flex-column flex-md-row">
+  <!-- Default container for all content on the main page -->
+  <div class="fill-height w-100 d-flex flex-column align-stretch">
 
-    <!-- Left column (main) -->
-    <div ref="gtdbmain" class="gtdb-main d-flex w-md-80 flex-grow-1 flex-column">
+    <!-- Main content -->
+    <div ref="gtdbmain" class="gtdb-main d-flex w-100 flex-grow-1 flex-column" style="min-height: 200px;">
 
       <!-- First row -->
       <div class="d-flex flex-column">
@@ -14,7 +14,8 @@
           ***
         </NotifyBar>
         <NotifyBar uid="r214-gtdbtk">
-          *** GTDB-Tk has been updated to use the R214 taxonomy from <span class="mx-1"><a href="https://ecogenomics.github.io/GTDBTk/installing/index.html" target="_blank">v2.3.0</a></span>***
+          *** GTDB-Tk has been updated to use the R214 taxonomy from <span class="mx-1"><a
+          href="https://ecogenomics.github.io/GTDBTk/installing/index.html" target="_blank">v2.3.0</a></span>***
         </NotifyBar>
       </div>
 
@@ -85,11 +86,17 @@
     </div>
 
     <!-- Right column (twitter) -->
-<!--    <div class="d-flex w-md-20 flex-grow-0 flex-column fill-height" style="background-color: #f7f9f9 !important">-->
-<!--      <TwitterTimeline style="max-height: 90vh; overflow: auto;"></TwitterTimeline>-->
-<!--    </div>-->
+    <!--    <div class="d-flex w-md-20 flex-grow-0 flex-column fill-height" style="background-color: #f7f9f9 !important">-->
+    <!--      <TwitterTimeline style="max-height: 90vh; overflow: auto;"></TwitterTimeline>-->
+    <!--    </div>-->
+
+    <!-- Twitter footer -->
+    <div style="height: 40px;" class="d-block">
+      <TwitterFooter/>
+    </div>
 
   </div>
+
 </template>
 
 <script lang="ts">
@@ -99,9 +106,10 @@ import UqLogo from "~/components/layout/UqLogo.vue";
 import TwitterTimeline from "~/components/layout/TwitterTimeline.vue";
 import GtdbRankHistogram from "~/components/index/GtdbRankHistogram.vue";
 import NotifyBar from "~/components/index/NotifyBar.vue";
+import TwitterFooter from "~/components/layout/TwitterFooter.vue";
 
 export default Vue.extend({
-  components: {GtdbRankHistogram, TwitterTimeline, UqLogo, AceLogo, NotifyBar},
+  components: {TwitterFooter, GtdbRankHistogram, TwitterTimeline, UqLogo, AceLogo, NotifyBar},
   head() {
     return {
       title: 'Genome Taxonomy Database',