KevinMidboe/planetposen
1
0
Fork 0
mirror of https://github.com/KevinMidboe/planetposen.git synced 2025-10-29 09:40:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Cart icon follows scroll on all shop pages. w/ shopping cart icon & lower desktop positioning.

Browse Source
This commit is contained in:
Kevin
2020-07-21 13:22:08 +02:00
parent c572c967a4
commit cc009b1ffd
1 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/components/ui/cart.vue
View File

@@ -27,9 +27,14 @@ export default {
isHeaderOffScreen: false isHeaderOffScreen: false
} }
}, },
watch: {
$route(to, from) {
this.isHeaderOffScreen = false;
}
},
mounted() { mounted() {
let observer = new IntersectionObserver((entry, observer) => { let observer = new IntersectionObserver((entry, observer) => {
if (this.$route.name == 'Shop') { if (this.$route.path.includes('shop')) {
const isHeaderIntersecting = entry[0].isIntersecting; const isHeaderIntersecting = entry[0].isIntersecting;
this.isHeaderOffScreen = !isHeaderIntersecting; this.isHeaderOffScreen = !isHeaderIntersecting;
} else { } else {
@@ -52,6 +57,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '/frontend/styles/variables';
.cart { .cart {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -75,10 +82,18 @@ export default {
top: 0.5rem; top: 0.5rem;
right: -6px; right: -6px;
padding: 0.5rem; padding: 0.5rem;
padding-right: 2.5rem; padding-right: 1.5rem;
background-color: var(--color-background); background-color: var(--color-background);
border-radius: 6px; border-radius: 6px;
border: 0px solid !important; border: 0px solid !important;
.icon {
color: white;
}
@include desktop {
top: 1.5rem;
}
} }
&:hover { &:hover {