css
This commit is contained in:
parent
a1483a4111
commit
9404071c95
@ -18,10 +18,22 @@ select {
|
||||
button {
|
||||
@apply border-none px-2 p-1 cursor-pointer;
|
||||
}
|
||||
.mainMenu {
|
||||
@apply relative float-left;
|
||||
.main-menu {
|
||||
@apply relative float-left ;
|
||||
}
|
||||
.mainMenu:after {
|
||||
.main-menu:after {
|
||||
content: '/';
|
||||
@apply absolute right-0 top-0 text-neutral-400 px-2 pt-1;
|
||||
}
|
||||
.magic-input {
|
||||
@apply w-96 rounded shadow outline-none focus:bg-neutral-700;
|
||||
}
|
||||
.magic-items {
|
||||
@apply text-xs absolute top-11 w-[25rem] bg-neutral-800;
|
||||
}
|
||||
.magic-item {
|
||||
@apply m-2 py-2 pl-4 cursor-pointer hover:bg-neutral-700 text-neutral-300 hover:text-white;
|
||||
}
|
||||
.magic-item-focused {
|
||||
@apply bg-neutral-700 text-white;
|
||||
}
|
||||
|
@ -31,7 +31,7 @@
|
||||
@else
|
||||
<input {{ $attributes }} @if ($required) required @endif
|
||||
@if (!$noDirty) wire:dirty.class="text-black bg-amber-300" @endif
|
||||
type={{ $type }} id={{ $id }}
|
||||
type={{ $type }} id={{ $id }} name={{ $id }}
|
||||
@if ($instantSave) wire:click='instantSave' wire:model.defer={{ $id }} @else wire:model.defer={{ $value ?? $id }} @endif />
|
||||
@endif
|
||||
@error($id)
|
||||
|
@ -21,6 +21,8 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a
|
||||
class="fixed text-xs cursor-pointer left-2 bottom-1 opacity-20 hover:opacity-100 hover:text-white">v{{ config('version') }}</a>
|
||||
@livewireScripts
|
||||
|
||||
@auth
|
||||
|
@ -2,20 +2,17 @@
|
||||
{{-- Main --}}
|
||||
<template x-cloak x-if="isMainMenu">
|
||||
<div>
|
||||
<div class="mainMenu">
|
||||
<input x-ref="search" x-model="search" class="w-96" x-on:click="checkMainMenu"
|
||||
x-on:click.outside="closeMenus" placeholder="Search, jump or create... magically..."
|
||||
x-on:keyup.escape="clearSearch" x-on:keyup.down="focusNext(items.length)"
|
||||
x-on:keyup.up="focusPrev(items.length)"
|
||||
<div class="main-menu">
|
||||
<input class="magic-input" x-ref="search" x-model="search" x-on:click="checkMainMenu"
|
||||
x-on:click.outside="closeMenus" placeholder="Search, jump or create... magically... 🪄"
|
||||
x-on:keyup.escape="clearSearch" x-on:keydown.down="focusNext(items.length)"
|
||||
x-on:keydown.up="focusPrev(items.length)"
|
||||
x-on:keyup.enter="focusedIndex !== '' && await set(filteredItems()[focusedIndex]?.next ?? 'server',filteredItems()[focusedIndex]?.name)" />
|
||||
</div>
|
||||
<div x-cloak x-show="mainMenu" class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<div x-show="mainMenu" class="magic-items">
|
||||
<template x-for="(item,index) in filteredItems" :key="item.name">
|
||||
<div x-on:click="await set(item.next ?? 'server',item.name)"
|
||||
:class="focusedIndex === index && 'bg-neutral-700'"
|
||||
:class="item.disabled &&
|
||||
'text-neutral-500 bg-neutral-900 hover:bg-neutral-900 cursor-not-allowed opacity-60'"
|
||||
class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
:class="focusedIndex === index && 'magic-item-focused'" class="magic-item">
|
||||
<span class="px-2 mr-1 text-xs bg-green-600 rounded" x-show="item.type === 'Add'"
|
||||
x-text="item.type"></span>
|
||||
<span class="px-2 mr-1 text-xs bg-purple-600 rounded" x-show="item.type === 'Jump'"
|
||||
@ -31,14 +28,13 @@
|
||||
{{-- Servers --}}
|
||||
<template x-cloak x-if="serverMenu">
|
||||
<div x-on:click.outside="closeMenus">
|
||||
<input x-ref="search" x-model="search" class="w-96" placeholder="Select a server..."
|
||||
x-on:keyup.down="focusNext(servers.length)" x-on:keyup.up="focusPrev(servers.length)"
|
||||
<input class="magic-input" x-ref="search" x-model="search" class="w-96" placeholder="Select a server..."
|
||||
x-on:keydown.down="focusNext(servers.length)" x-on:keydown.up="focusPrev(servers.length)"
|
||||
x-on:keyup.enter="focusedIndex !== '' && await set('destination',filteredServers()[focusedIndex].uuid)" />
|
||||
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<template x-for="(server,index) in filteredServers" :key="server.name ?? server">
|
||||
<div x-on:click="await set('destination',server.uuid)"
|
||||
:class="focusedIndex === index && 'bg-neutral-700'"
|
||||
class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
:class="focusedIndex === index && 'bg-neutral-700'" class="magic-item">
|
||||
<span class="px-2 mr-1 text-xs bg-purple-600 rounded">Server</span>
|
||||
<span x-text="server.name"></span>
|
||||
</div>
|
||||
@ -49,14 +45,14 @@
|
||||
{{-- Destinations --}}
|
||||
<template x-cloak x-if="destinationMenu">
|
||||
<div x-on:click.outside="closeMenus">
|
||||
<input x-ref="search" x-model="search" class="w-96" placeholder="Select a destination..."
|
||||
x-on:keyup.down="focusNext(destinations.length)" x-on:keyup.up="focusPrev(destinations.length)"
|
||||
<input class="magic-input" x-ref="search" x-model="search" class="w-96"
|
||||
placeholder="Select a destination..." x-on:keydown.down="focusNext(destinations.length)"
|
||||
x-on:keydown.up="focusPrev(destinations.length)"
|
||||
x-on:keyup.enter="focusedIndex !== '' && await set('project',filteredDestinations()[focusedIndex].uuid)" />
|
||||
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<template x-for="(destination,index) in filteredDestinations" :key="destination.name ?? destination">
|
||||
<div x-on:click="await set('project',destination.uuid)"
|
||||
:class="focusedIndex === index && 'bg-neutral-700'"
|
||||
class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
:class="focusedIndex === index && 'bg-neutral-700'" cclass="magic-item">
|
||||
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Destination</span>
|
||||
<span x-text="destination.name"></span>
|
||||
</div>
|
||||
@ -67,19 +63,18 @@
|
||||
{{-- Projects --}}
|
||||
<template x-cloak x-if="projectMenu">
|
||||
<div x-on:click.outside="closeMenus">
|
||||
<input x-ref="search" x-model="search" class="w-96" placeholder="Type your project name..."
|
||||
x-on:keyup.down="focusNext(projects.length + 1)" x-on:keyup.up="focusPrev(projects.length + 1)"
|
||||
<input class="magic-input" x-ref="search" x-model="search" class="w-96"
|
||||
placeholder="Type your project name..." x-on:keydown.down="focusNext(projects.length + 1)"
|
||||
x-on:keydown.up="focusPrev(projects.length + 1)"
|
||||
x-on:keyup.enter="focusedIndex !== '' && await set('environment',filteredProjects()[focusedIndex - 1]?.uuid)" />
|
||||
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<div x-on:click="await newProject" class="py-2 pl-4 cursor-pointer hover:bg-neutral-700"
|
||||
:class="focusedIndex === 0 && 'bg-neutral-700'">
|
||||
<div x-on:click="await newProject" class="magic-item" :class="focusedIndex === 0 && 'bg-neutral-700'">
|
||||
<span>New Project</span>
|
||||
<span x-text="search"></span>
|
||||
</div>
|
||||
<template x-for="(project,index) in filteredProjects" :key="project.name ?? project">
|
||||
<div x-on:click="await set('environment',project.uuid)"
|
||||
:class="focusedIndex === index + 1 && 'bg-neutral-700'"
|
||||
class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
:class="focusedIndex === index + 1 && 'bg-neutral-700'" class="magic-item">
|
||||
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Project</span>
|
||||
<span x-text="project.name"></span>
|
||||
</div>
|
||||
@ -90,19 +85,19 @@
|
||||
{{-- Environments --}}
|
||||
<template x-cloak x-if="environmentMenu">
|
||||
<div x-on:click.outside="closeMenus">
|
||||
<input x-ref="search" x-model="search" class="w-96" placeholder="Select a environment..."
|
||||
x-on:keyup.down="focusNext(environments.length + 1)" x-on:keyup.up="focusPrev(environments.length + 1)"
|
||||
<input class="magic-input" x-ref="search" x-model="search" class="w-96"
|
||||
placeholder="Select a environment..." x-on:keydown.down="focusNext(environments.length + 1)"
|
||||
x-on:keydown.up="focusPrev(environments.length + 1)"
|
||||
x-on:keyup.enter="focusedIndex !== '' && await set('jump',filteredEnvironments()[focusedIndex - 1]?.name)" />
|
||||
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<div x-on:click="await newEnvironment" class="py-2 pl-4 cursor-pointer hover:bg-neutral-700"
|
||||
:class="focusedIndex === 0 && 'bg-neutral-700'">
|
||||
<div class="magic-items">
|
||||
<div x-on:click="await newEnvironment" class="magic-item"
|
||||
:class="focusedIndex === 0 && magic - item - focused">
|
||||
<span>New Environment</span>
|
||||
<span x-text="search"></span>
|
||||
</div>
|
||||
<template x-for="(environment,index) in filteredEnvironments" :key="environment.name ?? environment">
|
||||
<div x-on:click="await set('jump',environment.name)"
|
||||
:class="focusedIndex === index + 1 && 'bg-neutral-700'"
|
||||
class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
|
||||
:class="focusedIndex === index + 1 && 'bg-neutral-700'" class="magic-item">
|
||||
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Env</span>
|
||||
<span x-text="environment.name"></span>
|
||||
</div>
|
||||
@ -114,7 +109,7 @@
|
||||
<template x-cloak x-if="projectsMenu">
|
||||
<div x-on:click.outside="closeMenus">
|
||||
<input x-ref="search" x-model="search" class="w-96" placeholder="Select a project..."
|
||||
x-on:keyup.down="focusNext(projects.length)" x-on:keyup.up="focusPrev(projects.length)"
|
||||
x-on:keydown.down="focusNext(projects.length)" x-on:keydown.up="focusPrev(projects.length)"
|
||||
x-on:keyup.enter="focusedIndex !== '' && await set('jumpToProject',filteredProjects()[focusedIndex].uuid)" />
|
||||
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<template x-for="(project,index) in filteredProjects" :key="project.name ?? project">
|
||||
@ -132,7 +127,7 @@
|
||||
<template x-cloak x-if="destinationsMenu">
|
||||
<div x-on:click.outside="closeMenus">
|
||||
<input x-ref="search" x-model="search" class="w-96" placeholder="Select a destination..."
|
||||
x-on:keyup.down="focusNext(Destinations.length)" x-on:keyup.up="focusPrev(Destinations.length)"
|
||||
x-on:keydown.down="focusNext(Destinations.length)" x-on:keydown.up="focusPrev(Destinations.length)"
|
||||
x-on:keyup.enter="focusedIndex !== '' && await set('jumpToDestination',filteredDestinations()[focusedIndex].uuid)" />
|
||||
<div class="absolute text-sm top-11 w-[25rem] bg-neutral-800">
|
||||
<template x-for="(destination,index) in filteredDestinations" :key="destination.name ?? destination">
|
||||
@ -296,6 +291,7 @@
|
||||
this.focusedIndex = ''
|
||||
},
|
||||
closeMenus() {
|
||||
this.$refs.search.blur();
|
||||
this.search = ''
|
||||
this.focusedIndex = ''
|
||||
this.mainMenu = false
|
@ -1,19 +1,23 @@
|
||||
<nav class="flex gap-2 ">
|
||||
<div>v{{ config('version') }}</div>
|
||||
@auth
|
||||
<a href="/">Home</a>
|
||||
<a href="/command-center">Command Center</a>
|
||||
<a href="/profile">Profile</a>
|
||||
@if (auth()->user()->isRoot())
|
||||
<a href="/settings">Settings</a>
|
||||
@endif
|
||||
<x-magic-search-bar />
|
||||
<div class="fixed left-0 top-2">
|
||||
<a href="/">Home</a>
|
||||
<a href="/command-center">Command Center</a>
|
||||
<a href="/profile">Profile</a>
|
||||
@if (auth()->user()->isRoot())
|
||||
<a href="/settings">Settings</a>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<form action="/logout" method="POST">
|
||||
@csrf
|
||||
<x-inputs.button type="submit">Logout</x-inputs.button>
|
||||
</form>
|
||||
<livewire:check-update />
|
||||
<livewire:force-upgrade />
|
||||
<x-magic-bar />
|
||||
<div class="flex-1"></div>
|
||||
<div class="fixed right-0 flex gap-2 top-2">
|
||||
<form action="/logout" method="POST">
|
||||
@csrf
|
||||
<x-inputs.button type="submit">Logout</x-inputs.button>
|
||||
</form>
|
||||
<livewire:check-update />
|
||||
<livewire:force-upgrade />
|
||||
</div>
|
||||
@endauth
|
||||
</nav>
|
||||
|
Loading…
x
Reference in New Issue
Block a user