tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-23 13:45:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

#42 Footer is now only position-fixed when window is not scrollable

Browse Source
This commit is contained in:
Alicia Sykes 2021-06-21 14:31:20 +01:00
parent 6e0449f615
commit 4bf557875b
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/PageStrcture/Footer.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<!-- User Footer --> <!-- User Footer -->
<footer v-if="text && text !== ''" v-html="text"></footer> <footer v-if="text && text !== ''" v-html="text" :class="!scrollVisible ? 'fixed' : ''"></footer>
<!-- Default Footer --> <!-- Default Footer -->
<footer v-else> <footer v-else :class="!scrollVisible ? 'fixed' : ''">
Developed by <a :href="authorUrl">{{authorName}}</a>. Developed by <a :href="authorUrl">{{authorName}}</a>.
Licensed under <a :href="licenseUrl">{{license}}</a> Licensed under <a :href="licenseUrl">{{license}}</a>
{{ showCopyright? '©': '' }} {{date}}. {{ showCopyright? '©': '' }} {{date}}.
@ -23,14 +23,19 @@ 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">
footer { footer {
position: fixed; width: calc(100% - 0.5rem);
width: 100%;
bottom: 0; bottom: 0;
padding: 0.25rem; padding: 0.25rem;
text-align: center; text-align: center;
@ -39,6 +44,7 @@ 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; }
} }
footer a{ footer a{