xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-06 05:16:47 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add basic footer and build time string

Browse Source
This commit is contained in:
Xevion
2022-05-20 12:52:33 -05:00
parent b0e74e21ef
commit df77352916
3 changed files with 112 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-build-timestamp-utc="<%= new Date().toISOString() %>">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

20
src/App.vue
View File

@@ -54,6 +54,7 @@
</b-col>
<b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0">
<router-view />
<Footer :build-moment="buildMoment" />
</b-col>
</b-row>
</b-container>
@@ -63,6 +64,17 @@
</template>
<style lang="scss">
html, body {
min-height: 100vh;
}
#app {
min-height: 100vh;
}
.ais-InstantSearch {
height: 100%;
}
.outer-skeleton:not(:first-child) {
display: none;
}
@@ -115,12 +127,15 @@ import algoliasearch from "algoliasearch/lite";
import SeasonList from "./components/SeasonList.vue";
import "instantsearch.css/themes/algolia-min.css";
import Skeleton from "./components/Skeleton.vue";
import Footer from "./components/Footer.vue"
import moment from "moment";
export default {
name: "App",
components: {
SeasonList,
Skeleton
Skeleton,
Footer
},
data() {
return {
@@ -134,6 +149,9 @@ export default {
computed: {
showBreakpointMarker() {
return process.env.NODE_ENV === 'development';
},
buildMoment() {
return moment(document.documentElement.dataset.buildTimestampUtc)
}
},
methods: {

92
src/components/Footer.vue Normal file
View File

@@ -0,0 +1,92 @@
<template>
<div class="footer-dark">
<footer>
<b-container>
<b-row style="text-align: center">
<ul>
<li>
<a href="https://github.com/Xevion/the-office">GitHub</a>
</li>
<li>
<a :href="latestCommitUrl">Latest Commit</a>
</li>
<li>
<a href="https://github.com/Xevion/the-office/issues/new">Report Issues</a>
</li>
<li>
<a href="https://xevion.dev">Xevion.dev</a>
</li>
</ul>
</b-row>
<p v-if="buildTimeString !== null" class="build-time" :title="buildISOString">
built on {{ buildTimeString }}
</p>
</b-container>
</footer>
</div>
</template>
<script>
export default {
name: "Footer",
props: {
buildMoment: {type: Object, default: null}
},
computed: {
buildTimeString() {
return this.buildMoment.format('MMM do, YYYY [at] h:mm A zz')
},
buildISOString() {
return this.buildMoment.toISOString()
},
latestCommitUrl() {
return `https://github.com/Xevion/the-office/commit/${process.env.VUE_APP_GIT_HASH}`
}
}
}
</script>
<style lang="scss" scoped>
.footer-dark {
margin-top: auto;
padding: 50px 0;
color: #6d6d6d;
.build-time {
text-align: center;
padding-top: 0.7em;
opacity: 0.3;
font-size: 0.85em;
margin-bottom: 0;
}
ul {
padding: 0;
list-style: none;
line-height: 1.6;
font-size: 14px;
display: table;
margin: 0 auto;
li {
&:not(:last-child)::after {
padding: 0 0.6em;
content: "|";
}
display: inline;
}
a {
color: inherit;
text-decoration: none;
opacity: 0.6;
&:hover {
opacity: 0.8;
}
}
}
}
</style>