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

View file

@ -8,7 +8,7 @@
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral"> <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
{{ .Title | emojify }} {{ .Title | emojify }}
</h1> </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") }} {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
</div> </div>
</header> </header>
@ -66,7 +66,7 @@
liked_article = true liked_article = true
document.querySelectorAll("span[id='likes_button_heart']")[0].style.display = "" 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_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); localStorage.setItem(id_likes, true);
document.querySelectorAll("span[id='likes_button_heart']")[0].style.display = "" 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_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) { if (doc.exists) {
db.collection('likes').doc(id_likes).update({ db.collection('likes').doc(id_likes).update({
likes: firebase.firestore.FieldValue.increment(1) likes: firebase.firestore.FieldValue.increment(1)
@ -108,7 +108,7 @@
localStorage.removeItem(id_likes); localStorage.removeItem(id_likes);
document.querySelectorAll("span[id='likes_button_heart']")[0].style.display = "none" 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_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) { if (doc.exists) {
db.collection('likes').doc(id_likes).update({ db.collection('likes').doc(id_likes).update({
likes: firebase.firestore.FieldValue.increment(-1) likes: firebase.firestore.FieldValue.increment(-1)

View file

@ -1,12 +1,11 @@
<span> <span>
<button id="likes_button" <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" 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()"> onclick="process_article()">
<span id="likes_button_heart" style="display:none">{{ partial "icon.html" "heart" }} </span> <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> <span id="likes_button_emtpty_heart">{{ partial "icon.html" "heart-empty" }}</span>
&nbsp; <span id="likes_button_text">&nbsp;Like</span>
<span id="likes_button_text">Like</span>
</button> </button>
</span> </span>
{{- /* Trim EOF */ -}} {{- /* Trim EOF */ -}}