FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Simplify paddings in profile block

Browse source
This commit is contained in:
silverpill 2022-12-29 18:07:19 +00:00
parent fa7c267f26
commit 2d262009e1
1 changed files with 180 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

356
src/views/Profile.vue
View file

@ -8,188 +8,190 @@
<div class="profile-header"> <div class="profile-header">
<img v-if="profile.header" :src="profile.header"> <img v-if="profile.header" :src="profile.header">
</div> </div>
<div class="avatar-menu-group"> <div class="profile-info-group">
<div class="avatar-group"> <div class="avatar-menu-group">
<avatar :profile="profile"></avatar> <div class="avatar-group">
<div class="badges"> <avatar :profile="profile"></avatar>
<div class="badge" v-if="isFollowedBy()">Follows you</div> <div class="badges">
<div class="badge" v-if="isSubscriptionValid()">Subscription</div> <div class="badge" v-if="isFollowedBy()">Follows you</div>
<div class="badge" v-if="isSubscriber()">Subscriber</div> <div class="badge" v-if="isSubscriptionValid()">Subscription</div>
<div class="badge" v-if="isSubscriber()">Subscriber</div>
</div>
</div>
<div
class="dropdown-menu-wrapper"
v-click-away="hideProfileMenu"
>
<button title="More" @click="toggleProfileMenu()">
<img :src="require('@/assets/feather/more-vertical.svg')">
</button>
<menu v-if="profileMenuVisible" class="dropdown-menu">
<li v-if="!isLocalUser()">
<a
title="Open profile page"
:href="profile.url"
target="_blank"
rel="noreferrer"
@click="hideProfileMenu()"
>
Open profile page
</a>
</li>
<li v-if="isLocalUser()">
<a
:href="feedUrl"
target="_blank"
>
Atom feed
</a>
</li>
<li v-if="canVerifyEthereumAddress()">
<button
title="Link ethereum address"
@click="hideProfileMenu(); onVerifyEthereumAddress()"
>
Link ethereum address
</button>
</li>
<li v-if="isCurrentUser()">
<router-link
title="Link minisign key"
:to="{ name: 'identity-proof' }"
>
Link minisign key
</router-link>
</li>
<li v-if="canVerifyEthereumAddress()">
<button
title="Send signed update"
@click="hideProfileMenu(); onSignActivity()"
>
Send signed update
</button>
</li>
<li v-if="canManageSubscriptions()">
<router-link
title="Manage subscriptions"
:to="{ name: 'subscriptions-settings' }"
>
Manage subscriptions
</router-link>
</li>
<li v-if="canHideReposts()">
<button @click="onFollow(false, undefined)">Hide reposts</button>
</li>
<li v-if="canShowReposts()">
<button @click="onFollow(true, undefined)">Show reposts</button>
</li>
<li v-if="canHideReplies()">
<button @click="onFollow(undefined, false)">Hide replies</button>
</li>
<li v-if="canShowReplies()">
<button @click="onFollow(undefined, true)">Show replies</button>
</li>
</menu>
</div> </div>
</div> </div>
<div <div class="name-buttons-group">
class="dropdown-menu-wrapper" <div class="name-group">
v-click-away="hideProfileMenu" <div class="display-name">{{ profile.getDisplayName() }}</div>
> <div class="actor-address">@{{ actorAddress }}</div>
<button title="More" @click="toggleProfileMenu()"> </div>
<img :src="require('@/assets/feather/more-vertical.svg')"> <div class="buttons">
</button> <router-link
<menu v-if="profileMenuVisible" class="dropdown-menu"> v-if="isCurrentUser()"
<li v-if="!isLocalUser()"> class="edit-profile btn"
:to="{ name: 'settings-profile' }"
>
Edit profile
</router-link>
<button v-if="canFollow()" class="follow btn" @click="onFollow()">
<span>Follow</span>
<img
v-if="profile.locked"
title="Manually approves followers"
:src="require('@/assets/forkawesome/lock.svg')"
>
</button>
<button v-if="canUnfollow()" class="unfollow btn" @click="onUnfollow()">
<template v-if="isFollowRequestPending()">Cancel follow request</template>
<template v-else>Unfollow</template>
</button>
<template v-if="canSubscribe()">
<a <a
title="Open profile page" v-if="typeof profile.getSubscriptionPageLocation() === 'string'"
:href="profile.url" class="btn"
title="Pay for subscription"
:href="profile.getSubscriptionPageLocation() as string"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
@click="hideProfileMenu()"
> >
Open profile page Subscribe
</a> </a>
</li>
<li v-if="isLocalUser()">
<a
:href="feedUrl"
target="_blank"
>
Atom feed
</a>
</li>
<li v-if="canVerifyEthereumAddress()">
<button
title="Link ethereum address"
@click="hideProfileMenu(); onVerifyEthereumAddress()"
>
Link ethereum address
</button>
</li>
<li v-if="isCurrentUser()">
<router-link <router-link
title="Link minisign key" v-else-if="profile.getSubscriptionPageLocation() !== null"
:to="{ name: 'identity-proof' }" class="btn"
title="Pay for subscription"
:to="profile.getSubscriptionPageLocation()"
> >
Link minisign key Subscribe
</router-link> </router-link>
</li> </template>
<li v-if="canVerifyEthereumAddress()">
<button
title="Send signed update"
@click="hideProfileMenu(); onSignActivity()"
>
Send signed update
</button>
</li>
<li v-if="canManageSubscriptions()">
<router-link
title="Manage subscriptions"
:to="{ name: 'subscriptions-settings' }"
>
Manage subscriptions
</router-link>
</li>
<li v-if="canHideReposts()">
<button @click="onFollow(false, undefined)">Hide reposts</button>
</li>
<li v-if="canShowReposts()">
<button @click="onFollow(true, undefined)">Show reposts</button>
</li>
<li v-if="canHideReplies()">
<button @click="onFollow(undefined, false)">Hide replies</button>
</li>
<li v-if="canShowReplies()">
<button @click="onFollow(undefined, true)">Show replies</button>
</li>
</menu>
</div>
</div>
<div class="name-buttons-group">
<div class="name-group">
<div class="display-name">{{ profile.getDisplayName() }}</div>
<div class="actor-address">@{{ actorAddress }}</div>
</div>
<div class="buttons">
<router-link
v-if="isCurrentUser()"
class="edit-profile btn"
:to="{ name: 'settings-profile' }"
>
Edit profile
</router-link>
<button v-if="canFollow()" class="follow btn" @click="onFollow()">
<span>Follow</span>
<img
v-if="profile.locked"
title="Manually approves followers"
:src="require('@/assets/forkawesome/lock.svg')"
>
</button>
<button v-if="canUnfollow()" class="unfollow btn" @click="onUnfollow()">
<template v-if="isFollowRequestPending()">Cancel follow request</template>
<template v-else>Unfollow</template>
</button>
<template v-if="canSubscribe()">
<a
v-if="typeof profile.getSubscriptionPageLocation() === 'string'"
class="btn"
title="Pay for subscription"
:href="profile.getSubscriptionPageLocation() as string"
target="_blank"
rel="noreferrer"
>
Subscribe
</a>
<router-link
v-else-if="profile.getSubscriptionPageLocation() !== null"
class="btn"
title="Pay for subscription"
:to="profile.getSubscriptionPageLocation()"
>
Subscribe
</router-link>
</template>
</div>
</div>
<div class="bio" v-html="profile.note"></div>
<div class="extra-fields" v-if="fields.length > 0">
<div
v-for="field in fields"
class="field"
:class="{ verified: field.verified_at }"
:key="field.name"
>
<div class="name" :title="field.name">{{ field.name }}</div>
<div class="value" v-html="field.value"></div>
<div class="verified-icon" v-if="field.verified_at">
<img
:src="require('@/assets/forkawesome/check.svg')"
title="Verified"
>
</div> </div>
</div> </div>
</div> <div class="bio" v-html="profile.note"></div>
<div class="stats"> <div class="extra-fields" v-if="fields.length > 0">
<component <div
class="stats-item" v-for="field in fields"
:is="isCurrentUser() ? 'a' : 'span'" class="field"
@click="isCurrentUser() && switchTab('posts')" :class="{ verified: field.verified_at }"
> :key="field.name"
<span class="value">{{ profile.statuses_count }}</span> >
<span class="label">posts</span> <div class="name" :title="field.name">{{ field.name }}</div>
</component> <div class="value" v-html="field.value"></div>
<component <div class="verified-icon" v-if="field.verified_at">
class="stats-item" <img
:is="isCurrentUser() ? 'a' : 'span'" :src="require('@/assets/forkawesome/check.svg')"
@click="isCurrentUser() && switchTab('followers')" title="Verified"
> >
<span class="value">{{ profile.followers_count }}</span> </div>
<span class="label">followers</span> </div>
</component> </div>
<component <div class="stats">
class="stats-item" <component
:is="isCurrentUser() ? 'a' : 'span'" class="stats-item"
@click="isCurrentUser() && switchTab('following')" :is="isCurrentUser() ? 'a' : 'span'"
> @click="isCurrentUser() && switchTab('posts')"
<span class="value">{{ profile.following_count }}</span> >
<span class="label">following</span> <span class="value">{{ profile.statuses_count }}</span>
</component> <span class="label">posts</span>
<component </component>
class="stats-item" <component
v-if="isSubscriptionsFeatureEnabled()" class="stats-item"
:is="isCurrentUser() ? 'a' : 'span'" :is="isCurrentUser() ? 'a' : 'span'"
@click="isCurrentUser() && switchTab('subscribers')" @click="isCurrentUser() && switchTab('followers')"
> >
<span class="value">{{ profile.subscribers_count }}</span> <span class="value">{{ profile.followers_count }}</span>
<span class="label">subscribers</span> <span class="label">followers</span>
</component> </component>
<component
class="stats-item"
:is="isCurrentUser() ? 'a' : 'span'"
@click="isCurrentUser() && switchTab('following')"
>
<span class="value">{{ profile.following_count }}</span>
<span class="label">following</span>
</component>
<component
class="stats-item"
v-if="isSubscriptionsFeatureEnabled()"
:is="isCurrentUser() ? 'a' : 'span'"
@click="isCurrentUser() && switchTab('subscribers')"
>
<span class="value">{{ profile.subscribers_count }}</span>
<span class="label">subscribers</span>
</component>
</div>
</div> </div>
</div> </div>
<div class="tab-bar" v-if="profile"> <div class="tab-bar" v-if="profile">
@ -615,11 +617,17 @@ $avatar-size: 170px;
} }
} }
.profile-info-group {
display: flex;
flex-direction: column;
gap: $block-inner-padding;
padding: $block-inner-padding;
}
.avatar-menu-group { .avatar-menu-group {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: $block-inner-padding; gap: $block-inner-padding;
padding: $block-inner-padding;
.avatar-group { .avatar-group {
align-items: flex-start; align-items: flex-start;
@ -676,7 +684,6 @@ $avatar-size: 170px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: $block-inner-padding; gap: $block-inner-padding;
padding: 0 $block-inner-padding $block-inner-padding;
.name-group { .name-group {
flex-grow: 1; flex-grow: 1;
@ -724,7 +731,6 @@ $avatar-size: 170px;
} }
.bio { .bio {
padding: 0 $block-inner-padding $block-inner-padding;
white-space: pre-line; white-space: pre-line;
word-wrap: break-word; word-wrap: break-word;
@ -735,13 +741,12 @@ $avatar-size: 170px;
.extra-fields { .extra-fields {
border-bottom: 1px solid $separator-color; border-bottom: 1px solid $separator-color;
margin-bottom: $block-inner-padding;
.field { .field {
border-top: 1px solid $separator-color; border-top: 1px solid $separator-color;
display: flex; display: flex;
gap: calc($block-inner-padding / 2); gap: calc($block-inner-padding / 2);
padding: calc($block-inner-padding / 2) $block-inner-padding; padding: calc($block-inner-padding / 2) 0;
.name { .name {
font-weight: bold; font-weight: bold;
@ -777,7 +782,6 @@ $avatar-size: 170px;
flex-wrap: wrap; flex-wrap: wrap;
font-weight: bold; font-weight: bold;
gap: $block-inner-padding 30px; gap: $block-inner-padding 30px;
padding: 0 $block-inner-padding $block-inner-padding;
text-align: center; text-align: center;
.stats-item { .stats-item {