mirror of https://github.com/pixelfed/pixelfed.git
Merge pull request #1415 from pixelfed/frontend-ui-refactor
Frontend ui refactor
This commit is contained in:
commit
a12fa5bd69
|
@ -325,6 +325,7 @@ class StatusController extends Controller
|
|||
|
||||
if ($changed === true) {
|
||||
$media->save();
|
||||
Cache::forget('status:transformer:media:attachments:'.$media->status_id);
|
||||
}
|
||||
|
||||
return response()->json([], 200);
|
||||
|
|
|
@ -68,7 +68,7 @@ class StatusTransformer extends Fractal\TransformerAbstract
|
|||
public function includeMediaAttachments(Status $status)
|
||||
{
|
||||
return Cache::remember('status:transformer:media:attachments:'.$status->id, now()->addDays(14), function() use($status) {
|
||||
if(in_array($status->type, ['photo', 'video', 'photo:album', 'loop'])) {
|
||||
if(in_array($status->type, ['photo', 'video', 'photo:album', 'loop', 'photo:video:album'])) {
|
||||
$media = $status->media()->orderBy('order')->get();
|
||||
return $this->collection($media, new MediaTransformer());
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -11,8 +11,8 @@
|
|||
"/js/developers.js": "/js/developers.js?id=4dba6abdc3ae8ec8c222",
|
||||
"/js/discover.js": "/js/discover.js?id=b9b5d3d054cadf63aed2",
|
||||
"/js/loops.js": "/js/loops.js?id=d5c7e9d0d6a44553dd0d",
|
||||
"/js/profile.js": "/js/profile.js?id=def2cef049018dddfa02",
|
||||
"/js/profile.js": "/js/profile.js?id=da5fe0b642f4c24a6eb2",
|
||||
"/js/search.js": "/js/search.js?id=95c893b755e132a1d7e1",
|
||||
"/js/status.js": "/js/status.js?id=9cfc5c6a05070fad66e8",
|
||||
"/js/timeline.js": "/js/timeline.js?id=c8346c0cf7265df6196e"
|
||||
"/js/status.js": "/js/status.js?id=8d17b80a439765e35906",
|
||||
"/js/timeline.js": "/js/timeline.js?id=31977aa6a7448134f135"
|
||||
}
|
||||
|
|
|
@ -18,8 +18,8 @@
|
|||
<source :src="media.url" :type="media.mime">
|
||||
</video>
|
||||
|
||||
<div v-else-if="media.type == 'Image'" slot="img" :title="media.description" :class="media.filter_class">
|
||||
<img class="d-block img-fluid w-100" :src="media.url" :alt="media.description" loading="lazy">
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<p v-else class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
|
||||
|
@ -38,12 +38,12 @@
|
|||
>
|
||||
<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 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 loop :title="media.description" width="100%" height="100%" :poster="media.preview_url">
|
||||
<source :src="media.url" :type="media.mime">
|
||||
</video>
|
||||
|
||||
<div v-else-if="media.type == 'Image'" slot="img" :class="media.filter_class" :title="media.description">
|
||||
<img class="d-block img-fluid w-100" :src="media.url" :alt="media.description" loading="lazy">
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<p v-else class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
|
||||
|
|
|
@ -13,8 +13,8 @@
|
|||
:interval="0"
|
||||
>
|
||||
<b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id">
|
||||
<div slot="img" :class="img.filter_class + ' d-block mx-auto text-center'" style="max-height: 600px;" :title="img.description">
|
||||
<img class="img-fluid" style="max-height: 600px;" :src="img.url" :alt="img.description" loading="lazy">
|
||||
<div slot="img" class="d-block mx-auto text-center" style="max-height: 600px;" :title="img.description">
|
||||
<img :class="img.filter_class + ' img-fluid'" style="max-height: 600px;" :src="img.url" :alt="img.description" loading="lazy">
|
||||
</div>
|
||||
</b-carousel-slide>
|
||||
<span class="badge badge-dark box-shadow" style="position: absolute;top:10px;right:10px;">
|
||||
|
@ -32,8 +32,8 @@
|
|||
:interval="0"
|
||||
>
|
||||
<b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id" :title="img.description">
|
||||
<div slot="img" :class="img.filter_class + ' d-block mx-auto text-center'" style="max-height: 600px;">
|
||||
<img class="img-fluid" style="max-height: 600px;" :src="img.url" loading="lazy" :alt="img.description">
|
||||
<div slot="img" class="d-block mx-auto text-center" style="max-height: 600px;">
|
||||
<img :class="img.filter_class + ' img-fluid'" style="max-height: 600px;" :src="img.url" loading="lazy" :alt="img.description">
|
||||
</div>
|
||||
</b-carousel-slide>
|
||||
<span class="badge badge-dark box-shadow" style="position: absolute;top:10px;right:10px;">
|
||||
|
|
|
@ -5,14 +5,14 @@
|
|||
<p class="mb-0 lead font-weight-bold">{{ status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p>
|
||||
<p class="font-weight-light">(click to show)</p>
|
||||
</summary>
|
||||
<div class="max-hide-overflow" :class="status.media_attachments[0].filter_class" :title="status.media_attachments[0].description">
|
||||
<img class="card-img-top" :src="status.media_attachments[0].url" loading="lazy" :alt="status.media_attachments[0].description">
|
||||
<div class="max-hide-overflow" :title="status.media_attachments[0].description">
|
||||
<img :class="status.media_attachments[0].filter_class + ' card-img-top'" :src="status.media_attachments[0].url" loading="lazy" :alt="status.media_attachments[0].description">
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div :class="status.media_attachments[0].filter_class" :title="status.media_attachments[0].description">
|
||||
<img class="card-img-top" :src="status.media_attachments[0].url" loading="lazy" :alt="status.media_attachments[0].description">
|
||||
<div :title="status.media_attachments[0].description">
|
||||
<img :class="status.media_attachments[0].filter_class + ' card-img-top'" :src="status.media_attachments[0].url" loading="lazy" :alt="status.media_attachments[0].description">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -18,34 +18,33 @@
|
|||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<table class="table table-bordered">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="pt-0 pb-1 mt-0">
|
||||
{{-- <th scope="col" class="pt-0 pb-1 mt-0">
|
||||
<input type="checkbox" name="check" class="form-control check-all">
|
||||
</th>
|
||||
</th> --}}
|
||||
<th scope="col">Username</th>
|
||||
<th scope="col">Relationship</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($data as $follower)
|
||||
<tr>
|
||||
<th scope="row" class="pb-0 pt-1 my-0">
|
||||
{{-- <input type="checkbox" class="form-control mr-1 check-row"> --}}
|
||||
</th>
|
||||
{{-- <th scope="row" class="pb-0 pt-1 my-0">
|
||||
<input type="checkbox" class="form-control mr-1 check-row">
|
||||
</th> --}}
|
||||
<td class="font-weight-bold">
|
||||
<img src="{{$follower->avatarUrl()}}" width="20px" height="20px" class="rounded-circle border mr-2">
|
||||
<span class="d-inline-block text-truncate" style="max-width: 160px;" title="{{$follower->username}}">{{$follower->username}}</span>
|
||||
<a href="{{$follower->url()}}" class="text-decoration-none text-dark">
|
||||
<p class="mb-0 pb-0 text-truncate" title="{{$follower->username}}">{{$follower->username}}</p>
|
||||
</a>
|
||||
</td>
|
||||
@if($mode == 'following')
|
||||
<td class="text-center">Following</td>
|
||||
<td class="text-center">
|
||||
<a class="btn btn-outline-danger btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="unfollow">Unfollow</a>
|
||||
</td>
|
||||
@else
|
||||
<td class="text-center">Follower</td>
|
||||
<td class="text-center">
|
||||
<a class="btn btn-outline-primary btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="mute">Mute</a>
|
||||
<a class="btn btn-outline-danger btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="block">Block</a>
|
||||
|
@ -55,10 +54,19 @@
|
|||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">{{$data->appends(['mode' => $mode])->links()}}</div>
|
||||
@endif
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style type="text/css">
|
||||
.table-hover tbody tr:hover {
|
||||
color: #718096;
|
||||
background-color: #F7FAFC;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
@push('scripts')
|
||||
<script type="text/javascript">
|
||||
$(document).ready(() => {
|
||||
|
|
|
@ -3,89 +3,104 @@
|
|||
@section('content')
|
||||
|
||||
<div class="container">
|
||||
<div class="col-12 col-md-8 offset-md-2 pt-4">
|
||||
<div class="col-12 col-md-8 offset-md-2 pt-4">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header bg-white font-weight-bold d-flex justify-content-between align-items-center">
|
||||
<span>Edit Status</span>
|
||||
<a class="btn btn-outline-primary btn-sm font-weight-bold" href="{{$status->url()}}">Back to post</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@csrf
|
||||
<div class="form-group mb-0">
|
||||
<label class="font-weight-bold text-muted small">CW/NSFW</label>
|
||||
<div class="switch switch-sm">
|
||||
<input type="checkbox" class="switch" id="cw-switch" name="cw" {{$status->is_nsfw==true?'checked=""':''}} disabled="">
|
||||
<label for="cw-switch" class="small font-weight-bold">(Default off)</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header bg-white font-weight-bold d-flex justify-content-between align-items-center">
|
||||
<span>Edit Status</span>
|
||||
<a class="btn btn-outline-primary btn-sm font-weight-bold" href="{{$status->url()}}">Back to post</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@csrf
|
||||
<div class="form-group mb-0">
|
||||
<label class="font-weight-bold text-muted small">CW/NSFW</label>
|
||||
<div class="switch switch-sm">
|
||||
<input type="checkbox" class="switch" id="cw-switch" name="cw" {{$status->is_nsfw==true?'checked=""':''}} disabled="">
|
||||
<label for="cw-switch" class="small font-weight-bold">(Default off)</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion" id="accordionWrapper">
|
||||
@foreach($status->media()->orderBy('order')->get() as $media)
|
||||
<div class="card mt-4 media-card">
|
||||
<div class="card-header bg-white font-weight-bold" data-toggle="collapse" href="#collapseMedia{{$loop->iteration}}">
|
||||
Media #{{$media->order + 1}}
|
||||
<span class="float-right">
|
||||
<span class="badge badge-primary">
|
||||
{{$media->mime}}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="collapse {{$loop->iteration==1?'show':''}}" id="collapseMedia{{$loop->iteration}}" data-parent="#accordionWrapper">
|
||||
<div class="card-body p-0">
|
||||
<form method="post" enctype="multipart/form-data" class="media-form">
|
||||
@csrf
|
||||
<input type="hidden" name="media_id" value="{{$media->id}}">
|
||||
<div class="filter-wrapper {{$media->filter_class}}" data-filter="{{$media->filter_class}}">
|
||||
<img class="img-fluid" src="{{$media->thumbnailUrl()}}" width="100%">
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<div class="form-group">
|
||||
<label class="font-weight-bold text-muted small">Description</label>
|
||||
<input class="form-control" name="media_caption" value="{{$media->caption}}" placeholder="Add a descriptive caption for screenreaders" autocomplete="off">
|
||||
</div>
|
||||
@if($media->activityVerb() == 'Image')
|
||||
<div class="form-group form-filters" data-filter="{{$media->filter_class}}">
|
||||
<label for="filterSelectDropdown" class="font-weight-bold text-muted small">Select Filter</label>
|
||||
<select class="form-control filter-dropdown" name="media_filter"><option value="" selected="">No Filter</option><option value="filter-1977">1977</option><option value="filter-aden">Aden</option><option value="filter-amaro">Amaro</option><option value="filter-ashby">Ashby</option><option value="filter-brannan">Brannan</option><option value="filter-brooklyn">Brooklyn</option><option value="filter-charmes">Charmes</option><option value="filter-clarendon">Clarendon</option><option value="filter-crema">Crema</option><option value="filter-dogpatch">Dogpatch</option><option value="filter-earlybird">Earlybird</option><option value="filter-gingham">Gingham</option><option value="filter-ginza">Ginza</option><option value="filter-hefe">Hefe</option><option value="filter-helena">Helena</option><option value="filter-hudson">Hudson</option><option value="filter-inkwell">Inkwell</option><option value="filter-kelvin">Kelvin</option><option value="filter-juno">Kuno</option><option value="filter-lark">Lark</option><option value="filter-lofi">Lo-Fi</option><option value="filter-ludwig">Ludwig</option><option value="filter-maven">Maven</option><option value="filter-mayfair">Mayfair</option><option value="filter-moon">Moon</option><option value="filter-nashville">Nashville</option><option value="filter-perpetua">Perpetua</option><option value="filter-poprocket">Poprocket</option><option value="filter-reyes">Reyes</option><option value="filter-rise">Rise</option><option value="filter-sierra">Sierra</option><option value="filter-skyline">Skyline</option><option value="filter-slumber">Slumber</option><option value="filter-stinson">Stinson</option><option value="filter-sutro">Sutro</option><option value="filter-toaster">Toaster</option><option value="filter-valencia">Valencia</option><option value="filter-vesper">Vesper</option><option value="filter-walden">Walden</option><option value="filter-willow">Willow</option><option value="filter-xpro-ii">X-Pro II</option></select>
|
||||
</div>
|
||||
@endif
|
||||
<hr>
|
||||
<div class="form-group d-flex justify-content-between align-items-center mb-0">
|
||||
<p class="text-muted font-weight-bold mb-0 small">Last Updated: {{$media->updated_at->diffForHumans()}}</p>
|
||||
<button type="submit" class="btn btn-primary btn-sm font-weight-bold px-4">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@foreach($status->media()->orderBy('order')->get() as $media)
|
||||
<div class="card mt-4 media-card">
|
||||
<div class="card-header bg-white font-weight-bold">
|
||||
Media #{{$media->order}}
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<form method="post" enctype="multipart/form-data" class="media-form">
|
||||
@csrf
|
||||
<input type="hidden" name="media_id" value="{{$media->id}}">
|
||||
<div class="filter-wrapper {{$media->filter_class}}" data-filter="{{$media->filter_class}}">
|
||||
<img class="img-fluid" src="{{$media->url()}}" width="100%">
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<div class="form-group">
|
||||
<label class="font-weight-bold text-muted small">Description</label>
|
||||
<input class="form-control" name="media_caption" value="{{$media->caption}}" placeholder="Add a descriptive caption for screenreaders" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group form-filters" data-filter="{{$media->filter_class}}">
|
||||
<label for="filterSelectDropdown" class="font-weight-bold text-muted small">Select Filter</label>
|
||||
<select class="form-control filter-dropdown" name="media_filter"><option value="" selected="">No Filter</option><option value="filter-1977">1977</option><option value="filter-aden">Aden</option><option value="filter-amaro">Amaro</option><option value="filter-ashby">Ashby</option><option value="filter-brannan">Brannan</option><option value="filter-brooklyn">Brooklyn</option><option value="filter-charmes">Charmes</option><option value="filter-clarendon">Clarendon</option><option value="filter-crema">Crema</option><option value="filter-dogpatch">Dogpatch</option><option value="filter-earlybird">Earlybird</option><option value="filter-gingham">Gingham</option><option value="filter-ginza">Ginza</option><option value="filter-hefe">Hefe</option><option value="filter-helena">Helena</option><option value="filter-hudson">Hudson</option><option value="filter-inkwell">Inkwell</option><option value="filter-kelvin">Kelvin</option><option value="filter-juno">Kuno</option><option value="filter-lark">Lark</option><option value="filter-lofi">Lo-Fi</option><option value="filter-ludwig">Ludwig</option><option value="filter-maven">Maven</option><option value="filter-mayfair">Mayfair</option><option value="filter-moon">Moon</option><option value="filter-nashville">Nashville</option><option value="filter-perpetua">Perpetua</option><option value="filter-poprocket">Poprocket</option><option value="filter-reyes">Reyes</option><option value="filter-rise">Rise</option><option value="filter-sierra">Sierra</option><option value="filter-skyline">Skyline</option><option value="filter-slumber">Slumber</option><option value="filter-stinson">Stinson</option><option value="filter-sutro">Sutro</option><option value="filter-toaster">Toaster</option><option value="filter-valencia">Valencia</option><option value="filter-vesper">Vesper</option><option value="filter-walden">Walden</option><option value="filter-willow">Willow</option><option value="filter-xpro-ii">X-Pro II</option></select>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group d-flex justify-content-between align-items-center mb-0">
|
||||
<p class="text-muted font-weight-bold mb-0 small">Last Updated: {{$media->updated_at->diffForHumans()}}</p>
|
||||
<button type="submit" class="btn btn-primary btn-sm font-weight-bold px-4">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/javascript" src="{{ mix('js/compose.js') }}"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
new Vue({
|
||||
el: '#content'
|
||||
});
|
||||
$('.form-filters').each(function(i,d) {
|
||||
let el = $(d);
|
||||
let filter = el.data('filter');
|
||||
if(filter) {
|
||||
var opt = el.find('option[value='+filter+']')[0];
|
||||
$(opt).attr('selected','');
|
||||
}
|
||||
});
|
||||
|
||||
$('.form-filters').each(function(i,d) {
|
||||
let el = $(d);
|
||||
let filter = el.data('filter');
|
||||
if(filter) {
|
||||
var opt = el.find('option[value='+filter+']')[0];
|
||||
$(opt).attr('selected','');
|
||||
}
|
||||
});
|
||||
|
||||
$('.media-form').on('submit', function(e){
|
||||
e.preventDefault();
|
||||
let el = $(this);
|
||||
let id = el.find('input[name=media_id]').val();
|
||||
let caption = el.find('input[name=media_caption]').val();
|
||||
let filter = el.find('.filter-dropdown option:selected').val();
|
||||
axios.post(window.location.href, {
|
||||
'id': id,
|
||||
'caption': caption,
|
||||
'filter': filter
|
||||
}).then((res) => {
|
||||
swal('Success!', 'You have successfully updated your post', 'success');
|
||||
}).catch((err) => {
|
||||
swal('Something went wrong', 'An error occurred, please try again later', 'error');
|
||||
});
|
||||
});
|
||||
$('.media-form').on('submit', function(e){
|
||||
e.preventDefault();
|
||||
let el = $(this);
|
||||
let id = el.find('input[name=media_id]').val();
|
||||
let caption = el.find('input[name=media_caption]').val();
|
||||
let filter = el.find('.filter-dropdown option:selected').val();
|
||||
axios.post(window.location.href, {
|
||||
'id': id,
|
||||
'caption': caption,
|
||||
'filter': filter
|
||||
}).then((res) => {
|
||||
window.location.href = '{{$status->url()}}';
|
||||
}).catch((err) => {
|
||||
swal('Something went wrong', 'An error occurred, please try again later', 'error');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@endpush
|
Loading…
Reference in New Issue