mirror of
https://github.com/Xevion/history-of-robotics.git
synced 2025-12-17 16:12:08 -06:00
attempts at fixing navbar, styling/responsiveness adjustments, add Spirit Jumbotron/info
This commit is contained in:
Xevion
194
src/App.vue
194
src/App.vue
@@ -1,60 +1,103 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<b-nav card-header slot="header" v-b-scrollspy:nav-scroller>
|
<b-navbar>
|
||||||
<b-navbar-brand class="px-2 pl-3 exo-2 font-weight-normal" style="font-size: 1.5em;">
|
<b-navbar-nav v-b-scrollspy:content>
|
||||||
Sojourner & Spirit
|
<b-navbar-brand class="px-2 pl-3 exo-2 font-weight-normal text-white" style="font-size: 1.5em;">
|
||||||
</b-navbar-brand>
|
Sojourner & Spirit
|
||||||
<b-nav-item href="#sojourner-intro" link-classes="open-sans" @click="scrollIntoView">Sojourner
|
</b-navbar-brand>
|
||||||
</b-nav-item>
|
<b-nav-item href="#sojourner" link-classes="open-sans text-white"
|
||||||
<!-- <b-nav-item href="#mdo" @click="scrollIntoView">@mdo</b-nav-item>-->
|
@click="scrollIntoView">
|
||||||
<!-- <b-nav-item href="#pi0" @click="scrollIntoView">@pi0</b-nav-item>-->
|
Sojourner
|
||||||
</b-nav>
|
</b-nav-item>
|
||||||
<b-jumbotron fluid container-fluid class="text-dark py-md-5 py-sm-0 px-md-5 px-sm-3">
|
<b-nav-item href="#spirit" link-classes="open-sans text-white" @click="scrollIntoView">
|
||||||
<b-row class="px-sm-3 px-md-3 w-100" align-h="around">
|
Spirit
|
||||||
<b-col md="6" xl="5" align-self="center">
|
</b-nav-item>
|
||||||
<h1 id="sojourner-intro">
|
</b-navbar-nav>
|
||||||
Sojourner
|
</b-navbar>
|
||||||
</h1>
|
<div id="content" ref="content">
|
||||||
<p class="ml-4">
|
<b-jumbotron fluid container-fluid class="text-dark my-0 py-md-5 py-sm-0 px-md-5 px-sm-3">
|
||||||
Launched into space on
|
<b-row class="px-sm-3 px-md-3 w-100" align-h="around">
|
||||||
<em v-b-popover.hover.top="this.moments.sojourner.launch">
|
<b-col md="6" xl="5" align-self="center">
|
||||||
December 4th, 1996</em>, Sojourner is the first wheeled vehicle to rove upon another planet
|
<h1 id="sojourner">
|
||||||
- Mars.
|
Sojourner
|
||||||
<br>
|
</h1>
|
||||||
|
<p class="ml-4">
|
||||||
It landed on <em v-b-popover.hover.top="this.moments.sojourner.landing">July 4th, 1997</em> in
|
Launched into space on
|
||||||
the <em>Ares Vallis</em>
|
<em class="text-nowrap" :title="this.moments.sojourner.launch.fromNow()">
|
||||||
region.
|
{{ this.moments.sojourner.launch.format("MMMM Do, YYYY") }}
|
||||||
<br>
|
</em>,
|
||||||
</p>
|
Sojourner is the first wheeled vehicle to rove upon another planet - Mars.
|
||||||
<p class="ml-4">
|
It landed on <em class="text-nowrap" :title="this.moments.sojourner.landing">July 4th,
|
||||||
Despite it's original mission duration planned to be just 7 days, it stayed active for 83 days
|
1997</em> in the <em>Ares Vallis</em> region.
|
||||||
in total.
|
</p>
|
||||||
</p>
|
<p class="ml-4">
|
||||||
<p class="ml-4">
|
Despite it's original mission duration planned to be just 7 days, it stayed active for 83
|
||||||
The lander that Sojourner landed on, <em>Pathfinder</em>, used Airbags, paving the way for the
|
days in total.
|
||||||
technologies use in future missions, such as Curiosity and Spirit.
|
</p>
|
||||||
</p>
|
<p class="ml-4">
|
||||||
</b-col>
|
The lander that Sojourner landed on, <em>Pathfinder</em>, used Airbags, paving the way for
|
||||||
<b-col md="6" xl="3" align-h="center">
|
the technologies use in future missions, such as Curiosity and Spirit.
|
||||||
<b-carousel
|
</p>
|
||||||
:interval="4000"
|
</b-col>
|
||||||
img-height="400"
|
<b-col md="6" xl="3" align-h="center" class="w-100 h-100">
|
||||||
img-width="400"
|
<b-carousel
|
||||||
style="text-shadow: 6px 5px 8px black;"
|
:interval="4000"
|
||||||
>
|
img-width="400"
|
||||||
<b-carousel-slide
|
img-height="400"
|
||||||
caption="Mars Pathfinder Logo"
|
style="text-shadow: 6px 5px 8px black;"
|
||||||
img-src="./assets/pathfinder_logo.jpg"></b-carousel-slide>
|
>
|
||||||
<b-carousel-slide
|
<b-carousel-slide
|
||||||
caption="Sojourner Rover"
|
caption="Mars Pathfinder Logo"
|
||||||
img-src="./assets/sojourner.jpg"></b-carousel-slide>
|
img-src="./assets/pathfinder_logo.jpg"></b-carousel-slide>
|
||||||
</b-carousel>
|
<b-carousel-slide
|
||||||
<b-img fluid-grow src=""></b-img>
|
caption="Sojourner Rover"
|
||||||
</b-col>
|
img-src="./assets/sojourner.jpg"></b-carousel-slide>
|
||||||
</b-row>
|
</b-carousel>
|
||||||
</b-jumbotron>
|
<b-img fluid-grow src=""></b-img>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</b-jumbotron>
|
||||||
|
<b-jumbotron fluid container-fluid class="bg-black my-0 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="3" align-h="center">
|
||||||
|
<b-carousel
|
||||||
|
:interval="4000"
|
||||||
|
img-height="400"
|
||||||
|
img-width="400"
|
||||||
|
style="text-shadow: 6px 5px 8px black;"
|
||||||
|
>
|
||||||
|
<b-carousel-slide
|
||||||
|
caption="Spirit Rover"
|
||||||
|
img-src="./assets/spirit.jpg"></b-carousel-slide>
|
||||||
|
</b-carousel>
|
||||||
|
<b-img fluid-grow src=""></b-img>
|
||||||
|
</b-col>
|
||||||
|
<b-col class="ml-n5" md="6" xl="5" align-self="center">
|
||||||
|
<h1 id="spirit">
|
||||||
|
Spirit
|
||||||
|
</h1>
|
||||||
|
<p class="ml-4">
|
||||||
|
The geology-centric rover was launched into space <abbr
|
||||||
|
title="Spirit and Opportunity were launched separately, 3 days apart.">with it's
|
||||||
|
twin</abbr>, Opportunity, on
|
||||||
|
<em class="text-nowrap" :title="this.moments.spirit.launch.fromNow()">
|
||||||
|
{{ this.moments.spirit.launch.format("MMMM Do, YYYY") }}</em>, and on
|
||||||
|
<em :title="this.moments.sojourner.landing.fromNow()">
|
||||||
|
{{ this.moments.spirit.landing.format("MMMM Do, YYYY") }}
|
||||||
|
</em>, it became the 2nd rover to arrive on the red planet.
|
||||||
|
</p>
|
||||||
|
<p class="ml-4">
|
||||||
|
Spirit was planned with just a 90 day mission in mind, but like it's twin, Spirit outlasted
|
||||||
|
this cycle far beyond what was originally planned.
|
||||||
|
</p>
|
||||||
|
<p class="ml-4">
|
||||||
|
</p>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</b-jumbotron>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@@ -62,9 +105,27 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');
|
@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";
|
@import "./scss/_variables.scss";
|
||||||
|
|
||||||
.jumbotron p {
|
|
||||||
@extend .open-sans;
|
.jumbotron {
|
||||||
font-size: 1.3em;
|
color: $white;
|
||||||
|
|
||||||
|
p {
|
||||||
|
@extend .open-sans;
|
||||||
|
font-size: 1.3em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr {
|
||||||
|
text-decoration-color: rgba(255, 255, 255, 0.5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-black {
|
||||||
|
background-color: $primary;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
@extend .bg-black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jumbotron h1 {
|
.jumbotron h1 {
|
||||||
@@ -100,9 +161,9 @@
|
|||||||
font-family: 'Open Sans', sans-serif;
|
font-family: 'Open Sans', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.navbar-brand, .nav-link {
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
color: white;
|
color: $white;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
@@ -128,20 +189,20 @@
|
|||||||
if (el) {
|
if (el) {
|
||||||
this.$refs.content.scrollTop = el.offsetTop
|
this.$refs.content.scrollTop = el.offsetTop
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
moment: moment,
|
moment: moment,
|
||||||
dates: {
|
dates: {
|
||||||
sojourner: {
|
sojourner: {
|
||||||
launch: [1996, 11, 3, 5, 57],
|
launch: [1996, 11, 4, 5, 57],
|
||||||
landing: [1997, 6, 3],
|
landing: [1997, 6, 4],
|
||||||
lastContact: [],
|
lastContact: [],
|
||||||
},
|
},
|
||||||
spirit: {
|
spirit: {
|
||||||
launch: [],
|
launch: [2003, 5, 11, 16, 57],
|
||||||
landing: [],
|
landing: [2004, 0, 4, 3, 34],
|
||||||
lastContact: []
|
lastContact: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -149,14 +210,15 @@
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
moments: function () {
|
moments: function () {
|
||||||
|
moment.defaultFormat = "MMMM Do, YYYY";
|
||||||
let obj = {}
|
let obj = {}
|
||||||
// Build moment.utc fromNow 2d object dict
|
// Build moment.utc fromNow 2d object dict
|
||||||
for (let k in this.dates) {
|
for (let k in this.dates) {
|
||||||
if (!(k in obj))
|
if (!(k in obj))
|
||||||
obj[k] = {}
|
obj[k] = {}
|
||||||
|
|
||||||
for(let j in this.dates[k]) {
|
for (let j in this.dates[k]) {
|
||||||
obj[k][j] = moment.utc(this.dates[k][j]).fromNow()
|
obj[k][j] = moment.utc(this.dates[k][j])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return obj;
|
return obj;
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
BIN
src/assets/spirit.jpg
Normal file
BIN
src/assets/spirit.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
Reference in New Issue
Block a user