mirror of https://github.com/pixelfed/pixelfed.git
Update status reply view
This commit is contained in:
parent
8d4b3bdec9
commit
73e162e4db
|
@ -8,24 +8,47 @@
|
||||||
<div class="card-body p-0 m-0 bg-light">
|
<div class="card-body p-0 m-0 bg-light">
|
||||||
<div class="d-flex p-0 m-0 align-items-center">
|
<div class="d-flex p-0 m-0 align-items-center">
|
||||||
<img src="{{$status->parent()->thumb()}}" width="150px" height="150px" class="post-thumbnail">
|
<img src="{{$status->parent()->thumb()}}" width="150px" height="150px" class="post-thumbnail">
|
||||||
<div class="p-4">
|
<div class="p-4 w-100">
|
||||||
<div>
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
<img src="{{$status->parent()->profile->avatarUrl()}}" class="rounded-circle img-thumbnail mb-1 mr-1" width="30px">
|
<div>
|
||||||
<span class="h5 font-weight-bold">{{$status->parent()->profile->username}}</span>
|
<img src="{{$status->parent()->profile->avatarUrl()}}" class="rounded-circle img-thumbnail mb-1 mr-1" width="30px">
|
||||||
<a class="float-right" href="{{$status->parent()->url()}}"><i class="far fa-share-square"></i></a>
|
<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>
|
||||||
<div class="">
|
<div class="">
|
||||||
<p class="mb-0">{{ str_limit($status->parent()->caption, 125) }}</p>
|
<p class="mb-0 w-100" v-pre>{{ str_limit($status->parent()->caption, 125) }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<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 content 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">
|
<div class="media py-5">
|
||||||
<img class="mr-3 rounded-circle img-thumbnail" src="{{$status->profile->avatarUrl()}}" width="60px">
|
<img class="mr-3 rounded-circle img-thumbnail" src="{{$status->profile->avatarUrl()}}" width="60px">
|
||||||
<div class="media-body">
|
<div class="media-body">
|
||||||
<h5 class="mt-0 font-weight-bold">{{$status->profile->username}}</h5>
|
<h5 class="mt-0 font-weight-bold" v-pre>{{$status->profile->username}}</h5>
|
||||||
<p class="mb-1">{!! $status->rendered !!}</p>
|
<p class="mb-1" v-pre>{!! $status->rendered !!}</p>
|
||||||
<div class="mb-0">
|
<div class="mb-0">
|
||||||
<a href="{{$status->url()}}" class="text-muted">
|
<a href="{{$status->url()}}" class="text-muted">
|
||||||
{{$status->created_at->diffForHumans()}}
|
{{$status->created_at->diffForHumans()}}
|
||||||
|
@ -41,6 +64,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@endif
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -48,6 +72,41 @@
|
||||||
|
|
||||||
@endsection
|
@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')
|
@push('scripts')
|
||||||
<script type="text/javascript" src="{{ mix('js/compose.js') }}"></script>
|
<script type="text/javascript" src="{{ mix('js/compose.js') }}"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
Loading…
Reference in New Issue