From a156a4413006f8f4c1c9bd1592505a2982dbdbd2 Mon Sep 17 00:00:00 2001 From: Paul Couture <paul@paulcouture.com> Date: Wed, 20 Dec 2023 19:45:19 +0000 Subject: [PATCH] fix: adding ability to update artist bg --- site/app/Livewire/Artist/Avatar.php | 4 ++ site/app/Livewire/Artist/Header.php | 48 +++++++++++++++++++ site/app/Models/Artist.php | 10 +++- .../views/livewire/artist/avatar.blade.php | 4 +- .../views/livewire/artist/header.blade.php | 42 ++++++++++++++++ .../views/partials/nav/head.blade.php | 16 +++++-- .../views/partials/nav/main.blade.php | 2 +- site/resources/views/profile/edit.blade.php | 3 ++ .../partials/single-artist-card.blade.php | 2 +- .../partials/update-avatar-form.blade.php | 5 +- .../partials/update-header-form.blade.php | 18 +++++++ .../partials/update-password-form.blade.php | 4 +- .../update-profile-information-form.blade.php | 4 +- 13 files changed, 147 insertions(+), 15 deletions(-) create mode 100644 site/app/Livewire/Artist/Header.php create mode 100644 site/resources/views/livewire/artist/header.blade.php create mode 100644 site/resources/views/profile/partials/update-header-form.blade.php diff --git a/site/app/Livewire/Artist/Avatar.php b/site/app/Livewire/Artist/Avatar.php index 2dd0fda..7076efe 100644 --- a/site/app/Livewire/Artist/Avatar.php +++ b/site/app/Livewire/Artist/Avatar.php @@ -36,6 +36,10 @@ public function save() Image::load($disk->path($avatar)) ->manualCrop($this->width, $this->height, $this->x, $this->y) ->save(); + Image::load($disk->path($avatar)) + ->width(350) + ->height(350) + ->save(); ImageOptimizer::optimize($disk->path($avatar)); auth()->user()->artists()->first()->update(compact('avatar')); $this->avatar = null; diff --git a/site/app/Livewire/Artist/Header.php b/site/app/Livewire/Artist/Header.php new file mode 100644 index 0000000..ae5cae5 --- /dev/null +++ b/site/app/Livewire/Artist/Header.php @@ -0,0 +1,48 @@ +<?php + +namespace App\Livewire\Artist; + +use Livewire\Component; +use Livewire\WithFileUploads; +use Spatie\Image\Image; +use Intervention\Image\Facades\Image as InterventionImage; +use ImageOptimizer; +use Illuminate\Support\Facades\Storage; +use Illuminate\Validation\Rules\File; +use Illuminate\Http\RedirectResponse; +use Livewire\Attributes\Validate; + +class Header extends Component +{ + use WithFileUploads; + + public $header; + + public $x; + public $y; + public $width; + public $height; + + public function render() + { + return view('livewire.artist.header'); + } + + public function save() + { + $disk = Storage::disk('static'); + $header = $this->header->store('artist_headers', 'static'); + + Image::load($disk->path($header)) + ->manualCrop($this->width, $this->height, $this->x, $this->y) + ->save(); + Image::load($disk->path($header)) + ->width(270) + ->height(185) + ->save(); + ImageOptimizer::optimize($disk->path($header)); + auth()->user()->artists()->first()->update(compact('header')); + $this->header = null; + return redirect(request()->header('Referer')); + } +} diff --git a/site/app/Models/Artist.php b/site/app/Models/Artist.php index 7e1f7a9..15d7634 100644 --- a/site/app/Models/Artist.php +++ b/site/app/Models/Artist.php @@ -64,9 +64,17 @@ public function wallets() public function avatar() { if (!$this->avatar) { - return config('app.static_asset_url') . '/' . ('avatars/default_avatar_male.svg'); + return config('app.static_asset_url') . '/avatars/default_avatar_male.svg'; } return config('app.static_asset_url') . '/' . $this->avatar; } + public function header() + { + if (!$this->header) { + return config('app.static_asset_url') . '/artist_headers/default_artist_banner.png'; + } + return config('app.static_asset_url') . '/' . $this->header; + } + } diff --git a/site/resources/views/livewire/artist/avatar.blade.php b/site/resources/views/livewire/artist/avatar.blade.php index 77fcb8f..977cf4f 100644 --- a/site/resources/views/livewire/artist/avatar.blade.php +++ b/site/resources/views/livewire/artist/avatar.blade.php @@ -21,7 +21,7 @@ class="d-flex flex-column justify-content-center" x-init="setUp" > <div class="d-flex justify-content-center text-center mt-4 mb-4"> - <img id="avatar" src="{{ $avatar->temporaryUrl() }}" style="width: 100%; max-width: 100%;"> + <img id="avatar" src="{{ $avatar->temporaryUrl() }}" style="width: 100%; max-width: 350px; margin:5px auto;"> </div> <div class="d-flex justify-content-end text-end mt-4 mb-4"> <button type="submit" class="btn btn-gradient btn-small"> @@ -32,7 +32,7 @@ class="d-flex flex-column justify-content-center" @else <div class="mb-2 mx-2"> <label for="avatar" style="width: 100%;"> - <img src="{{ auth()->user()->artists()->first()->avatar() }}" style="width: 100%; max-width: 100%;"> + <img src="{{ auth()->user()->artists()->first()->avatar() }}" style="width: 100%; max-width: 350px;"> </label> </div> <div class="mb-2 mx-2"> diff --git a/site/resources/views/livewire/artist/header.blade.php b/site/resources/views/livewire/artist/header.blade.php new file mode 100644 index 0000000..5aa5329 --- /dev/null +++ b/site/resources/views/livewire/artist/header.blade.php @@ -0,0 +1,42 @@ +<form wire:submit.prevent="save"> + @if($header) + <div + class="d-flex flex-column justify-content-center" + wire:ignore + x-data="{ + setUp() { + const cropper = new Cropper(document.getElementById('header'), { + aspectRatio: 1.46, + autoCropArea: 1, + viewMode: 1, + crop (event) { + @this.set('x', event.detail.x) + @this.set('y', event.detail.y) + @this.set('width', event.detail.width) + @this.set('height', event.detail.height) + } + }) + } + }" + x-init="setUp" + > + <div class="d-flex justify-content-center text-center mt-4 mb-4"> + <img id="header" src="{{ $header->temporaryUrl() }}" style="width: 100%; max-width: 270px; margin:5px auto;"> + </div> + <div class="d-flex justify-content-end text-end mt-4 mb-4"> + <button type="submit" class="btn btn-gradient btn-small"> + <span>Save Profile Header</span> + </button> + </div> + </div> + @else + <div class="mb-2 mx-2"> + <label for="header" style="width: 100%;"> + <img src="{{ auth()->user()->artists()->first()->header() }}" style="width: 100%; max-width: 270px; margin:5px auto;"> + </label> + </div> + <div class="mb-2 mx-2"> + <input type="file" name="header" id="header" class="sr-only" wire:model="header"> + </div> + @endif +</form> diff --git a/site/resources/views/partials/nav/head.blade.php b/site/resources/views/partials/nav/head.blade.php index 60a6b9b..4601936 100644 --- a/site/resources/views/partials/nav/head.blade.php +++ b/site/resources/views/partials/nav/head.blade.php @@ -77,9 +77,6 @@ </ul> </li> @endif - @if (auth()->user()) - <livewire:themeswitch /> - @else <li> <label class="theme-switcher-label d-flex" for="theme-switcher"> <input type="checkbox" class="theme-switcher" id="theme-switcher"> @@ -89,7 +86,6 @@ </div> </label> </li> - @endif <li class="setting-option mobile-menu-bar d-block d-xl-none"> <button class="hamburger-button"> <i class="ri-menu-2-fill"></i> @@ -121,7 +117,19 @@ </div> </div> <nav> + <ul class="mainmenu"> @include('partials/nav/main') + <li class="has-dropdown has-menu-child-item"> + <a {!! request()->is(['podcasts', 'podcasts/*']) ? 'class="active"' : '' !!}>Podcasts</a> + <ul class="submenu"> + @foreach ($navPodcasts as $cast) + <li> + <a href="/podcasts/{{ $cast->slug }}">{{ $cast->name }}</a> + </li> + @endforeach + </ul> + </li> + </ul> </nav> </div> </div> diff --git a/site/resources/views/partials/nav/main.blade.php b/site/resources/views/partials/nav/main.blade.php index 20f1b4a..ed6e0b2 100644 --- a/site/resources/views/partials/nav/main.blade.php +++ b/site/resources/views/partials/nav/main.blade.php @@ -5,7 +5,7 @@ <a {!! request()->is(['artworks', 'artworks/*']) ? 'class="active"' : '' !!} href="/artworks">Submitted</a> </li> <li> - <a {!! request()->is(['artists', 'artists/*']) ? 'class="active"' : '' !!} href="/artists">Artists</a> + <a {!! request()->is(['artists', 'artists/*', 'artist', 'artist/*', 'profile']) ? 'class="active"' : '' !!} href="/artists">Artists</a> </li> @if (auth()->user()) <li> diff --git a/site/resources/views/profile/edit.blade.php b/site/resources/views/profile/edit.blade.php index 5aab319..27a62f0 100644 --- a/site/resources/views/profile/edit.blade.php +++ b/site/resources/views/profile/edit.blade.php @@ -27,6 +27,9 @@ <div class="col-xl-4 col-lg-12 mb-4"> @include('profile.partials.update-avatar-form') </div> + <div class="col-xl-4 col-lg-12 mb-4"> + @include('profile.partials.update-header-form') + </div> </div> </div> </section> diff --git a/site/resources/views/profile/partials/single-artist-card.blade.php b/site/resources/views/profile/partials/single-artist-card.blade.php index d0e87f0..58cfd76 100644 --- a/site/resources/views/profile/partials/single-artist-card.blade.php +++ b/site/resources/views/profile/partials/single-artist-card.blade.php @@ -1,6 +1,6 @@ <div class="single-author profile flex-stretch"> <div class="thumb"> - <img src="{{ Vite::asset($artist->header ?? 'resources/img/artist-dark-banner-default.png') }}" alt="{{ $artist->name }}'s Cover Photo" /> + <img src="{{ $artist->header() }}" alt="{{ $artist->name }}'s Cover Photo" /> </div> <div class="content"> <a href="/artist/{{ $artist->slug }}"><img class="author-thumb avatar_img" src="{{ $artist->avatar() }}" diff --git a/site/resources/views/profile/partials/update-avatar-form.blade.php b/site/resources/views/profile/partials/update-avatar-form.blade.php index 87e970e..c767a91 100644 --- a/site/resources/views/profile/partials/update-avatar-form.blade.php +++ b/site/resources/views/profile/partials/update-avatar-form.blade.php @@ -1,10 +1,11 @@ -<div class="authbox"> +<div class="authbox" style="min-height: 100%;"> <div class="row mt-4 gutter-2"> <div class="col"> <div class="signin-content"> <div class="mb-6"> - <h2 class="mb-2">{{ __('Update Artist Avatar') }}</h2> + <h3 class="mb-2">{{ __('Update Artist Avatar') }}</h3> <p class="normal">{{ __('This avatar will be used on the artist gallery and artist profile page.') }}</p> + <p class="small">Be patient, it takes a moment to process.</p> </div> </div> </div> diff --git a/site/resources/views/profile/partials/update-header-form.blade.php b/site/resources/views/profile/partials/update-header-form.blade.php new file mode 100644 index 0000000..d3377ee --- /dev/null +++ b/site/resources/views/profile/partials/update-header-form.blade.php @@ -0,0 +1,18 @@ +<div class="authbox" style="min-height: 100%;"> + <div class="row mt-4 gutter-2"> + <div class="col"> + <div class="signin-content"> + <div class="mb-6"> + <h3 class="mb-2">{{ __('Update Profile Header') }}</h3> + <p class="normal">{{ __('This header is used in the artist listing and artist profile page.') }}</p> + <p class="small">Be patient, it takes a moment to process.</p> + </div> + </div> + </div> + </div> + <div class="row mt-0 gutter-2"> + <div class="col"> + <livewire:artist.header /> + </div> + </div> +</div> diff --git a/site/resources/views/profile/partials/update-password-form.blade.php b/site/resources/views/profile/partials/update-password-form.blade.php index 38cbbc7..dc0ecc6 100644 --- a/site/resources/views/profile/partials/update-password-form.blade.php +++ b/site/resources/views/profile/partials/update-password-form.blade.php @@ -1,9 +1,9 @@ -<div class="authbox"> +<div class="authbox" style="min-height: 100%;"> <div class="row mt-4 gutter-2"> <div class="col"> <div class="signin-content"> <div class="mb-6"> - <h2 class="mb-2">{{ __('Update Password') }}</h2> + <h3 class="mb-2">{{ __('Update Password') }}</h3> <p class="normal">{{ __('Ensure your account is using a long, random password to stay secure.') }}</p> </div> </div> diff --git a/site/resources/views/profile/partials/update-profile-information-form.blade.php b/site/resources/views/profile/partials/update-profile-information-form.blade.php index e1dde59..8b31293 100644 --- a/site/resources/views/profile/partials/update-profile-information-form.blade.php +++ b/site/resources/views/profile/partials/update-profile-information-form.blade.php @@ -1,9 +1,9 @@ -<div class="authbox"> +<div class="authbox" style="min-height: 100%;"> <div class="row mt-4 gutter-2"> <div class="col"> <div class="signin-content"> <div class="mb-6"> - <h2 class="mb-2">{{ __('Update Login') }}</h2> + <h3 class="mb-2">{{ __('Update Login') }}</h3> <p class="normal">{{ __("Update your account's username and email address. Note, your username may not be the same as your public artist profile.") }}</p> </div> </div>