fix: adding ability to update artist bg

This commit is contained in:
2023-12-20 19:45:19 +00:00
parent 87198b46a5
commit a156a44130
13 changed files with 147 additions and 15 deletions

View File

@@ -21,7 +21,7 @@
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 @@
@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">

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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() }}"

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>