Update Profile.vue component

This commit is contained in:
Daniel Supernault 2019-07-17 20:24:25 -06:00
parent bc51339e0c
commit 14bd847d4e
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7

View file

@ -152,9 +152,9 @@
<li class="nav-item px-3"> <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> <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 pr-3"> <li class="nav-item pr-3">
<a :class="this.mode == 'collections' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('collections')"><i class="fas fa-images fa-lg"></i></a> <a :class="this.mode == 'collections' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('collections')"><i class="fas fa-images fa-lg"></i></a>
</li> --> </li>
<li class="nav-item" v-if="owner"> <li class="nav-item" v-if="owner">
<a :class="this.mode == 'bookmarks' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('bookmarks')"><i class="fas fa-bookmark fa-lg"></i></a> <a :class="this.mode == 'bookmarks' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('bookmarks')"><i class="fas fa-bookmark fa-lg"></i></a>
</li> </li>
@ -189,7 +189,7 @@
</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 px-0 mb-3 timeline"> <div class="col-md-8 col-lg-8 offset-md-2 px-0 timeline">
<div class="card status-card card-md-rounded-0 my-sm-2 my-md-3 my-lg-4" :data-status-id="status.id" v-for="(status, index) in timeline" :key="status.id"> <div class="card status-card card-md-rounded-0 my-sm-2 my-md-3 my-lg-4" :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">
@ -282,6 +282,12 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="['grid','list'].indexOf(mode) != -1 && timeline.length == 0">
<div class="py-5 text-center text-muted">
<p><i class="fas fa-camera-retro fa-2x"></i></p>
<p class="h2 font-weight-light pt-3">No posts yet</p>
</div>
</div>
<div v-if="timeline.length && ['grid','list'].indexOf(mode) != -1"> <div v-if="timeline.length && ['grid','list'].indexOf(mode) != -1">
<infinite-loading @infinite="infiniteTimeline"> <infinite-loading @infinite="infiniteTimeline">
<div slot="no-more"></div> <div slot="no-more"></div>
@ -289,6 +295,7 @@
</infinite-loading> </infinite-loading>
</div> </div>
<div class="row" v-if="mode == 'bookmarks'"> <div class="row" v-if="mode == 'bookmarks'">
<div v-if="bookmarks.length">
<div class="col-4 p-0 p-sm-2 p-md-3 p-xs-1" v-for="(s, index) in bookmarks"> <div class="col-4 p-0 p-sm-2 p-md-3 p-xs-1" v-for="(s, index) in bookmarks">
<a class="card info-overlay card-md-border-0" :href="s.url"> <a class="card info-overlay card-md-border-0" :href="s.url">
<div class="square"> <div class="square">
@ -313,8 +320,18 @@
</a> </a>
</div> </div>
</div> </div>
<div class="row" v-if="mode == 'collections'"> <div v-else class="col-12">
<p class="text-center">Collections here</p> <div class="py-5 text-center text-muted">
<p><i class="fas fa-bookmark fa-2x"></i></p>
<p class="h2 font-weight-light pt-3">You have no saved bookmarks</p>
</div>
</div>
</div>
<div class="col-12" v-if="mode == 'collections'">
<div class="py-5 text-center text-muted">
<p><i class="fas fa-images fa-2x"></i></p>
<p class="h2 font-weight-light pt-3">You have no collections</p>
</div>
</div> </div>
</div> </div>
</div> </div>