NyaaStudios/nyaabooru
4
0
Fork 0
mirror of https://github.com/NyaaStudios/nyaabooru.git synced 2025-12-10 05:42:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

add users page, full screen image preview, footer
Some checks are pending
Docker / build (push) Waiting to run
Details

Browse source
This commit is contained in:
yuriko 🦊 2025-05-25 05:23:34 -04:00
parent 7ec9c4bc9d
commit 1442dbfa60
Signed by: jaiden
SSH key fingerprint: SHA256:f8tvveBoXBrKZIQDWLLcpQrKbATUCGg98x2N4YzkDM8
20 changed files with 202 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

13
app/Livewire/App/Footer.php Normal file
View file

@ -0,0 +1,13 @@
<?php
namespace App\Livewire\App;
use Livewire\Component;
class Footer extends Component
{
public function render()
{
return view('livewire.app.footer');
}
}

2
app/Livewire/App/Pfp.php
View file

@ -9,7 +9,7 @@ class Pfp extends Component
{ {
public User $user; public User $user;
public string $size = '3rem'; public string $size = '3rem';
public string $shape = 'circle'; public string $shape = 'rounded';
public function render() public function render()
{ {

32
app/Livewire/App/UserCard.php Normal file
View file

@ -0,0 +1,32 @@
<?php
namespace App\Livewire\App;
use App\Models\User;
use Livewire\Component;
class UserCard extends Component
{
public User $user;
public function placeholder()
{
return <<<HTML
<article class="wa-stack">
<div class="wa-frame wa-border-radius-l">
<wa-spinner style="font-size: 2rem;"></wa-spinner>
</div>
<div class="wa-stack wa-gap-3xs">
<wa-skeleton effect="pulse"></wa-skeleton>
<wa-skeleton effect="pulse"></wa-skeleton>
</div>
</article>
HTML;
}
public function render()
{
return view('livewire.app.user-card');
}
}

14
app/Livewire/Pages/Users.php Normal file
View file

@ -0,0 +1,14 @@
<?php
namespace App\Livewire\Pages;
use App\Models\User;
use Livewire\Component;
class Users extends Component
{
public function render()
{
return view('livewire.pages.users', [ 'users' => User::all() ]);
}
}

12
app/Livewire/PostFeature.php
View file

@ -20,6 +20,18 @@ class PostFeature extends Component
})->first(); })->first();
} }
public function placeholder()
{
return <<<HTML
<div class="wa-stack" style="max-height: 80vh;">
<div class="wa-frame wa-border-radius-l">
<wa-spinner style="font-size: 3rem; --track-width: 10px;"></wa-spinner>
</div>
</div>
HTML;
}
public function render() public function render()
{ {
if ($this->post == null) if ($this->post == null)

25
app/Livewire/Posts/FullImage.php Normal file
View file

@ -0,0 +1,25 @@
<?php
namespace App\Livewire\Posts;
use App\Models\Post;
use Livewire\Component;
class FullImage extends Component
{
public Post $post;
public function placeholder()
{
return <<<'HTML'
<div class="wa-frame wa-border-radius-l" style="max-inline-size: 100%; aspect-ratio: 1280/720;">
<wa-spinner style="font-size: 3rem; --track-width: 10px;"></wa-spinner>
</div>
HTML;
}
public function render()
{
return view('livewire.posts.full-image');
}
}

2
app/Livewire/Posts/Image.php
View file

@ -14,7 +14,7 @@ class Image extends Component
return <<<'HTML' return <<<'HTML'
<div class="wa-stack" style="display: flex; align-items: center; justify-content: center; max-height: 80vh;"> <div class="wa-stack" style="display: flex; align-items: center; justify-content: center; max-height: 80vh;">
<div class="wa-frame wa-border-radius-l" style="max-inline-size: 100%;"> <div class="wa-frame wa-border-radius-l" style="max-inline-size: 100%;">
<wa-spinner></wa-spinner> <wa-spinner style="font-size: 3rem; --track-width: 10px;"></wa-spinner>
</div> </div>
</div> </div>
HTML; HTML;

5
resources/css/app.css
View file

@ -45,6 +45,11 @@ wa-page[view='mobile'] {
border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border); border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
} }
[slot='footer'] {
--wa-link-decoration-default: none;
border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php'; @source '../../storage/framework/views/*.php';
@source '../**/*.blade.php'; @source '../**/*.blade.php';

6
resources/views/components/layouts/app.blade.php
View file

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="wa-dark"> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="wa-cloak wa-dark">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -19,6 +19,10 @@
<main> <main>
{{ $slot }} {{ $slot }}
</main> </main>
<footer slot="footer">
@livewire('app.footer')
</footer>
</wa-page> </wa-page>
@stack('modals') @stack('modals')

12
resources/views/livewire/app/footer.blade.php Normal file
View file

@ -0,0 +1,12 @@
<div class="wa-split">
<div class="wa-stack wa-gap-2xs">
<div class="wa-cluster wa-heading-l">
<wa-icon name="paw-simple"></wa-icon>
<span>{{ config('app.name') }}</span>
</div>
<span class="wa-caption-l">&copy; 2025 NyaaStudios; All rights reserved.</span>
</div>
<div class="wa-cluster wa-heading-m">
<wa-icon-button family="brands" name="github" href="https://github.com/NyaaStudios/nyaabooru" target="_blank"></wa-icon-button>
</div>
</div>

2
resources/views/livewire/app/home.blade.php
View file

@ -11,5 +11,5 @@
@endauth @endauth
</div> </div>
<livewire:post-feature /> <livewire:post-feature lazy />
</div> </div>

10
resources/views/livewire/app/navbar.blade.php
View file

@ -23,6 +23,11 @@
<wa-icon slot="prefix" name="tags"></wa-icon> <wa-icon slot="prefix" name="tags"></wa-icon>
Tags Tags
</wa-button> </wa-button>
<wa-button appearance="plain" href="{{ route('users') }}" wire:navigate.hover>
<wa-icon slot="prefix" name="users"></wa-icon>
Users
</wa-button>
@endauth @endauth
</div> </div>
@ -41,7 +46,10 @@
{{ Auth::user()->name }} {{ Auth::user()->name }}
</div> </div>
</wa-button> </wa-button>
<wa-icon-button href="{{ route('logout') }}" appearance="plain" name="arrow-left-from-bracket"></wa-icon-button> <wa-button href="{{ route('logout') }}" appearance="plain">
<wa-icon name="arrow-left-from-bracket" slot="prefix"></wa-icon>
Sign out
</wa-button>
@endauth @endauth
</div> </div>
</div> </div>

5
resources/views/livewire/app/pfp.blade.php
View file

@ -1,11 +1,8 @@
@php use Illuminate\Support\Facades\Storage; @endphp
<div>
<wa-avatar <wa-avatar
@if(Storage::has("avatars/$user->id")) @if(Illuminate\Support\Facades\Storage::has("avatars/$user->id"))
image="{{ $user->getAvatarBase64() }}" image="{{ $user->getAvatarBase64() }}"
@endif @endif
label="avatar for {{ $user->name }}" label="avatar for {{ $user->name }}"
shape="{{ $shape }}" shape="{{ $shape }}"
style="--size: {{ $size }}" style="--size: {{ $size }}"
></wa-avatar> ></wa-avatar>
</div>

13
resources/views/livewire/app/user-card.blade.php Normal file
View file

@ -0,0 +1,13 @@
<article class="wa-stack">
<a class="wa-frame wa-border-radius-l" style="max-inline-size: 15rem;" href="{{ url("/profiles/$user->id") }}" wire:navigate.hover>
@if (\Illuminate\Support\Facades\Storage::has("avatars/$user->id"))
<img src="{{ $user->getAvatarBase64() }}"/>
@else
<wa-icon name="user"></wa-icon>
@endif
</a>
<div class="wa-stack wa-gap-3xs">
<span class="wa-heading-s">{{ $user->name }}</span>
<span class="wa-caption-m">Joined <wa-format-date value="{{ $user->created_at }}"></wa-format-date></span>
</div>
</article>

5
resources/views/livewire/pages/profile.blade.php
View file

@ -1,8 +1,11 @@
<div class="wa-stack wa-gap-3xl"> <div class="wa-stack wa-gap-3xl">
<div class="wa-stack"> <div class="wa-stack wa-gap-xl">
<div class="wa-flank wa-align-items-center"> <div class="wa-flank wa-align-items-center">
<livewire:app.pfp :$user size="5rem" shape="rounded" /> <livewire:app.pfp :$user size="5rem" shape="rounded" />
<div class="wa-stack wa-gap-2xs">
<h1>{{ $user->name }}</h1> <h1>{{ $user->name }}</h1>
<span class="wa-caption-l">Member since <wa-format-date value="{{ $user->created_at }}"></wa-format-date></span>
</div>
</div> </div>
<div class="wa-grid" style="--min-column-size: 30ch;"> <div class="wa-grid" style="--min-column-size: 30ch;">

9
resources/views/livewire/pages/users.blade.php Normal file
View file

@ -0,0 +1,9 @@
<div class="wa-stack wa-gap-3xl">
<h1>Users</h1>
<div class="wa-cluster wa-gap-3xl">
@foreach ($users as $user)
<livewire:app.user-card :$user />
@endforeach
</div>
</div>

4
resources/views/livewire/posts/comment.blade.php
View file

@ -1,4 +1,5 @@
<div class="wa-flank wa-align-items-center"> <wa-card>
<div class="wa-flank wa-align-items-start">
<livewire:app.pfp :user="$comment->user" /> <livewire:app.pfp :user="$comment->user" />
<div class="wa-split"> <div class="wa-split">
<div class="wa-stack wa-gap-3xs"> <div class="wa-stack wa-gap-3xs">
@ -14,3 +15,4 @@
@endif @endif
</div> </div>
</div> </div>
</wa-card>

3
resources/views/livewire/posts/full-image.blade.php Normal file
View file

@ -0,0 +1,3 @@
<div class="wa-frame wa-border-radius-l" style="max-inline-size: 100%; {{ $post->getAspectRatio() }}">
<img src="{{ $post->getFullUrl() }}" />
</div>

16
resources/views/livewire/posts/view.blade.php
View file

@ -19,6 +19,7 @@
<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/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 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> </div>
<wa-divider></wa-divider> <wa-divider></wa-divider>
@ -70,7 +71,9 @@
{{-- Main content --}} {{-- Main content --}}
<div class="wa-stack wa-gap-2xl" wire:poll.visible> <div class="wa-stack wa-gap-2xl" wire:poll.visible>
<a wire:click="$js.showFullImage" style="cursor: pointer;">
<livewire:posts.image :$post lazy /> <livewire:posts.image :$post lazy />
</a>
<span class="wa-heading-m"> <span class="wa-heading-m">
<wa-format-number value="{{ $post->comments->count() }}"></wa-format-number> <wa-format-number value="{{ $post->comments->count() }}"></wa-format-number>
@ -86,6 +89,19 @@
@foreach ($comments as $comment) @foreach ($comments as $comment)
<livewire:posts.comment :$comment :key="$comment->id" /> <livewire:posts.comment :$comment :key="$comment->id" />
@endforeach @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>
</div> </div>

2
routes/web.php
View file

@ -4,6 +4,7 @@ use App\Http\Controllers\DeletionController;
use App\Livewire\App\Home as AppHome; use App\Livewire\App\Home as AppHome;
use App\Livewire\Pages\Profile as ProfilePage; use App\Livewire\Pages\Profile as ProfilePage;
use App\Livewire\Pages\Upload as UploadPage; use App\Livewire\Pages\Upload as UploadPage;
use App\Livewire\Pages\Users as UsersPage;
use App\Livewire\Posts\Index as PostsPage; use App\Livewire\Posts\Index as PostsPage;
use App\Livewire\Posts\Edit as EditPost; use App\Livewire\Posts\Edit as EditPost;
use App\Livewire\Posts\View as ViewPost; use App\Livewire\Posts\View as ViewPost;
@ -19,6 +20,7 @@ Route::get('/', AppHome::class)->name('home');
Route::middleware('auth')->group(function () { Route::middleware('auth')->group(function () {
Route::get('/upload', UploadPage::class)->name('upload'); Route::get('/upload', UploadPage::class)->name('upload');
Route::get('/profiles/{user}', ProfilePage::class); Route::get('/profiles/{user}', ProfilePage::class);
Route::get('/users', UsersPage::class)->name('users');
}); });
// Post routes // Post routes