@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