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-23 16:51:55 +02:00
parent 6d4dd5f653
commit fc2b66528b
19 changed files with 277 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/views/components/drawer-trigger.blade.php
View File

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

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

@@ -1,22 +1,37 @@
<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"
<div x-cloak
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 }"
x-cloak
@click="$dispatch('drawer-close-{{ $name }}')"
x-on:touchstart="$dispatch('drawer-close-{{ $name }}')"
>
<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
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-all max-xl:left-0 max-xl:right-0 max-xl:bottom-0 max-h-full xl:m-auto xl:relative xl:p-4 xl:w-max xl:max-w-7xl xl:rounded-lg xl:border"
aria-labelledby="drawer-{{ $name }}"
@drawer-open-{{ $name }}.window="$dispatch('menu-hide'); show = true"
@drawer-close-{{ $name }}.window="show = false; $dispatch('menu-show')"
: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">
</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">
<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>
</button>
</div>
{{ $content }}
</div>
{{ $content }}
</div>
</template>

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

@@ -18,7 +18,9 @@
<title>{{ $title ?? config('app.name') }}</title>
</head>
<body class="bg-white dark:bg-gray-800">
<x-theme-switcher />
@persist('theme-switcher')
<x-theme-switcher />
@endpersist
{{ $slot }}
<x-menu />

10
resources/views/components/menu.blade.php
View File

@@ -1,6 +1,12 @@
<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="fixed z-50 w-11/12 h-16 max-w-lg -translate-x-1/2 bg-white border border-gray-200 rounded-full left-1/2 dark:bg-gray-700 dark:border-gray-600 transition-all"
x-data="{ visible: true }"
@menu-hide.window="visible = false"
@menu-show.window="visible = true"
:class="{ '-bottom-16': !visible, 'bottom-4': visible }"
x-cloak
>
<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"/>