UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-11-10 00:34:50 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update PostComponent.vue

Browse source
This commit is contained in:
Daniel Supernault 2018-12-09 15:34:05 -07:00
parent a8937abe8a
commit d4b5612dee
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 26 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,12 +4,26 @@
max-height: 70vh; max-height: 70vh;
overflow-y: scroll; overflow-y: scroll;
} }
.postPresenterContainer {
background: #000;
}
.status-comments,
.reactions,
.col-md-4 {
background: #fff;
}
.postPresenterContainer {
min-height: 600px;
}
</style> </style>
<template> <template>
<div class="postComponent d-none"> <div class="postComponent d-none">
<div class="container px-0 mt-md-4"> <div class="container px-0 mt-md-4">
<div class="card card-md-rounded-0 status-container orientation-unknown"> <div class="card card-md-rounded-0 status-container orientation-unknown">
<div class="row mx-0"> <div class="row px-0 mx-0">
<div class="d-flex d-md-none align-items-center justify-content-between card-header bg-white w-100"> <div class="d-flex d-md-none align-items-center justify-content-between card-header bg-white w-100">
<a :href="statusProfileUrl" class="d-flex align-items-center status-username text-truncate" data-toggle="tooltip" data-placement="bottom" :title="statusUsername"> <a :href="statusProfileUrl" class="d-flex align-items-center status-username text-truncate" data-toggle="tooltip" data-placement="bottom" :title="statusUsername">
<div class="status-avatar mr-2"> <div class="status-avatar mr-2">
@ -40,7 +54,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 col-md-8 status-photo px-0"> <div class="col-12 col-md-8 status-photo px-0 mx-0">
<div class="postPresenterLoader text-center"> <div class="postPresenterLoader text-center">
<div class="lds-ring"><div></div><div></div><div></div><div></div></div> <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div> </div>
@ -204,14 +218,17 @@ pixelfed.presenter = {
.removeClass('orientation-unknown') .removeClass('orientation-unknown')
.addClass('orientation-' + media[0]['orientation']); .addClass('orientation-' + media[0]['orientation']);
let wrapper = $('<div>'); let wrapper = $('<div>');
container.addClass('d-flex align-items-center');
if(media[0]['filter_class']) {
wrapper.addClass(media[0]['filter_class']); wrapper.addClass(media[0]['filter_class']);
}
let el = $('<img>'); let el = $('<img>');
el.attr('src', media[0]['url']); el.attr('src', media[0]['url']);
el.attr('title', media[0]['description']); el.attr('title', media[0]['description']);
wrapper.append(el); wrapper.append(el);
if(status.sensitive == true) { if(status.sensitive == true) {
let spoilerText = status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'; let spoilerText = status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media';
let cw = $('<details>').addClass('details-animated'); let cw = $('<details>').addClass('details-animated w-100');
let summary = $('<summary>'); let summary = $('<summary>');
let text = $('<p>').addClass('mb-0 lead font-weight-bold').text(spoilerText); let text = $('<p>').addClass('mb-0 lead font-weight-bold').text(spoilerText);
let direction = $('<p>').addClass('font-weight-light').text('(click to show)'); let direction = $('<p>').addClass('font-weight-light').text('(click to show)');
@ -225,7 +242,7 @@ pixelfed.presenter = {
video: function(container, media, status) { video: function(container, media, status) {
let wrapper = $('<div>'); let wrapper = $('<div>');
wrapper.addClass(''); container.addClass('d-flex align-items-center');
let el = $('<video>'); let el = $('<video>');
el.addClass('embed-responsive-item'); el.addClass('embed-responsive-item');
el.attr('controls', ''); el.attr('controls', '');
@ -235,7 +252,7 @@ pixelfed.presenter = {
wrapper.append(el); wrapper.append(el);
if(status.sensitive == true) { if(status.sensitive == true) {
let spoilerText = status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'; let spoilerText = status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media';
let cw = $('<details>').addClass('details-animated'); let cw = $('<details>').addClass('details-animated w-100');
let summary = $('<summary>'); let summary = $('<summary>');
let text = $('<p>').addClass('mb-0 lead font-weight-bold').text(spoilerText); let text = $('<p>').addClass('mb-0 lead font-weight-bold').text(spoilerText);
let direction = $('<p>').addClass('font-weight-light').text('(click to show)'); let direction = $('<p>').addClass('font-weight-light').text('(click to show)');
@ -268,6 +285,7 @@ pixelfed.presenter = {
.addClass('orientation-' + media[0]['orientation']); .addClass('orientation-' + media[0]['orientation']);
let id = 'photo-carousel-wrapper-' + status.id; let id = 'photo-carousel-wrapper-' + status.id;
let wrapper = $('<div>'); let wrapper = $('<div>');
container.addClass('d-flex align-items-center');
wrapper.addClass('carousel slide carousel-fade'); wrapper.addClass('carousel slide carousel-fade');
wrapper.attr('data-ride', 'carousel'); wrapper.attr('data-ride', 'carousel');
wrapper.attr('id', id); wrapper.attr('id', id);
@ -325,7 +343,7 @@ pixelfed.presenter = {
wrapper.append(indicators, inner, prev, next); wrapper.append(indicators, inner, prev, next);
if(status.sensitive == true) { if(status.sensitive == true) {
let spoilerText = status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'; let spoilerText = status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media';
let cw = $('<details>').addClass('details-animated'); let cw = $('<details>').addClass('details-animated w-100');
let summary = $('<summary>'); let summary = $('<summary>');
let text = $('<p>').addClass('mb-0 lead font-weight-bold').text(spoilerText); let text = $('<p>').addClass('mb-0 lead font-weight-bold').text(spoilerText);
let direction = $('<p>').addClass('font-weight-light').text('(click to show)'); let direction = $('<p>').addClass('font-weight-light').text('(click to show)');
@ -387,6 +405,7 @@ export default {
$('head title').text(title); $('head title').text(title);
} }
}, },
methods: { methods: {
authCheck() { authCheck() {
let authed = $('body').hasClass('loggedIn'); let authed = $('body').hasClass('loggedIn');