KevinMidboe/vinlottis
1
0
Fork 0
Code Issues 8 Pull Requests 14 Packages Projects Releases Wiki Activity

Merge pull request #87 from KevinMidboe/feat/pulsing-participate-button

Browse Source 
Feat/pulsing participate button
This commit is contained in:
Kevin
2021-04-30 21:00:17 +02:00
committed by GitHub
parent 7092fb1959 3188e83aeb
commit d21a33ab42
2 changed files with 34 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/components/VinlottisPage.vue
View File

@@ -94,7 +94,11 @@ export default {
return Notification.permission !== "granted" || !this.pushAllowed || localStorage.getItem("push") == null; return Notification.permission !== "granted" || !this.pushAllowed || localStorage.getItem("push") == null;
} }
}, },
async mounted() { mounted() {
setTimeout(() => {
document.getElementsByClassName("participate-button")[0].classList.add("pulse");
}, 1800);
this.$on("push-allowed", () => { this.$on("push-allowed", () => {
this.pushAllowed = true; this.pushAllowed = true;
}); });
@@ -121,8 +125,9 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../styles/media-queries.scss"; @import "@/styles/media-queries.scss";
@import "../styles/variables.scss"; @import "@/styles/variables.scss";
@import "@/styles/animations.scss";
.top-container { .top-container {
height: 30em; height: 30em;
@@ -173,18 +178,20 @@ export default {
border: 4px solid black; border: 4px solid black;
padding: 0 1em 0 1em; padding: 0 1em 0 1em;
display: flex; display: flex;
width: 12.5em; width: 17.5em;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
color: black; color: black;
i { i {
color: $link-color; color: $link-color;
font-size: 1.2rem;
margin-left: 5px; margin-left: 5px;
} }
p { p {
font-size: 16px; font-size: 1.4rem;
margin: 1rem;
margin-left: 15px; margin-left: 15px;
} }

22
frontend/styles/animations.scss Normal file
View File

@@ -0,0 +1,22 @@
.pulse {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
transform: scale(1);
animation: pulse 2s infinite;
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
}
70% {
transform: scale(1.02);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
}