ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix and DRY hc-avatar stylings

Browse Source
This commit is contained in:
roschaefer 2019-09-06 13:36:11 +02:00
parent a053181334
commit e04eedf0d0
1 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
webapp/components/User/User.vue
View File

@ -1,25 +1,17 @@
<template>
<div v-if="displayAnonymous">
<div
style="display: inline-block; float: left; margin-right: 4px; height: 100%; vertical-align: middle;"
>
<hc-avatar />
</div>
<div style="display: inline-block; height: 100%; vertical-align: middle;">
<b class="username" style="vertical-align: middle;">{{ $t('profile.userAnonym') }}</b>
<div class="user" v-if="displayAnonymous">
<hc-avatar />
<div>
<b class="username">{{ $t('profile.userAnonym') }}</b>
</div>
</div>
<dropdown v-else :class="{ 'disabled-content': user.disabled }" placement="top-start" offset="0">
<template slot="default" slot-scope="{ openMenu, closeMenu, isOpen }">
<nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
<div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
<div
style="display: inline-block; float: left; margin-right: 4px; height: 100%; vertical-align: middle;"
>
<hc-avatar :user="user" />
</div>
<div style="display: inline-block; height: 100%; vertical-align: middle;">
<b class="username" style="vertical-align: middle;">{{ userName | truncate(18) }}</b>
<hc-avatar :user="user" />
<div>
<b class="username">{{ userName | truncate(18) }}</b>
</div>
<!-- Time -->
<div v-if="dateTime" style="display: inline;">
@ -127,7 +119,7 @@ export default {
},
displayAnonymous() {
const { user, isModerator } = this
return !user || (user.deleted) || (user.disabled && !isModerator)
return !user || user.deleted || (user.disabled && !isModerator)
},
userLink() {
const { id, slug } = this.user
@ -143,6 +135,14 @@ export default {
</script>
<style lang="scss">
.avatar {
display: inline-block;
float: left;
margin-right: 4px;
height: 100%;
vertical-align: middle;
}
.user {
white-space: nowrap;
position: relative;