Merge pull request #119 from nunocoracao/118-like-button-is-taking-way-too-much-space

improvements to like button UI
This commit is contained in:
Nuno Coração 2022-10-16 15:36:02 +01:00 committed by GitHub
commit c14de64d8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 11 deletions

View file

@ -1510,8 +1510,16 @@ select {
margin-top: 1.25rem;
}
.mt-4 {
margin-top: 1rem;
.mt-2\.5 {
margin-top: 0.625rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
@ -1534,6 +1542,10 @@ select {
margin-top: 0.1rem;
}
.mt-4 {
margin-top: 1rem;
}
.\!mt-0 {
margin-top: 0px !important;
}
@ -3696,7 +3708,7 @@ body:has(#menu-controller:checked) {
}
@media (min-width: 1280px) {
.xl\:w-1\/5 {
width: 20%;
.xl\:w-1\/4 {
width: 25%;
}
}

View file

@ -8,7 +8,7 @@
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
{{ .Title | emojify }}
</h1>
<div class="mt-4 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
<div class="mt-1 mb-6 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
{{ partial "article-meta.html" (dict "context" . "scope" "single") }}
</div>
</header>
@ -66,7 +66,7 @@
liked_article = true
document.querySelectorAll("span[id='likes_button_heart']")[0].style.display = ""
document.querySelectorAll("span[id='likes_button_emtpty_heart']")[0].style.display = "none"
document.querySelectorAll("span[id='likes_button_text']")[0].innerText = "Remove Like"
document.querySelectorAll("span[id='likes_button_text']")[0].innerText = ""
}
}
@ -80,7 +80,7 @@
localStorage.setItem(id_likes, true);
document.querySelectorAll("span[id='likes_button_heart']")[0].style.display = ""
document.querySelectorAll("span[id='likes_button_emtpty_heart']")[0].style.display = "none"
document.querySelectorAll("span[id='likes_button_text']")[0].innerText = "Remove Like"
document.querySelectorAll("span[id='likes_button_text']")[0].innerText = ""
if (doc.exists) {
db.collection('likes').doc(id_likes).update({
likes: firebase.firestore.FieldValue.increment(1)
@ -108,7 +108,7 @@
localStorage.removeItem(id_likes);
document.querySelectorAll("span[id='likes_button_heart']")[0].style.display = "none"
document.querySelectorAll("span[id='likes_button_emtpty_heart']")[0].style.display = ""
document.querySelectorAll("span[id='likes_button_text']")[0].innerText = "Like"
document.querySelectorAll("span[id='likes_button_text']")[0].innerText = "\xa0Like"
if (doc.exists) {
db.collection('likes').doc(id_likes).update({
likes: firebase.firestore.FieldValue.increment(-1)

View file

@ -1,12 +1,11 @@
<span>
<button id="likes_button"
style="height: 28px; padding-top: 2px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px"
style="height: 26px; padding-top: 0px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px"
class="!rounded-md bg-primary-600 px-4 py-2 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
onclick="process_article()">
<span id="likes_button_heart" style="display:none">{{ partial "icon.html" "heart" }} </span>
<span id="likes_button_emtpty_heart">{{ partial "icon.html" "heart-empty" }}</span>
&nbsp;
<span id="likes_button_text">Like</span>
<span id="likes_button_text">&nbsp;Like</span>
</button>
</span>
{{- /* Trim EOF */ -}}