mirror of
https://github.com/Xevion/history-of-robotics.git
synced 2025-12-06 09:15:15 -06:00
moment.js popover fromNow attributes, styling of description, more first jumbotron text content
This commit is contained in:
Xevion
13
package-lock.json
generated
13
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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": {
|
||||
|
||||
81
src/App.vue
81
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-row class="px-3 w-100" align-h="around">
|
||||
<b-jumbotron fluid container-fluid class="text-dark py-md-5 py-sm-0 px-md-5 px-sm-3">
|
||||
<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>
|
||||
<p class="open-sans" style="font-size: 1.3em;">
|
||||
Launched into space on <em>December 4th, 1996</em>, Sojourner is the first wheeled vehicle to
|
||||
rove upon another planet - Mars.
|
||||
</h1>
|
||||
<p class="ml-4">
|
||||
Launched into space on
|
||||
<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>
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user