takin/project-minnesota
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Takin v/o Oliver Göldi
2024-06-01 03:10:30 +02:00
parent 1d41dea9fa
commit 26551964b1
25 changed files with 1808 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
resources/views/album/show.blade.php
View File

@@ -25,24 +25,28 @@
<h1 class="mb-4 mx-8 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
{{ $album->name }}
</h1>
<div class="m-8 flex flex-wrap flex-row gap-4">
@foreach ($album->images as $image)
<figure class="relative group rounded-lg cursor-pointer h-80 flex-grow overflow-hidden">
<img class="max-h-full min-w-full align-bottom object-cover"
src="{{ $image->getThumbnail() }}" alt="{{ $album->name }} Bild">
<div class="opacity-0 group-hover:opacity-40 absolute inset-0 w-full h-full bg-black flex items-center justify-center transition-opacity">
<svg class="w-1/2 h-1/2 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-width="2" d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6Z"/>
<path stroke="currentColor" stroke-width="2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
</svg>
</div>
</figure>
@endforeach
</div>
<x-drawer name="image-add" >
<x-slot:title>Neue Bilder zu {{ $album->name }} hinzufügen</x-slot:title>
<x-slot:content>
<livewire:drawer.album.addImage></livewire:drawer.album.addImage>
</x-slot:content>
</x-drawer>
@if($album->mutations->count() > 0)
<livewire:drawer.album.progress-monitor :mutation="$album->mutations->first()"/>
@else
<div class="m-8 flex flex-wrap flex-row gap-4">
@foreach ($album->images as $image)
<figure class="relative group rounded-lg cursor-pointer h-80 flex-grow overflow-hidden">
<img class="max-h-full min-w-full align-bottom object-cover"
src="{{ $image->getThumbnail() }}" alt="{{ $album->name }} Bild">
<div class="opacity-0 group-hover:opacity-40 absolute inset-0 w-full h-full bg-black flex items-center justify-center transition-opacity">
<svg class="w-1/2 h-1/2 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-width="2" d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6Z"/>
<path stroke="currentColor" stroke-width="2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
</svg>
</div>
</figure>
@endforeach
</div>
<x-drawer name="image-add" >
<x-slot:title>Neue Bilder zu {{ $album->name }} hinzufügen</x-slot:title>
<x-slot:content>
<livewire:drawer.album.addImage :album="$album"></livewire:drawer.album.addImage>
</x-slot:content>
</x-drawer>
@endif
</x-layout>

21
resources/views/components/drawer.blade.php
View File

@@ -3,8 +3,8 @@
x-data="{ show: false }"
class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 justify-center items-center w-full md:inset-0 h-screen max-h-full flex backdrop-blur-md bg-white/30 dark:bg-gray-800/30"
:class="{ 'translate-y-full': !show }"
@click="$dispatch('drawer-close-{{ $name }}')"
x-on:touchstart="$dispatch('drawer-close-{{ $name }}')"
@click.self="$dispatch('drawer-close-{{ $name }}')"
x-on:touchstart.self="$dispatch('drawer-close-{{ $name }}')"
>
<div
id="drawer-{{ $name }}"
@@ -16,16 +16,21 @@
:class="{ 'translate-y-full': !show, 'xl:-bottom-full': !show }"
>
<div
class="p-4 cursor-pointer max-xl:hover:bg-gray-50 max-xl:dark:hover:bg-gray-700 xl:border-b dark:border-gray-600 xl:flex xl:items-center xl:justify-between xl:p-4"
@click="$dispatch('drawer-close-{{ $name }}')"
x-on:touchstart="$dispatch('drawer-close-{{ $name }}')"
>
<span class="xl:hidden absolute w-8 h-1 -translate-x-1/2 bg-gray-300 rounded-lg top-3 left-1/2 dark:bg-gray-600">
class="p-4 cursor-pointer max-xl:hover:bg-gray-50 max-xl:dark:hover:bg-gray-700 xl:border-b dark:border-gray-600 xl:flex xl:items-center xl:justify-between xl:p-4">
<span
class="xl:hidden absolute w-8 h-1 -translate-x-1/2 bg-gray-300 rounded-lg top-3 left-1/2 dark:bg-gray-600"
@click="$dispatch('drawer-close-{{ $name }}')"
x-on:touchstart="$dispatch('drawer-close-{{ $name }}')"
>
</span>
<h5 class="inline-flex items-center text-base text-gray-500 dark:text-gray-400 font-medium">
{{ $title }}
</h5>
<button class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
<button
class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
@click="$dispatch('drawer-close-{{ $name }}')"
x-on:touchstart="$dispatch('drawer-close-{{ $name }}')"
>
<svg class="max-xl:hidden w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>

