mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-18 20:41:27 +00:00
Merge pull request #621 from pixelfed/frontend-ui-refactor
Frontend ui refactor
This commit is contained in:
commit
a36089871d
4 changed files with 41 additions and 8 deletions
|
@ -23,7 +23,7 @@ return [
|
||||||
| This value is the version of your PixelFed instance.
|
| This value is the version of your PixelFed instance.
|
||||||
|
|
|
|
||||||
*/
|
*/
|
||||||
'version' => '0.4.2',
|
'version' => '0.4.3',
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|--------------------------------------------------------------------------
|
|--------------------------------------------------------------------------
|
||||||
|
|
BIN
public/js/components.js
vendored
BIN
public/js/components.js
vendored
Binary file not shown.
Binary file not shown.
|
@ -199,7 +199,7 @@ pixelfed.postComponent = {};
|
||||||
|
|
||||||
pixelfed.presenter = {
|
pixelfed.presenter = {
|
||||||
show: {
|
show: {
|
||||||
image: function(container, media) {
|
image: function(container, media, status) {
|
||||||
$('.status-container')
|
$('.status-container')
|
||||||
.removeClass('orientation-unknown')
|
.removeClass('orientation-unknown')
|
||||||
.addClass('orientation-' + media[0]['orientation']);
|
.addClass('orientation-' + media[0]['orientation']);
|
||||||
|
@ -209,10 +209,21 @@ pixelfed.presenter = {
|
||||||
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);
|
||||||
container.append(wrapper);
|
if(status.sensitive == true) {
|
||||||
|
let spoilerText = status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media';
|
||||||
|
let cw = $('<details>').addClass('details-animated');
|
||||||
|
let summary = $('<summary>');
|
||||||
|
let text = $('<p>').addClass('mb-0 lead font-weight-bold').text(spoilerText);
|
||||||
|
let direction = $('<p>').addClass('font-weight-light').text('(click to show)');
|
||||||
|
summary.append(text, direction);
|
||||||
|
cw.append(summary, wrapper);
|
||||||
|
container.append(cw);
|
||||||
|
} else {
|
||||||
|
container.append(wrapper);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
video: function(container, media) {
|
video: function(container, media, status) {
|
||||||
let wrapper = $('<div>');
|
let wrapper = $('<div>');
|
||||||
wrapper.addClass('');
|
wrapper.addClass('');
|
||||||
let el = $('<video>');
|
let el = $('<video>');
|
||||||
|
@ -222,7 +233,18 @@ pixelfed.presenter = {
|
||||||
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);
|
||||||
container.append(wrapper);
|
if(status.sensitive == true) {
|
||||||
|
let spoilerText = status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media';
|
||||||
|
let cw = $('<details>').addClass('details-animated');
|
||||||
|
let summary = $('<summary>');
|
||||||
|
let text = $('<p>').addClass('mb-0 lead font-weight-bold').text(spoilerText);
|
||||||
|
let direction = $('<p>').addClass('font-weight-light').text('(click to show)');
|
||||||
|
summary.append(text, direction);
|
||||||
|
cw.append(summary, wrapper);
|
||||||
|
container.append(cw);
|
||||||
|
} else {
|
||||||
|
container.append(wrapper);
|
||||||
|
}
|
||||||
|
|
||||||
const player = new Plyr(el, {
|
const player = new Plyr(el, {
|
||||||
controls: [
|
controls: [
|
||||||
|
@ -301,7 +323,18 @@ pixelfed.presenter = {
|
||||||
inner.append(carouselItem);
|
inner.append(carouselItem);
|
||||||
}
|
}
|
||||||
wrapper.append(indicators, inner, prev, next);
|
wrapper.append(indicators, inner, prev, next);
|
||||||
container.append(wrapper);
|
if(status.sensitive == true) {
|
||||||
|
let spoilerText = status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media';
|
||||||
|
let cw = $('<details>').addClass('details-animated');
|
||||||
|
let summary = $('<summary>');
|
||||||
|
let text = $('<p>').addClass('mb-0 lead font-weight-bold').text(spoilerText);
|
||||||
|
let direction = $('<p>').addClass('font-weight-light').text('(click to show)');
|
||||||
|
summary.append(text, direction);
|
||||||
|
cw.append(summary, wrapper);
|
||||||
|
container.append(cw);
|
||||||
|
} else {
|
||||||
|
container.append(wrapper);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -495,7 +528,7 @@ export default {
|
||||||
switch(template) {
|
switch(template) {
|
||||||
case 'image':
|
case 'image':
|
||||||
case 'photo':
|
case 'photo':
|
||||||
pixelfed.presenter.show.image(container, media);
|
pixelfed.presenter.show.image(container, media, this.status);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'album':
|
case 'album':
|
||||||
|
@ -504,7 +537,7 @@ export default {
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'video':
|
case 'video':
|
||||||
pixelfed.presenter.show.video(container, media);
|
pixelfed.presenter.show.video(container, media, this.status);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'video:album':
|
case 'video:album':
|
||||||
|
|
Loading…
Reference in a new issue