Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

css

Browse Source
This commit is contained in:
Andras Bacsai 2023-05-12 12:22:41 +02:00
parent a1483a4111
commit 9404071c95
5 changed files with 65 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
resources/css/app.css
View File

@ -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;
}

2
resources/views/components/inputs/input.blade.php
View File

@ -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)

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

@ -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

62
resources/views/components/magic-search-bar.blade.php → resources/views/components/magic-bar.blade.php
View File

@ -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

32
resources/views/components/navbar.blade.php
View File

@ -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>