cupcakearmy/coolify
1
0
Fork 0
mirror of https://github.com/cupcakearmy/coolify.git synced 2024-10-23 08:34:11 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(routes): improve design of git sources page

Browse Source
This commit is contained in:
Kaname 2022-09-06 19:06:27 +00:00
parent 5a95cc236c
commit ac6970ad40
3 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ui/src/lib/components/CopyPasswordField.svelte
View File

@ -14,7 +14,7 @@
export let name: string; export let name: string;
export let placeholder = ''; export let placeholder = '';
let disabledClass = 'bg-coolback disabled:bg-coolblack'; let disabledClass = 'bg-coolback disabled:bg-coolblack w-full';
let isHttps = browser && window.location.protocol === 'https:'; let isHttps = browser && window.location.protocol === 'https:';
function copyToClipboard() { function copyToClipboard() {

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

@ -96,23 +96,25 @@
<div class="grid gap-1 lg:grid-flow-col pb-7"> <div class="grid gap-1 lg:grid-flow-col pb-7">
<div class="title">General</div> <div class="title">General</div>
{#if !source.githubAppId} {#if !source.githubAppId}
<button class="btn btn-sm bg-sources" type="submit">Save & Redirect to GitHub</button> <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>
</div>
{/if} {/if}
</div> </div>
<div class="grid grid-flow-row gap-2 px-10"> <div class="grid grid-flow-row gap-2 lg:px-10">
<div class="grid grid-flow-row gap-2"> <div class="grid grid-flow-row gap-2">
<div class="mt-2 grid lg:grid-cols-2 items-center"> <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 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> </div>
<div class="grid lg:grid-cols-2 items-center"> <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 name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} /> <input class="w-full" name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
</div> </div>
<div class="grid lg:grid-cols-2 items-center"> <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 name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} /> <input class="w-full" name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
</div> </div>
<div class="grid lg:grid-cols-2 items-center"> <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"
@ -121,6 +123,7 @@
/></label /></label
> >
<input <input
class="w-full"
name="customPort" name="customPort"
id="customPort" id="customPort"
disabled={!selfHosted || source.githubAppId} disabled={!selfHosted || source.githubAppId}
@ -139,6 +142,7 @@
> >
</div> </div>
<input <input
class="w-full"
name="organization" name="organization"
id="organization" id="organization"
placeholder="eg: coollabsio" placeholder="eg: coollabsio"

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

@ -145,8 +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"> <div class="flex space-x-1 pb-7 flex-col lg:items-center lg:flex-row">
<div class="title">General</div> <div class="title">General</div>
<div class="w-full flex flex-rpw lg:justify-end space-x-2 mt-5 lg:mt-0">
{#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
@ -162,7 +163,8 @@
{/if} {/if}
{/if} {/if}
</div> </div>
<div class="grid grid-flow-row gap-2 px-10"> </div>
<div class="grid grid-flow-row gap-2 lg:px-10">
{#if !source.gitlabAppId} {#if !source.gitlabAppId}
<a <a
href="https://docs.coollabs.io/coolify/sources#how-to-integrate-with-gitlab" href="https://docs.coollabs.io/coolify/sources#how-to-integrate-with-gitlab"
@ -172,7 +174,7 @@
> >
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="type" class="text-base font-bold text-stone-100">Application Type</label> <label for="type" class="text-base font-bold text-stone-100">Application Type</label>
<select name="type" id="type" class="w-96" bind:value={applicationType}> <select name="type" id="type" class="lg:w-96 w-full" bind:value={applicationType}>
<option value="user">{$t('source.gitlab.user_owned')}</option> <option value="user">{$t('source.gitlab.user_owned')}</option>
<option value="group">{$t('source.gitlab.group_owned')}</option> <option value="group">{$t('source.gitlab.group_owned')}</option>
{#if source.htmlUrl !== 'https://gitlab.com'} {#if source.htmlUrl !== 'https://gitlab.com'}
@ -185,6 +187,7 @@
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="groupName" class="text-base font-bold text-stone-100">Group Name</label> <label for="groupName" class="text-base font-bold text-stone-100">Group Name</label>
<input <input
class="w-full"
name="groupName" name="groupName"
id="groupName" id="groupName"
required required
@ -197,7 +200,7 @@
<div class="grid grid-flow-row gap-2"> <div class="grid grid-flow-row gap-2">
<div class="mt-2 grid grid-cols-2 items-center"> <div class="mt-2 grid 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> </div>
{#if source.gitlabApp.groupName} {#if source.gitlabApp.groupName}
@ -206,6 +209,7 @@
>{$t('source.group_name')}</label >{$t('source.group_name')}</label
> >
<input <input
class="w-full"
name="groupName" name="groupName"
id="groupName" id="groupName"
disabled={source.gitlabAppId} disabled={source.gitlabAppId}
@ -218,6 +222,7 @@
<div class="grid grid-cols-2 items-center"> <div class="grid 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"
required required
@ -229,6 +234,7 @@
<div class="grid grid-cols-2 items-center"> <div class="grid 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"
disabled={source.gitlabAppId} disabled={source.gitlabAppId}
@ -245,6 +251,7 @@
/></label /></label
> >
<input <input
class="w-full"
name="customPort" name="customPort"
id="customPort" id="customPort"
disabled={!selfHosted} disabled={!selfHosted}
@ -264,6 +271,7 @@
> >
</div> </div>
<input <input
class="w-full"
disabled={source.gitlabAppId} disabled={source.gitlabAppId}
readonly={source.gitlabAppId} readonly={source.gitlabAppId}
on:change={checkOauthId} on:change={checkOauthId}
@ -281,6 +289,7 @@
>{$t('source.application_id')}</label >{$t('source.application_id')}</label
> >
<input <input
class="w-full"
name="appId" name="appId"
id="appId" id="appId"
disabled={source.gitlabAppId} disabled={source.gitlabAppId}