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>
|
<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{
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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*/
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue