WIP
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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' }},
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user