mirror
/
pixelfed
mirror of https://github.com/pixelfed/pixelfed.git
1
0
Fork 1
Code Issues Releases Wiki Activity

Merge pull request #1415 from pixelfed/frontend-ui-refactor 

Frontend ui refactor
This commit is contained in:
daniel 2019-06-18 00:01:49 -06:00 committed by GitHub
parent 4a78be76b7 ea48792bf6
commit a12fa5bd69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 130 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/Http/Controllers/StatusController.php
View File

@ -325,6 +325,7 @@ class StatusController extends Controller
if ($changed === true) { if ($changed === true) {
$media->save(); $media->save();
Cache::forget('status:transformer:media:attachments:'.$media->status_id);
} }
return response()->json([], 200); return response()->json([], 200);

2
app/Transformer/Api/StatusTransformer.php
View File

@ -68,7 +68,7 @@ class StatusTransformer extends Fractal\TransformerAbstract
public function includeMediaAttachments(Status $status) public function includeMediaAttachments(Status $status)
{ {
return Cache::remember('status:transformer:media:attachments:'.$status->id, now()->addDays(14), function() use($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(); $media = $status->media()->orderBy('order')->get();
return $this->collection($media, new MediaTransformer()); return $this->collection($media, new MediaTransformer());
} }

2
public/js/profile.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/js/status.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/js/timeline.js vendored
View File

File diff suppressed because one or more lines are too long

6
public/mix-manifest.json
View File

@ -11,8 +11,8 @@
"/js/developers.js": "/js/developers.js?id=4dba6abdc3ae8ec8c222", "/js/developers.js": "/js/developers.js?id=4dba6abdc3ae8ec8c222",
"/js/discover.js": "/js/discover.js?id=b9b5d3d054cadf63aed2", "/js/discover.js": "/js/discover.js?id=b9b5d3d054cadf63aed2",
"/js/loops.js": "/js/loops.js?id=d5c7e9d0d6a44553dd0d", "/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/search.js": "/js/search.js?id=95c893b755e132a1d7e1",
"/js/status.js": "/js/status.js?id=9cfc5c6a05070fad66e8", "/js/status.js": "/js/status.js?id=8d17b80a439765e35906",
"/js/timeline.js": "/js/timeline.js?id=c8346c0cf7265df6196e" "/js/timeline.js": "/js/timeline.js?id=31977aa6a7448134f135"
} }

10
resources/assets/js/components/presenter/MixedAlbumPresenter.vue
View File

@ -18,8 +18,8 @@
<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" :class="media.filter_class"> <div v-else-if="media.type == 'Image'" slot="img" :title="media.description">
<img class="d-block img-fluid w-100" :src="media.url" :alt="media.description" loading="lazy"> <img :class="media.filter_class + ' d-block img-fluid w-100'" :src="media.url" :alt="media.description" loading="lazy">
</div> </div>
<p v-else class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p> <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'"> <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"> <source :src="media.url" :type="media.mime">
</video> </video>
<div v-else-if="media.type == 'Image'" slot="img" :class="media.filter_class" :title="media.description"> <div v-else-if="media.type == 'Image'" slot="img" :title="media.description">
<img class="d-block img-fluid w-100" :src="media.url" :alt="media.description" loading="lazy"> <img :class="media.filter_class + ' d-block img-fluid w-100'" :src="media.url" :alt="media.description" loading="lazy">
</div> </div>
<p v-else class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p> <p v-else class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>

8
resources/assets/js/components/presenter/PhotoAlbumPresenter.vue
View File

@ -13,8 +13,8 @@
:interval="0" :interval="0"
> >
<b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id"> <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"> <div slot="img" 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"> <img :class="img.filter_class + ' img-fluid'" style="max-height: 600px;" :src="img.url" :alt="img.description" loading="lazy">
</div> </div>
</b-carousel-slide> </b-carousel-slide>
<span class="badge badge-dark box-shadow" style="position: absolute;top:10px;right:10px;"> <span class="badge badge-dark box-shadow" style="position: absolute;top:10px;right:10px;">
@ -32,8 +32,8 @@
:interval="0" :interval="0"
> >
<b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id" :title="img.description"> <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;"> <div slot="img" 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"> <img :class="img.filter_class + ' img-fluid'" style="max-height: 600px;" :src="img.url" loading="lazy" :alt="img.description">
</div> </div>
</b-carousel-slide> </b-carousel-slide>
<span class="badge badge-dark box-shadow" style="position: absolute;top:10px;right:10px;"> <span class="badge badge-dark box-shadow" style="position: absolute;top:10px;right:10px;">

8
resources/assets/js/components/presenter/PhotoPresenter.vue
View File

@ -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="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> <p class="font-weight-light">(click to show)</p>
</summary> </summary>
<div class="max-hide-overflow" :class="status.media_attachments[0].filter_class" :title="status.media_attachments[0].description"> <div class="max-hide-overflow" :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"> <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>
</details> </details>
</div> </div>
<div v-else> <div v-else>
<div :class="status.media_attachments[0].filter_class" :title="status.media_attachments[0].description"> <div :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"> <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>
</div> </div>
</template> </template>

30
resources/views/settings/relationships/home.blade.php
View File

@ -18,34 +18,33 @@
</li> </li>
</ul> </ul>
<hr> <hr>
<table class="table table-bordered"> <div class="table-responsive">
<table class="table table-bordered table-hover">
<thead> <thead>
<tr> <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"> <input type="checkbox" name="check" class="form-control check-all">
</th> </th> --}}
<th scope="col">Username</th> <th scope="col">Username</th>
<th scope="col">Relationship</th>
<th scope="col">Action</th> <th scope="col">Action</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@foreach($data as $follower) @foreach($data as $follower)
<tr> <tr>
<th scope="row" class="pb-0 pt-1 my-0"> {{-- <th scope="row" class="pb-0 pt-1 my-0">
{{-- <input type="checkbox" class="form-control mr-1 check-row"> --}} <input type="checkbox" class="form-control mr-1 check-row">
</th> </th> --}}
<td class="font-weight-bold"> <td class="font-weight-bold">
<img src="{{$follower->avatarUrl()}}" width="20px" height="20px" class="rounded-circle border mr-2"> <a href="{{$follower->url()}}" class="text-decoration-none text-dark">
<span class="d-inline-block text-truncate" style="max-width: 160px;" title="{{$follower->username}}">{{$follower->username}}</span> <p class="mb-0 pb-0 text-truncate" title="{{$follower->username}}">{{$follower->username}}</p>
</a>
</td> </td>
@if($mode == 'following') @if($mode == 'following')
<td class="text-center">Following</td>
<td class="text-center"> <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> <a class="btn btn-outline-danger btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="unfollow">Unfollow</a>
</td> </td>
@else @else
<td class="text-center">Follower</td>
<td class="text-center"> <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-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> <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 @endforeach
</tbody> </tbody>
</table> </table>
</div>
<div class="d-flex justify-content-center">{{$data->appends(['mode' => $mode])->links()}}</div> <div class="d-flex justify-content-center">{{$data->appends(['mode' => $mode])->links()}}</div>
@endif @endif
@endsection @endsection
@push('styles')
<style type="text/css">
.table-hover tbody tr:hover {
color: #718096;
background-color: #F7FAFC;
}
</style>
@endpush
@push('scripts') @push('scripts')
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(() => { $(document).ready(() => {

27
resources/views/status/edit.blade.php
View File

@ -21,28 +21,36 @@
</div> </div>
</div> </div>
</div> </div>
<div class="accordion" id="accordionWrapper">
@foreach($status->media()->orderBy('order')->get() as $media) @foreach($status->media()->orderBy('order')->get() as $media)
<div class="card mt-4 media-card"> <div class="card mt-4 media-card">
<div class="card-header bg-white font-weight-bold"> <div class="card-header bg-white font-weight-bold" data-toggle="collapse" href="#collapseMedia{{$loop->iteration}}">
Media #{{$media->order}} Media #{{$media->order + 1}}
<span class="float-right">
<span class="badge badge-primary">
{{$media->mime}}
</span>
</span>
</div> </div>
<div class="collapse {{$loop->iteration==1?'show':''}}" id="collapseMedia{{$loop->iteration}}" data-parent="#accordionWrapper">
<div class="card-body p-0"> <div class="card-body p-0">
<form method="post" enctype="multipart/form-data" class="media-form"> <form method="post" enctype="multipart/form-data" class="media-form">
@csrf @csrf
<input type="hidden" name="media_id" value="{{$media->id}}"> <input type="hidden" name="media_id" value="{{$media->id}}">
<div class="filter-wrapper {{$media->filter_class}}" data-filter="{{$media->filter_class}}"> <div class="filter-wrapper {{$media->filter_class}}" data-filter="{{$media->filter_class}}">
<img class="img-fluid" src="{{$media->url()}}" width="100%"> <img class="img-fluid" src="{{$media->thumbnailUrl()}}" width="100%">
</div> </div>
<div class="p-3"> <div class="p-3">
<div class="form-group"> <div class="form-group">
<label class="font-weight-bold text-muted small">Description</label> <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"> <input class="form-control" name="media_caption" value="{{$media->caption}}" placeholder="Add a descriptive caption for screenreaders" autocomplete="off">
</div> </div>
@if($media->activityVerb() == 'Image')
<div class="form-group form-filters" data-filter="{{$media->filter_class}}"> <div class="form-group form-filters" data-filter="{{$media->filter_class}}">
<label for="filterSelectDropdown" class="font-weight-bold text-muted small">Select Filter</label> <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> <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> </div>
@endif
<hr> <hr>
<div class="form-group d-flex justify-content-between align-items-center mb-0"> <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> <p class="text-muted font-weight-bold mb-0 small">Last Updated: {{$media->updated_at->diffForHumans()}}</p>
@ -52,15 +60,21 @@
</form> </form>
</div> </div>
</div> </div>
</div>
@endforeach @endforeach
</div>
</div> </div>
</div> </div>
@endsection @endsection
@push('scripts') @push('scripts')
<script type="text/javascript" src="{{ mix('js/compose.js') }}"></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() {
new Vue({
el: '#content'
});
$('.form-filters').each(function(i,d) { $('.form-filters').each(function(i,d) {
let el = $(d); let el = $(d);
let filter = el.data('filter'); let filter = el.data('filter');
@ -81,11 +95,12 @@
'caption': caption, 'caption': caption,
'filter': filter 'filter': filter
}).then((res) => { }).then((res) => {
swal('Success!', 'You have successfully updated your post', 'success'); window.location.href = '{{$status->url()}}';
}).catch((err) => { }).catch((err) => {
swal('Something went wrong', 'An error occurred, please try again later', 'error'); swal('Something went wrong', 'An error occurred, please try again later', 'error');
}); });
}); });
});
</script> </script>
@endpush @endpush