mirror of
https://github.com/NyaaStudios/nyaabooru.git
synced 2025-12-10 05:42:58 +00:00
115 lines
3.7 KiB
PHP
115 lines
3.7 KiB
PHP
<div class="wa-flank wa-align-items-start wa-gap-3xl" style="--flank-size: 20rem;">
|
|
|
|
{{-- Sidebar --}}
|
|
<div class="wa-stack">
|
|
|
|
{{-- Post navigation --}}
|
|
<div class="wa-cluster">
|
|
@if ($prev = $post->getPreviousPost())
|
|
<wa-icon-button href="{{ url("posts/$prev->id") }}" name="arrow-left" style="color: var(--wa-color-text-link);" wire:navigate.hover></wa-icon-button>
|
|
@else
|
|
<wa-icon-button name="arrow-left" disabled></wa-icon-button>
|
|
@endif
|
|
|
|
@if ($next = $post->getNextPost())
|
|
<wa-icon-button href="{{ url("posts/$next->id") }}" name="arrow-right" style="color: var(--wa-color-text-link);" wire:navigate.hover></wa-icon-button>
|
|
@else
|
|
<wa-icon-button name="arrow-right" disabled></wa-icon-button>
|
|
@endif
|
|
|
|
<wa-icon-button href="{{ url("posts/$post->id/edit") }}" name="file-pen" style="color: var(--wa-color-text-link);" wire:navigate.hover></wa-icon-button>
|
|
<wa-icon-button href="{{ url("posts/$post->id/download") }}" name="download" style="color: var(--wa-color-text-link);"></wa-icon-button>
|
|
<wa-icon-button name="arrow-up-right-and-arrow-down-left-from-center" wire:click="$js.showFullImage" style="color: var(--wa-color-text-link);"></wa-icon-button>
|
|
</div>
|
|
|
|
<wa-divider></wa-divider>
|
|
|
|
{{-- Post ID --}}
|
|
<div class="wa-cluster">
|
|
<wa-icon fixed-width name="hashtag"></wa-icon>
|
|
<span>{{ $post->id }}</span>
|
|
</div>
|
|
|
|
{{-- Post author --}}
|
|
<div class="wa-cluster">
|
|
<wa-icon fixed-width name="user"></wa-icon>
|
|
<span>{{ $post->user->name }}</span>
|
|
</div>
|
|
|
|
{{-- Post upload date --}}
|
|
<div class="wa-cluster">
|
|
<wa-icon fixed-width name="calendar"></wa-icon>
|
|
<wa-format-date
|
|
month="numeric"
|
|
day="numeric"
|
|
year="numeric"
|
|
hour="numeric"
|
|
minute="numeric"
|
|
date="{{ $post->created_at }}">
|
|
</wa-format-date>
|
|
</div>
|
|
|
|
{{-- Post dimensions --}}
|
|
<div class="wa-cluster">
|
|
<wa-icon fixed-width name="image"></wa-icon>
|
|
<span>{{ $post->getDimensionsStr() }}, <wa-format-bytes value="{{ $post->getFileSize() }}"></wa-format-bytes> {{ $post->extension }}</span>
|
|
</div>
|
|
|
|
{{-- Post rating --}}
|
|
<div class="wa-cluster">
|
|
<wa-icon fixed-width name="face-hand-peeking"></wa-icon>
|
|
<span style="color: var(--wa-color-{{ $post->getRatingColor() }}-on-normal);">{{ $post->rating }}</span>
|
|
</div>
|
|
|
|
<wa-divider></wa-divider>
|
|
|
|
{{-- Tags --}}
|
|
<div class="wa-cluster wa-heading-m">
|
|
<wa-icon fixed-width name="tags"></wa-icon>
|
|
<span>Tags</span>
|
|
</div>
|
|
|
|
<div class="wa-stack wa-gap-2xs" wire:poll>
|
|
@foreach ($post->tags as $tag)
|
|
<span style="color: {{ $tag->tagGroup->color }};">{{ $tag->name }}</span>
|
|
@endforeach
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{{-- Main content --}}
|
|
<div class="wa-stack wa-gap-2xl" wire:poll.visible>
|
|
<a wire:click="$js.showFullImage" style="cursor: pointer;">
|
|
<livewire:posts.image :$post lazy />
|
|
</a>
|
|
|
|
<span class="wa-heading-m">
|
|
<wa-format-number value="{{ $post->comments->count() }}"></wa-format-number>
|
|
{{ Str::plural("Comment", $post->comments->count()) }}
|
|
</span>
|
|
|
|
<form wire:submit="postComment">
|
|
<wa-input wire:model.live="message" type="text" placeholder="Leave a comment, press enter to post." clearable multiline>
|
|
<wa-icon name="comment" slot="prefix"></wa-icon>
|
|
</wa-input>
|
|
</form>
|
|
|
|
@foreach ($comments as $comment)
|
|
<livewire:posts.comment :$comment :key="$comment->id" />
|
|
@endforeach
|
|
|
|
{{-- Full image dialog --}}
|
|
<wa-dialog id="fullImagePreview" without-header without-footer light-dismiss style="--width: 90%;" wire:ignore>
|
|
<livewire:posts.full-image :$post lazy />
|
|
</wa-dialog>
|
|
|
|
@script
|
|
<script>
|
|
$js('showFullImage', () => {
|
|
document.querySelector('#fullImagePreview').open = true
|
|
});
|
|
</script>
|
|
@endscript
|
|
</div>
|
|
|
|
</div>
|