mirror of
https://github.com/jbowdre/runtimeterror.git
synced 2024-11-12 19:12:18 +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 }}
|
||||
{{- if eq $reply true }}
|
||||
<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>
|
||||
{{- end }}
|
||||
<footer class="content__footer"></footer>
|
||||
|
|
|
@ -404,26 +404,37 @@ p:has(+ ul) {
|
|||
}
|
||||
|
||||
/* Cabin kudos styling */
|
||||
.post_kudos {
|
||||
.kudos-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button.kudos {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
.kudos-button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
color: var(--off-fg);
|
||||
font-size: 1.2rem;
|
||||
padding: 0;
|
||||
transition: all .2s ease-in-out;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
button.kudos:hover {
|
||||
transform: scale(1.1);
|
||||
text-shadow: var(-off-bg) 0 0 1px;
|
||||
.kudos-button:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
button.kudos:active {
|
||||
transform: scale(0.9);
|
||||
.kudos-button .emoji {
|
||||
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