Like button revamp
Last modified by Adina Milica on 20 October 2023, 12:09
Hello everyone!
As started in this xdocFooter revamp discussion, the like button has certain issues.
Wanting to make the whole revamp easier to tackle, I want to split that initial proposal in 8 parts, this being the first one.
New look
Description
The new like button is a default button with a full or outlined heart icon (depending on the state of the like button) and the number of likes shown in its right.
- if it's liked - full heart
- if it's not liked - outlined heart
The tooltip messages could be improved at the same time with the revamp or at a later time:
- tooltip for state 1: Click to like this page. 10 other people already liked it!
- I think it's shorter, it's got more personality, it invites the user to join the other 10 people.
- This does require conditional rendering. For 1 or 0 people the message would sound weird so we change it to: Click to like this page. 1 person already liked it!
- tooltip for state 2: Click to unlike this page. Current number of likes: 11.
- slightly shorter, doesn't repeat words
Looks (standalone)
Looks (contextual)
HTML
The only things that changed in the HTML:
- taking out the badge class (there are many other instances in which it just shouldn't exist)
- changing btn-primary into btn-default
- using icons for each state
Not liked state
<div class="like-container">
<input id="is-liked" type="hidden" value="false">
<div class="like-button btn btn-default" title="Click to like this page. 10 other people already liked it!">
<span class="fa fa-heart"></span>
<span class="like-number">10</span>
</div>
</div>
<input id="is-liked" type="hidden" value="false">
<div class="like-button btn btn-default" title="Click to like this page. 10 other people already liked it!">
<span class="fa fa-heart"></span>
<span class="like-number">10</span>
</div>
</div>
Liked state
<div class="like-container">
<input id="is-liked" type="hidden" value="true">
<div class="like-button btn btn-default" title="Click to unlike this page. Current number of likes: 11.">
<span class="fa fa-heart-o"></span>
<span class="like-number">11</span>
</div>
</div>
<input id="is-liked" type="hidden" value="true">
<div class="like-button btn btn-default" title="Click to unlike this page. Current number of likes: 11.">
<span class="fa fa-heart-o"></span>
<span class="like-number">11</span>
</div>
</div>
CSS / LESS
The font-size would be the same with the body size.
Is the @font-size-base variable the right one to use for that?
.like-button {
display: inline;
font-size: 14px;
}
display: inline;
font-size: 14px;
}