mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-09 16:24:51 +00:00
Update components
This commit is contained in:
parent
e71e525ac9
commit
b29b845533
3 changed files with 24 additions and 12 deletions
|
@ -45,7 +45,14 @@
|
|||
</div>
|
||||
<div class="col-12 col-md-8 px-0 mx-0">
|
||||
<div class="postPresenterContainer d-none d-flex justify-content-center align-items-center" style="background: #000;">
|
||||
<div v-if="status.pf_type === 'photo'" class="w-100">
|
||||
<div v-if="status.pf_type === 'text'" class="w-100">
|
||||
<div class="w-100 card-img-top border-bottom rounded-0" style="background-image: url(/storage/textimg/bg_1.jpg);background-size: cover;width: 100%;height: 540px;">
|
||||
<div class="w-100 h-100 d-flex justify-content-center align-items-center">
|
||||
<p class="text-center text-break h3 px-5 font-weight-bold" v-html="status.content"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="status.pf_type === 'photo'" class="w-100">
|
||||
<photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
|
||||
</div>
|
||||
|
||||
|
@ -104,7 +111,7 @@
|
|||
</div>
|
||||
<div class="d-flex flex-md-column flex-column-reverse h-100" style="overflow-y: auto;">
|
||||
<div class="card-body status-comments pt-0">
|
||||
<div class="status-comment">
|
||||
<div v-if="status.pf_type != 'text'" class="status-comment">
|
||||
<div v-if="status.content.length" class="pt-3">
|
||||
<div v-if="showCaption != true">
|
||||
<span class="py-3">
|
||||
|
@ -839,12 +846,13 @@ export default {
|
|||
beforeMount() {
|
||||
let u = new URLSearchParams(window.location.search);
|
||||
let forceMetro = localStorage.getItem('pf_metro_ui.exp.forceMetro') == 'true';
|
||||
if(this.statusTemplate == 'text') {
|
||||
this.layout = 'metro';
|
||||
return;
|
||||
}
|
||||
if(forceMetro == true || u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
|
||||
this.layout = 'metro';
|
||||
}
|
||||
if(u.has('ui') && u.get('ui') == 'moment' && this.layout != 'moment') {
|
||||
this.layout = 'moment';
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
|
|
@ -1,5 +1,12 @@
|
|||
<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">
|
||||
|
@ -679,10 +686,7 @@
|
|||
if(forceMetro == true || u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
|
||||
this.layout = 'metro';
|
||||
}
|
||||
if(u.has('ui') && u.get('ui') == 'moment' && this.layout != 'moment') {
|
||||
Vue.use(VueMasonry);
|
||||
this.layout = 'moment';
|
||||
}
|
||||
|
||||
if(this.layout == 'metro' && u.has('t')) {
|
||||
if(this.modes.indexOf(u.get('t')) != -1) {
|
||||
if(u.get('t') == 'bookmarks') {
|
||||
|
|
|
@ -33,7 +33,7 @@
|
|||
<div class="pb-2">
|
||||
<div class="media align-items-center py-2">
|
||||
<div class="media-body text-truncate">
|
||||
<p class="mb-0 text-truncate text-dark font-weight-bold" data-toggle="tooltip" :title="hashtag.value">
|
||||
<p class="mb-0 text-break text-dark font-weight-bold" data-toggle="tooltip" :title="hashtag.value">
|
||||
<i class="fas fa-map-marker-alt text-lighter mr-2"></i> {{hashtag.value}}
|
||||
</p>
|
||||
</div>
|
||||
|
@ -74,7 +74,7 @@
|
|||
<i class="fas fa-hashtag text-muted"></i>
|
||||
</span>
|
||||
<div class="media-body text-truncate">
|
||||
<p class="mb-0 text-truncate text-dark font-weight-bold" data-toggle="tooltip" :title="hashtag.value">
|
||||
<p class="mb-0 text-break text-dark font-weight-bold" data-toggle="tooltip" :title="hashtag.value">
|
||||
#{{hashtag.value}}
|
||||
</p>
|
||||
<p v-if="hashtag.count > 2" class="mb-0 small font-weight-bold text-muted text-uppercase">
|
||||
|
@ -99,7 +99,7 @@
|
|||
<div class="media align-items-center py-2 pr-3">
|
||||
<img class="mr-3 rounded-circle border" :src="profile.avatar" width="50px" height="50px">
|
||||
<div class="media-body">
|
||||
<p class="mb-0 text-truncate text-dark font-weight-bold" data-toggle="tooltip" :title="profile.value">
|
||||
<p class="mb-0 text-break text-dark font-weight-bold" data-toggle="tooltip" :title="profile.value">
|
||||
{{profile.value}}
|
||||
</p>
|
||||
<p class="mb-0 small font-weight-bold text-muted text-uppercase">
|
||||
|
|
Loading…
Reference in a new issue