YunoHost-Apps/pixelfed_ynh
1
0
Fork 0
mirror of https://github.com/YunoHost-Apps/pixelfed_ynh.git synced 2024-09-03 20:06:04 +02:00
Code Issues Activity Actions

Update Profile.vue component

Browse source
This commit is contained in:
Daniel Supernault 2019-07-12 21:49:05 -06:00
parent 218f215938
commit 5174a11821
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 493 additions and 487 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -144,24 +144,19 @@
</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 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 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 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>
</li> -->
<li class="nav-item" v-if="owner">
<a class="nav-link font-weight-bold text-uppercase" :href="profile.url + '/saved'">Saved</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>
</ul>
</div>
@ -287,19 +282,40 @@
</div>
</div>
</div>
<div class="masonry-grid" v-if="mode == 'masonry'">
<div class="d-inline p-0 p-sm-2 p-md-3 masonry-item" v-for="(status, index) in timeline">
<a class="" v-on:click.prevent="statusModal(status)" :href="status.url">
<img :src="previewUrl(status)" :class="'o-'+masonryOrientation(status)">
</a>
</div>
</div>
<div v-if="timeline.length">
<div v-if="timeline.length && ['grid','list'].indexOf(mode) != -1">
<infinite-loading @infinite="infiniteTimeline">
<div slot="no-more"></div>
<div slot="no-results"></div>
</infinite-loading>
</div>
<div class="row" v-if="mode == '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">
<div class="square">
<span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
<span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
<span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
<div class="square-content" v-bind:style="previewBackground(s)">
</div>
<div class="info-overlay-text">
<h5 class="text-white m-auto font-weight-bold">
<span>
<span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
<span class="d-flex-inline">{{s.favourites_count}}</span>
</span>
<span>
<span class="fas fa-retweet fa-lg p-2 d-flex-inline"></span>
<span class="d-flex-inline">{{s.reblogs_count}}</span>
</span>
</h5>
</div>
</div>
</a>
</div>
</div>
<div class="row" v-if="mode == 'collections'">
<p class="text-center">Collections here</p>
</div>
</div>
</div>
</div>
@ -383,9 +399,6 @@
</div>
</div>
</div>
<!-- <b-modal id="statusModal" ref="statusModalRef" hide-footer hide-header v-if="modalStatus" size="lg" v-on:hide.native="closeModal()" lazy class="border-0">
<post-component v-bind:status-template="modalStatus.pf_type" v-bind:status-id="modalStatus.id" v-bind:status-username="modalStatus.account.username" v-bind:status-url="modalStatus.url" v-bind:status-profile-url="modalStatus.account.url" v-bind:status-avatar="modalStatus.account.avatar"></post-component>
</b-modal> -->
<b-modal ref="followingModal"
id="following-modal"
hide-footer
@ -508,17 +521,6 @@ body-class="px-5">
</b-modal>
</div>
</template>
<!-- <style type="text/css" scoped="">
.modal-body {
padding: 0;
margin: 0;
}
@media (min-width: 992px) {
.modal-lg, .modal-xl {
max-width: 900px;
}
}
</style> -->
<style type="text/css" scoped>
.o-square {
max-width: 320px;
@ -558,7 +560,7 @@ max-width: 900px;
loading: true,
owner: false,
mode: 'grid',
modes: ['grid', 'list', 'masonry'],
modes: ['grid', 'list', 'masonry', 'bookmarks'],
modalStatus: false,
relationship: {},
followers: [],
@ -569,6 +571,10 @@ max-width: 900px;
followingMore: true,
warning: false,
sponsorList: [],
bookmarks: [],
bookmarksPage: 2,
collections: [],
collectionsPage: 2
}
},
beforeMount() {
@ -676,10 +682,10 @@ max-width: 900px;
switchMode(mode) {
this.mode = _.indexOf(this.modes, mode) ? mode : 'grid';
if(this.mode == 'masonry') {
$('.masonry').masonry({
columnWidth: 200,
itemSelector: '.masonry-item'
if(this.mode == 'bookmarks' && this.bookmarks.length == 0) {
axios.get('/api/local/bookmarks')
.then(res => {
this.bookmarks = res.data
});
}
},