aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/basic_user_card/basic_user_card.vue21
-rw-r--r--src/components/notification/notification.vue4
-rw-r--r--src/components/notifications/notifications.scss4
-rw-r--r--src/components/side_drawer/side_drawer.vue11
-rw-r--r--src/components/status/status.vue7
-rw-r--r--src/components/user_card_content/user_card_content.js11
-rw-r--r--src/components/user_card_content/user_card_content.vue79
-rw-r--r--src/components/user_panel/user_panel.vue12
-rw-r--r--src/components/user_profile/user_profile.vue11
9 files changed, 58 insertions, 102 deletions
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 77fb0aa0..a358c971 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -4,7 +4,7 @@
<UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
</router-link>
<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 class="user-card-collapsed-content" v-else>
<div :title="user.name" class="user-card-user-name">
@@ -29,12 +29,12 @@
.user-card {
display: flex;
flex: 1 0;
+ margin: 0;
padding-top: 0.6em;
padding-right: 1em;
padding-bottom: 0.6em;
padding-left: 1em;
border-bottom: 1px solid;
- margin: 0;
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
@@ -57,23 +57,6 @@
&-expanded-content {
flex: 1;
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>
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 87925cfc..6583570e 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -5,9 +5,7 @@
<UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/>
</a>
<div class='notification-right'>
- <div class="usercard notification-usercard" v-if="userExpanded">
- <user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
- </div>
+ <UserCardContent :user="notification.action.user" :rounded="true" :bordered="true" v-if="userExpanded"/>
<span class="notification-details">
<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>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 2240c10a..c0b458cc 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -45,10 +45,6 @@
}
}
- .notification-usercard {
- margin: 0;
- }
-
.non-mention {
display: flex;
flex: 1;
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 6996380d..f346b440 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -8,7 +8,7 @@
@touchmove="touchMove"
>
<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>
<img :src="logo"/>
<span>{{sitename}}</span>
@@ -181,15 +181,6 @@
display: flex;
padding: 0;
margin: 0;
-
- .profile-panel-background {
- border-radius: 0;
- .panel-heading {
- background: transparent;
- flex-direction: column;
- align-items: stretch;
- }
- }
}
.side-drawer ul {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index ee6ef7da..0c110c90 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -31,9 +31,7 @@
</router-link>
</div>
<div class="status-body">
- <div class="usercard" v-if="userExpanded">
- <user-card-content :user="status.user" :switcher="false"></user-card-content>
- </div>
+ <UserCardContent :user="status.user" :rounded="true" :bordered="true" class="status-usercard-content" v-if="userExpanded"/>
<div v-if="!noHeading" class="media-heading">
<div class="heading-name-row">
<div class="name-and-account-name">
@@ -248,8 +246,7 @@ $status-margin: 0.75em;
padding: 0;
}
- .usercard {
- margin: 0;
+ .status-usercard-content {
margin-bottom: $status-margin;
}
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 7a7b89d4..78c7eb6b 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -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
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 702c3385..f06a0a45 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -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>
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 2d5cb500..4b3d8971 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -1,7 +1,7 @@
<template>
<div class="user-panel">
<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">
<post-status-form v-if='user'></post-status-form>
</div>
@@ -11,13 +11,3 @@
</template>
<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>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 8090efa5..c57d3409 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -1,11 +1,7 @@
<template>
<div>
<div v-if="user.id" class="user-profile panel panel-default">
- <user-card-content
- :user="user"
- :switcher="true"
- :selected="timeline.viewing"
- />
+ <UserCardContent :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
<tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
<Timeline
:label="$t('user_card.statuses')"
@@ -64,11 +60,6 @@
flex: 2;
flex-basis: 500px;
- .profile-panel-background .panel-heading {
- background: transparent;
- flex-direction: column;
- align-items: stretch;
- }
.userlist-placeholder {
display: flex;
justify-content: center;
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 11:47:38 +0000