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-05-15 12:28:03 +02:00
commit 173121216e
123 changed files with 13733 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
resources/views/components/category-filter-pill.blade.php Normal file
View File

@@ -0,0 +1,12 @@
@props(['active' => false ])
@if($active)
<li {{ $attributes }} class="inline-block m-2 relative after:absolute after:left-0 after:bottom-1 after:border-yellow-pfadi after:-z-10 after:border-4 dark:after:opacity-80 after:w-full text-black dark:text-white">
{{ $slot }}
</li>
@else
<li {{ $attributes }} class="inline-block m-2 dark:text-gray-100 dark:hover:text-white text-gray-400 relative hover:text-black after:w-0
cursor-pointer after:border-0 after:absolute after:left-0 after:bottom-1 dark:after:opacity-80 after:border-yellow-pfadi hover:after:border-4 hover:after:w-full after:transition-all after:duration-100 after:ease-out after:-z-10">
{{ $slot }}
</li>
@endif

3
resources/views/components/drawer-trigger.blade.php Normal file
View File

@@ -0,0 +1,3 @@
<div @click="$dispatch('drawer-{{ $action }}-{{ $target }}')">
{{ $slot }}
</div>

22
resources/views/components/drawer.blade.php Normal file
View File

@@ -0,0 +1,22 @@
<template x-teleport="body">
<div
id="drawer-{{ $name }}"
tabindex="-1"
class="fixed z-40 w-full overflow-y-auto bg-white border-t border-gray-200 rounded-t-lg dark:border-gray-700 dark:bg-gray-800 transition-transform left-0 right-0 bottom-0"
aria-labelledby="drawer-{{ $name }}"
x-data="{ show: false }"
@drawer-open-{{ $name }}.window="show = true"
@drawer-close-{{ $name }}.window="show = false"
:class="{ 'translate-y-full': !show }"
x-cloak
>
<div class="p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700" @click="show = false">
<span class="absolute w-8 h-1 -translate-x-1/2 bg-gray-300 rounded-lg top-3 left-1/2 dark:bg-gray-600">
</span>
<h5 class="inline-flex items-center text-base text-gray-500 dark:text-gray-400 font-medium">
{{ $title }}
</h5>
</div>
{{ $content }}
</div>
</template>

14
resources/views/components/hero-search.blade.php Normal file
View File

@@ -0,0 +1,14 @@
<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>
</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>

26
resources/views/components/layout.blade.php Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html
lang="{{ str_replace('_', '-', app()->getLocale()) }}"
x-data="{ darkMode: $persist(false) }"
:class="{'dark': darkMode }"
x-init="
if (!('darkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) {
localStorage.setItem('darkMode', JSON.stringify(true));
}
darkMode = JSON.parse(localStorage.getItem('darkMode'));
$watch('darkMode', value => localStorage.setItem('darkMode', JSON.stringify(value)))"
>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@vite('resources/css/app.css')
@vite('resources/js/app.js')
<title>{{ $title ?? config('app.name') }}</title>
</head>
<body class="bg-white dark:bg-gray-800">
<x-theme-switcher />
{{ $slot }}
<x-menu />
</body>
</html>

9
resources/views/components/menu-action.blade.php Normal file
View File

@@ -0,0 +1,9 @@
@props(['tooltip' => 'Unknown' ])
<button type="button" class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group first:rounded-s-full last:rounded-e-full">
{{ $slot }}
<span class="sr-only">{{ $tooltip }}</span>
<div role="tooltip" class="absolute z-10 group-hover:visible group-hover:opacity-100 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 dark:bg-gray-700 -translate-y-full origin-top-left -mt-2 top-0">
{{ $tooltip }}
</div>
</button>

16
resources/views/components/menu.blade.php Normal file
View File

@@ -0,0 +1,16 @@
<div class="fixed z-50 w-full h-16 max-w-lg -translate-x-1/2 bg-white border border-gray-200 rounded-full bottom-4 left-1/2 dark:bg-gray-700 dark:border-gray-600">
<div class="grid grid-flow-col h-full max-w-lg mx-auto">
<x-menu-action tooltip="Startseite">
<svg class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
</svg>
</x-menu-action>
@stack('menu')
<x-menu-action tooltip="Profil">
<svg class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
</svg>
</x-menu-action>
</div>
</div>

14
resources/views/components/theme-switcher.blade.php Normal file
View File

@@ -0,0 +1,14 @@
<button x-cloak id="theme-toggle" data-tooltip-target="tooltip-toggle" type="button"
class="text-gray-500 inline-flex items-center justify-center dark:text-gray-400 hover:bg-gray-100 w-10 h-10 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5 right-0 absolute z-10"
@click="darkMode = !darkMode"
>
<svg x-show="!darkMode" id="theme-toggle-dark-icon" class="w-8 h-8" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
<path d="M17.8 13.75a1 1 0 0 0-.859-.5A7.488 7.488 0 0 1 10.52 2a1 1 0 0 0 0-.969A1.035 1.035 0 0 0 9.687.5h-.113a9.5 9.5 0 1 0 8.222 14.247 1 1 0 0 0 .004-.997Z"></path>
</svg>
<svg x-show="darkMode" id="theme-toggle-light-icon" class="w-8 h-8" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0-11a1 1 0 0 0 1-1V1a1 1 0 0 0-2 0v2a1 1 0 0 0 1 1Zm0 12a1 1 0 0 0-1 1v2a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1ZM4.343 5.757a1 1 0 0 0 1.414-1.414L4.343 2.929a1 1 0 0 0-1.414 1.414l1.414 1.414Zm11.314 8.486a1 1 0 0 0-1.414 1.414l1.414 1.414a1 1 0 0 0 1.414-1.414l-1.414-1.414ZM4 10a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h2a1 1 0 0 0 1-1Zm15-1h-2a1 1 0 1 0 0 2h2a1 1 0 0 0 0-2ZM4.343 14.243l-1.414 1.414a1 1 0 1 0 1.414 1.414l1.414-1.414a1 1 0 0 0-1.414-1.414ZM14.95 6.05a1 1 0 0 0 .707-.293l1.414-1.414a1 1 0 1 0-1.414-1.414l-1.414 1.414a1 1 0 0 0 .707 1.707Z"></path>
</svg>
<span x-show="!darkMode" class="sr-only">Dunkle Theme aktivieren</span>
<span x-show="darkMode" class="sr-only">Helle Theme aktivieren</span>
</button>