dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

sprinkle some css

Browse Source
This commit is contained in:
Andras Bacsai
2023-05-12 15:39:07 +02:00
parent 0731b1fe6e
commit d6dc540236
21 changed files with 285 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
resources/views/components/inputs/button.blade.php
View File

@@ -1,10 +1,10 @@
@props([
'isWarning' => null,
'disabled' => null,
'defaultClass' => 'text-white bg-neutral-800 hover:bg-violet-600 h-8',
'defaultWarningClass' => 'text-white bg-red-500 hover:bg-red-600 h-8',
'disabledClass' => 'text-neutral-400 bg-neutral-900 h-8',
'loadingClass' => 'text-black bg-green-500 h-8',
'defaultClass' => 'text-white hover:bg-coollabs h-8 rounded transition-colors',
'defaultWarningClass' => 'text-white bg-red-500 hover:bg-red-600 h-8 rounded',
'disabledClass' => 'text-coolgray-200 h-8 rounded',
'loadingClass' => 'text-black bg-green-500 h-8 rounded',
'confirm' => null,
'confirmAction' => null,
])

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

@@ -6,6 +6,7 @@
'instantSave' => $attributes->has('instantSave'),
'noLabel' => $attributes->has('noLabel'),
'noDirty' => $attributes->has('noDirty'),
'hidden' => $attributes->has('hidden'),
])
<span @class([
@@ -14,7 +15,7 @@
])>
@if (!$noLabel)
<label for={{ $id }} @if (!$noDirty) wire:dirty.class="text-amber-300" @endif
wire:target={{ $id }}>
@if ($hidden) class="hidden" @endif wire:target={{ $id }}>
@if ($label)
{{ $label }}
@else
@@ -23,6 +24,7 @@
@if ($required)
*
@endif
</label>
@endif
@if ($type === 'textarea')
@@ -32,7 +34,8 @@
<input {{ $attributes }} @if ($required) required @endif
@if (!$noDirty) wire:dirty.class="text-black bg-amber-300" @endif
type={{ $type }} id={{ $id }} name={{ $id }}
@if ($instantSave) wire:click='instantSave' wire:model.defer={{ $id }} @else wire:model.defer={{ $value ?? $id }} @endif />
@if ($instantSave) wire:click='instantSave' wire:model.defer={{ $id }} @else wire:model.defer={{ $value ?? $id }} @endif
@if ($hidden) class="hidden" @endif />
@endif
@error($id)
<div class="text-red-500">{{ $message }}</div>

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

@@ -4,6 +4,8 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin>
<link href="https://api.fonts.coollabs.io/css2?family=Inter&display=swap" rel="stylesheet">
@env('local')
<title>Coolify - localhost</title>
@endenv
@@ -28,7 +30,7 @@
@auth
<x-navbar />
@endauth
<main>
<main class="max-w-6xl pt-10 mx-auto">
{{ $slot }}
</main>

104
resources/views/components/magic-bar.blade.php
View File

