ui: improvements

This commit is contained in:
Andras Bacsai 2022-09-20 15:06:33 +02:00
parent 7949bbe66d
commit 18a95bf9ab
7 changed files with 44 additions and 47 deletions

View File

@ -121,7 +121,7 @@
>
{/if}
</div>
<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10 px-2">
<div class="grid gap-2 grid-cols-2 auto-rows-max lg:px-10 px-2">
<label for="name">{$t('forms.name')}</label>
<input
class="w-full"
@ -225,7 +225,7 @@
<div class="flex space-x-1 pb-5 font-bold">
<h1 class="title">{$t('application.features')}</h1>
</div>
<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10 px-2">
<div class="grid gap-2 grid-cols-2 auto-rows-max lg:px-10 px-2">
<Setting
id="isPublic"
loading={publicLoading}

View File

@ -1,25 +1,14 @@
<script lang="ts">
export let destination: any;
export let settings: any;
export let state: any;
import LocalDocker from './_LocalDocker.svelte';
import RemoteDocker from './_RemoteDocker.svelte';
</script>
<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
<div class="-mb-5 flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
Configuration
</div>
<span class="text-xs">{destination.name}</span>
</div>
</div>
<div class="mx-auto max-w-6xl px-6">
{#if destination.remoteEngine}
<RemoteDocker bind:destination {settings} {state} />
<RemoteDocker bind:destination {settings} />
{:else}
<LocalDocker bind:destination {settings} {state} />
<LocalDocker bind:destination {settings} />
{/if}
</div>
</div>

View File

@ -142,24 +142,24 @@
</script>
<form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="grid gap-4 grid-cols-2 grid-rows-1">
<div class="flex space-x-2">
<button
type="submit"
class="btn btn-sm w-full"
class="btn btn-sm"
class:bg-destinations={!loading.save}
class:loading={loading.save}
disabled={loading.save}
>{$t('forms.save')}
</button>
<button
class="btn btn-sm w-full"
class="btn btn-sm"
class:loading={loading.restart}
class:bg-error={!loading.restart}
disabled={loading.restart}
on:click|preventDefault={forceRestartProxy}>{$t('destination.force_restart_proxy')}</button
>
</div>
<div class="grid gap-4 grid-cols-2 auto-rows-max mt-10 items-center">
<div class="grid gap-2 grid-cols-2 auto-rows-max mt-10 items-center">
<label for="name" class="text-base font-bold text-stone-100 w-full">{$t('forms.name')}</label>
<input
class="w-full"

View File

@ -166,7 +166,6 @@
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
<div class="flex space-x-1 pb-5">
<div class="title font-bold">{$t('forms.configuration')}</div>
{#if $appSession.isAdmin}
<button
type="submit"

View File

@ -88,17 +88,25 @@
</script>
{#if $page.params.id !== 'new'}
<nav class="nav-side">
<button
id="delete"
on:click={() => deleteDestination(destination)}
type="submit"
disabled={!$appSession.isAdmin && isDestinationDeletable}
class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable}
class="icons bg-transparent text-sm"
class:text-stone-600={!isDestinationDeletable}><DeleteIcon /></button
>
<nav class="header lg:flex-row flex-col-reverse">
<div class="flex flex-row space-x-2 font-bold pt-10 lg:pt-0">
<div class="flex flex-col items-center justify-center">
<div class="title">Configurations</div>
</div>
</div>
<div class="lg:block hidden flex-1" />
<div class="flex flex-row flex-wrap space-x-3 justify-center lg:justify-start lg:py-0">
<button
id="delete"
on:click={() => deleteDestination(destination)}
type="submit"
disabled={!$appSession.isAdmin && isDestinationDeletable}
class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable}
class="icons bg-transparent text-sm"
class:text-stone-600={!isDestinationDeletable}><DeleteIcon /></button
>
<Tooltip triggeredBy="#delete">{deletable()}</Tooltip>
</div>
</nav>
<Tooltip triggeredBy="#delete">{deletable()}</Tooltip>
{/if}
<slot />

View File

@ -260,7 +260,7 @@
</div>
{/if}
<div class="grid gap-4 grid-cols-1 grid-rows-1 lg:px-10 px-2">
<div class="grid gap-2 grid-cols-1 grid-rows-1 lg:px-10 px-2">
<div class="mt-2 grid grid-cols-2 items-center">
<label for="name">{$t('forms.name')}</label>
<input name="name" id="name" class="w-full" bind:value={service.name} required />
@ -383,7 +383,18 @@
</div>
{/if}
<div class="grid grid-flow-row gap-2 lg:px-10 px-2 pt-4">
<div class="grid grid-flow-row gap-2 lg:px-10 px-2 pt-2">
<div class="grid grid-cols-2 items-center">
<Setting
id="dualCerts"
disabled={$status.service.isRunning}
dataTooltip={$t('forms.must_be_stopped_to_modify')}
bind:setting={dualCerts}
title={$t('application.ssl_www_and_non_www')}
description={$t('services.generate_www_non_www_ssl')}
on:click={() => !$status.service.isRunning && changeSettings('dualCerts')}
/>
</div>
<div class="grid grid-cols-2 items-center">
<label for="exposePort"
>Exposed Port <Explainer
@ -402,17 +413,7 @@
placeholder="12345"
/>
</div>
<div class="grid grid-cols-2 items-center">
<Setting
id="dualCerts"
disabled={$status.service.isRunning}
dataTooltip={$t('forms.must_be_stopped_to_modify')}
bind:setting={dualCerts}
title={$t('application.ssl_www_and_non_www')}
description={$t('services.generate_www_non_www_ssl')}
on:click={() => !$status.service.isRunning && changeSettings('dualCerts')}
/>
</div>
</div>
{#if service.type === 'plausibleanalytics'}
<PlausibleAnalytics bind:service {readOnly} />

View File

@ -103,7 +103,7 @@
</div>
{/if}
</div>
<div class="grid gap-4 grid-cols-2 auto-rows-max">
<div class="grid gap-2 grid-cols-2 auto-rows-max">
<label for="name" class="text-base font-bold text-stone-100">Name</label>
<input class="w-full" name="name" id="name" required bind:value={source.name} />
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
@ -158,7 +158,7 @@
</div>
{/if}
</div>
<div class="grid gap-4 grid-cols-2 auto-rows-max mt-4">
<div class="grid gap-2 grid-cols-2 auto-rows-max mt-4">
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
<input class="w-full" name="name" id="name" required bind:value={source.name} />
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>