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