krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 22:57:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(chat): better likes and display name font sizing

Browse Source
This commit is contained in:
Sabe Jones
2018-10-17 18:28:58 -05:00
parent ad0ede8d01
commit fdf2e590ea
3 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/client/assets/svg/liked.svg
View File

@@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#A5A1AC" fill-rule="evenodd" d="M11 10c0 1.654-1.346 3-3 3s-3-1.346-3-3h6zm2-3.5a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 13 6.5zm-7 0a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 6 6.5zM14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/> <path fill-rule="evenodd" d="M11 10c0 1.654-1.346 3-3 3s-3-1.346-3-3h6zm2-3.5a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 13 6.5zm-7 0a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 6 6.5zM14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 361 B

After

Width:  |  Height:  |  Size: 346 B

2
website/client/components/chat/autoComplete.vue
View File

@@ -35,7 +35,7 @@
.profile-name { .profile-name {
display: inline-block; display: inline-block;
font-size: 14px; font-size: 16px;
margin-bottom: 0rem; margin-bottom: 0rem;
} }

36
website/client/components/chat/chatCard.vue
View File

@@ -13,7 +13,8 @@ div
| {{msg.user}} | {{msg.user}}
.svg-icon(v-html="tierIcon", v-if='showShowTierStyle') .svg-icon(v-html="tierIcon", v-if='showShowTierStyle')
p.time(v-b-tooltip="", :title="msg.timestamp | date") p.time(v-b-tooltip="", :title="msg.timestamp | date")
span(v-if="msg.username") @{{ msg.username }} • span.mr-1(v-if="msg.username") @{{ msg.username }}
span.mr-1(v-if="msg.username") •
span {{ msg.timestamp | timeAgo }} span {{ msg.timestamp | timeAgo }}
.text(v-html='atHighlight(parseMarkdown(msg.text))') .text(v-html='atHighlight(parseMarkdown(msg.text))')
hr hr
@@ -29,13 +30,12 @@ div
.svg-icon(v-html="icons.delete") .svg-icon(v-html="icons.delete")
| {{$t('delete')}} | {{$t('delete')}}
.ml-auto.d-flex .ml-auto.d-flex
.action.liked.d-flex.align-items-center(v-if='likeCount > 0') .action.d-flex.align-items-center.mr-0(@click='like()', v-if='likeCount > 0', :class='{active: msg.likes[user._id]}')
.svg-icon(v-html="icons.liked") .svg-icon(v-html="icons.liked")
| + {{ likeCount }} | +{{ likeCount }}
.action.d-flex.align-items-center(@click='like()', v-if='!inbox && msg.likes', :class='{active: msg.likes[user._id]}') .action.d-flex.align-items-center.mr-0(@click='like()', v-if='likeCount === 0', :class='{active: msg.likes[user._id]}')
.svg-icon(v-html="icons.like") .svg-icon(v-html="icons.like")
span(v-if='!msg.likes[user._id]') {{ $t('like') }} span(v-if='!msg.likes[user._id]') {{ $t('like') }}
span(v-if='msg.likes[user._id]') {{ $t('liked') }}
</template> </template>
<style lang="scss"> <style lang="scss">
@@ -47,6 +47,7 @@ div
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~client/assets/scss/colors.scss';
@import '~client/assets/scss/tiers.scss'; @import '~client/assets/scss/tiers.scss';
.mentioned-icon { .mentioned-icon {
@@ -72,7 +73,7 @@ div
} }
.card-body { .card-body {
padding: 1rem 1rem 0.5rem 1rem; padding: 1.25rem 1.25rem 0.75rem 1.25rem;
.leader { .leader {
margin-bottom: 0; margin-bottom: 0;
@@ -81,7 +82,7 @@ div
h3 { // this is the user name h3 { // this is the user name
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 16px;
.svg-icon { .svg-icon {
width: 10px; width: 10px;
@@ -108,25 +109,24 @@ div
color: #878190; color: #878190;
margin-right: 1em; margin-right: 1em;
font-size: 12px; font-size: 12px;
}
.action:hover { :hover {
cursor: pointer; cursor: pointer;
} }
.liked:hover { .svg-icon {
cursor: default; color: #A5A1AC;
}
.action .svg-icon {
margin-right: .2em; margin-right: .2em;
width: 16px; width: 16px;
display: inline-block; }
color: #A5A1AC;
} }
.action.active, .active .svg-icon { .active {
color: #46a7d9 color: $purple-300;
.svg-icon {
color: $purple-400;
}
} }
</style> </style>