chris/pixelfed
1
0
Fork 0
forked from mirror/pixelfed
Code Pull requests Activity

Update Profile.vue component

Browse source
This commit is contained in:
Daniel Supernault 2019-04-02 23:03:16 -06:00
parent 382c00de21
commit eef9e4e5e1
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 68 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
resources/assets/js/components/Profile.vue
View file

@ -8,33 +8,56 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-12 col-md-4 d-flex"> <div class="col-12 col-md-4 d-flex">
<div class="profile-avatar mx-auto"> <div class="profile-avatar mx-md-auto">
<img class="rounded-circle box-shadow" :src="profile.avatar" width="172px" height="172px"> <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> </div>
<div class="col-12 col-md-8 d-flex align-items-center"> <div class="col-12 col-md-8 d-flex align-items-center">
<div class="profile-details"> <div class="profile-details">
<div class="username-bar pb-2 d-flex align-items-center"> <div class="d-none d-md-flex username-bar pb-2 align-items-center">
<span class="font-weight-ultralight h1">{{profile.username}}</span> <span class="font-weight-ultralight h3">{{profile.username}}</span>
<span class="pl-4" v-if="profile.is_admin"> <span class="pl-4" v-if="profile.is_admin">
<span class="btn btn-outline-secondary font-weight-bold py-0">ADMIN</span> <span class="btn btn-outline-secondary font-weight-bold py-0">ADMIN</span>
</span> </span>
<span class="pl-4"> <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>
<span class="pl-4" v-if="owner"> <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>
<span v-if="profile.id != user.id && user.hasOwnProperty('id')"> <span v-if="profile.id != user.id && user.hasOwnProperty('id')">
<span class="pl-4" v-if="relationship.following == true"> <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>
<span class="pl-4" v-if="!relationship.following"> <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>
</span> </span>
</div> </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"> <div class="font-weight-light pr-5">
<a class="text-dark" :href="profile.url"> <a class="text-dark" :href="profile.url">
<span class="font-weight-bold">{{profile.statuses_count}}</span> <span class="font-weight-bold">{{profile.statuses_count}}</span>
@ -54,7 +77,7 @@
</a> </a>
</div> </div>
</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> <span class="font-weight-bold pr-3">{{profile.display_name}}</span>
</p> </p>
<div v-if="profile.note" class="mb-0 lead" v-html="profile.note"></div> <div v-if="profile.note" class="mb-0 lead" v-html="profile.note"></div>
@ -64,22 +87,50 @@
</div> </div>
</div> </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"> <ul class="nav nav-topbar d-flex justify-content-center border-0">
<!-- <li class="nav-item"> <!-- <li class="nav-item">
<a class="nav-link active font-weight-bold text-uppercase" :href="profile.url">Posts</a> <a class="nav-link active font-weight-bold text-uppercase" :href="profile.url">Posts</a>
</li> </li>
--> -->
<li class="nav-item"> <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>
<!-- <li class="nav-item"> <!-- <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> <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> -->
<li class="nav-item"> <li class="nav-item px-3">
<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> <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>
<li class="nav-item" v-if="owner"> <li class="nav-item" v-if="owner">
@ -89,7 +140,7 @@
</div> </div>
<div class="container"> <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="row" v-if="mode == 'grid'">
<div class="col-4 p-0 p-sm-2 p-md-3" v-for="(s, index) in timeline"> <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"> <a class="card info-overlay card-md-border-0" :href="s.url">
@ -116,8 +167,8 @@
</div> </div>
</div> </div>
<div class="row" v-if="mode == 'list'"> <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="col-md-8 col-lg-8 offset-md-2 px-0 mb-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="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"> <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;"> <img v-bind:src="status.account.avatar" width="32px" height="32px" style="border-radius: 32px;">