Re-do UserCardContent css

This commit is contained in:
taehoon 2019-03-05 02:32:23 -05:00
parent 216073eb58
commit e0a66b989d
9 changed files with 58 additions and 102 deletions

View file

@ -4,7 +4,7 @@
<UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/> <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
</router-link> </router-link>
<div class="user-card-expanded-content" v-if="userExpanded"> <div class="user-card-expanded-content" v-if="userExpanded">
<user-card-content :user="user" :switcher="false"></user-card-content> <UserCardContent :user="user" :rounded="true" :bordered="true"/>
</div> </div>
<div class="user-card-collapsed-content" v-else> <div class="user-card-collapsed-content" v-else>
<div :title="user.name" class="user-card-user-name"> <div :title="user.name" class="user-card-user-name">
@ -29,12 +29,12 @@
.user-card { .user-card {
display: flex; display: flex;
flex: 1 0; flex: 1 0;
margin: 0;
padding-top: 0.6em; padding-top: 0.6em;
padding-right: 1em; padding-right: 1em;
padding-bottom: 0.6em; padding-bottom: 0.6em;
padding-left: 1em; padding-left: 1em;
border-bottom: 1px solid; border-bottom: 1px solid;
margin: 0;
border-bottom-color: $fallback--border; border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border); border-bottom-color: var(--border, $fallback--border);
@ -57,23 +57,6 @@
&-expanded-content { &-expanded-content {
flex: 1; flex: 1;
margin-left: 0.7em; margin-left: 0.7em;
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
border-style: solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-width: 1px;
overflow: hidden;
.panel-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
}
p {
margin-bottom: 0;
}
} }
} }
</style> </style>

View file

@ -5,9 +5,7 @@
<UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/> <UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/>
</a> </a>
<div class='notification-right'> <div class='notification-right'>
<div class="usercard notification-usercard" v-if="userExpanded"> <UserCardContent :user="notification.action.user" :rounded="true" :bordered="true" v-if="userExpanded"/>
<user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
</div>
<span class="notification-details"> <span class="notification-details">
<div class="name-and-action"> <div class="name-and-action">
<span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span> <span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span>

View file

@ -45,10 +45,6 @@
} }
} }
.notification-usercard {
margin: 0;
}
.non-mention { .non-mention {
display: flex; display: flex;
flex: 1; flex: 1;

View file

@ -8,7 +8,7 @@
@touchmove="touchMove" @touchmove="touchMove"
> >
<div class="side-drawer-heading" @click="toggleDrawer"> <div class="side-drawer-heading" @click="toggleDrawer">
<user-card-content :user="currentUser" :switcher="false" :hideBio="true" v-if="currentUser"/> <UserCardContent :user="currentUser" :hideBio="true" v-if="currentUser"/>
<div class="side-drawer-logo-wrapper" v-else> <div class="side-drawer-logo-wrapper" v-else>
<img :src="logo"/> <img :src="logo"/>
<span>{{sitename}}</span> <span>{{sitename}}</span>
@ -181,15 +181,6 @@
display: flex; display: flex;
padding: 0; padding: 0;
margin: 0; margin: 0;
.profile-panel-background {
border-radius: 0;
.panel-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
}
}
} }
.side-drawer ul { .side-drawer ul {

View file

@ -31,9 +31,7 @@
</router-link> </router-link>
</div> </div>
<div class="status-body"> <div class="status-body">
<div class="usercard" v-if="userExpanded"> <UserCardContent :user="status.user" :rounded="true" :bordered="true" class="status-usercard-content" v-if="userExpanded"/>
<user-card-content :user="status.user" :switcher="false"></user-card-content>
</div>
<div v-if="!noHeading" class="media-heading"> <div v-if="!noHeading" class="media-heading">
<div class="heading-name-row"> <div class="heading-name-row">
<div class="name-and-account-name"> <div class="name-and-account-name">
@ -248,8 +246,7 @@ $status-margin: 0.75em;
padding: 0; padding: 0;
} }
.usercard { .status-usercard-content {
margin: 0;
margin-bottom: $status-margin; margin-bottom: $status-margin;
} }

View file