@@ -1,4 +1,4 @@
<div x-data="magicsearchbar" @slash.window="mainMenu = true">
<div x-data="magicsearchbar" @slash.window="mainMenu = true" class="pt-2">
{{-- Main --}}
<template x-cloak x-if="isMainMenu">
<div>
@@ -13,11 +13,11 @@
<template x-for="(item,index) in filteredItems" :key="item.name">
<div x-on:click="await set(item.next ?? 'server',item.name)"
: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'"
<span class="px-2 mr-1 text-xs text-white 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'"
<span class="px-2 mr-1 text-xs text-white bg-purple-600 rounded" x-show="item.type === 'Jump'"
x-text="item.type"></span>
<span class="px-2 mr-1 text-xs bg-blue-600 rounded" x-show="item.type === 'New'"
<span class="px-2 mr-1 text-xs text-white bg-blue-600 rounded" x-show="item.type === 'New'"
x-text="item.type"></span>
<span x-text="item.name"></span>
</div>
@@ -32,10 +32,15 @@
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="magic-items">
<template x-if="servers.length === 0">
<div class="magic-item" x-on:click="set('newServer')">
<span>No server found. Click here to add a new one!</span>
</div>
</template>
<template x-for="(server,index) in filteredServers" :key="server.name ?? server">
<div x-on:click="await set('destination',server.uuid)"
:class="focusedIndex === index && 'magic-item-focused'" class="magic-item">
<span class="px-2 mr-1 text-xs bg-purple-600 rounded">Server</span>
<span class="px-2 mr-1 text-xs text-white bg-purple-600 rounded">Server</span>
<span x-text="server.name"></span>
</div>
</template>
@@ -47,6 +52,7 @@
<div x-on:click.outside="closeMenus">
<input class="magic-input" x-ref="search" x-model="search" placeholder="Select a destination..."
x-on:keydown.down="focusNext(destinations.length)" x-on:keydown.up="focusPrev(destinations.length)"
x-on:keyup.escape="closeMenus"
x-on:keyup.enter="focusedIndex !== '' && await set('project',filteredDestinations()[focusedIndex].uuid)" />
<div class="magic-items">
<template x-if="destinations.length === 0">
@@ -57,18 +63,19 @@
<template x-for="(destination,index) in filteredDestinations" :key="destination.name ?? destination">
<div x-on:click="await set('project',destination.uuid)"
:class="focusedIndex === index && 'magic-item-focused'" class="magic-item">
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Destination</span>
<span class="px-2 mr-1 text-xs text-white bg-purple-700 rounded">Destination</span>
<span x-text="destination.name"></span>
</div>
</template>
</div>
</div>
</template>
{{-- Projects --}}
{{-- Project --}}
<template x-cloak x-if="projectMenu">
<div x-on:click.outside="closeMenus">
<input class="magic-input" x-ref="search" x-model="search" placeholder="Type your project name..."
x-on:keydown.down="focusNext(projects.length + 1)" x-on:keydown.up="focusPrev(projects.length + 1)"
x-on:keyup.escape="closeMenus"
x-on:keyup.enter="focusedIndex !== '' && await set('environment',filteredProjects()[focusedIndex - 1]?.uuid)" />
<div class="magic-items">
<div x-on:click="await newProject" class="magic-item"
@@ -79,7 +86,7 @@
<template x-for="(project,index) in filteredProjects" :key="project.name ?? project">
<div x-on:click="await set('environment',project.uuid)"
:class="focusedIndex === index + 1 && 'magic-item-focused'" class="magic-item">
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Project</span>
<span class="px-2 mr-1 text-xs text-white bg-purple-700 rounded">Project</span>
<span x-text="project.name"></span>
</div>
</template>
@@ -91,7 +98,7 @@
<div x-on:click.outside="closeMenus">
<input class="magic-input" x-ref="search" x-model="search" placeholder="Select a environment..."
x-on:keydown.down="focusNext(environments.length + 1)"
x-on:keydown.up="focusPrev(environments.length + 1)"
x-on:keydown.up="focusPrev(environments.length + 1)" x-on:keyup.escape="closeMenus"
x-on:keyup.enter="focusedIndex !== '' && await set('jump',filteredEnvironments()[focusedIndex - 1]?.name)" />
<div class="magic-items">
<div x-on:click="await newEnvironment" class="magic-item"
@@ -102,7 +109,7 @@
<template x-for="(environment,index) in filteredEnvironments" :key="environment.name ?? environment">
<div x-on:click="await set('jump',environment.name)"
:class="focusedIndex === index + 1 && 'magic-item-focused'" class="magic-item">
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Env</span>
<span class="px-2 mr-1 text-xs text-white bg-purple-700 rounded">Env</span>
<span x-text="environment.name"></span>
</div>
</template>
@@ -113,14 +120,20 @@
<template x-cloak x-if="projectsMenu">
<div x-on:click.outside="closeMenus">
<input x-ref="search" x-model="search" class="magic-input" placeholder="Select a project..."
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)" />
x-on:keyup.escape="closeMenus" 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="magic-items">
<template x-if="projects.length === 0">
<div class="magic-item hover:bg-neutral-800">
<span>No projects found.</span>
</div>
</template>
<template x-for="(project,index) in filteredProjects" :key="project.name ?? project">
<div x-on:click="await set('jumpToProject',project.uuid)"
:class="focusedIndex === index && 'magic-item-focused'"
class="py-2 pl-4 cursor-pointer hover:bg-neutral-700">
<span class="px-2 mr-1 text-xs bg-purple-700 rounded">Jump</span>
<span class="px-2 mr-1 text-xs text-white bg-purple-700 rounded">Jump</span>
<span x-text="project.name"></span>
</div>
</template>
@@ -130,10 +143,16 @@
{{-- Destinations --}}
<template x-cloak x-if="destinationsMenu">
<div x-on:click.outside="closeMenus">
<input x-ref="search" x-model="search" class="magic-items" placeholder="Select a destination..."
x-on:keydown.down="focusNext(destinations.length)" x-on:keydown.up="focusPrev(destinations.length)"
<input x-ref="search" x-model="search" class="magic-input" placeholder="Select a destination..."
x-on:keyup.escape="closeMenus" 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="magic-items">
<template x-if="destinations.length === 0">
<div class="magic-item" x-on:click="set('newDestination')">
<span>No destination found. Click here to add a new one!</span>
</div>
</template>
<template x-for="(destination,index) in filteredDestinations" :key="destination.name ?? destination">
<div x-on:click="await set('jumpToDestination',destination.uuid)"
:class="focusedIndex === index && 'magic-item-focused'"
@@ -203,49 +222,50 @@
focusedIndex: "",
items: [{
name: 'Server',
type: 'Add',
tags: 'new,server',
next: 'newServer'
},
{
name: 'Destination',
type: 'Add',
tags: 'new,destination',
next: 'newDestination'
},
{
name: 'Private Key',
type: 'Add',
tags: 'new,private-key,ssh,key',
next: 'newPrivateKey'
},
{
name: 'Source',
type: 'Add',
tags: 'new,source,github,gitlab,bitbucket',
next: 'newSource'
},
{
name: 'Public Repository',
type: 'Add',
tags: 'application,public,repository',
tags: 'application,public,repository,github,gitlab,bitbucket,git',
},
{
name: 'Private Repository (with GitHub App)',
type: 'Add',
tags: 'application,private,repository',
tags: 'application,private,repository,github,gitlab,bitbucket,git',
},
{
name: 'Private Repository (with Deploy Key)',
type: 'Add',
tags: 'application,private,repository',
tags: 'application,private,repository,github,gitlab,bitbucket,git',
},
{
name: 'Database',
type: 'Add',
tags: 'data,database,mysql,postgres,sql,sqlite,redis,mongodb,maria,percona',
},
{
name: 'Server',
type: 'New',
tags: 'new,server',
next: 'newServer'
},
{
name: 'Destination',
type: 'New',
tags: 'new,destination',
next: 'newDestination'
},
{
name: 'Private Key',
type: 'New',
tags: 'new,private-key,ssh,key',
next: 'newPrivateKey'
},
{
name: 'Source',
type: 'New',
tags: 'new,source,github,gitlab,bitbucket',
next: 'newSource'
},
{
name: 'Servers',
type: 'Jump',

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

@@ -1,23 +1,31 @@
<nav class="flex gap-2 ">
<nav class="flex gap-2">
@auth
<div class="fixed left-0 top-2">
<a href="/">Home</a>
<a href="/command-center">Command Center</a>
<a href="/profile">Profile</a>
<div class="fixed flex gap-2 left-2 top-2">
<a href="/">
<x-inputs.button>Home</x-inputs.button>
</a>
<a href="/command-center">
<x-inputs.button>Command Center</x-inputs.button>
</a>
<a href="/profile">
<x-inputs.button>Profile</x-inputs.button>
</a>
@if (auth()->user()->isRoot())
<a href="/settings">Settings</a>
<a href="/settings">
<x-inputs.button>Settings</x-inputs.button>
</a>
@endif
</div>
<div class="flex-1"></div>
<x-magic-bar />
<div class="flex-1"></div>
<div class="fixed right-0 flex gap-2 top-2">
<div class="fixed flex gap-2 right-2 top-2">
{{-- <livewire:check-update /> --}}
<livewire:force-upgrade />
<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>