moment.js popover fromNow attributes, styling of description, more first jumbotron text content

package-lock.json

@@ -7392,6 +7392,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
+      "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
@@ -11056,6 +11061,14 @@
         }
       }
     },
+    "vue-moment": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vue-moment/-/vue-moment-4.1.0.tgz",
+      "integrity": "sha512-Gzisqpg82ItlrUyiD9d0Kfru+JorW2o4mQOH06lEDZNgxci0tv/fua1Hl0bo4DozDV2JK1r52Atn/8QVCu8qQw==",
+      "requires": {
+        "moment": "^2.19.2"
+      }
+    },
     "vue-router": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.3.tgz",

package.json

@@ -11,6 +11,7 @@
     "bootstrap-vue": "^2.16.0",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
+    "vue-moment": "^4.1.0",
     "vue-router": "^3.4.3"
   },
   "devDependencies": {

src/App.vue

@@ -9,32 +9,45 @@
             <!--            <b-nav-item href="#mdo" @click="scrollIntoView">@mdo</b-nav-item>-->
             <!--            <b-nav-item href="#pi0" @click="scrollIntoView">@pi0</b-nav-item>-->
         </b-nav>
-        <b-jumbotron fluid="true" class="text-dark py-5 px-5" container-fluid="true">
+        <b-jumbotron fluid container-fluid class="text-dark py-md-5 py-sm-0 px-md-5 px-sm-3">
-            <b-row class="px-3 w-100" align-h="around">
+            <b-row class="px-sm-3 px-md-3 w-100" align-h="around">
                 <b-col md="6" xl="5" align-self="center">
-                    <h2 id="sojourner-intro" class="ml-n4 exo-2">
+                    <h1 id="sojourner-intro">
                         Sojourner
-                    </h2>
+                    </h1>
-                    <p class="open-sans" style="font-size: 1.3em;">
+                    <p class="ml-4">
-                        Launched into space on <em>December 4th, 1996</em>, Sojourner is the first wheeled vehicle to
+                        Launched into space on
-                        rove upon another planet - Mars.
+                        <em v-b-popover.hover.top="this.moments.sojourner.launch">
+                            December 4th, 1996</em>, Sojourner is the first wheeled vehicle to rove upon another planet
+                        - Mars.
                         <br>
-                        It landed on <em>July 4th, 1997</em> in the <em>Ares Vallis</em>
+
+                        It landed on <em v-b-popover.hover.top="this.moments.sojourner.landing">July 4th, 1997</em> in
+                        the <em>Ares Vallis</em>
                         region.
+                        <br>
+                    </p>
+                    <p class="ml-4">
+                        Despite it's original mission duration planned to be just 7 days, it stayed active for 83 days
+                        in total.
+                    </p>
+                    <p class="ml-4">
+                        The lander that Sojourner landed on, <em>Pathfinder</em>, used Airbags, paving the way for the
+                        technologies use in future missions, such as Curiosity and Spirit.
                     </p>
                 </b-col>
-                <b-col md="6" xl="3">
+                <b-col md="6" xl="3" align-h="center">
                     <b-carousel
                             :interval="4000"
                             img-height="400"
                             img-width="400"
-                            style="text-shadow: 6px 5px 2px black;"
+                            style="text-shadow: 6px 5px 8px black;"
                     >
                         <b-carousel-slide
-                                caption="Mars Pathfinder"
+                                caption="Mars Pathfinder Logo"
                                 img-src="./assets/pathfinder_logo.jpg"></b-carousel-slide>
                         <b-carousel-slide
-                                caption="Sojourner"
+                                caption="Sojourner Rover"
                                 img-src="./assets/sojourner.jpg"></b-carousel-slide>
                     </b-carousel>
                     <b-img fluid-grow src=""></b-img>
@@ -49,6 +62,16 @@
     @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');
     @import "./scss/_variables.scss";
 
+    .jumbotron p {
+        @extend .open-sans;
+        font-size: 1.3em;
+    }
+
+    .jumbotron h1 {
+        @extend .exo-2;
+        font-size: 2.1em;
+    }
+
     .carousel-caption {
         bottom: -10px;
     }
@@ -92,6 +115,8 @@
 </style>
 
 <script>
+    import moment from 'moment';
+
     export default {
         name: 'App',
         components: {},
@@ -104,6 +129,38 @@
                     this.$refs.content.scrollTop = el.offsetTop
                 }
             }
+        },
+        data() {
+            return {
+                moment: moment,
+                dates: {
+                    sojourner: {
+                        launch: [1996, 11, 3, 5, 57],
+                        landing: [1997, 6, 3],
+                        lastContact: [],
+                    },
+                    spirit: {
+                        launch: [],
+                        landing: [],
+                        lastContact: []
+                    }
+                },
+            }
+        },
+        computed: {
+            moments: function () {
+                let obj = {}
+                // Build moment.utc fromNow 2d object dict
+                for (let k in this.dates) {
+                    if (!(k in obj))
+                        obj[k] = {}
+
+                    for(let j in this.dates[k]) {
+                        obj[k][j] = moment.utc(this.dates[k][j]).fromNow()
+                    }
+                }
+                return obj;
+            }
         }
     }
 </script>

src/main.js

@@ -3,9 +3,9 @@ import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router';
-
 Vue.use(BootstrapVue);
 Vue.use(BootstrapVueIcons);
+Vue.use(require('vue-moment'));
 
 Vue.config.productionTip = false