fix(routes): more ui tweaks
This commit is contained in:
Kaname
parent
d5cfb63f52
commit
7e6156f5dd
@ -37,7 +37,7 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<form on:submit|preventDefault={() => handleSubmit(buildPack.name)}>
|
<form class="lg:pt-32" on:submit|preventDefault={() => handleSubmit(buildPack.name)}>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
class="box-selection relative flex text-xl font-bold {buildPack.hoverColor} {foundConfig?.name ===
|
class="box-selection relative flex text-xl font-bold {buildPack.hoverColor} {foundConfig?.name ===
|
||||||
|
|||||||
@ -145,14 +145,14 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if repositories.length === 0 && loading.repositories === false}
|
{#if repositories.length === 0 && loading.repositories === false}
|
||||||
<div class="flex-col text-center">
|
<div class="flex-col text-center lg:pt-32">
|
||||||
<div class="pb-4">{$t('application.configuration.no_repositories_configured')}</div>
|
<div class="pb-4">{$t('application.configuration.no_repositories_configured')}</div>
|
||||||
<a href={`/sources/${application.gitSource.id}`}
|
<a href={`/sources/${application.gitSource.id}`}
|
||||||
><button>{$t('application.configuration.configure_it_now')}</button></a
|
><button>{$t('application.configuration.configure_it_now')}</button></a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<form on:submit|preventDefault={handleSubmit} class="flex flex-col justify-center text-center">
|
<form on:submit|preventDefault={handleSubmit} class="flex flex-col justify-center text-center lg:pt-32">
|
||||||
<div class="flex-col space-y-3 md:space-y-0 space-x-1">
|
<div class="flex-col space-y-3 md:space-y-0 space-x-1">
|
||||||
<div class="flex-row md:flex gap-4">
|
<div class="flex-row md:flex gap-4">
|
||||||
<div class="custom-select-wrapper">
|
<div class="custom-select-wrapper">
|
||||||
|
|||||||
@ -327,7 +327,7 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<form on:submit={handleSubmit}>
|
<form on:submit={handleSubmit} lg:pt-32>
|
||||||
<div class="flex flex-col space-y-2 px-4 xl:flex-row xl:space-y-0 xl:space-x-2 ">
|
<div class="flex flex-col space-y-2 px-4 xl:flex-row xl:space-y-0 xl:space-x-2 ">
|
||||||
<div class="custom-select-wrapper">
|
<div class="custom-select-wrapper">
|
||||||
<Select
|
<Select
|
||||||
|
|||||||
@ -156,40 +156,39 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="mx-auto max-w-5xl">
|
<div class="mx-auto max-w-5xl lg:pt-32">
|
||||||
<div class="grid grid-flow-row gap-2 px-10">
|
<form
|
||||||
<div class="flex">
|
class="flex flex-col lg:flex-row w-full lg:px-32 space-y-5 lg:space-y-0 lg:space-x-5 lg:items-center"
|
||||||
<form class="flex" on:submit|preventDefault={loadBranches}>
|
on:submit|preventDefault={loadBranches}
|
||||||
<div class="space-y-4">
|
>
|
||||||
<input
|
<div class="space-y-4 w-full">
|
||||||
placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
|
<input
|
||||||
bind:value={publicRepositoryLink}
|
class="w-full"
|
||||||
|
placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
|
||||||
|
bind:value={publicRepositoryLink}
|
||||||
|
/>
|
||||||
|
{#if branchSelectOptions.length > 0}
|
||||||
|
<div class="custom-select-wrapper">
|
||||||
|
<Select
|
||||||
|
placeholder={loading.branches
|
||||||
|
? $t('application.configuration.loading_branches')
|
||||||
|
: !publicRepositoryLink
|
||||||
|
? $t('application.configuration.select_a_repository_first')
|
||||||
|
: $t('application.configuration.select_a_branch')}
|
||||||
|
isWaiting={loading.branches}
|
||||||
|
showIndicator={!!publicRepositoryLink && !loading.branches}
|
||||||
|
id="branches"
|
||||||
|
on:select={saveRepository}
|
||||||
|
items={branchSelectOptions}
|
||||||
|
isDisabled={loading.branches || !!!publicRepositoryLink}
|
||||||
|
isClearable={false}
|
||||||
/>
|
/>
|
||||||
{#if branchSelectOptions.length > 0}
|
|
||||||
<div class="custom-select-wrapper">
|
|
||||||
<Select
|
|
||||||
placeholder={loading.branches
|
|
||||||
? $t('application.configuration.loading_branches')
|
|
||||||
: !publicRepositoryLink
|
|
||||||
? $t('application.configuration.select_a_repository_first')
|
|
||||||
: $t('application.configuration.select_a_branch')}
|
|
||||||
isWaiting={loading.branches}
|
|
||||||
showIndicator={!!publicRepositoryLink && !loading.branches}
|
|
||||||
id="branches"
|
|
||||||
on:select={saveRepository}
|
|
||||||
items={branchSelectOptions}
|
|
||||||
isDisabled={loading.branches || !!!publicRepositoryLink}
|
|
||||||
isClearable={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
<button class="btn mx-4 bg-orange-600" class:loading={loading.branches} type="submit"
|
|
||||||
>Load Repository</button
|
|
||||||
>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<button class="btn bg-orange-600" class:loading={loading.branches} type="submit">
|
||||||
|
Load Repository
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -254,7 +254,7 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex space-x-1 p-6 font-bold">
|
<div class="flex space-x-1 p-6 font-bold lg:pt-32">
|
||||||
<div class="mr-4 text-2xl tracking-tight">
|
<div class="mr-4 text-2xl tracking-tight">
|
||||||
{$t('application.configuration.configure_build_pack')}
|
{$t('application.configuration.configure_build_pack')}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -63,7 +63,7 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex space-x-1 p-6 font-bold">
|
<div class="flex space-x-1 p-6 font-bold lg:pt-32">
|
||||||
<div class="mr-4 text-2xl tracking-tight">Select a Database</div>
|
<div class="mr-4 text-2xl tracking-tight">Select a Database</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -63,7 +63,7 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex space-x-1 p-6 font-bold">
|
<div class="flex space-x-1 p-6 font-bold lg:pt-32">
|
||||||
<div class="mr-4 text-2xl tracking-tight">
|
<div class="mr-4 text-2xl tracking-tight">
|
||||||
{$t('application.configuration.configure_destination')}
|
{$t('application.configuration.configure_destination')}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -36,7 +36,7 @@
|
|||||||
import GitlabRepositories from './_GitlabRepositories.svelte';
|
import GitlabRepositories from './_GitlabRepositories.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex space-x-1 p-6 font-bold">
|
<div class="flex space-x-1 p-6 font-bold lg:pt-32">
|
||||||
<div class="mr-4 text-2xl tracking-tight">
|
<div class="mr-4 text-2xl tracking-tight">
|
||||||
{$t('application.configuration.select_a_repository_project')}
|
{$t('application.configuration.select_a_repository_project')}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -68,12 +68,12 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex space-x-1 p-6 font-bold">
|
<div class="flex space-x-1 p-6 font-bold lg:pt-32">
|
||||||
<div class="mr-4 text-2xl tracking-tight">
|
<div class="mr-4 text-2xl tracking-tight">
|
||||||
{$t('application.configuration.select_a_git_source')}
|
{$t('application.configuration.select_a_git_source')}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="max-w-5xl mx-auto ">
|
<div class="max-w-5xl mx-auto px-5">
|
||||||
<div class="title pb-8">Git App</div>
|
<div class="title pb-8">Git App</div>
|
||||||
<div class="flex flex-wrap justify-center">
|
<div class="flex flex-wrap justify-center">
|
||||||
{#if !filteredSources || ownSources.length === 0}
|
{#if !filteredSources || ownSources.length === 0}
|
||||||
@ -192,7 +192,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center">
|
<div class="flex flex-row items-center">
|
||||||
<div class="title py-4">Public Repository</div>
|
<div class="title py-4">Public Repository</div>
|
||||||
<DocLink url="https://docs.coollabs.io/coolify/applications/#public-repository" />
|
<DocLink url="https://docs.coollabs.io/coolify/applications/#public-repository" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -90,146 +90,123 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="mx-auto max-w-4xl px-6">
|
<div class="mx-auto max-w-4xl lg:px-6 px-3">
|
||||||
{#if !source.githubAppId}
|
{#if !source.githubAppId}
|
||||||
<form on:submit|preventDefault={newGithubApp} class="py-4">
|
<form on:submit|preventDefault={newGithubApp} class="py-4">
|
||||||
<div class="grid gap-1 lg:grid-flow-col pb-7">
|
<div class="grid gap-1 lg:grid-flow-col pb-7">
|
||||||
<h1 class="title">General</h1>
|
<h1 class="title">General</h1>
|
||||||
{#if !source.githubAppId}
|
{#if !source.githubAppId}
|
||||||
<div class="w-full flex flex-rpw justify-end">
|
<div class="w-full flex flex-rpw justify-end">
|
||||||
<button class="btn btn-sm bg-sources mt-5 w-full lg:w-fit" type="submit">Save & Redirect to GitHub</button>
|
<button class="btn btn-sm bg-sources mt-5 w-full lg:w-fit" type="submit"
|
||||||
|
>Save & Redirect to GitHub</button
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-flow-row gap-2">
|
<div class="grid gap-4 grid-cols-2 auto-rows-max">
|
||||||
<div class="grid grid-flow-row gap-2">
|
<label for="name" class="text-base font-bold text-stone-100">Name</label>
|
||||||
<div class="mt-2 grid lg:grid-cols-2 items-center">
|
<input class="w-full" name="name" id="name" required bind:value={source.name} />
|
||||||
<label for="name" class="text-base font-bold text-stone-100">Name</label>
|
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
|
||||||
<input class="w-full" name="name" id="name" required bind:value={source.name} />
|
<input class="w-full" name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
|
||||||
</div>
|
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
|
||||||
</div>
|
<input class="w-full" name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
|
||||||
<div class="grid lg:grid-cols-2 items-center">
|
<label for="customPort" class="text-base font-bold text-stone-100"
|
||||||
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
|
>Custom SSH Port <Explainer
|
||||||
<input class="w-full" name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
|
explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'}
|
||||||
</div>
|
/></label
|
||||||
<div class="grid lg:grid-cols-2 items-center">
|
>
|
||||||
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
|
<input
|
||||||
<input class="w-full" name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
|
class="w-full"
|
||||||
</div>
|
name="customPort"
|
||||||
<div class="grid lg:grid-cols-2 items-center">
|
id="customPort"
|
||||||
<label for="customPort" class="text-base font-bold text-stone-100"
|
disabled={!selfHosted || source.githubAppId}
|
||||||
>Custom SSH Port <Explainer
|
readonly={!selfHosted || source.githubAppId}
|
||||||
explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'}
|
required
|
||||||
/></label
|
value={source.customPort}
|
||||||
>
|
/>
|
||||||
<input
|
<label for="organization" class="pt-2 text-base font-bold text-stone-100"
|
||||||
class="w-full"
|
>Organization
|
||||||
name="customPort"
|
<Explainer
|
||||||
id="customPort"
|
explanation={"Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."}
|
||||||
disabled={!selfHosted || source.githubAppId}
|
/></label
|
||||||
readonly={!selfHosted || source.githubAppId}
|
>
|
||||||
required
|
<input
|
||||||
value={source.customPort}
|
class="w-full"
|
||||||
/>
|
name="organization"
|
||||||
</div>
|
id="organization"
|
||||||
<div class="grid lg:grid-cols-2">
|
placeholder="eg: coollabsio"
|
||||||
<div class="flex flex-col">
|
bind:value={source.organization}
|
||||||
<label for="organization" class="pt-2 text-base font-bold text-stone-100"
|
/>
|
||||||
>Organization
|
|
||||||
<Explainer
|
|
||||||
explanation={"Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."}
|
|
||||||
/></label
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
class="w-full"
|
|
||||||
name="organization"
|
|
||||||
id="organization"
|
|
||||||
placeholder="eg: coollabsio"
|
|
||||||
bind:value={source.organization}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
{:else if source.githubApp?.installationId}
|
{:else if source.githubApp?.installationId}
|
||||||
<form on:submit|preventDefault={handleSubmit} class="py-4">
|
<form on:submit|preventDefault={handleSubmit} class="py-4">
|
||||||
<div class="flex md:flex-row space-y-2 md:space-y-0 space-x-0 md:space-x-2 flex-col pb-5">
|
<div class="flex lg:flex-row lg:justify-between flex-col space-y-3 w-full lg:items-center">
|
||||||
<div class="title">{$t('general')}</div>
|
<h1 class="title">{$t('general')}</h1>
|
||||||
|
|
||||||
{#if $appSession.isAdmin}
|
{#if $appSession.isAdmin}
|
||||||
<button class="btn btn-sm bg-sources" type="submit" disabled={loading}
|
<div class="flex flex-col lg:flex-row lg:space-x-4 lg:w-fit space-y-4 lg:space-y-0 w-full">
|
||||||
>{loading ? 'Saving...' : 'Save'}</button
|
<button class="btn btn-sm bg-sources" type="submit" disabled={loading}
|
||||||
>
|
>{loading ? 'Saving...' : 'Save'}</button
|
||||||
<a
|
>
|
||||||
class="btn btn-sm"
|
<a
|
||||||
href={`${source.htmlUrl}/${
|
class="btn btn-sm"
|
||||||
source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'
|
href={`${source.htmlUrl}/${
|
||||||
}/${source.githubApp.name}/installations/new`}
|
source.htmlUrl === 'https://github.com' ? 'apps' : 'github-apps'
|
||||||
>{$t('source.change_app_settings', { name: 'GitHub' })}</a
|
}/${source.githubApp.name}/installations/new`}
|
||||||
>
|
>{$t('source.change_app_settings', { name: 'GitHub' })}</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-flow-row gap-2 px-10">
|
<div class="grid gap-4 grid-cols-2 auto-rows-max mt-4">
|
||||||
<div class="grid grid-flow-row gap-2">
|
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
|
||||||
<div class="mt-2 grid lg:grid-cols-2 items-center">
|
<input class="w-full" name="name" id="name" required bind:value={source.name} />
|
||||||
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
|
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
|
||||||
<input name="name" id="name" required bind:value={source.name} />
|
<input
|
||||||
</div>
|
class="w-full"
|
||||||
</div>
|
name="htmlUrl"
|
||||||
<div class="grid lg:grid-cols-2 items-center">
|
id="htmlUrl"
|
||||||
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
|
disabled={source.githubAppId}
|
||||||
<input
|
readonly={source.githubAppId}
|
||||||
name="htmlUrl"
|
required
|
||||||
id="htmlUrl"
|
bind:value={source.htmlUrl}
|
||||||
disabled={source.githubAppId}
|
/>
|
||||||
readonly={source.githubAppId}
|
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
|
||||||
required
|
<input
|
||||||
bind:value={source.htmlUrl}
|
class="w-full"
|
||||||
/>
|
name="apiUrl"
|
||||||
</div>
|
id="apiUrl"
|
||||||
<div class="grid lg:grid-cols-2 items-center">
|
required
|
||||||
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
|
disabled={source.githubAppId}
|
||||||
<input
|
readonly={source.githubAppId}
|
||||||
name="apiUrl"
|
bind:value={source.apiUrl}
|
||||||
id="apiUrl"
|
/>
|
||||||
required
|
<label for="customPort" class="text-base font-bold text-stone-100"
|
||||||
disabled={source.githubAppId}
|
>Custom SSH Port <Explainer
|
||||||
readonly={source.githubAppId}
|
explanation="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
|
||||||
bind:value={source.apiUrl}
|
/></label
|
||||||
/>
|
>
|
||||||
</div>
|
<input
|
||||||
{#if selfHosted}
|
class="w-full"
|
||||||
<div class="grid lg:grid-cols-2 items-center">
|
name="customPort"
|
||||||
<label for="customPort" class="text-base font-bold text-stone-100"
|
id="customPort"
|
||||||
>Custom SSH Port <Explainer
|
disabled={!selfHosted}
|
||||||
explanation="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
|
readonly={!selfHosted}
|
||||||
/></label
|
required
|
||||||
>
|
value={source.customPort}
|
||||||
<input
|
/>
|
||||||
name="customPort"
|
<label for="organization" class="pt-2 text-base font-bold text-stone-100"
|
||||||
id="customPort"
|
>Organization</label
|
||||||
disabled={!selfHosted}
|
>
|
||||||
readonly={!selfHosted}
|
<input
|
||||||
required
|
class="w-full"
|
||||||
value={source.customPort}
|
readonly
|
||||||
/>
|
disabled
|
||||||
</div>
|
name="organization"
|
||||||
{/if}
|
id="organization"
|
||||||
<div class="grid lg:grid-cols-2">
|
placeholder="eg: coollabsio"
|
||||||
<div class="flex flex-col">
|
bind:value={source.organization}
|
||||||
<label for="organization" class="pt-2 text-base font-bold text-stone-100"
|
/>
|
||||||
>Organization</label
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
readonly
|
|
||||||
disabled
|
|
||||||
name="organization"
|
|
||||||
id="organization"
|
|
||||||
placeholder="eg: coollabsio"
|
|
||||||
bind:value={source.organization}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
{:else}
|
{:else}
|
||||||
|
|||||||
@ -145,9 +145,9 @@
|
|||||||
|
|
||||||
<div class="mx-auto max-w-4xl px-6">
|
<div class="mx-auto max-w-4xl px-6">
|
||||||
<form on:submit|preventDefault={handleSubmit} class="py-4">
|
<form on:submit|preventDefault={handleSubmit} class="py-4">
|
||||||
<div class="flex space-x-1 pb-7 flex-col lg:items-center lg:flex-row">
|
<div class="flex lg:flex-row lg:justify-between flex-col space-y-3 w-full lg:items-center">
|
||||||
<div class="title">General</div>
|
<h1 class="title">General</h1>
|
||||||
<div class="w-full flex flex-rpw lg:justify-end space-x-2 mt-5 lg:mt-0">
|
<div class="flex flex-col lg:flex-row lg:space-x-4 lg:w-fit space-y-4 lg:space-y-0 w-full">
|
||||||
{#if $appSession.isAdmin}
|
{#if $appSession.isAdmin}
|
||||||
<button type="submit" class="btn btn-sm bg-sources" disabled={loading}
|
<button type="submit" class="btn btn-sm bg-sources" disabled={loading}
|
||||||
>{loading ? $t('forms.saving') : $t('forms.save')}</button
|
>{loading ? $t('forms.saving') : $t('forms.save')}</button
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user