fix(routes): improve design of git sources page

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

View File

@ -14,7 +14,7 @@
export let name: string;
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:';
function copyToClipboard() {

View File

@ -96,23 +96,25 @@
<div class="grid gap-1 lg:grid-flow-col pb-7">
<div class="title">General</div>
{#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}
</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="mt-2 grid lg:grid-cols-2 items-center">
<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 class="grid lg:grid-cols-2 items-center">
<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 class="grid lg:grid-cols-2 items-center">
<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 class="grid lg:grid-cols-2 items-center">
<label for="customPort" class="text-base font-bold text-stone-100"
@ -121,6 +123,7 @@
/></label
>
<input
class="w-full"
name="customPort"
id="customPort"
disabled={!selfHosted || source.githubAppId}
@ -139,6 +142,7 @@
>
</div>
<input
class="w-full"
name="organization"
id="organization"
placeholder="eg: coollabsio"

View File

@ -145,8 +145,9 @@
<div class="mx-auto max-w-4xl px-6">
<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="w-full flex flex-rpw lg:justify-end space-x-2 mt-5 lg:mt-0">
{#if $appSession.isAdmin}
<button type="submit" class="btn btn-sm bg-sources" disabled={loading}
>{loading ? $t('forms.saving') : $t('forms.save')}</button
@ -162,7 +163,8 @@
{/if}
{/if}
</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}
<a
href="https://docs.coollabs.io/coolify/sources#how-to-integrate-with-gitlab"
@ -172,7 +174,7 @@
>
<div class="grid grid-cols-2 items-center">
<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="group">{$t('source.gitlab.group_owned')}</option>
{#if source.htmlUrl !== 'https://gitlab.com'}
@ -185,6 +187,7 @@
<div class="grid grid-cols-2 items-center">
<label for="groupName" class="text-base font-bold text-stone-100">Group Name</label>
<input
class="w-full"
name="groupName"
id="groupName"
required
@ -197,7 +200,7 @@
<div class="grid grid-flow-row gap-2">
<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>
<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>
{#if source.gitlabApp.groupName}
@ -206,6 +209,7 @@
>{$t('source.group_name')}</label
>
<input
class="w-full"
name="groupName"
id="groupName"
disabled={source.gitlabAppId}
@ -218,6 +222,7 @@
<div class="grid grid-cols-2 items-center">
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
<input
class="w-full"
name="htmlUrl"
id="htmlUrl"
required
@ -229,6 +234,7 @@
<div class="grid grid-cols-2 items-center">
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
<input
class="w-full"
name="apiUrl"
id="apiUrl"
disabled={source.gitlabAppId}
@ -245,6 +251,7 @@
/></label
>
<input
class="w-full"
name="customPort"
id="customPort"
disabled={!selfHosted}
@ -264,6 +271,7 @@
>
</div>
<input
class="w-full"
disabled={source.gitlabAppId}
readonly={source.gitlabAppId}
on:change={checkOauthId}
@ -281,6 +289,7 @@
>{$t('source.application_id')}</label
>
<input
class="w-full"
name="appId"
id="appId"
disabled={source.gitlabAppId}