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

View File

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

View File

@ -210,7 +210,8 @@ export default {
.home { .home {
padding-bottom: 1px; padding-bottom: 1px;
background: var(--background); 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*/ /* Outside container wrapping the item groups*/

View File

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