mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-12-23 13:33:18 +00:00
daniel
GitHub
commit
bfe9df700e
18 changed files with 710 additions and 641 deletions
BIN
public/js/post-chunk-uopy3w.js
vendored
BIN
public/js/post-chunk-uopy3w.js
vendored
Binary file not shown.
BIN
public/js/profile.js
vendored
BIN
public/js/profile.js
vendored
Binary file not shown.
BIN
public/js/status.js
vendored
BIN
public/js/status.js
vendored
Binary file not shown.
Binary file not shown.
|
|
@ -67,8 +67,37 @@
|
|||
</select>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center pt-3">
|
||||
<a class="text-primary font-weight-bold text-decoration-none" href="#" @click.prevent="showEditPhotosModal">Edit Photos</a>
|
||||
<button type="button" class="btn btn-primary btn-sm py-1 font-weight-bold px-3 float-right" @click.prevent="updateCollection">Save</button>
|
||||
<a
|
||||
class="text-primary font-weight-bold text-decoration-none"
|
||||
href="#"
|
||||
@click.prevent="showEditPhotosModal">
|
||||
Edit Photos
|
||||
</a>
|
||||
|
||||
<div v-if="collection.published_at">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm py-1 font-weight-bold px-3 float-right"
|
||||
@click.prevent="updateCollection">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="float-right">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-primary btn-sm py-1 font-weight-bold px-3"
|
||||
@click.prevent="publishCollection">
|
||||
Publish
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm py-1 font-weight-bold px-3"
|
||||
@click.prevent="updateCollection">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</b-modal>
|
||||
|
|
@ -161,6 +190,7 @@ export default {
|
|||
|
||||
data() {
|
||||
return {
|
||||
collection: {},
|
||||
config: window.App.config,
|
||||
loaded: false,
|
||||
posts: [],
|
||||
|
|
@ -179,14 +209,21 @@ export default {
|
|||
},
|
||||
|
||||
beforeMount() {
|
||||
this.fetchCurrentUser();
|
||||
this.fetchItems();
|
||||
this.fetchCollection();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchCollection() {
|
||||
axios.get('/api/local/collection/' + this.collectionId)
|
||||
.then(res => {
|
||||
this.collection = res.data;
|
||||
this.fetchCurrentUser();
|
||||
})
|
||||
},
|
||||
|
||||
fetchCurrentUser() {
|
||||
if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
|
||||
axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
|
||||
|
|
@ -194,9 +231,13 @@ export default {
|
|||
this.owner = this.currentUser.id == this.profileId;
|
||||
window._sharedData.curUser = res.data;
|
||||
window.App.util.navatar();
|
||||
this.fetchItems();
|
||||
});
|
||||
} else {
|
||||
this.fetchItems();
|
||||
}
|
||||
},
|
||||
|
||||
fetchItems() {
|
||||
axios.get('/api/local/collection/items/' + this.collectionId)
|
||||
.then(res => {
|
||||
|
|
@ -296,6 +337,26 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
publishCollection() {
|
||||
if(this.owner == false) {
|
||||
return;
|
||||
}
|
||||
|
||||
let confirmed = window.confirm('Are you sure you want to publish this collection?');
|
||||
if(confirmed) {
|
||||
axios.post('/api/local/collection/' + this.collectionId + '/publish', {
|
||||
title: this.title,
|
||||
description: this.description,
|
||||
visibility: this.visibility
|
||||
})
|
||||
.then(res => {
|
||||
window.location.href = '/';
|
||||
});
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
updateCollection() {
|
||||
this.$refs.editModal.hide();
|
||||
axios.post('/api/local/collection/' + this.collectionId, {
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</b-carousel-slide>
|
||||
</b-carousel>
|
||||
</div>
|
||||
<div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="bg-dark align-items-center">
|
||||
<div v-if="ids.length > 0 && media[carouselCursor].type == 'image'" class="bg-dark align-items-center">
|
||||
<ul class="nav media-drawer-filters text-center">
|
||||
<li class="nav-item">
|
||||
<div class="p-1 pt-3">
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="ids.length > 0 && ['Image', 'Video'].indexOf(media[carouselCursor].type) != -1" class="bg-lighter p-2 row">
|
||||
<div v-if="ids.length > 0 && ['image', 'video'].indexOf(media[carouselCursor].type) != -1" class="bg-lighter p-2 row">
|
||||
<div v-if="media[carouselCursor].type == 'Image'" class="col-12">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" v-model="media[carouselCursor].alt" placeholder="Optional image description">
|
||||
|
|
|
|||
|
|
@ -358,7 +358,7 @@
|
|||
<img :class="'d-block img-fluid w-100 ' + [media[carouselCursor].filter_class?media[carouselCursor].filter_class:'']" :src="media[carouselCursor].url" :alt="media[carouselCursor].description" :title="media[carouselCursor].description">
|
||||
</div>
|
||||
<hr>
|
||||
<div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="align-items-center px-2 pt-2">
|
||||
<div v-if="ids.length > 0 && media[carouselCursor].type == 'image'" class="align-items-center px-2 pt-2">
|
||||
<ul class="nav media-drawer-filters text-center">
|
||||
<li class="nav-item">
|
||||
<div class="p-1 pt-3">
|
||||
|
|
@ -395,7 +395,7 @@
|
|||
<li class="nav-item mx-md-4"> </li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="align-items-center px-2 pt-2">
|
||||
<div v-if="ids.length > 0 && media[carouselCursor].type == 'image'" class="align-items-center px-2 pt-2">
|
||||
<ul class="nav media-drawer-filters text-center">
|
||||
<li class="nav-item">
|
||||
<div class="p-1 pt-3">
|
||||
|
|
|
|||
|
|
@ -283,178 +283,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="layout == 'moment'" class="momentui">
|
||||
<div class="bg-dark mt-md-n4">
|
||||
<div class="container" style="max-width: 700px;">
|
||||
<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" v-on:togglecw="status.sensitive = false"></photo-presenter>
|
||||
</div>
|
||||
|
||||
<div v-else-if="status.pf_type === 'video'" class="w-100">
|
||||
<video-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-presenter>
|
||||
</div>
|
||||
|
||||
<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
|
||||
<photo-album-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-album-presenter>
|
||||
</div>
|
||||
|
||||
<div v-else-if="status.pf_type === 'video:album'" class="w-100">
|
||||
<video-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-album-presenter>
|
||||
</div>
|
||||
|
||||
<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
|
||||
<mixed-album-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></mixed-album-presenter>
|
||||
</div>
|
||||
|
||||
<div v-else class="w-100">
|
||||
<p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<div class="container">
|
||||
<div class="row pb-5">
|
||||
<div class="col-12 col-md-8 py-4">
|
||||
<div class="reactions d-flex align-items-center">
|
||||
<div class="text-center mr-5">
|
||||
<div v-bind:class="[reactions.liked ? 'fas fa-heart text-danger m-0 cursor-pointer' : 'far fa-heart m-0 like-btn cursor-pointer']" title="Like" v-on:click="likeStatus" style="font-size:1.575rem">
|
||||
</div>
|
||||
<div class="like-count font-weight-bold mt-2 rounded border" style="cursor:pointer;" v-on:click="likesModal">
|
||||
|
||||
{{ownerOrAdmin == true ? (status.liked_by.total_count + 1) : 0}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div v-if="status.visibility == 'public'" v-bind:class="[reactions.shared ? 'h3 far fa-share-square m-0 text-primary cursor-pointer' : 'h3 far fa-share-square m-0 share-btn cursor-pointer']" title="Share" v-on:click="shareStatus">
|
||||
</div>
|
||||
<div class="share-count font-weight-bold mt-2 rounded border" v-if="status.visibility == 'public'" style="cursor:pointer;" v-on:click="sharesModal">{{status.reblogs_count || 0}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="status.length && status.content_text.includes('#') || status.content_text.includes('https://') || status.content_text.includes('@') || status.content_text.length > 45" class="media align-items-center mt-3">
|
||||
<div class="media-body">
|
||||
<p class="lead mr-2" v-html="status.content">
|
||||
</p>
|
||||
<p class="lead mb-0">
|
||||
by <a :href="statusProfileUrl">{{statusUsername}}</a>
|
||||
<span v-if="relationship && profile && user && !relationship.following && profile.id != user.id">
|
||||
<span class="px-1 text-lighter">•</span>
|
||||
<a class="font-weight-bold small" href="#">Follow</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<a :href="statusProfileUrl" :title="statusUsername"><img :src="statusAvatar" class="rounded-circle border mr-3" alt="avatar" width="72px" height="72px"></a>
|
||||
</div>
|
||||
<div v-else class="media align-items-center mt-3">
|
||||
<div class="media-body">
|
||||
<h2 class="font-weight-bold mr-2">
|
||||
{{status.content_text.length ? status.content_text : 'Untitled Post'}}
|
||||
</h2>
|
||||
<p class="lead mb-0">
|
||||
by <a :href="statusProfileUrl">{{statusUsername}}</a>
|
||||
<!-- <span class="px-1 text-lighter">•</span>
|
||||
<a class="font-weight-bold small" href="#">Follow</a> -->
|
||||
</p>
|
||||
</div>
|
||||
<a :href="statusProfileUrl" :title="statusUsername"><img :src="statusAvatar" class="rounded-circle border mr-3" alt="avatar" width="72px" height="72px"></a>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<p class="lead">
|
||||
<span v-if="status.place" class="text-truncate">
|
||||
<i class="fas fa-map-marker-alt text-lighter mr-3"></i> {{status.place.name}}, {{status.place.country}}
|
||||
</span>
|
||||
<span v-once class="float-right">
|
||||
<i class="far fa-clock text-lighter mr-3"></i> {{timeAgo(status.created_at)}} ago
|
||||
</span>
|
||||
</p>
|
||||
<!-- <div class="">
|
||||
<p class="lead">
|
||||
<span class="mr-3"><i class="fas fa-camera text-lighter"></i></span>
|
||||
<span>Nikon D850</span>
|
||||
</p>
|
||||
<p class="lead">
|
||||
<span class="mr-3"><i class="fas fa-ruler-horizontal text-lighter"></i></span>
|
||||
<span>200-500mm</span>
|
||||
</p>
|
||||
<p class="lead">
|
||||
<span class="mr-3"><i class="fas fa-stream text-lighter"></i></span>
|
||||
<span>500mm <span class="px-1"></span> ƒ/7.1 <span class="px-1"></span> 1/1600s <span class="px-1"></span> ISO 800</span>
|
||||
</p>
|
||||
</div> -->
|
||||
<div v-if="status.tags" class="pt-4">
|
||||
<p class="lead">
|
||||
<a v-for="(tag, index) in status.tags" class="btn btn-outline-dark mr-1 mb-1" :href="tag.url + '?src=mp'">{{tag.name}}</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 pt-4 pl-md-3">
|
||||
<p class="lead font-weight-bold">Comments</p>
|
||||
<div v-if="user != false" class="moment-comments">
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" rows="3" placeholder="Add a comment ..." v-model="replyText"></textarea>
|
||||
<p class="d-flex justify-content-between align-items-center mt-3">
|
||||
<span class="small text-lighter font-weight-bold">
|
||||
{{replyText.length}}/{{config.uploader.max_caption_length}}
|
||||
</span>
|
||||
<span v-if="replyText.length > 2">
|
||||
<div class="custom-control custom-switch">
|
||||
<input type="checkbox" class="custom-control-input" @click="!!replySensitive" v-model="replySensitive" id="sensitiveReply">
|
||||
<label class="custom-control-label small font-weight-bold text-muted" style="padding-top: 3px" for="sensitiveReply">Add Content Warning</label>
|
||||
</div>
|
||||
</span>
|
||||
<button class="btn btn-sm font-weight-bold btn-outline-primary py-1"
|
||||
v-if="replyText.length > 2" @click="postReply">Post</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment mt-4" style="max-height: 500px; overflow-y: auto;">
|
||||
<div v-for="(reply, index) in results" :key="'tl' + reply.id + '_' + index" class="media mb-3 mt-2">
|
||||
<a :href="reply.account.url" :title="reply.account.username"><img :src="reply.account.avatar" class="rounded-circle border mr-3" alt="avatar" width="32px" height="32px"></a>
|
||||
<div class="media-body">
|
||||
<div class="d-flex justify-content-between">
|
||||
<span>
|
||||
<a class="font-weight-bold text-dark" :href="reply.account.url">{{reply.account.username}}</a>
|
||||
</span>
|
||||
<span class="text-lighter">
|
||||
<span v-if="reply.favourited" class="cursor-pointer mr-2" @click="likeReply(reply)">
|
||||
<i class="fas fa-heart text-danger"></i>
|
||||
</span>
|
||||
<span v-else class="cursor-pointer mr-2" @click="likeReply(reply)">
|
||||
<i class="far fa-heart"></i>
|
||||
</span>
|
||||
<span class="">
|
||||
<post-menu :status="reply" :profile="user" :size="'sm'" :modal="'true'" class="d-inline-block px-2" v-on:deletePost="deleteComment(reply.id, index)"></post-menu>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="reply.sensitive == true">
|
||||
<span class="py-3">
|
||||
<span class="text-break">
|
||||
<span class="font-italic text-muted">This comment may contain sensitive material</span>
|
||||
<span class="badge badge-primary cursor-pointer ml-2 py-1" @click="reply.sensitive = false;">Show</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="read-more" style="overflow-y: hidden;">
|
||||
<p v-html="reply.content" class="mb-0">loading ...</p>
|
||||
</div>
|
||||
<p>
|
||||
<span class="small">
|
||||
<a class="text-lighter text-decoration-none" :href="reply.url">{{timeAgo(reply.created_at)}}</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="layout == 'poll'" class="container px-0">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-6">
|
||||
|
|
@ -833,19 +661,6 @@
|
|||
}
|
||||
|
||||
</style>
|
||||
<style type="text/css" scoped>
|
||||
.momentui .bg-dark {
|
||||
background: #000 !important;
|
||||
}
|
||||
.momentui .carousel.slide,
|
||||
.momentui .carousel-item {
|
||||
background: #000 !important;
|
||||
}
|
||||
.reply-btn[disabled] {
|
||||
opacity: .3;
|
||||
color: #3897f0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import VueTribute from 'vue-tribute';
|
||||
|
|
@ -1042,11 +857,6 @@ export default {
|
|||
}
|
||||
this.loaded = true;
|
||||
|
||||
if(this.profileRecent !== false) {
|
||||
setTimeout(function() {
|
||||
self.fetchProfilePosts();
|
||||
}, 3000);
|
||||
}
|
||||
setTimeout(function() {
|
||||
self.fetchState();
|
||||
document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,5 @@
|
|||
<template>
|
||||
<div class="w-100 h-100">
|
||||
<div v-if="owner && layout == 'moment'">
|
||||
<div class="bg-primary shadow">
|
||||
<p class="text-center text-white mb-0 py-3 font-weight-bold border-bottom border-info">
|
||||
<i class="fas fa-exclamation-triangle fa-lg mr-2"></i> The Moment UI layout has been deprecated and will be removed in a future release.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isMobile" class="bg-white p-3 border-bottom">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div @click="goBack" class="cursor-pointer">
|
||||
|
|
@ -328,97 +321,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="layout == 'moment'" class="mt-3">
|
||||
<div :class="momentBackground()" style="width:100%;min-height:274px;">
|
||||
</div>
|
||||
<div class="bg-white border-bottom">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 row mx-0">
|
||||
<div class="col-4 text-left mt-2">
|
||||
<span v-if="relationship && relationship.followed_by">
|
||||
<span class="bg-light border border-secondary font-weight-bold small py-1 px-2 text-muted rounded">FOLLOWS YOU</span>
|
||||
</span>
|
||||
<span v-if="profile.is_admin">
|
||||
<span class="bg-light border border-danger font-weight-bold small py-1 px-2 text-danger rounded">ADMIN</span>
|
||||
</span>
|
||||
</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()">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()">Follow</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 text-center">
|
||||
<div class="profile-details my-3">
|
||||
<p class="font-weight-ultralight h2 text-center">{{profile.username}}</p>
|
||||
<div v-if="profile.note" class="text-center text-muted p-3" v-html="profile.note"></div>
|
||||
<div class="pb-3 text-muted text-center">
|
||||
<a class="text-lighter" :href="profile.url">
|
||||
<span class="font-weight-bold">{{formatCount(profile.statuses_count)}}</span>
|
||||
Posts
|
||||
</a>
|
||||
<a v-if="profileSettings.followers.count" class="text-lighter cursor-pointer px-3" v-on:click="followersModal()">
|
||||
<span class="font-weight-bold">{{formatCount(profile.followers_count)}}</span>
|
||||
Followers
|
||||
</a>
|
||||
<a v-if="profileSettings.following.count" class="text-lighter cursor-pointer" v-on:click="followingModal()">
|
||||
<span class="font-weight-bold">{{formatCount(profile.following_count)}}</span>
|
||||
Following
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="profile-timeline mt-md-4">
|
||||
<div class="" v-if="mode == 'grid'">
|
||||
<masonry
|
||||
:cols="{default: 3, 700: 2, 400: 1}"
|
||||
:gutter="{default: '5px'}"
|
||||
>
|
||||
<div class="p-1" v-for="(s, index) in timeline">
|
||||
<a :class="[s.sensitive ? 'card info-overlay card-md-border-0' : s.media_attachments[0].filter_class + ' card info-overlay card-md-border-0']" :href="statusUrl(s)">
|
||||
<img :src="previewUrl(s)" class="img-fluid w-100">
|
||||
</a>
|
||||
</div>
|
||||
</masonry>
|
||||
</div>
|
||||
<div v-if="timeline.length">
|
||||
<infinite-loading @infinite="infiniteTimeline">
|
||||
<div slot="no-more"></div>
|
||||
<div slot="no-results"></div>
|
||||
</infinite-loading>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-modal
|
||||
|
|
@ -750,15 +652,7 @@
|
|||
beforeMount() {
|
||||
this.fetchProfile();
|
||||
let u = new URLSearchParams(window.location.search);
|
||||
let forceMetro = localStorage.getItem('pf_metro_ui.exp.forceMetro') == 'true';
|
||||
|
||||
if(u.has('ui') && u.get('ui') == 'moment' && this.layout != 'moment') {
|
||||
this.layout = 'moment';
|
||||
}
|
||||
|
||||
if(forceMetro == true || u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
|
||||
this.layout = 'metro';
|
||||
}
|
||||
|
||||
if(this.layout == 'metro' && u.has('t')) {
|
||||
if(this.modes.indexOf(u.get('t')) != -1) {
|
||||
|
|
|
|||
|
|
@ -14,11 +14,11 @@
|
|||
>
|
||||
<b-carousel-slide v-for="(media, index) in status.media_attachments" :key="media.id + '-media'">
|
||||
|
||||
<video v-if="media.type == 'Video'" slot="img" class="embed-responsive-item" preload="none" controls playsinline loop :alt="media.description" width="100%" height="100%" :poster="media.preview_url">
|
||||
<video v-if="media.type == 'video'" slot="img" class="embed-responsive-item" preload="none" controls playsinline loop :alt="media.description" width="100%" height="100%" :poster="media.preview_url">
|
||||
<source :src="media.url" :type="media.mime">
|
||||
</video>
|
||||
|
||||
<div v-else-if="media.type == 'Image'" slot="img" :title="media.description">
|
||||
<div v-else-if="media.type == 'image'" slot="img" :title="media.description">
|
||||
<img :class="media.filter_class + ' d-block img-fluid w-100'" :src="media.url" :alt="media.description" loading="lazy" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
|
||||
</div>
|
||||
|
||||
|
|
@ -53,11 +53,11 @@
|
|||
<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb" class="p-0 m-0">
|
||||
<slide v-for="(media, index) in status.media_attachments" :key="'px-carousel-'+media.id + '-' + index" class="w-100 h-100 d-block mx-auto text-center" style="background: #000; display: flex;align-items: center;">
|
||||
|
||||
<video v-if="media.type == 'Video'" class="embed-responsive-item" preload="none" controls loop :title="media.description" width="100%" height="100%" :poster="media.preview_url">
|
||||
<video v-if="media.type == 'video'" class="embed-responsive-item" preload="none" controls loop :title="media.description" width="100%" height="100%" :poster="media.preview_url">
|
||||
<source :src="media.url" :type="media.mime">
|
||||
</video>
|
||||
|
||||
<div v-else-if="media.type == 'Image'" :title="media.description">
|
||||
<div v-else-if="media.type == 'image'" :title="media.description">
|
||||
<img :class="media.filter_class + ' img-fluid w-100'" :src="media.url" :alt="media.description" loading="lazy" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
|
||||
</div>
|
||||
|
||||
|
|
|
|||
3
resources/assets/sass/_variables.scss
vendored
3
resources/assets/sass/_variables.scss
vendored
|
|
@ -20,7 +20,8 @@ $custom-control-description-disabled-color: #868e96;
|
|||
$white: white;
|
||||
$theme-colors: (
|
||||
'primary': #2c78bf,
|
||||
'muted' : #697179
|
||||
'muted' : #697179,
|
||||
'dark' : #212529
|
||||
);
|
||||
|
||||
$card-cap-bg: $white;
|
||||
|
|
|
|||
5
resources/assets/sass/app.scss
vendored
5
resources/assets/sass/app.scss
vendored
|
|
@ -23,4 +23,7 @@
|
|||
|
||||
@import "moment";
|
||||
|
||||
@import '~animate.css/animate.min.css';
|
||||
@import 'animate.css';
|
||||
|
||||
@import "lib/placeholder-loading";
|
||||
|
||||
|
|
|
|||
11
resources/assets/sass/custom.scss
vendored
11
resources/assets/sass/custom.scss
vendored
|
|
@ -12,8 +12,7 @@ body {
|
|||
}
|
||||
|
||||
body, button, input, textarea {
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",
|
||||
Roboto,Helvetica,Arial,sans-serif;
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
|
||||
}
|
||||
|
||||
.navbar-laravel {
|
||||
|
|
@ -294,6 +293,14 @@ body, button, input, textarea {
|
|||
max-height: calc(100vh - (6rem));
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .5s;
|
||||
}
|
||||
|
||||
.fade-enter, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
|
|||
108
resources/assets/sass/lib/ibmplexsans.scss
vendored
Normal file
108
resources/assets/sass/lib/ibmplexsans.scss
vendored
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/fonts/zYXgKVElMYYaJe8bpLHnCwDKhdzeFaxOedfTDw.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/fonts/zYXgKVElMYYaJe8bpLHnCwDKhdXeFaxOedfTDw.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/fonts/zYXgKVElMYYaJe8bpLHnCwDKhdLeFaxOedfTDw.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/fonts/zYXgKVElMYYaJe8bpLHnCwDKhd7eFaxOedfTDw.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/fonts/zYXgKVElMYYaJe8bpLHnCwDKhd_eFaxOedfTDw.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/fonts/zYXgKVElMYYaJe8bpLHnCwDKhdHeFaxOedc.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(/fonts/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIxsdP3pBmtF8A.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(/fonts/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIVsdP3pBmtF8A.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(/fonts/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIJsdP3pBmtF8A.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(/fonts/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI5sdP3pBmtF8A.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(/fonts/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI9sdP3pBmtF8A.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(/fonts/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFsdP3pBms.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
136
resources/assets/sass/lib/placeholder-loading.scss
vendored
Normal file
136
resources/assets/sass/lib/placeholder-loading.scss
vendored
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
/**
|
||||
* placeholder-loading v0.5.0
|
||||
* Author: Zalog (https://www.zalog.ro/)
|
||||
* License: MIT
|
||||
**/
|
||||
|
||||
.ph-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 30px;
|
||||
padding: 30px 15px 15px 15px;
|
||||
overflow: hidden;
|
||||
direction: ltr;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.ph-item,
|
||||
.ph-item *,
|
||||
.ph-item ::after,
|
||||
.ph-item ::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ph-item::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
width: 500%;
|
||||
margin-left: -250%;
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
|
||||
-webkit-animation: phAnimation 0.8s linear infinite;
|
||||
animation: phAnimation 0.8s linear infinite;
|
||||
content: " ";
|
||||
pointer-events: none;
|
||||
}
|
||||
.ph-item > * {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-flow: column;
|
||||
margin-bottom: 15px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.ph-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: -7.5px;
|
||||
}
|
||||
.ph-row div {
|
||||
height: 10px;
|
||||
margin-top: 7.5px;
|
||||
background-color: #ced4da;
|
||||
}
|
||||
.ph-row .big, .ph-row.big div {
|
||||
height: 20px;
|
||||
}
|
||||
.ph-row .empty {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
.ph-col-2 {
|
||||
flex: 0 0 16.6666666667%;
|
||||
}
|
||||
|
||||
.ph-col-4 {
|
||||
flex: 0 0 33.3333333333%;
|
||||
}
|
||||
|
||||
.ph-col-6 {
|
||||
flex: 0 0 50%;
|
||||
}
|
||||
|
||||
.ph-col-8 {
|
||||
flex: 0 0 66.6666666667%;
|
||||
}
|
||||
|
||||
.ph-col-10 {
|
||||
flex: 0 0 83.3333333333%;
|
||||
}
|
||||
|
||||
.ph-col-12 {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
[class*=ph-col] {
|
||||
direction: ltr;
|
||||
}
|
||||
[class*=ph-col] > * + .ph-row {
|
||||
margin-top: 0;
|
||||
}
|
||||
[class*=ph-col] > * + * {
|
||||
margin-top: 7.5px;
|
||||
}
|
||||
|
||||
.ph-avatar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 60px;
|
||||
overflow: hidden;
|
||||
background-color: #ced4da;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.ph-avatar::before {
|
||||
display: block;
|
||||
padding-top: 100%;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.ph-picture {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background-color: #ced4da;
|
||||
}
|
||||
|
||||
@-webkit-keyframes phAnimation {
|
||||
0% {
|
||||
transform: translate3d(-30%, 0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(30%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes phAnimation {
|
||||
0% {
|
||||
transform: translate3d(-30%, 0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(30%, 0, 0);
|
||||
}
|
||||
}
|
||||
49
resources/assets/sass/spa.scss
vendored
Normal file
49
resources/assets/sass/spa.scss
vendored
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
@import "lib/ibmplexsans";
|
||||
|
||||
body {
|
||||
background: rgba(243,244,246,1);
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: #3B82F6;
|
||||
}
|
||||
|
||||
.web-wrapper {
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.rounded-px {
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.doc-body {
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sticky-top {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
max-width: 1440px !important;
|
||||
}
|
||||
|
||||
.text-lighter {
|
||||
color: #94a3b8 !important;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
background-color: #3B82F6;
|
||||
}
|
||||
|
||||
.btn-primary.primary {
|
||||
background-color: #3B82F6;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
@endif
|
||||
|
||||
<profile profile-id="{{$profile->id}}" profile-username="{{$profile->username}}" :profile-settings="{{json_encode($settings)}}" profile-layout="{{$profile->profile_layout ?? 'metro'}}"></profile>
|
||||
<profile profile-id="{{$profile->id}}" profile-username="{{$profile->username}}" :profile-settings="{{json_encode($settings)}}" profile-layout="metro"></profile>
|
||||
@if($profile->website)
|
||||
<a class="d-none" href="{{$profile->website}}" rel="me">{{$profile->website}}</a>
|
||||
@endif
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
</noscript>
|
||||
<div class="mt-md-4"></div>
|
||||
<post-component status-template="{{$status->viewType()}}" status-id="{{$status->id}}" status-username="{{$status->profile->username}}" status-url="{{$status->url()}}" status-profile-url="{{$status->profile->url()}}" status-avatar="{{$status->profile->avatarUrl()}}" status-profile-id="{{$status->profile_id}}" profile-layout="{{$status->profile->profile_layout ?? 'metro'}}"></post-component>
|
||||
<post-component status-template="{{$status->viewType()}}" status-id="{{$status->id}}" status-username="{{$status->profile->username}}" status-url="{{$status->url()}}" status-profile-url="{{$status->profile->url()}}" status-avatar="{{$status->profile->avatarUrl()}}" status-profile-id="{{$status->profile_id}}" profile-layout="metro"></post-component>
|
||||
|
||||
|
||||
@endsection
|
||||
|
|
|
|||
Loading…
Reference in a new issue