🩹 Fixed stickey footer, Chris Coyier to the rescue

This commit is contained in:
Alicia Sykes 2021-06-23 15:30:39 +01:00
parent 7be610f49c
commit d432e925b0
4 changed files with 18 additions and 11 deletions

View File

@ -1,6 +1,6 @@
<template>
<!-- User Footer -->
<footer v-if="text && text !== ''" v-html="text" :class="!scrollVisible ? 'fixed' : ''"></footer>
<footer v-if="text && text !== ''" v-html="text"></footer>
<!-- Default Footer -->
<footer v-else :class="!scrollVisible ? 'fixed' : ''">
Developed by <a :href="authorUrl">{{authorName}}</a>.
@ -23,16 +23,11 @@ export default {
showCopyright: { type: Boolean, default: true },
repoUrl: { type: String, default: 'https://github.com/lissy93/dashy' },
},
data: () => ({
scrollVisible: false,
}),
mounted() {
this.scrollVisible = document.body.clientHeight > window.innerHeight;
},
};
</script>
<style scoped lang="scss">
@import '@/styles/media-queries.scss';
footer {
width: calc(100% - 0.5rem);
@ -44,7 +39,9 @@ footer {
background: var(--background-darker);
margin-top: 1.5rem;
border-top: 1px solid var(--outline-color);
&.fixed { position: fixed; }
@include tablet-down {
display: none;
}
}
footer a{

View File

@ -10,6 +10,7 @@
/* Basic Page Components */
--scroll-bar-width: 8px;
--header-height: 6.3rem;
--footer-height: 125px;
/* Section & Item dimensions */
--item-group-padding: 5px; // Determines width of item-group outline

View File

@ -210,7 +210,8 @@ export default {
.home {
padding-bottom: 1px;
background: var(--background);
min-height: calc(100vh - 126px);
// min-height: calc(100vh - 126px);
min-height: calc(100vh - var(--footer-height));
}
/* Outside container wrapping the item groups*/

View File

@ -18,7 +18,7 @@ export default {
appConfig: Object,
},
data: () => ({
url: '',
url: '', // this.$route.query.url || '',
}),
components: {
SideBar,
@ -40,15 +40,23 @@ export default {
fontAwesomeScript.setAttribute('src', `https://kit.fontawesome.com/${faKey}.js`);
document.head.appendChild(fontAwesomeScript);
},
repositionFooter() {
document.getElementsByTagName('footer')[0].style.position = 'fixed';
},
},
mounted() {
const route = this.$route;
if (route.query && route.query.url) this.url = decodeURI(route.query.url);
this.setTheme();
this.initiateFontAwesome();
// this.repositionFooter();
},
};
</script>
<style scoped lang="scss">
.work-space {
min-height: calc(100vh - var(--footer-height));
}
</style>