mirror of https://github.com/Lissy93/dashy.git
🩹 Fixed stickey footer, Chris Coyier to the rescue
This commit is contained in:
parent
7be610f49c
commit
d432e925b0
|
@ -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{
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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*/
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue