pixelfed/resources/views/status/reply.blade.php

123 lines
4.0 KiB
PHP

@extends('layouts.app')
@section('content')
<div class="container reply-container">
<div class="col-12 col-md-8 offset-md-2 mt-4">
<div class="card">
<div class="card-body p-0 m-0 bg-light">
<div class="d-flex p-0 m-0 align-items-center">
<img src="{{$status->parent()->thumb()}}" width="150px" height="150px" class="post-thumbnail">
<div class="p-4 w-100">
<div class="d-flex justify-content-between align-items-center">
<div>
<img src="{{$status->parent()->profile->avatarUrl()}}" class="rounded-circle img-thumbnail mb-1 mr-1" width="30px">
<span class="h5 font-weight-bold" v-pre>{{$status->parent()->profile->username}}</span>
</div>
<div>
<a class="" href="{{$status->parent()->url()}}"><i class="far fa-share-square"></i></a>
</div>
</div>
<div class="">
<p class="mb-0 w-100" v-pre>{{ str_limit($status->parent()->caption, 125) }}</p>
</div>
</div>
</div>
</div>
<div class="card-body">
@if($status->is_nsfw)
<details class="cw">
<summary class="px-3 px-md-5">
<p class="py-5 mb-0 text-center">This comment may contain sensitive content. <span class="float-right font-weight-bold text-primary">Show</span></p>
</summary>
<div class="media py-5">
<img class="mr-3 rounded-circle img-thumbnail" src="{{$status->profile->avatarUrl()}}" width="60px">
<div class="media-body">
<h5 class="mt-0 font-weight-bold" v-pre>{{$status->profile->username}}</h5>
<p class="mb-1" v-pre>{!! $status->rendered !!}</p>
<div class="mb-0">
<a href="{{$status->url()}}" class="text-muted">
{{$status->created_at->diffForHumans()}}
</a>
</div>
</div>
</div>
</details>
@else
<div class="media py-5">
<img class="mr-3 rounded-circle img-thumbnail" src="{{$status->profile->avatarUrl()}}" width="60px">
<div class="media-body">
<h5 class="mt-0 font-weight-bold" v-pre>{{$status->profile->username}}</h5>
<p class="mb-1" v-pre>{!! $status->rendered !!}</p>
<div class="mb-0">
<a href="{{$status->url()}}" class="text-muted">
{{$status->created_at->diffForHumans()}}
</a>
@if(Auth::check() && $status->profile_id == Auth::user()->profile->id)
<form class="float-right" method="POST" action="/i/delete">
@csrf
<input type="hidden" name="item" value="{{$status->id}}">
<input type="hidden" name="type" value="status">
<button class="btn btn-outline-danger small font-weight-bold btn-sm py-1">Delete</button>
</form>
@endif
</div>
</div>
</div>
@endif
</div>
</div>
</div>
</div>
@endsection
@push('styles')
<style type="text/css">
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-1.25em);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.cw[open] {
animation-name: fadeInDown;
animation-duration: 0.5s;
}
.cw>summary {
display: flex;
flex-flow: column;
justify-content: center;
border: 0;
background-color: #fff;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
}
.cw[open] > summary {
display: none!important;
}
</style>
@endpush
@push('scripts')
<script type="text/javascript" src="{{ mix('js/compose.js') }}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.reactions').hide();
$('.more-comments').hide();
$('.card-footer').hide();
new Vue({
el: '#content'
});
});
</script>
@endpush