mirror of
https://github.com/vitodeploy/vito.git
synced 2025-07-07 00:42:34 +00:00
Migrate to HTMX (#114)
Dropped Livewire Added HTMX Added Blade code lint Drop Mysql and Redis Migrate to SQLite
This commit is contained in:
Saeed Vaziry
GitHub
@ -1,24 +1,31 @@
|
||||
<div class="flex items-center text-gray-600 dark:text-gray-300" x-data="{
|
||||
theme: localStorage.theme,
|
||||
isDark() {
|
||||
if (this.theme === 'dark') {
|
||||
return true
|
||||
}
|
||||
return this.theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
},
|
||||
changeTheme(theme) {
|
||||
this.theme = theme;
|
||||
localStorage.theme = theme;
|
||||
this.updateDocument();
|
||||
},
|
||||
updateDocument() {
|
||||
if (this.isDark()) {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
}
|
||||
}" x-init="updateDocument()">
|
||||
<div
|
||||
class="flex items-center text-gray-600 dark:text-gray-300"
|
||||
x-data="{
|
||||
theme: localStorage.theme,
|
||||
isDark() {
|
||||
if (this.theme === 'dark') {
|
||||
return true
|
||||
}
|
||||
return (
|
||||
this.theme === 'system' &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
)
|
||||
},
|
||||
changeTheme(theme) {
|
||||
this.theme = theme
|
||||
localStorage.theme = theme
|
||||
this.updateDocument()
|
||||
},
|
||||
updateDocument() {
|
||||
if (this.isDark()) {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
},
|
||||
}"
|
||||
x-init="updateDocument()"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center justify-end">
|
||||
<x-dropdown>
|
||||
@ -30,13 +37,25 @@
|
||||
</x-slot>
|
||||
<x-slot name="content">
|
||||
<x-dropdown-link class="cursor-pointer" x-on:click="changeTheme('dark')">
|
||||
<x-heroicon-o-moon class="h-5 w-5 mr-2" x-bind:class="theme === 'dark' ? 'text-primary-600' : ''" /> {{ __("Dark") }}
|
||||
<x-heroicon-o-moon
|
||||
class="mr-2 h-5 w-5"
|
||||
x-bind:class="theme === 'dark' ? 'text-primary-600' : ''"
|
||||
/>
|
||||
{{ __("Dark") }}
|
||||
</x-dropdown-link>
|
||||
<x-dropdown-link class="cursor-pointer" x-on:click="changeTheme('light')">
|
||||
<x-heroicon-o-sun class="h-5 w-5 mr-2" x-bind:class="theme === 'light' ? 'text-primary-600' : ''" /> {{ __("Light") }}
|
||||
<x-heroicon-o-sun
|
||||
class="mr-2 h-5 w-5"
|
||||
x-bind:class="theme === 'light' ? 'text-primary-600' : ''"
|
||||
/>
|
||||
{{ __("Light") }}
|
||||
</x-dropdown-link>
|
||||
<x-dropdown-link class="cursor-pointer" x-on:click="changeTheme('system')">
|
||||
<x-heroicon-o-computer-desktop class="h-5 w-5 mr-2" x-bind:class="theme === 'system' ? 'text-primary-600' : ''" /> {{ __("System") }}
|
||||
<x-heroicon-o-computer-desktop
|
||||
class="mr-2 h-5 w-5"
|
||||
x-bind:class="theme === 'system' ? 'text-primary-600' : ''"
|
||||
/>
|
||||
{{ __("System") }}
|
||||
</x-dropdown-link>
|
||||
</x-slot>
|
||||
</x-dropdown>
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="/favicon/manifest.json">
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png" />
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png" />
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png" />
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png" />
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png" />
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png" />
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png" />
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png" />
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-192x192.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/favicon/manifest.json" />
|
||||
<meta name="msapplication-TileColor" content="#ffffff" />
|
||||
<meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
|
||||
@ -1,30 +1,61 @@
|
||||
<div x-data="projectCombobox()">
|
||||
<div class="relative">
|
||||
<div @click="open = !open" class="z-0 w-full cursor-pointer px-4 py-3 pr-10 text-md leading-5 text-gray-100 focus:ring-1 focus:ring-gray-700 bg-gray-900 rounded-md h-10 flex items-center" x-text="selected.name ?? 'Select Project'"></div>
|
||||
<button type="button" @click="open = !open" class="z-0 absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5 text-gray-400"><path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd"></path></svg>
|
||||
<div
|
||||
@click="open = !open"
|
||||
class="text-md z-0 flex h-10 w-full cursor-pointer items-center rounded-md bg-gray-900 px-4 py-3 pr-10 leading-5 text-gray-100 focus:ring-1 focus:ring-gray-700"
|
||||
x-text="selected.name ?? 'Select Project'"
|
||||
></div>
|
||||
<button type="button" @click="open = !open" class="absolute inset-y-0 right-0 z-0 flex items-center pr-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
class="h-5 w-5 text-gray-400"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
x-show="open"
|
||||
@click.away="open = false"
|
||||
class="z-10 absolute mt-1 w-full overflow-auto rounded-md pb-1 bg-white dark:bg-gray-700 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
||||
<div class="p-2 relative">
|
||||
<input x-model="query"
|
||||
@input="filterProjectsAndOpen"
|
||||
placeholder="Filter"
|
||||
class="w-full py-2 pl-3 pr-10 text-sm leading-5 dark:text-gray-100 focus:ring-1 focus:ring-gray-400 dark:focus:ring-800 bg-gray-200 dark:bg-gray-900 rounded-md"
|
||||
>
|
||||
class="absolute z-10 mt-1 w-full overflow-auto rounded-md bg-white pb-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-700 sm:text-sm"
|
||||
>
|
||||
<div class="relative p-2">
|
||||
<input
|
||||
x-model="query"
|
||||
@input="filterProjectsAndOpen"
|
||||
placeholder="Filter"
|
||||
class="dark:focus:ring-800 w-full rounded-md bg-gray-200 py-2 pl-3 pr-10 text-sm leading-5 focus:ring-1 focus:ring-gray-400 dark:bg-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative max-h-[350px] overflow-y-auto">
|
||||
<template x-for="(project, index) in filteredProjects" :key="index">
|
||||
<div
|
||||
@click="selectProject(project); open = false"
|
||||
:class="project.id === selected.id ? 'cursor-default bg-primary-600 text-white' : 'cursor-pointer'"
|
||||
class="relative select-none py-2 px-4 text-gray-700 dark:text-white hover:bg-primary-600 hover:text-white">
|
||||
class="relative select-none px-4 py-2 text-gray-700 hover:bg-primary-600 hover:text-white dark:text-white"
|
||||
>
|
||||
<span class="block truncate" x-text="project.name"></span>
|
||||
<template x-if="project.id === selected.id">
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-3 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path></svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
class="h-5 w-5"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
@ -32,23 +63,26 @@ class="relative select-none py-2 px-4 text-gray-700 dark:text-white hover:bg-pri
|
||||
</div>
|
||||
<div
|
||||
x-show="filteredProjects.length === 0"
|
||||
class="relative cursor-default select-none py-2 px-4 text-gray-700 dark:text-white block truncate">
|
||||
class="relative block cursor-default select-none truncate px-4 py-2 text-gray-700 dark:text-white"
|
||||
>
|
||||
No projects found!
|
||||
</div>
|
||||
<div class="py-1">
|
||||
<hr class="border-gray-300 dark:border-gray-600">
|
||||
<hr class="border-gray-300 dark:border-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="{{ route('projects') }}"
|
||||
class="relative select-none py-2 px-4 text-gray-700 dark:text-white hover:bg-primary-600 hover:text-white block cursor-pointer">
|
||||
href="{{ route("projects") }}"
|
||||
class="relative block cursor-pointer select-none px-4 py-2 text-gray-700 hover:bg-primary-600 hover:text-white dark:text-white"
|
||||
>
|
||||
<span class="block truncate">Projects List</span>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="{{ route('projects', ['create' => true]) }}"
|
||||
class="relative select-none py-2 px-4 text-gray-700 dark:text-white hover:bg-primary-600 hover:text-white block cursor-pointer">
|
||||
href="{{ route("projects", ["create" => true]) }}"
|
||||
class="relative block cursor-pointer select-none px-4 py-2 text-gray-700 hover:bg-primary-600 hover:text-white dark:text-white"
|
||||
>
|
||||
<span class="block truncate">Create a Project</span>
|
||||
</a>
|
||||
</div>
|
||||
@ -68,7 +102,7 @@ function projectCombobox() {
|
||||
selectProject(project) {
|
||||
if (this.selected.id !== project.id) {
|
||||
this.selected = project;
|
||||
window.location.href = '{{ url('/settings/projects/') }}/' + project.id
|
||||
window.location.href = '{{ url('/settings/projects/switch') }}/' + project.id
|
||||
}
|
||||
},
|
||||
filterProjectsAndOpen() {
|
||||
|
||||
@ -1,30 +1,61 @@
|
||||
<div x-data="serverCombobox()">
|
||||
<div class="relative">
|
||||
<div @click="open = !open" class="z-0 w-full cursor-pointer px-4 py-3 pr-10 text-md leading-5 text-gray-100 focus:ring-1 focus:ring-gray-700 bg-gray-900 rounded-md h-10 flex items-center" x-text="selected.name ?? 'Select Server'"></div>
|
||||
<button type="button" @click="open = !open" class="z-0 absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5 text-gray-400"><path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd"></path></svg>
|
||||
<div
|
||||
@click="open = !open"
|
||||
class="text-md z-0 flex h-10 w-full cursor-pointer items-center rounded-md bg-gray-900 px-4 py-3 pr-10 leading-5 text-gray-100 focus:ring-1 focus:ring-gray-700"
|
||||
x-text="selected.name ?? 'Select Server'"
|
||||
></div>
|
||||
<button type="button" @click="open = !open" class="absolute inset-y-0 right-0 z-0 flex items-center pr-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
class="h-5 w-5 text-gray-400"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
x-show="open"
|
||||
@click.away="open = false"
|
||||
class="z-10 absolute mt-1 w-full overflow-auto rounded-md pb-1 bg-white dark:bg-gray-700 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
||||
<div class="p-2 relative">
|
||||
<input x-model="query"
|
||||
@input="filterServersAndOpen"
|
||||
placeholder="Filter"
|
||||
class="w-full py-2 pl-3 pr-10 text-sm leading-5 dark:text-gray-100 focus:ring-1 focus:ring-gray-400 dark:focus:ring-800 bg-gray-200 dark:bg-gray-900 rounded-md"
|
||||
>
|
||||
class="absolute z-10 mt-1 w-full overflow-auto rounded-md bg-white pb-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-700 sm:text-sm"
|
||||
>
|
||||
<div class="relative p-2">
|
||||
<input
|
||||
x-model="query"
|
||||
@input="filterServersAndOpen"
|
||||
placeholder="Filter"
|
||||
class="dark:focus:ring-800 w-full rounded-md bg-gray-200 py-2 pl-3 pr-10 text-sm leading-5 focus:ring-1 focus:ring-gray-400 dark:bg-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative max-h-[350px] overflow-y-auto">
|
||||
<template x-for="(server, index) in filteredServers" :key="index">
|
||||
<div
|
||||
@click="selectServer(server); open = false"
|
||||
:class="server.id === selected.id ? 'cursor-default bg-primary-600 text-white' : 'cursor-pointer'"
|
||||
class="relative select-none py-2 px-4 text-gray-700 dark:text-white hover:bg-primary-600 hover:text-white">
|
||||
class="relative select-none px-4 py-2 text-gray-700 hover:bg-primary-600 hover:text-white dark:text-white"
|
||||
>
|
||||
<span class="block truncate" x-text="server.name"></span>
|
||||
<template x-if="server.id === selected.id">
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-3 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path></svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
class="h-5 w-5"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
@ -32,23 +63,26 @@ class="relative select-none py-2 px-4 text-gray-700 dark:text-white hover:bg-pri
|
||||
</div>
|
||||
<div
|
||||
x-show="filteredServers.length === 0"
|
||||
class="relative cursor-default select-none py-2 px-4 text-gray-700 dark:text-white block truncate">
|
||||
class="relative block cursor-default select-none truncate px-4 py-2 text-gray-700 dark:text-white"
|
||||
>
|
||||
No servers found!
|
||||
</div>
|
||||
<div class="py-1">
|
||||
<hr class="border-gray-300 dark:border-gray-600">
|
||||
<hr class="border-gray-300 dark:border-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="{{ route('servers') }}"
|
||||
class="relative select-none py-2 px-4 text-gray-700 dark:text-white hover:bg-primary-600 hover:text-white block @if(request()->routeIs('servers')) cursor-default bg-primary-600 text-white @else cursor-pointer @endif">
|
||||
href="{{ route("servers") }}"
|
||||
class="@if(request()->routeIs('servers')) cursor-default bg-primary-600 text-white @else cursor-pointer @endif relative block select-none px-4 py-2 text-gray-700 hover:bg-primary-600 hover:text-white dark:text-white"
|
||||
>
|
||||
<span class="block truncate">Servers List</span>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="{{ route('servers.create') }}"
|
||||
class="relative select-none py-2 px-4 text-gray-700 dark:text-white hover:bg-primary-600 hover:text-white block @if(request()->routeIs('servers.create')) cursor-default bg-primary-600 text-white @else cursor-pointer @endif">
|
||||
href="{{ route("servers.create") }}"
|
||||
class="@if(request()->routeIs('servers.create')) cursor-default bg-primary-600 text-white @else cursor-pointer @endif relative block select-none px-4 py-2 text-gray-700 hover:bg-primary-600 hover:text-white dark:text-white"
|
||||
>
|
||||
<span class="block truncate">Create a Server</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -1,30 +1,61 @@
|
||||
<div x-data="siteCombobox()">
|
||||
<div class="relative">
|
||||
<div @click="open = !open" class="w-full cursor-pointer px-4 py-3 pr-10 text-md leading-5 dark:text-gray-100 focus:ring-1 focus:ring-gray-700 bg-gray-200 dark:bg-gray-800 rounded-md h-10 flex items-center" x-text="selected.domain ?? 'Select Site'"></div>
|
||||
<div
|
||||
@click="open = !open"
|
||||
class="text-md flex h-10 w-full cursor-pointer items-center rounded-md bg-gray-200 px-4 py-3 pr-10 leading-5 focus:ring-1 focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-100"
|
||||
x-text="selected.domain ?? 'Select Site'"
|
||||
></div>
|
||||
<button type="button" @click="open = !open" class="absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5 text-gray-400"><path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd"></path></svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
class="h-5 w-5 text-gray-400"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
x-show="open"
|
||||
@click.away="open = false"
|
||||
class="absolute mt-1 w-full overflow-auto rounded-md pb-1 bg-white dark:bg-gray-700 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
||||
<div class="p-2 relative">
|
||||
<input x-model="query"
|
||||
@input="filterSitesAndOpen"
|
||||
placeholder="Filter"
|
||||
class="w-full py-2 pl-3 pr-10 text-sm leading-5 dark:text-gray-100 focus:ring-1 focus:ring-gray-400 dark:focus:ring-800 bg-gray-200 dark:bg-gray-800 rounded-md"
|
||||
>
|
||||
class="absolute mt-1 w-full overflow-auto rounded-md bg-white pb-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-700 sm:text-sm"
|
||||
>
|
||||
<div class="relative p-2">
|
||||
<input
|
||||
x-model="query"
|
||||
@input="filterSitesAndOpen"
|
||||
placeholder="Filter"
|
||||
class="dark:focus:ring-800 w-full rounded-md bg-gray-200 py-2 pl-3 pr-10 text-sm leading-5 focus:ring-1 focus:ring-gray-400 dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative max-h-[350px] overflow-y-auto">
|
||||
<template x-for="(site, index) in filteredSites" :key="index">
|
||||
<div
|
||||
@click="selectSite(site); open = false"
|
||||
:class="site.id === selected.id ? 'cursor-default bg-primary-600 text-white' : 'cursor-pointer'"
|
||||
class="relative select-none py-2 px-4 text-gray-700 dark:text-white hover:bg-primary-600 hover:text-white">
|
||||
class="relative select-none px-4 py-2 text-gray-700 hover:bg-primary-600 hover:text-white dark:text-white"
|
||||
>
|
||||
<span class="block truncate" x-text="site.domain"></span>
|
||||
<template x-if="site.id === selected.id">
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-3 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5 w-5"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path></svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
class="h-5 w-5"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
@ -32,23 +63,26 @@ class="relative select-none py-2 px-4 text-gray-700 dark:text-white hover:bg-pri
|
||||
</div>
|
||||
<div
|
||||
x-show="filteredSites.length === 0"
|
||||
class="relative cursor-default select-none py-2 px-4 text-gray-700 dark:text-white block truncate">
|
||||
class="relative block cursor-default select-none truncate px-4 py-2 text-gray-700 dark:text-white"
|
||||
>
|
||||
No sites found!
|
||||
</div>
|
||||
<div class="py-1">
|
||||
<hr class="border-gray-300 dark:border-gray-600">
|
||||
<hr class="border-gray-300 dark:border-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="{{ route('servers.sites', ['server' => $server]) }}"
|
||||
class="relative select-none py-2 px-4 text-gray-700 dark:text-white hover:bg-primary-600 hover:text-white block @if(request()->routeIs('sites')) cursor-default bg-primary-600 text-white @else cursor-pointer @endif">
|
||||
href="{{ route("servers.sites", ["server" => $server]) }}"
|
||||
class="@if(request()->routeIs('sites')) cursor-default bg-primary-600 text-white @else cursor-pointer @endif relative block select-none px-4 py-2 text-gray-700 hover:bg-primary-600 hover:text-white dark:text-white"
|
||||
>
|
||||
<span class="block truncate">Sites List</span>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="{{ route('servers.sites.create', ['server' => $server]) }}"
|
||||
class="relative select-none py-2 px-4 text-gray-700 dark:text-white hover:bg-primary-600 hover:text-white block @if(request()->routeIs('sites.create')) cursor-default bg-primary-600 text-white @else cursor-pointer @endif">
|
||||
href="{{ route("servers.sites.create", ["server" => $server]) }}"
|
||||
class="@if(request()->routeIs('sites.create')) cursor-default bg-primary-600 text-white @else cursor-pointer @endif relative block select-none px-4 py-2 text-gray-700 hover:bg-primary-600 hover:text-white dark:text-white"
|
||||
>
|
||||
<span class="block truncate">Create a Site</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user