mirror of
https://github.com/jbowdre/runtimeterror.git
synced 2024-11-09 17:42:19 +00:00
disable kudos button after click
This commit is contained in:
parent
0332cbaab4
commit
f2feafa49b
3 changed files with 54 additions and 13 deletions
23
assets/js/kudos.js
Normal file
23
assets/js/kudos.js
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
// disables kudos button after click
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const kudosButton = document.querySelector('.kudos-button');
|
||||||
|
const kudosText = document.querySelector('.kudos-text');
|
||||||
|
const emojiSpan = kudosButton.querySelector('.emoji');
|
||||||
|
|
||||||
|
kudosButton.addEventListener('click', () => {
|
||||||
|
kudosButton.disabled = true;
|
||||||
|
kudosButton.classList.add('clicked');
|
||||||
|
|
||||||
|
kudosText.textContent = 'Thanks!';
|
||||||
|
kudosText.classList.add('thanks');
|
||||||
|
|
||||||
|
// Rotate the emoji
|
||||||
|
emojiSpan.style.transform = 'rotate(360deg)';
|
||||||
|
|
||||||
|
// Change the emoji after rotation
|
||||||
|
setTimeout(() => {
|
||||||
|
emojiSpan.textContent = '🎉';
|
||||||
|
}, 150); // Half of the transition time for a smooth mid-rotation change
|
||||||
|
});
|
||||||
|
});
|
|
@ -41,7 +41,14 @@
|
||||||
{{- end }}
|
{{- end }}
|
||||||
{{- if eq $reply true }}
|
{{- if eq $reply true }}
|
||||||
<hr>
|
<hr>
|
||||||
<span class="post_kudos"><button class="kudos" data-cabin-event="kudos">👍</button>Enjoyed this?</span>
|
<div class="kudos-container">
|
||||||
|
<button class="kudos-button" data-cabin-event="kudos">
|
||||||
|
<span class="emoji">👍</span>
|
||||||
|
</button>
|
||||||
|
<span class="kudos-text">Enjoyed this?</span>
|
||||||
|
</div>
|
||||||
|
{{ $kudos := resources.Get "js/kudos.js" | minify }}
|
||||||
|
<script src="{{ $kudos.RelPermalink }}"></script>
|
||||||
<span class="post_email_reply"><a href="mailto:wheel.east.brief@clkdmail.com?Subject=Re: {{ .Title }}">📧 Reply by email</a></span>
|
<span class="post_email_reply"><a href="mailto:wheel.east.brief@clkdmail.com?Subject=Re: {{ .Title }}">📧 Reply by email</a></span>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
<footer class="content__footer"></footer>
|
<footer class="content__footer"></footer>
|
||||||
|
|
|
@ -404,26 +404,37 @@ p:has(+ ul) {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Cabin kudos styling */
|
/* Cabin kudos styling */
|
||||||
.post_kudos {
|
.kudos-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.kudos {
|
.kudos-button {
|
||||||
border: 0;
|
background: none;
|
||||||
background-color: transparent;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
|
||||||
color: var(--off-fg);
|
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
transition: all .2s ease-in-out;
|
margin-right: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.kudos:hover {
|
.kudos-button:disabled {
|
||||||
transform: scale(1.1);
|
cursor: default;
|
||||||
text-shadow: var(-off-bg) 0 0 1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button.kudos:active {
|
.kudos-button .emoji {
|
||||||
transform: scale(0.9);
|
display: inline-block;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kudos-button.clicked .emoji {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kudos-text {
|
||||||
|
transition: font-style 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kudos-text.thanks {
|
||||||
|
font-style: italic;
|
||||||
}
|
}
|
Loading…
Reference in a new issue