@ -4,7 +4,7 @@ import { requestFollow, requestUnfollow } from '../../services/follow_manipulate
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
export default { export default {
props: [ 'user', 'switcher', 'selected', 'hideBio' ], props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered' ],
data () { data () {
return { return {
followRequestInProgress: false, followRequestInProgress: false,
@ -16,7 +16,14 @@ export default {
} }
}, },
computed: { computed: {
headingStyle () { classes () {
return [{
'user-card-content-rounded': this.rounded === true,
'user-card-content-rounded-t': this.rounded === 'top', // top only
'user-card-content-bordered': this.bordered
}]
},
style () {
const color = this.$store.state.config.customTheme.colors const color = this.$store.state.config.customTheme.colors
? this.$store.state.config.customTheme.colors.bg // v2 ? this.$store.state.config.customTheme.colors.bg // v2
: this.$store.state.config.colors.bg // v1 : this.$store.state.config.colors.bg // v1

View file

@ -1,6 +1,6 @@
<template> <template>
<div id="heading" class="profile-panel-background" :style="headingStyle"> <div class="user-card-content" :class="classes" :style="style">
<div class="panel-heading text-center"> <div class="panel-heading">
<div class='user-info'> <div class='user-info'>
<div class='container'> <div class='container'>
<router-link :to="userProfileLink(user)"> <router-link :to="userProfileLink(user)">
@ -108,7 +108,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="panel-body profile-panel-body" v-if="!hideBio"> <div class="panel-body" v-if="!hideBio">
<div v-if="!hideUserStatsLocal && switcher" class="user-counts"> <div v-if="!hideUserStatsLocal && switcher" class="user-counts">
<div class="user-count" v-on:click.prevent="setProfileView('statuses')"> <div class="user-count" v-on:click.prevent="setProfileView('statuses')">
<h5>{{ $t('user_card.statuses') }}</h5> <h5>{{ $t('user_card.statuses') }}</h5>
@ -123,8 +123,8 @@
<span>{{user.followers_count}}</span> <span>{{user.followers_count}}</span>
</div> </div>
</div> </div>
<p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p> <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-content-bio" v-html="user.description_html"></p>
<p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p> <p v-else-if="!hideBio" class="user-card-content-bio">{{ user.description }}</p>
</div> </div>
</div> </div>
</template> </template>
@ -134,30 +134,54 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.profile-panel-background { .user-card-content {
background-size: cover; background-size: cover;
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
overflow: hidden; overflow: hidden;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.panel-heading { .panel-heading {
padding: .5em 0; padding: .5em 0;
text-align: center; text-align: center;
box-shadow: none; box-shadow: none;
background: transparent;
flex-direction: column;
align-items: stretch;
} }
}
.profile-panel-body { .panel-body {
word-wrap: break-word; word-wrap: break-word;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
}
.profile-bio { p {
margin-bottom: 0;
}
&-bio {
text-align: center; text-align: center;
} }
//
// Modifiers
&-rounded {
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
}
&-rounded-t {
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
&-bordered {
border-width: 1px;
border-style: solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
}
} }
.user-info { .user-info {
@ -393,25 +417,4 @@
text-decoration: none; text-decoration: none;
} }
} }
.usercard {
width: fill-available;
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
border-style: solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-width: 1px;
overflow: hidden;
.panel-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
}
p {
margin-bottom: 0;
}
}
</style> </style>

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="user-panel"> <div class="user-panel">
<div v-if='user' class="panel panel-default" style="overflow: visible;"> <div v-if='user' class="panel panel-default" style="overflow: visible;">
<user-card-content :user="user" :switcher="false" :hideBio="true"></user-card-content> <UserCardContent :user="user" :hideBio="true" rounded="top"/>
<div class="panel-footer"> <div class="panel-footer">
<post-status-form v-if='user'></post-status-form> <post-status-form v-if='user'></post-status-form>
</div> </div>
@ -11,13 +11,3 @@
</template> </template>
<script src="./user_panel.js"></script> <script src="./user_panel.js"></script>
<style lang="scss">
.user-panel {
.profile-panel-background .panel-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
}
}
</style>

View file

@ -1,11 +1,7 @@
<template> <template>
<div> <div>
<div v-if="user.id" class="user-profile panel panel-default"> <div v-if="user.id" class="user-profile panel panel-default">
<user-card-content <UserCardContent :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
:user="user"
:switcher="true"
:selected="timeline.viewing"
/>
<tab-switcher :renderOnlyFocused="true" ref="tabSwitcher"> <tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
<Timeline <Timeline
:label="$t('user_card.statuses')" :label="$t('user_card.statuses')"
@ -64,11 +60,6 @@
flex: 2; flex: 2;
flex-basis: 500px; flex-basis: 500px;
.profile-panel-background .panel-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
}
.userlist-placeholder { .userlist-placeholder {
display: flex; display: flex;
justify-content: center; justify-content: center;