forked from mirror/pixelfed
Update Profile.vue component
This commit is contained in:
Daniel Supernault
parent
382c00de21
commit
eef9e4e5e1
1 changed files with 68 additions and 17 deletions
|
|
@ -8,33 +8,56 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4 d-flex">
|
||||
<div class="profile-avatar mx-auto">
|
||||
<img class="rounded-circle box-shadow" :src="profile.avatar" width="172px" height="172px">
|
||||
<div class="profile-avatar mx-md-auto">
|
||||
<div class="d-block d-md-none">
|
||||
<div class="row">
|
||||
<div class="col-5">
|
||||
<img class="rounded-circle box-shadow" :src="profile.avatar" width="77px" height="77px">
|
||||
</div>
|
||||
<div class="col-7 pl-2">
|
||||
<p class="font-weight-ultralight h3 mb-0">{{profile.username}}</p>
|
||||
<p v-if="profile.id == user.id && user.hasOwnProperty('id')">
|
||||
<a class="btn btn-outline-dark py-0 px-4 mt-3" href="/settings/home">Edit Profile</a>
|
||||
</p>
|
||||
<div v-if="profile.id != user.id && user.hasOwnProperty('id')">
|
||||
<p class="mt-3 mb-0" v-if="relationship.following == true">
|
||||
<button type="button" class="btn btn-outline-dark font-weight-bold px-4 py-0" v-on:click="followProfile()" data-toggle="tooltip" title="Unfollow">Unfollow</button>
|
||||
</p>
|
||||
<p class="mt-3 mb-0" v-if="!relationship.following">
|
||||
<button type="button" class="btn btn-outline-dark font-weight-bold px-4 py-0" v-on:click="followProfile()" data-toggle="tooltip" title="Follow">Follow</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-none d-md-block">
|
||||
<img class="rounded-circle box-shadow" :src="profile.avatar" width="172px" height="172px">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-8 d-flex align-items-center">
|
||||
<div class="profile-details">
|
||||
<div class="username-bar pb-2 d-flex align-items-center">
|
||||
<span class="font-weight-ultralight h1">{{profile.username}}</span>
|
||||
<div class="d-none d-md-flex username-bar pb-2 align-items-center">
|
||||
<span class="font-weight-ultralight h3">{{profile.username}}</span>
|
||||
<span class="pl-4" v-if="profile.is_admin">
|
||||
<span class="btn btn-outline-secondary font-weight-bold py-0">ADMIN</span>
|
||||
</span>
|
||||
<span class="pl-4">
|
||||
<a :href="'/users/'+profile.username+'.atom'" class="fas fa-rss fa-lg text-muted"></a>
|
||||
<a :href="'/users/'+profile.username+'.atom'" class="fas fa-rss fa-lg text-muted text-decoration-none"></a>
|
||||
</span>
|
||||
<span class="pl-4" v-if="owner">
|
||||
<a class="fas fa-cog fa-lg text-muted" href="/settings/home"></a>
|
||||
<a class="fas fa-cog fa-lg text-muted text-decoration-none" href="/settings/home"></a>
|
||||
</span>
|
||||
<span v-if="profile.id != user.id && user.hasOwnProperty('id')">
|
||||
<span class="pl-4" v-if="relationship.following == true">
|
||||
<button type="button" class="btn btn-outline-secondary font-weight-bold px-4 py-0" v-on:click="followProfile()">Unfollow</button>
|
||||
<button type="button" class="btn btn-outline-secondary font-weight-bold btn-sm" v-on:click="followProfile()" data-toggle="tooltip" title="Unfollow"><i class="fas fa-user-minus"></i></button>
|
||||
</span>
|
||||
<span class="pl-4" v-if="!relationship.following">
|
||||
<button type="button" class="btn btn-primary font-weight-bold px-4 py-0" v-on:click="followProfile()">Follow</button>
|
||||
<button type="button" class="btn btn-primary font-weight-bold btn-sm" v-on:click="followProfile()" data-toggle="tooltip" title="Follow"><i class="fas fa-user-plus"></i></button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="profile-stats pb-3 d-inline-flex lead">
|
||||
<div class="d-none d-md-inline-flex profile-stats pb-3 lead">
|
||||
<div class="font-weight-light pr-5">
|
||||
<a class="text-dark" :href="profile.url">
|
||||
<span class="font-weight-bold">{{profile.statuses_count}}</span>
|
||||
|
|
@ -54,7 +77,7 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="lead mb-0 d-flex align-items-center">
|
||||
<p class="lead mb-0 d-flex align-items-center pt-3">
|
||||
<span class="font-weight-bold pr-3">{{profile.display_name}}</span>
|
||||
</p>
|
||||
<div v-if="profile.note" class="mb-0 lead" v-html="profile.note"></div>
|
||||
|
|
@ -64,22 +87,50 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="d-block d-md-none bg-white my-0 py-2 border-bottom">
|
||||
<ul class="nav d-flex justify-content-center">
|
||||
<li class="nav-item">
|
||||
<div class="font-weight-light">
|
||||
<span class="text-dark text-center">
|
||||
<p class="font-weight-bold mb-0">{{profile.statuses_count}}</p>
|
||||
<p class="text-muted mb-0">Posts</p>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item px-5">
|
||||
<div v-if="profileSettings.followers.count" class="font-weight-light">
|
||||
<a class="text-dark cursor-pointer text-center" v-on:click="followersModal()">
|
||||
<p class="font-weight-bold mb-0">{{profile.followers_count}}</p>
|
||||
<p class="text-muted mb-0">Followers</p>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div v-if="profileSettings.following.count" class="font-weight-light">
|
||||
<a class="text-dark cursor-pointer text-center" v-on:click="followingModal()">
|
||||
<p class="font-weight-bold mb-0">{{profile.following_count}}</p>
|
||||
<p class="text-muted mb-0">Following</p>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<ul class="nav nav-topbar d-flex justify-content-center border-0">
|
||||
<!-- <li class="nav-item">
|
||||
<a class="nav-link active font-weight-bold text-uppercase" :href="profile.url">Posts</a>
|
||||
</li>
|
||||
-->
|
||||
<li class="nav-item">
|
||||
<a :class="this.mode == 'grid' ? 'nav-link font-weight-bold text-uppercase active' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('grid')"><i class="fas fa-th"></i></a>
|
||||
<a :class="this.mode == 'grid' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('grid')"><i class="fas fa-th fa-lg"></i></a>
|
||||
</li>
|
||||
|
||||
<!-- <li class="nav-item">
|
||||
<a :class="this.mode == 'masonry' ? 'nav-link font-weight-bold text-uppercase active' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('masonry')"><i class="fas fa-th-large"></i></a>
|
||||
</li> -->
|
||||
|
||||
<li class="nav-item">
|
||||
<a :class="this.mode == 'list' ? 'nav-link font-weight-bold text-uppercase active' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('list')"><i class="fas fa-th-list"></i></a>
|
||||
<li class="nav-item px-3">
|
||||
<a :class="this.mode == 'list' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('list')"><i class="fas fa-th-list fa-lg"></i></a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item" v-if="owner">
|
||||
|
|
@ -89,7 +140,7 @@
|
|||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="profile-timeline mt-2 mt-md-4">
|
||||
<div class="profile-timeline mt-md-4">
|
||||
<div class="row" v-if="mode == 'grid'">
|
||||
<div class="col-4 p-0 p-sm-2 p-md-3" v-for="(s, index) in timeline">
|
||||
<a class="card info-overlay card-md-border-0" :href="s.url">
|
||||
|
|
@ -116,8 +167,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="mode == 'list'">
|
||||
<div class="col-md-8 col-lg-8 offset-md-2 pt-2 px-0 my-3 timeline">
|
||||
<div class="card mb-4 status-card card-md-rounded-0" :data-status-id="status.id" v-for="(status, index) in timeline" :key="status.id">
|
||||
<div class="col-md-8 col-lg-8 offset-md-2 px-0 mb-3 timeline">
|
||||
<div class="card status-card card-md-rounded-0" :data-status-id="status.id" v-for="(status, index) in timeline" :key="status.id">
|
||||
|
||||
<div class="card-header d-inline-flex align-items-center bg-white">
|
||||
<img v-bind:src="status.account.avatar" width="32px" height="32px" style="border-radius: 32px;">
|
||||
|
|
|
|||
Loading…
Reference in a new issue