added footer with version
This commit is contained in:
@@ -11,6 +11,7 @@
|
|||||||
<CardList />
|
<CardList />
|
||||||
<TheCodeArea class="row" theme="xcode" />
|
<TheCodeArea class="row" theme="xcode" />
|
||||||
<TheCodeButtons class="row" />
|
<TheCodeButtons class="row" />
|
||||||
|
<TheFooter />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -19,6 +20,7 @@
|
|||||||
import { Component, Vue, Prop } from 'vue-property-decorator';
|
import { Component, Vue, Prop } from 'vue-property-decorator';
|
||||||
import { ApplicationState, IApplicationState } from '@/application/State/ApplicationState';
|
import { ApplicationState, IApplicationState } from '@/application/State/ApplicationState';
|
||||||
import TheHeader from './presentation/TheHeader.vue';
|
import TheHeader from './presentation/TheHeader.vue';
|
||||||
|
import TheFooter from './presentation/TheFooter.vue';
|
||||||
import TheCodeArea from './presentation/TheCodeArea.vue';
|
import TheCodeArea from './presentation/TheCodeArea.vue';
|
||||||
import TheCodeButtons from './presentation/TheCodeButtons.vue';
|
import TheCodeButtons from './presentation/TheCodeButtons.vue';
|
||||||
import TheSearchBar from './presentation/TheSearchBar.vue';
|
import TheSearchBar from './presentation/TheSearchBar.vue';
|
||||||
@@ -35,6 +37,7 @@ import CardList from './presentation/Scripts/Cards/CardList.vue';
|
|||||||
TheGrouper,
|
TheGrouper,
|
||||||
CardList,
|
CardList,
|
||||||
TheSelector,
|
TheSelector,
|
||||||
|
TheFooter,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
export default class App extends Vue {
|
export default class App extends Vue {
|
||||||
|
|||||||
31
src/presentation/TheFooter.vue
Normal file
31
src/presentation/TheFooter.vue
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
<template>
|
||||||
|
<div id="footer">
|
||||||
|
{{text}}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||||
|
import { StatefulVue } from './StatefulVue';
|
||||||
|
|
||||||
|
@Component
|
||||||
|
export default class TheFooter extends StatefulVue {
|
||||||
|
private text: string = '';
|
||||||
|
|
||||||
|
public async mounted() {
|
||||||
|
const state = await this.getCurrentStateAsync();
|
||||||
|
this.text = `v${state.app.version}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "@/presentation/styles/colors.scss";
|
||||||
|
@import "@/presentation/styles/fonts.scss";
|
||||||
|
#footer {
|
||||||
|
color: $gray;
|
||||||
|
font-size: 0.7em;
|
||||||
|
font-family: $artistic-font;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -23,4 +23,5 @@
|
|||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
}
|
}
|
||||||
|
|
||||||
$default-font: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
|
$default-font: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
|
||||||
|
$artistic-font: 'Yesteryear', cursive;
|
||||||
Reference in New Issue
Block a user