22
resources/views/components/form/upload.blade.php
View File

@@ -68,6 +68,28 @@
load();
},
},
imageResizeTargetWidth: 600,
imageCropAspectRatio: 1,
imageTransformVariants: {
thumb_medium_: (transforms) => {
transforms.resize = {
size: {
width: 384,
height: 384,
},
};
return transforms;
},
thumb_small_: (transforms) => {
transforms.resize = {
size: {
width: 128,
height: 128,
},
};
return transforms;
},
},
allowImagePreview: {{ $preview ? 'true' : 'false' }},
styleItemPanelAspectRatio: '0.5625',
allowFileTypeValidation: {{ $validate ? 'true' : 'false' }},

27
resources/views/components/hero-search.blade.php
View File

@@ -1,14 +1,17 @@
<form class="flex h-1/3 bg-cover relative">
<div class="relative m-auto w-1/2">
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Suchen</label>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
</svg>
@persist('search')
<form class="flex h-[300px] relative overflow-hidden mb-8">
<img class="absolute object-cover" src="/placeholder.jpg" />
<div class="relative m-auto w-1/2">
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Suchen</label>
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
</svg>
</div>
<input type="search" id="default-search" class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Nach Alben suchen" required />
<button type="submit" class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Suchen</button>
</div>
<input type="search" id="default-search" class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Nach Alben suchen" required />
<button type="submit" class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Suchen</button>
</div>
</div>
</form>
</form>
@endpersist

4
resources/views/components/layout.blade.php
View File

@@ -2,7 +2,7 @@
<html
lang="{{ str_replace('_', '-', app()->getLocale()) }}"
x-data="{ darkMode: $persist(false) }"
:class="{'dark': darkMode }"
:class="{'dark': darkMode}"
x-init="
if (!('darkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) {
localStorage.setItem('darkMode', JSON.stringify(true));
@@ -17,7 +17,7 @@
@vite('resources/js/app.js')
<title>{{ $title ?? config('app.name') }}</title>
</head>
<body class="bg-white dark:bg-gray-800">
<body class="bg-white dark:bg-gray-800 min-h-screen flex flex-col">
@persist('theme-switcher')
<x-theme-switcher />
@endpersist

11
resources/views/livewire/drawer/album/add-image.blade.php
View File

@@ -1,4 +1,9 @@
<form wire:submit="save" class="p-4">
<form
wire:submit="save"
class="p-4"
x-data="{loading: false, message: ''}"
x-on:import-progress-report="message = $event.detail.message"
>
<x-form.upload wire:model="media" name="media" label="Medien" multiple />
<button x-transition x-show="$store.uploader.states && $store.uploader.states.media == 3" disabled type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center">
@@ -17,5 +22,5 @@
<span class="font-medium">Dateien mit Fehlern vorhanden!</span> Du kannst nicht speichern, bis die Fehler behoben sind.
</div>
</div>
<button x-transition.delay.500ms x-show="$store.uploader.states && $store.uploader.states.media == 4" type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Speichern</button>
</div>
<button x-transition.delay.500ms x-show="$store.uploader.states && $store.uploader.states.media == 4" type="submit" @click="loading = true" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Speichern</button>
</form>