UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-12-23 13:33:18 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3283 from pixelfed/staging

Browse source 
Staging
This commit is contained in:
daniel 2022-03-02 01:59:53 -07:00 committed by GitHub
commit bfe9df700e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 710 additions and 641 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/js/post-chunk-uopy3w.js vendored
View file

Binary file not shown.

BIN
public/js/profile.js vendored
View file

Binary file not shown.

BIN
public/js/status.js vendored
View file

Binary file not shown.

BIN
public/mix-manifest.json
View file

Binary file not shown.

71
resources/assets/js/components/CollectionComponent.vue
View file

@ -67,8 +67,37 @@
</select> </select>
</div> </div>
<div class="d-flex justify-content-between align-items-center pt-3"> <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> <a
<button type="button" class="btn btn-primary btn-sm py-1 font-weight-bold px-3 float-right" @click.prevent="updateCollection">Save</button> 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> </div>
</form> </form>
</b-modal> </b-modal>
@ -161,6 +190,7 @@ export default {
data() { data() {
return { return {
collection: {},
config: window.App.config, config: window.App.config,
loaded: false, loaded: false,
posts: [], posts: [],
@ -179,14 +209,21 @@ export default {
}, },
beforeMount() { beforeMount() {
this.fetchCurrentUser(); this.fetchCollection();
this.fetchItems();
}, },
mounted() { mounted() {
}, },
methods: { methods: {
fetchCollection() {
axios.get('/api/local/collection/' + this.collectionId)
.then(res => {
this.collection = res.data;
this.fetchCurrentUser();
})
},
fetchCurrentUser() { fetchCurrentUser() {
if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) { if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => { axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
@ -194,9 +231,13 @@ export default {
this.owner = this.currentUser.id == this.profileId; this.owner = this.currentUser.id == this.profileId;
window._sharedData.curUser = res.data; window._sharedData.curUser = res.data;
window.App.util.navatar(); window.App.util.navatar();
this.fetchItems();
}); });
} else {
this.fetchItems();
} }
}, },
fetchItems() { fetchItems() {
axios.get('/api/local/collection/items/' + this.collectionId) axios.get('/api/local/collection/items/' + this.collectionId)
.then(res => { .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() { updateCollection() {
this.$refs.editModal.hide(); this.$refs.editModal.hide();
axios.post('/api/local/collection/' + this.collectionId, { axios.post('/api/local/collection/' + this.collectionId, {
@ -367,4 +428,4 @@ export default {
} }
} }
} }
</script> </script>

6
resources/assets/js/components/ComposeClassic.vue
View file

@ -61,7 +61,7 @@
</b-carousel-slide> </b-carousel-slide>
</b-carousel> </b-carousel>
</div> </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"> <ul class="nav media-drawer-filters text-center">
<li class="nav-item"> <li class="nav-item">
<div class="p-1 pt-3"> <div class="p-1 pt-3">
@ -78,7 +78,7 @@
</ul> </ul>
</div> </div>
</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 v-if="media[carouselCursor].type == 'Image'" class="col-12">
<div class="form-group"> <div class="form-group">
<input type="text" class="form-control" v-model="media[carouselCursor].alt" placeholder="Optional image description"> <input type="text" class="form-control" v-model="media[carouselCursor].alt" placeholder="Optional image description">
@ -516,4 +516,4 @@ export default {
} }
} }
} }
</script> </script>

4
resources/assets/js/components/ComposeModal.vue
View file

@ -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"> <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> </div>
<hr> <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"> <ul class="nav media-drawer-filters text-center">
<li class="nav-item"> <li class="nav-item">
<div class="p-1 pt-3"> <div class="p-1 pt-3">
@ -395,7 +395,7 @@
<li class="nav-item mx-md-4">&nbsp;</li> <li class="nav-item mx-md-4">&nbsp;</li>
</ul> </ul>
<hr> <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"> <ul class="nav media-drawer-filters text-center">
<li class="nav-item"> <li class="nav-item">
<div class="p-1 pt-3"> <div class="p-1 pt-3">

190
resources/assets/js/components/PostComponent.vue
View file

@ -283,178 +283,6 @@
</div> </div>
</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 v-if="layout == 'poll'" class="container px-0">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
@ -833,19 +661,6 @@
} }
</style> </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> <script>
import VueTribute from 'vue-tribute'; import VueTribute from 'vue-tribute';
@ -1042,11 +857,6 @@ export default {
} }
this.loaded = true; this.loaded = true;
if(this.profileRecent !== false) {
setTimeout(function() {
self.fetchProfilePosts();
}, 3000);
}
setTimeout(function() { setTimeout(function() {
self.fetchState(); self.fetchState();
document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) { document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) {

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

@ -1,12 +1,5 @@
<template> <template>
<div class="w-100 h-100"> <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 v-if="isMobile" class="bg-white p-3 border-bottom">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
<div @click="goBack" class="cursor-pointer"> <div @click="goBack" class="cursor-pointer">
@ -328,97 +321,6 @@
</div> </div>
</div> </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> </div>
<b-modal <b-modal
@ -750,15 +652,7 @@
beforeMount() { beforeMount() {
this.fetchProfile(); this.fetchProfile();
let u = new URLSearchParams(window.location.search); let u = new URLSearchParams(window.location.search);
let forceMetro = localStorage.getItem('pf_metro_ui.exp.forceMetro') == 'true'; this.layout = 'metro';
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.layout == 'metro' && u.has('t')) {
if(this.modes.indexOf(u.get('t')) != -1) { if(this.modes.indexOf(u.get('t')) != -1) {

8
resources/assets/js/components/presenter/MixedAlbumPresenter.vue
View file

@ -14,11 +14,11 @@
> >
<b-carousel-slide v-for="(media, index) in status.media_attachments" :key="media.id + '-media'"> <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"> <source :src="media.url" :type="media.mime">
</video> </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'"> <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> </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"> <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;"> <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"> <source :src="media.url" :type="media.mime">
</video> </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'"> <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> </div>

3
resources/assets/sass/_variables.scss vendored
View file

@ -20,7 +20,8 @@ $custom-control-description-disabled-color: #868e96;
$white: white; $white: white;
$theme-colors: ( $theme-colors: (
'primary': #2c78bf, 'primary': #2c78bf,
'muted' : #697179 'muted' : #697179,
'dark' : #212529
); );
$card-cap-bg: $white; $card-cap-bg: $white;

5
resources/assets/sass/app.scss vendored
View file

@ -23,4 +23,7 @@
@import "moment"; @import "moment";
@import '~animate.css/animate.min.css'; @import 'animate.css';
@import "lib/placeholder-loading";

659
resources/assets/sass/custom.scss vendored
View file

@ -1,647 +1,654 @@
html, body { html, body {
min-height:100vh; min-height:100vh;
} }
body { body {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
} }
#content { #content {
margin-bottom: auto !important; margin-bottom: auto !important;
} }
body, button, input, textarea { body, button, input, textarea {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI", font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
Roboto,Helvetica,Arial,sans-serif;
} }
.navbar-laravel { .navbar-laravel {
background-color: #fff; background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
} }
.bg-pixelfed { .bg-pixelfed {
background:#10c5f8; background:#10c5f8;
background:-webkit-gradient(linear,left top,right bottom,from(#6736dd),to(#10c5f8)); background:-webkit-gradient(linear,left top,right bottom,from(#6736dd),to(#10c5f8));
background:linear-gradient(to bottom right,#6736dd,#10c5f8); background:linear-gradient(to bottom right,#6736dd,#10c5f8);
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.container { .container {
max-width: 935px; max-width: 935px;
} }
} }
.text-dark { .text-dark {
color: #212529 !important; color: #212529 !important;
} }
.settings-nav .active .nav-link{ .settings-nav .active .nav-link{
font-weight: bold; font-weight: bold;
} }
.card-disabled { .card-disabled {
background-color: rgba(245, 245, 245, 1); background-color: rgba(245, 245, 245, 1);
opacity: .4; opacity: .4;
} }
.card-img-top { .card-img-top {
height: auto; height: auto;
} }
.card.status-container .status-photo { .card.status-container .status-photo {
margin: auto !important; margin: auto !important;
} }
@media (min-width: map-get($grid-breakpoints, "md")) { @media (min-width: map-get($grid-breakpoints, "md")) {
.card.status-container .status-comments { .card.status-container .status-comments {
overflow-y:scroll; overflow-y:scroll;
border-bottom:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1);
height: 200px; height: 200px;
} }
} }
.no-caret.dropdown-toggle { .no-caret.dropdown-toggle {
text-decoration: none !important; text-decoration: none !important;
} }
.no-caret.dropdown-toggle::after { .no-caret.dropdown-toggle::after {
display:none; display:none;
} }
.notification-page .profile-link { .notification-page .profile-link {
color: #212529; color: #212529;
font-weight: bold; font-weight: bold;
} }
.notification-page .list-group-item:first-child { .notification-page .list-group-item:first-child {
border-top: none; border-top: none;
} }
.nav-topbar { .nav-topbar {
border-top: 1px solid $gray-300; border-top: 1px solid $gray-300;
} }
.nav-topbar .nav-item { .nav-topbar .nav-item {
margin: -1px 1.5rem 0; margin: -1px 1.5rem 0;
} }
.nav-topbar .nav-link { .nav-topbar .nav-link {
border: 1px solid transparent; border: 1px solid transparent;
color: $gray-300; color: $gray-300;
padding: 0.75rem 0; padding: 0.75rem 0;
} }
.nav-topbar .nav-link:focus, .nav-topbar .nav-link:hover { .nav-topbar .nav-link:focus, .nav-topbar .nav-link:hover {
border-top-color: $gray-300; border-top-color: $gray-300;
} }
.nav-topbar .nav-link.disabled { .nav-topbar .nav-link.disabled {
color: $gray-300; color: $gray-300;
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
} }
.nav-topbar .nav-item.show .nav-link, .nav-topbar .nav-link.active { .nav-topbar .nav-item.show .nav-link, .nav-topbar .nav-link.active {
color: $gray-600; color: $gray-600;
border-top-color: $gray-600; border-top-color: $gray-600;
} }
.nav-topbar .dropdown-menu { .nav-topbar .dropdown-menu {
margin-top:-1px; margin-top:-1px;
} }
.info-overlay { .info-overlay {
position: relative; position: relative;
} }
.info-overlay .info-overlay-text { .info-overlay .info-overlay-text {
display: none; display: none;
position: absolute; position: absolute;
} }
.info-overlay:hover .info-overlay-text { .info-overlay:hover .info-overlay-text {
display: flex; display: flex;
} }
@media (max-width: map-get($grid-breakpoints, "sm")) { @media (max-width: map-get($grid-breakpoints, "sm")) {
.info-overlay:hover .info-overlay-text h5 { .info-overlay:hover .info-overlay-text h5 {
font-size: 12px; font-size: 12px;
} }
} }
.info-overlay-text { .info-overlay-text {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
} }
.info-overlay-text-label { .info-overlay-text-label {
display: flex; display: flex;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
h5 { h5 {
z-index: 2; z-index: 2;
} }
} }
.info-overlay:hover .info-overlay-text-label { .info-overlay:hover .info-overlay-text-label {
display: none; display: none;
} }
.font-weight-lighter { .font-weight-lighter {
font-weight: 300 !important font-weight: 300 !important
} }
.font-weight-ultralight { .font-weight-ultralight {
font-weight: 200 !important; font-weight: 200 !important;
} }
.square { .square {
position: relative; position: relative;
width: 100%; width: 100%;
} }
.square::after { .square::after {
content: ""; content: "";
display: block; display: block;
padding-bottom: 100%; padding-bottom: 100%;
} }
.square-content { .square-content {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: 50%; background-position: 50%;
} }
@media (max-width: map-get($grid-breakpoints, "md")) { @media (max-width: map-get($grid-breakpoints, "md")) {
.border-md-left-0 { .border-md-left-0 {
border-left:0!important border-left:0!important
} }
} }
@media (max-width: map-get($grid-breakpoints, "md")) { @media (max-width: map-get($grid-breakpoints, "md")) {
.border-md-left-0 { .border-md-left-0 {
border-left:0!important border-left:0!important
} }
.card.status-container .status-comments { .card.status-container .status-comments {
border-top:1px solid rgba(0,0,0,.1); border-top:1px solid rgba(0,0,0,.1);
} }
.sticky-md-bottom { .sticky-md-bottom {
position:-webkit-sticky; position:-webkit-sticky;
position:sticky; position:sticky;
bottom:0; bottom:0;
z-index:1020 z-index:1020
} }
} }
@media (max-width: map-get($grid-breakpoints, "sm")) { @media (max-width: map-get($grid-breakpoints, "sm")) {
.card-md-border-0 { .card-md-border-0 {
border-width: 0!important; border-width: 0!important;
border-radius: 0!important; border-radius: 0!important;
} }
.card-md-rounded-0 { .card-md-rounded-0 {
border-width: 1px 0; border-width: 1px 0;
border-radius:0 !important; border-radius:0 !important;
} }
} }
@keyframes loading-bar { @keyframes loading-bar {
from { background-position: 0 0; } from { background-position: 0 0; }
to { background-position: 100vw 0; } to { background-position: 100vw 0; }
} }
.loading-page { .loading-page {
background-image: linear-gradient(to right, #6736dd, #10c5f8, #10c5f8, #6736dd); background-image: linear-gradient(to right, #6736dd, #10c5f8, #10c5f8, #6736dd);
width: 100vw; width: 100vw;
height: .25rem; height: .25rem;
animation: loading-bar 3s linear infinite; animation: loading-bar 3s linear infinite;
} }
.liked { .liked {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.liked::after { .liked::after {
content: "\F0a3"; content: "\F0a3";
color: transparent; color: transparent;
animation: liking 1.5s; animation: liking 1.5s;
position: absolute; position: absolute;
z-index: -1; z-index: -1;
left: 50%; left: 50%;
top: 0; top: 0;
} }
@keyframes liking { @keyframes liking {
0% { 0% {
-webkit-transform:rotate(0deg); -webkit-transform:rotate(0deg);
transform:rotate(0deg); transform:rotate(0deg);
font-size:0; font-size:0;
top: .25rem; top: .25rem;
color: #ebf70e; color: #ebf70e;
} }
75% { 75% {
-webkit-transform:rotate(1turn); -webkit-transform:rotate(1turn);
transform:rotate(1turn); transform:rotate(1turn);
top: -0.55rem; top: -0.55rem;
font-size: 2.8rem; font-size: 2.8rem;
opacity:1; opacity:1;
left: -0.55rem; left: -0.55rem;
} }
100% { 100% {
transform:rotate(1turn); transform:rotate(1turn);
top: 2.5rem; top: 2.5rem;
font-size:0; font-size:0;
left: 0.9rem left: 0.9rem
} }
} }
.max-hide-overflow { .max-hide-overflow {
max-height: 500px; max-height: 500px;
overflow-y: hidden; overflow-y: hidden;
} }
@media (min-width: map-get($grid-breakpoints, "xs")) { @media (min-width: map-get($grid-breakpoints, "xs")) {
.max-hide-overflow { .max-hide-overflow {
max-height: 600px!important; max-height: 600px!important;
} }
} }
@media (min-width: map-get($grid-breakpoints, "md")) { @media (min-width: map-get($grid-breakpoints, "md")) {
.max-hide-overflow { .max-hide-overflow {
max-height: 800px!important; max-height: 800px!important;
} }
} }
@media (min-width: map-get($grid-breakpoints, "xl")) { @media (min-width: map-get($grid-breakpoints, "xl")) {
.max-hide-overflow { .max-hide-overflow {
max-height: 1000px!important; max-height: 1000px!important;
} }
} }
.notification-image { .notification-image {
background-size: cover; background-size: cover;
width: 32px; width: 32px;
height: 32px; height: 32px;
background-position: 50%; background-position: 50%;
} }
.status-photo img { .status-photo img {
object-fit: contain; object-fit: contain;
width: 100%; width: 100%;
max-height: calc(100vh - (6rem)); max-height: calc(100vh - (6rem));
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
} }
@keyframes fadeInDown { @keyframes fadeInDown {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateY(-1.25em); transform: translateY(-1.25em);
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
.details-animated[open] { .details-animated[open] {
animation-name: fadeInDown; animation-name: fadeInDown;
animation-duration: 0.5s; animation-duration: 0.5s;
} }
.card { .card {
box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2); box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
border: none; border: none;
.comment-submit { .comment-submit {
display: none; display: none;
position: absolute; position: absolute;
bottom: 12px; bottom: 12px;
right: 20px; right: 20px;
width: 60px; width: 60px;
text-align: center; text-align: center;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
} }
} }
.touch .card { .touch .card {
input[name="comment"] { input[name="comment"] {
padding-right: 70px; padding-right: 70px;
} }
.comment-submit { .comment-submit {
display: block; display: block;
} }
} }
.box-shadow { .box-shadow {
box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2); box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
} }
.border-left-primary { .border-left-primary {
border-left: 3px solid $primary; border-left: 3px solid $primary;
} }
.settings-nav .nav-item.active .nav-link { .settings-nav .nav-item.active .nav-link {
font-weight: bold !important; font-weight: bold !important;
} }
details summary::-webkit-details-marker { details summary::-webkit-details-marker {
display: none!important; display: none!important;
} }
.details-animated > summary { .details-animated > summary {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: center; justify-content: center;
background-color: #ECF0F1; background-color: #ECF0F1;
padding-top: 50px; padding-top: 50px;
padding-bottom: 50px; padding-bottom: 50px;
text-align: center; text-align: center;
} }
@media (min-width: 720px) { @media (min-width: 720px) {
.details-animated > summary { .details-animated > summary {
min-height: 600px; min-height: 600px;
} }
} }
.details-animated[open] > summary { .details-animated[open] > summary {
display: none!important; display: none!important;
} }
.profile-avatar img { .profile-avatar img {
object-fit: cover; object-fit: cover;
} }
.tt-menu { .tt-menu {
padding: 0 !important; padding: 0 !important;
border-radius: 0 0 0.25rem 0.25rem !important; border-radius: 0 0 0.25rem 0.25rem !important;
} }
.tt-dataset .alert { .tt-dataset .alert {
border: 0 !important; border: 0 !important;
border-radius: 0 !important; border-radius: 0 !important;
} }
.input-elevated { .input-elevated {
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
border: none; border: none;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
border-radius: 5px; border-radius: 5px;
padding: .5em 1em .5em .5em; padding: .5em 1em .5em .5em;
} }
.input-elevated::placeholder { .input-elevated::placeholder {
color: #838D99; color: #838D99;
} }
.input-elevated:focus { .input-elevated:focus {
outline: none; outline: none;
box-shadow: 0 4px 10px 0 rgba(0,0,0,0.16); box-shadow: 0 4px 10px 0 rgba(0,0,0,0.16);
} }
.icon-wrapper { .icon-wrapper {
display: inline-flex; display: inline-flex;
padding: 14px; padding: 14px;
border-radius: 50%; border-radius: 50%;
background: #10c5f8; background: #10c5f8;
background: -webkit-gradient(linear,left top,right bottom,from(#6736dd),to(#10c5f8)); background: -webkit-gradient(linear,left top,right bottom,from(#6736dd),to(#10c5f8));
background: linear-gradient(to bottom right,#6736dd,#10c5f8); background: linear-gradient(to bottom right,#6736dd,#10c5f8);
} }
.border-left-blue { .border-left-blue {
border-left: 3px solid #10c5f8; border-left: 3px solid #10c5f8;
} }
.b-dropdown { .b-dropdown {
padding:0 !important; padding:0 !important;
} }
.b-dropdown > button { .b-dropdown > button {
padding:0 !important; padding:0 !important;
} }
.lds-ring { .lds-ring {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 64px; width: 64px;
height: 64px; height: 64px;
} }
.lds-ring div { .lds-ring div {
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
position: absolute; position: absolute;
width: 51px; width: 51px;
height: 51px; height: 51px;
margin: 6px; margin: 6px;
border: 6px solid #6c757d; border: 6px solid #6c757d;
border-radius: 50%; border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #6c757d transparent transparent transparent; border-color: #6c757d transparent transparent transparent;
} }
.lds-ring div:nth-child(1) { .lds-ring div:nth-child(1) {
animation-delay: -0.45s; animation-delay: -0.45s;
} }
.lds-ring div:nth-child(2) { .lds-ring div:nth-child(2) {
animation-delay: -0.3s; animation-delay: -0.3s;
} }
.lds-ring div:nth-child(3) { .lds-ring div:nth-child(3) {
animation-delay: -0.15s; animation-delay: -0.15s;
} }
@keyframes lds-ring { @keyframes lds-ring {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.navbar .nav-notification.dropdown-toggle::after { .navbar .nav-notification.dropdown-toggle::after {
display: none; display: none;
} }
.navbar .dropdown .nav-notification-dropdown { .navbar .dropdown .nav-notification-dropdown {
width:500px; width:500px;
max-height: 300px; max-height: 300px;
overflow-y: scroll; overflow-y: scroll;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
.nav-notification-dropdown .loader { .nav-notification-dropdown .loader {
padding-top: 5rem; padding-top: 5rem;
padding-bottom: 5rem; padding-bottom: 5rem;
} }
.timeline-sidenav.nav-pills .nav-link { .timeline-sidenav.nav-pills .nav-link {
color: #6c757d; color: #6c757d;
} }
.timeline-sidenav.nav-pills .nav-link:hover { .timeline-sidenav.nav-pills .nav-link:hover {
background: rgba(0,0,0,0.04); background: rgba(0,0,0,0.04);
} }
.timeline-sidenav.nav-pills .nav-link.active, .timeline-sidenav.nav-pills .nav-link.active,
.timeline-sidenav.nav-pills .show > .nav-link { .timeline-sidenav.nav-pills .show > .nav-link {
color: #08d; color: #08d;
background: transparent; background: transparent;
border: 1px solid #08d; border: 1px solid #08d;
} }
.messages-page .bg-primary.text-white a { .messages-page .bg-primary.text-white a {
color: #fff; color: #fff;
} }
.notification-tooltip .tooltip-inner { .notification-tooltip .tooltip-inner {
font-weight: bold; font-weight: bold;
} }
#previewAvatar { #previewAvatar {
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
} }
.img-thumbnail { .img-thumbnail {
box-sizing: content-box; box-sizing: content-box;
} }
.media-drawer-filters img { .media-drawer-filters img {
object-fit: contain; object-fit: contain;
} }
.reply-container { .reply-container {
.post-thumbnail { .post-thumbnail {
object-fit: cover; object-fit: cover;
} }
} }
#l-modal .modal-body, #l-modal .modal-body,
#s-modal .modal-body { #s-modal .modal-body {
height: 60vh; height: 60vh;
overflow-y: scroll; overflow-y: scroll;
} }
#l-modal .modal-content, #l-modal .modal-content,
#s-modal .modal-content { #s-modal .modal-content {
border-radius: 0; border-radius: 0;
} }
.text-lighter { .text-lighter {
color:#B8C2CC !important; color:#B8C2CC !important;
} }
.btn-outline-lighter { .btn-outline-lighter {
color: #B8C2CC !important; color: #B8C2CC !important;
border-color: #B8C2CC !important; border-color: #B8C2CC !important;
} }
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }
.tooltip-notification .tooltip-inner { .tooltip-notification .tooltip-inner {
max-width: 200px; max-width: 200px;
padding: 3px 8px; padding: 3px 8px;
color: #fff; color: #fff;
text-align: center; text-align: center;
/*background-color: #dc3545;*/ /*background-color: #dc3545;*/
border-radius: .25rem; border-radius: .25rem;
} }
.tooltip-notification .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before { .tooltip-notification .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
/*border-top-color: #dc3545; */ /*border-top-color: #dc3545; */
} }
.carousel-control-prev-icon, .carousel-control-next-icon { .carousel-control-prev-icon, .carousel-control-next-icon {
filter: drop-shadow(0px 0px 1px black); filter: drop-shadow(0px 0px 1px black);
} }
.VueCarousel:focus, .VueCarousel:focus,
.VueCarousel-navigation-button:focus, .VueCarousel-navigation-button:focus,
.VueCarousel-dot:focus, .VueCarousel-dot:focus,
.VueCarousel-dot--active:focus { .VueCarousel-dot--active:focus {
outline: 0px !important; outline: 0px !important;
} }
.status-content > p:first-child { .status-content > p:first-child {
display: inline; display: inline;
} }
.follow-modal { .follow-modal {
max-width: 400px !important; max-width: 400px !important;
} }
.square-content { .square-content {
img { img {
object-fit: cover !important; object-fit: cover !important;
} }
} }
.square .square-content { .square .square-content {
canvas { canvas {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.tribute-container { .tribute-container {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
height: auto; height: auto;
max-height: 300px; max-height: 300px;
min-width: 120px; min-width: 120px;
max-width: 500px; max-width: 500px;
overflow: auto; overflow: auto;
display: block; display: block;
z-index: 999999; z-index: 999999;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 4px rgba(#000, 0.13); box-shadow: 0 1px 4px rgba(#000, 0.13);
ul { ul {
margin: 0; margin: 0;
margin-top: 2px; margin-top: 2px;
padding: 0; padding: 0;
list-style: none; list-style: none;
background: #fff; background: #fff;
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(#000, 0.13); border: 1px solid rgba(#000, 0.13);
background-clip: padding-box; background-clip: padding-box;
overflow: hidden; overflow: hidden;
} }
li { li {
color: #000; color: #000;
padding: 5px 15px; padding: 5px 15px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
overflow-x: hidden !important; overflow-x: hidden !important;
&.highlight, &.highlight,
&:hover { &:hover {
background: #2c78bf; background: #2c78bf;
color: #fff; color: #fff;
} }
&.no-match { &.no-match {
cursor: default; cursor: default;
} }
} }
.menu-highlighted { .menu-highlighted {
font-weight: bold; font-weight: bold;
} }
} }

108
resources/assets/sass/lib/ibmplexsans.scss vendored Normal file
View 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
View 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
View 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;
}

2
resources/views/profile/show.blade.php
View file

@ -7,7 +7,7 @@
</div> </div>
@endif @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) @if($profile->website)
<a class="d-none" href="{{$profile->website}}" rel="me">{{$profile->website}}</a> <a class="d-none" href="{{$profile->website}}" rel="me">{{$profile->website}}</a>
@endif @endif

2
resources/views/status/show.blade.php
View file

@ -7,7 +7,7 @@
</div> </div>
</noscript> </noscript>
<div class="mt-md-4"></div> <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 @endsection