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

fix(routes): more ui tweaks

Browse Source
This commit is contained in:
Kaname 2022-09-07 01:29:48 +00:00
parent d5cfb63f52
commit 7e6156f5dd
11 changed files with 147 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ui/src/routes/applications/[id]/configuration/_BuildPack.svelte
View File

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

4
apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
View File

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

2
apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte
View File

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

21
apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte
View File

@ -156,12 +156,14 @@
} }
</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"> >
<div class="space-y-4 w-full">
<input <input
class="w-full"
placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main" placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
bind:value={publicRepositoryLink} bind:value={publicRepositoryLink}
/> />
@ -185,11 +187,8 @@
{/if} {/if}
</div> </div>
<button class="btn mx-4 bg-orange-600" class:loading={loading.branches} type="submit" <button class="btn bg-orange-600" class:loading={loading.branches} type="submit">
>Load Repository</button Load Repository
> </button>
</form> </form>
</div> </div>
</div>
</div>

2
apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte
View File

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

2
apps/ui/src/routes/applications/[id]/configuration/database.svelte
View File

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

2
apps/ui/src/routes/applications/[id]/configuration/destination.svelte
View File

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

2
apps/ui/src/routes/applications/[id]/configuration/repository.svelte
View File

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

6
apps/ui/src/routes/applications/[id]/configuration/source.svelte
View File

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

53
apps/ui/src/routes/sources/[id]/_Github.svelte
View File

@ -90,33 +90,26 @@
} }
</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">
<div class="mt-2 grid lg:grid-cols-2 items-center">
<label for="name" class="text-base font-bold text-stone-100">Name</label> <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} /> <input class="w-full" name="name" id="name" required bind:value={source.name} />
</div>
</div>
<div class="grid lg:grid-cols-2 items-center">
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label> <label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
<input class="w-full" name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} /> <input class="w-full" name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
</div>
<div class="grid lg:grid-cols-2 items-center">
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label> <label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
<input class="w-full" name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} /> <input class="w-full" name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
</div>
<div class="grid lg:grid-cols-2 items-center">
<label for="customPort" class="text-base font-bold text-stone-100" <label for="customPort" class="text-base font-bold text-stone-100"
>Custom SSH Port <Explainer >Custom SSH Port <Explainer
explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'} explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'}
@ -131,16 +124,12 @@
required required
value={source.customPort} value={source.customPort}
/> />
</div>
<div class="grid lg:grid-cols-2">
<div class="flex flex-col">
<label for="organization" class="pt-2 text-base font-bold text-stone-100" <label for="organization" class="pt-2 text-base font-bold text-stone-100"
>Organization >Organization
<Explainer <Explainer
explanation={"Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."} explanation={"Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."}
/></label /></label
> >
</div>
<input <input
class="w-full" class="w-full"
name="organization" name="organization"
@ -149,14 +138,13 @@
bind:value={source.organization} 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}
<div class="flex flex-col lg:flex-row lg:space-x-4 lg:w-fit space-y-4 lg:space-y-0 w-full">
<button class="btn btn-sm bg-sources" type="submit" disabled={loading} <button class="btn btn-sm bg-sources" type="submit" disabled={loading}
>{loading ? 'Saving...' : 'Save'}</button >{loading ? 'Saving...' : 'Save'}</button
> >
@ -167,18 +155,15 @@
}/${source.githubApp.name}/installations/new`} }/${source.githubApp.name}/installations/new`}
>{$t('source.change_app_settings', { name: 'GitHub' })}</a >{$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">
<div class="mt-2 grid lg:grid-cols-2 items-center">
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label> <label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
<input name="name" id="name" required bind:value={source.name} /> <input class="w-full" name="name" id="name" required bind:value={source.name} />
</div>
</div>
<div class="grid lg:grid-cols-2 items-center">
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label> <label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
<input <input
class="w-full"
name="htmlUrl" name="htmlUrl"
id="htmlUrl" id="htmlUrl"
disabled={source.githubAppId} disabled={source.githubAppId}
@ -186,10 +171,9 @@
required required
bind:value={source.htmlUrl} bind:value={source.htmlUrl}
/> />
</div>
<div class="grid lg:grid-cols-2 items-center">
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label> <label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
<input <input
class="w-full"
name="apiUrl" name="apiUrl"
id="apiUrl" id="apiUrl"
required required
@ -197,15 +181,13 @@
readonly={source.githubAppId} readonly={source.githubAppId}
bind:value={source.apiUrl} bind:value={source.apiUrl}
/> />
</div>
{#if selfHosted}
<div class="grid lg:grid-cols-2 items-center">
<label for="customPort" class="text-base font-bold text-stone-100" <label for="customPort" class="text-base font-bold text-stone-100"
>Custom SSH Port <Explainer >Custom SSH Port <Explainer
explanation="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions." explanation="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
/></label /></label
> >
<input <input
class="w-full"
name="customPort" name="customPort"
id="customPort" id="customPort"
disabled={!selfHosted} disabled={!selfHosted}
@ -213,15 +195,11 @@
required required
value={source.customPort} value={source.customPort}
/> />
</div>
{/if}
<div class="grid lg:grid-cols-2">
<div class="flex flex-col">
<label for="organization" class="pt-2 text-base font-bold text-stone-100" <label for="organization" class="pt-2 text-base font-bold text-stone-100"
>Organization</label >Organization</label
> >
</div>
<input <input
class="w-full"
readonly readonly
disabled disabled
name="organization" name="organization"
@ -230,7 +208,6 @@
bind:value={source.organization} bind:value={source.organization}
/> />
</div> </div>
</div>
</form> </form>
{:else} {:else}
<div class="text-center"> <div class="text-center">

6
apps/ui/src/routes/sources/[id]/_Gitlab.svelte
View File

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