Design day!

This commit is contained in:
Andras Bacsai
2022-02-22 12:56:58 +01:00
parent 0c2e028b38
commit df18b93809
24 changed files with 418 additions and 482 deletions

View File

@@ -24,26 +24,24 @@
}
</script>
<div class="flex justify-center pb-8">
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
<div class="flex h-8 items-center space-x-2">
<div class="text-xl font-bold text-white">Configuration</div>
<button type="submit" class="bg-orange-600 hover:bg-orange-500">Save</button>
</div>
<div class="grid grid-cols-3 items-center">
<label for="type">Type</label>
<div class="mx-auto max-w-4xl px-6">
<div class="flex justify-center pb-8">
<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
<div class="flex h-8 items-center space-x-2">
<div class="text-xl font-bold text-white">Configuration</div>
<button type="submit" class="bg-orange-600 hover:bg-orange-500">Save</button>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label for="type" class="text-base font-bold text-stone-100">Type</label>
<div class="col-span-2">
<select name="type" id="type" class="w-96" bind:value={gitSource.type}>
<option value="github">GitHub</option>
<option value="gitlab">GitLab</option>
<option value="bitbucket">BitBucket</option>
</select>
</div>
</div>
<div class="grid grid-cols-3 items-center">
<label for="name">Name</label>
<div class="col-span-2">
<div class="grid grid-cols-2 items-center px-10">
<label for="name" class="text-base font-bold text-stone-100">Name</label>
<input
name="name"
id="name"
@@ -53,11 +51,9 @@
bind:value={gitSource.name}
/>
</div>
</div>
<div class="grid grid-cols-3 items-center">
<label for="htmlUrl">HTML URL</label>
<div class="col-span-2">
<div class="grid grid-cols-2 items-center px-10">
<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
<input
type="url"
name="htmlUrl"
@@ -67,10 +63,8 @@
bind:value={gitSource.htmlUrl}
/>
</div>
</div>
<div class="grid grid-cols-3 items-center">
<label for="apiUrl">API URL</label>
<div class="col-span-2">
<div class="grid grid-cols-2 items-center px-10">
<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
<input
name="apiUrl"
type="url"
@@ -80,10 +74,15 @@
bind:value={gitSource.apiUrl}
/>
</div>
</div>
<div class="grid grid-cols-3">
<label for="organization" class="pt-2">Organization</label>
<div class="col-span-2">
<div class="grid grid-cols-2 px-10">
<div class="flex flex-col">
<label for="organization" class="pt-2 text-base font-bold text-stone-100"
>Organization</label
>
<Explainer
text="Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."
/>
</div>
<input
name="organization"
id="organization"
@@ -91,11 +90,7 @@
bind:value={gitSource.organization}
bind:this={organizationEl}
/>
<Explainer
text="Fill it if you would like to use an organization's as your Git Source. Otherwise your
user will be used."
/>
</div>
</div>
</form>
</form>
</div>
</div>