Merge pull request #3283 from pixelfed/staging

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

Binary file not shown.

BIN
public/js/profile.js vendored

Binary file not shown.

BIN
public/js/status.js vendored

Binary file not shown.

Binary file not shown.

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, {

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">

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">

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) {

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';
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'; 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) {

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>

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;

View file

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

View file

@ -12,8 +12,7 @@ body {
} }
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 {
@ -294,6 +293,14 @@ body, button, input, textarea {
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;

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;
}

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;
}

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

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