mirror of
https://github.com/pixelfed/pixelfed.git
synced 2025-03-04 10:39:08 +00:00
Merge pull request #1162 from pixelfed/frontend-ui-refactor
Frontend ui refactor
This commit is contained in:
daniel
GitHub
commit
f9ad74ea8c
7 changed files with 49 additions and 65 deletions
2
public/js/components.js
vendored
2
public/js/components.js
vendored
File diff suppressed because one or more lines are too long
2
public/js/profile.js
vendored
2
public/js/profile.js
vendored
File diff suppressed because one or more lines are too long
2
public/js/status.js
vendored
2
public/js/status.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -4,12 +4,12 @@
|
|||
"/css/app.css": "/css/app.css?id=cc8780fa2f1c0e8156cc",
|
||||
"/css/appdark.css": "/css/appdark.css?id=c98702344aa5c1af2dda",
|
||||
"/css/landing.css": "/css/landing.css?id=36c1fca7fbdc4cdf5e7c",
|
||||
"/js/components.js": "/js/components.js?id=6697417fd9d6250562c6",
|
||||
"/js/components.js": "/js/components.js?id=7e2c0820d0ca5af5aeaa",
|
||||
"/js/compose.js": "/js/compose.js?id=9436fc6ceea845e5bd62",
|
||||
"/js/developers.js": "/js/developers.js?id=1359f11c7349301903f8",
|
||||
"/js/discover.js": "/js/discover.js?id=75fb12b06ee23fa05186",
|
||||
"/js/profile.js": "/js/profile.js?id=22b0a1974c9458efa4c8",
|
||||
"/js/profile.js": "/js/profile.js?id=acaebf31a3c013751fec",
|
||||
"/js/search.js": "/js/search.js?id=0d3d080dc05f4f49b204",
|
||||
"/js/status.js": "/js/status.js?id=da9f011c3c2d708653a8",
|
||||
"/js/status.js": "/js/status.js?id=0b11c2129b9ebdb0eddf",
|
||||
"/js/timeline.js": "/js/timeline.js?id=f83a9c543e3f2015b8b2"
|
||||
}
|
||||
|
|
|
|||
4
resources/assets/js/components.js
vendored
4
resources/assets/js/components.js
vendored
|
|
@ -20,8 +20,8 @@ pixelfed.readmore = () => {
|
|||
el.readmore({
|
||||
collapsedHeight: 45,
|
||||
heightMargin: 48,
|
||||
moreLink: '<a href="#" class="d-block font-weight-lighter small text-dark text-center">Read more ...</a>',
|
||||
lessLink: '<a href="#" class="d-block font-weight-lighter small text-dark text-center">Hide</a>',
|
||||
moreLink: '<a href="#" class="d-block small text-muted text-center">Read more ...</a>',
|
||||
lessLink: '<a href="#" class="d-block small text-muted text-center">Hide</a>',
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="!loaded" style="height: 80vh;" class="d-flex justify-content-center align-items-center">
|
||||
<img src="/img/pixelfed-icon-grey.svg" class="">
|
||||
</div>
|
||||
<div v-if="loaded && warning" class="bg-white pt-3 border-bottom">
|
||||
<div class="container">
|
||||
<p class="text-center font-weight-bold">You are blocking this account</p>
|
||||
|
|
@ -42,9 +45,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-8 px-0 mx-0">
|
||||
<div class="postPresenterLoader text-center">
|
||||
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
|
||||
</div>
|
||||
<div class="postPresenterContainer d-none d-flex justify-content-center align-items-center">
|
||||
<div v-if="status.pf_type === 'photo'" class="w-100">
|
||||
<photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
|
||||
|
|
@ -213,7 +213,7 @@
|
|||
<div v-if="profileLayout == 'moment'" class="momentui">
|
||||
<div class="bg-dark mt-md-n4">
|
||||
<div class="container">
|
||||
<div class="postPresenterContainer d-none d-flex justify-content-center align-items-center">
|
||||
<div class="postPresenterContainer d-none d-flex justify-content-center align-items-center bg-dark">
|
||||
<div v-if="status.pf_type === 'photo'" class="w-100">
|
||||
<photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
|
||||
</div>
|
||||
|
|
@ -480,30 +480,11 @@ export default {
|
|||
|
||||
mounted() {
|
||||
this.fetchRelationships();
|
||||
let token = $('meta[name="csrf-token"]').attr('content');
|
||||
$('input[name="_token"]').each(function(k, v) {
|
||||
let el = $(v);
|
||||
el.val(token);
|
||||
});
|
||||
},
|
||||
|
||||
updated() {
|
||||
$('.carousel').carousel();
|
||||
|
||||
pixelfed.readmore();
|
||||
|
||||
if(this.reactions) {
|
||||
if(this.reactions.bookmarked == true) {
|
||||
$('.postComponent .far.fa-bookmark').removeClass('far').addClass('fas text-warning');
|
||||
}
|
||||
if(this.reactions.shared == true) {
|
||||
$('.postComponent .far.fa-share-square').addClass('text-primary');
|
||||
}
|
||||
if(this.reactions.liked == true) {
|
||||
$('.postComponent .far.fa-heart').removeClass('far text-dark').addClass('fas text-danger');
|
||||
}
|
||||
}
|
||||
|
||||
window.pixelfed.readmore();
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -542,31 +523,20 @@ export default {
|
|||
self.shares = response.data.shares;
|
||||
self.likesPage = 2;
|
||||
self.sharesPage = 2;
|
||||
//this.buildPresenter();
|
||||
this.showMuteBlock();
|
||||
pixelfed.readmore();
|
||||
if(self.status.comments_disabled == false) {
|
||||
self.showComments = true;
|
||||
this.fetchComments();
|
||||
}
|
||||
$('.postComponent').removeClass('d-none');
|
||||
$('.postPresenterLoader').addClass('d-none');
|
||||
$('.postPresenterContainer').removeClass('d-none');
|
||||
this.loaded = true;
|
||||
$('head title').text(this.status.account.username + ' posted a photo: ' + this.status.favourites_count + ' likes');
|
||||
}).catch(error => {
|
||||
if(!error.response) {
|
||||
$('.postPresenterLoader .lds-ring').attr('style','width:100%').addClass('pt-4 font-weight-bold text-muted').text('An error occurred, cannot fetch media. Please try again later.');
|
||||
} else {
|
||||
switch(error.response.status) {
|
||||
case 401:
|
||||
$('.postPresenterLoader .lds-ring')
|
||||
.attr('style','width:100%')
|
||||
.addClass('pt-4 font-weight-bold text-muted')
|
||||
.text('Please login to view.');
|
||||
break;
|
||||
|
||||
default:
|
||||
$('.postPresenterLoader .lds-ring').attr('style','width:100%').addClass('pt-4 font-weight-bold text-muted').text('An error occurred, cannot fetch media. Please try again later.');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -966,13 +936,7 @@ export default {
|
|||
},
|
||||
|
||||
fetchRelationships() {
|
||||
let loader = this.$loading.show({
|
||||
'opacity': 0,
|
||||
'background-color': '#f5f8fa'
|
||||
});
|
||||
if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == false) {
|
||||
this.loaded = true;
|
||||
loader.hide();
|
||||
this.fetchData();
|
||||
return;
|
||||
} else {
|
||||
|
|
@ -982,20 +946,15 @@ export default {
|
|||
}
|
||||
}).then(res => {
|
||||
if(res.data[0] == null) {
|
||||
this.loaded = true;
|
||||
loader.hide();
|
||||
this.fetchData();
|
||||
return;
|
||||
}
|
||||
this.relationship = res.data[0];
|
||||
if(res.data[0].blocking == true) {
|
||||
this.loaded = true;
|
||||
loader.hide();
|
||||
this.warning = true;
|
||||
return;
|
||||
} else {
|
||||
this.loaded = true;
|
||||
loader.hide();
|
||||
this.fetchData();
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="w-100 h-100">
|
||||
<div v-if="relationship && relationship.blocking && warning" class="bg-white pt-3 border-bottom">
|
||||
<div class="container">
|
||||
<p class="text-center font-weight-bold">You are blocking this account</p>
|
||||
<p class="text-center font-weight-bold">Click <a href="#" class="cursor-pointer" @click.prevent="warning = false;">here</a> to view profile</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="loading" class="d-flex justify-content-center py-5 my-5">
|
||||
<div v-if="loading" style="height: 80vh;" class="d-flex justify-content-center align-items-center">
|
||||
<img src="/img/pixelfed-icon-grey.svg" class="">
|
||||
</div>
|
||||
<div v-if="!loading && !warning">
|
||||
|
|
@ -299,8 +299,35 @@
|
|||
<div class="bg-white border-bottom">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 d-flex justify-content-center">
|
||||
<img class="rounded-circle box-shadow" :src="profile.avatar" width="172px" height="172px" style="margin-top:-90px; border: 5px solid #fff">
|
||||
<div class="col-12 row mx-0">
|
||||
<div class="col-4"></div>
|
||||
<div class="col-4 text-center">
|
||||
<div class="d-block d-md-none">
|
||||
<img class="rounded-circle box-shadow" :src="profile.avatar" width="110px" height="110px" style="margin-top:-60px; border: 5px solid #fff">
|
||||
</div>
|
||||
<div class="d-none d-md-block">
|
||||
<img class="rounded-circle box-shadow" :src="profile.avatar" width="172px" height="172px" style="margin-top:-90px; border: 5px solid #fff">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 text-right mt-2">
|
||||
<span class="d-none d-md-inline-block pl-4">
|
||||
<a :href="'/users/'+profile.username+'.atom'" class="fas fa-rss fa-lg text-muted text-decoration-none"></a>
|
||||
</span>
|
||||
<span class="pl-md-4 pl-sm-2" v-if="owner">
|
||||
<a class="fas fa-cog fa-lg text-muted text-decoration-none" href="/settings/home"></a>
|
||||
</span>
|
||||
<span class="pl-md-4 pl-sm-2" v-if="profile.id != user.id && user.hasOwnProperty('id')">
|
||||
<a class="fas fa-cog fa-lg text-muted text-decoration-none" href="#" @click.prevent="visitorMenu"></a>
|
||||
</span>
|
||||
<span v-if="profile.id != user.id && user.hasOwnProperty('id')">
|
||||
<span class="pl-md-4 pl-sm-2" v-if="relationship.following == true">
|
||||
<button type="button" class="btn btn-outline-secondary font-weight-bold btn-sm" @click.prevent="followProfile()" data-toggle="tooltip" title="Unfollow">Unfollow</button>
|
||||
</span>
|
||||
<span class="pl-md-4 pl-sm-2" v-else>
|
||||
<button type="button" class="btn btn-primary font-weight-bold btn-sm" @click.prevent="followProfile()" data-toggle="tooltip" title="Follow">Follow</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 text-center">
|
||||
|
|
@ -503,6 +530,7 @@ export default {
|
|||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.fetchRelationships();
|
||||
this.fetchProfile();
|
||||
},
|
||||
|
||||
|
|
@ -517,11 +545,10 @@ export default {
|
|||
axios.get('/api/v1/accounts/' + this.profileId).then(res => {
|
||||
this.profile = res.data;
|
||||
});
|
||||
if($('body').hasClass('loggedIn') == true) {
|
||||
if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
|
||||
axios.get('/api/v1/accounts/verify_credentials').then(res => {
|
||||
this.user = res.data;
|
||||
});
|
||||
this.fetchRelationships();
|
||||
}
|
||||
let apiUrl = '/api/v1/accounts/' + this.profileId + '/statuses';
|
||||
axios.get(apiUrl, {
|
||||
|
|
@ -537,8 +564,8 @@ export default {
|
|||
this.min_id = Math.max(...ids);
|
||||
this.max_id = Math.min(...ids);
|
||||
this.modalStatus = _.first(res.data);
|
||||
this.loading = false;
|
||||
this.ownerCheck();
|
||||
this.loading = false;
|
||||
}).catch(err => {
|
||||
swal(
|
||||
'Oops, something went wrong',
|
||||
|
|
@ -724,7 +751,7 @@ export default {
|
|||
},
|
||||
|
||||
fetchRelationships() {
|
||||
if($('body').hasClass('loggedIn') == false) {
|
||||
if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == false) {
|
||||
return;
|
||||
}
|
||||
axios.get('/api/v1/accounts/relationships', {
|
||||
|
|
@ -732,12 +759,10 @@ export default {
|
|||
'id[]': this.profileId
|
||||
}
|
||||
}).then(res => {
|
||||
if(res.length) {
|
||||
this.relationship = res.data[0];
|
||||
if(res.data[0].blocking == true) {
|
||||
this.warning = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue