hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Re-do UserCardContent css

Browse source
This commit is contained in:
taehoon 2019-03-05 02:32:23 -05:00
commit e0a66b989d
9 changed files with 58 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/user_card_content/user_card_content.js
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'
export default {
props: [ 'user', 'switcher', 'selected', 'hideBio' ],
props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered' ],
data () {
return {
followRequestInProgress: false,
@ -16,7 +16,14 @@ export default {
}
},
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
? this.$store.state.config.customTheme.colors.bg // v2
: this.$store.state.config.colors.bg // v1

79
src/components/user_card_content/user_card_content.vue
View file

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