UX: own post likes glyph margin was off

This commit is contained in:
Arpit Jalan 2018-03-30 10:10:55 +05:30
parent a55b458e56
commit fe17ee6924
4 changed files with 21 additions and 10 deletions

View File

@ -70,11 +70,11 @@ registerButton('like-count', attrs => {
? count === 1 ? 'post.has_likes_title_only_you' : 'post.has_likes_title_you'
: 'post.has_likes_title';
const icon = attrs.yours ? 'heart' : '';
const additionalClass = attrs.yours ? 'my-likes' : 'regular-likes';
return { action: 'toggleWhoLiked',
title,
className: 'like-count highlight-action',
className: `like-count highlight-action ${additionalClass}`,
contents: count,
icon,
iconRight: true,

View File

@ -26,13 +26,13 @@ $github: #6d6d6d !default;
$base-font-size: 14px !default;
$base-font-family: Helvetica, Arial, sans-serif !default;
// Font-size defintions, multiplier ^ (step / interval)
// Font-size defintions, multiplier ^ (step / interval)
$font-up-6: 2.296em;
$font-up-5: 2em;
$font-up-4: 1.7511em;
$font-up-3: 1.5157em;
$font-up-2: 1.3195em;
$font-up-1: 1.1487em; // 2^(1/5)
$font-up-1: 1.1487em; // 2^(1/5)
$font-0: 1em;
$font-down-1: .8706em; // 2^(-1/5)
$font-down-2: .7579em; // Smallest size we use based on the 1em base
@ -46,7 +46,7 @@ $line-height-small: 1;
$line-height-medium: 1.2; // Headings or large text
$line-height-large: 1.4; // Normal or small text
// These files don't actually exist. They're injected by Stylesheet::Compiler.
// These files don't actually exist. They're injected by Stylesheet::Compiler.
// --------------------------------------------------
@import "theme_variables";
@ -57,10 +57,10 @@ $line-height-large: 1.4; // Normal or small text
// --------------------------------------------------
$z-layers: (
"max": 9999,
"max": 9999,
"fullscreen": 1700,
"modal": (
"tooltip": 1600,
"tooltip": 1600,
"popover": 1500,
"dropdown": 1400,
"content": 1300,
@ -73,7 +73,7 @@ $z-layers: (
"popover": 500,
"content": 400,
),
"dropdown": 300,
"dropdown": 300,
"usercard": 200,
"timeline": 100,
"base": 1

View File

@ -56,11 +56,16 @@ nav.post-controls {
.like-count {
font-size: $font-up-1;
margin-right: -15px;
i.fa-heart {
padding-left: 5px;
color: $love;
}
&.my-likes {
margin-right: -2px;
}
&.regular-likes {
margin-right: -15px;
}
}
.highlight-action {

View File

@ -62,12 +62,18 @@ span.badge-posts {
}
button.like-count {
font-size: $font-0;
font-size: $font-up-1;
padding: 8px 4px;
i.fa-heart {
padding-left: 5px;
color: $love;
}
&.my-likes {
margin-right: 5px;
}
&.regular-likes {
margin-right: -8px;
}
}
}
}