podcastartgenerator/site/resources/views/livewire/artist/header.blade.php

43 lines
1.7 KiB
PHP

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