Make the set base page respond better to viewport width

This commit is contained in:
Mattias Granlund 2023-07-24 13:32:43 +01:00
parent 5ecadc9c30
commit ebd042cd5d

View File

@ -79,50 +79,52 @@
</div> </div>
</div> </div>
{:else} {:else}
<div class="content-stretch grid h-full w-full grid-cols-2 items-stretch justify-items-stretch"> <div class="grid h-full w-full grid-cols-2 items-center justify-items-stretch">
<div class="grid h-full place-items-center bg-light-400 p-12 text-xl dark:bg-dark-700"> <div
<div id="vb-data" class="m-auto space-y-4"> id="vb-data"
<div class="font-bold">Set your Base Branch</div> class="flex h-full flex-col justify-center gap-y-4 self-center bg-light-400 p-12 text-lg dark:bg-dark-700"
<p class="text-light-700 dark:text-dark-100"> >
You need to set your base branch before you can start working on your project. <div class="font-bold">Set your Base Branch</div>
<p class="text-light-700 dark:text-dark-100">
You need to set your base branch before you can start working on your project.
</p>
<!-- select menu of remoteBranches -->
{#if remoteBranchNames.length === 0}
<p class="mt-6 text-red-500">You don't have any remote branches.</p>
<p class="mt-6 text-sm text-light-700">
Currently, GitButler requires a remote branch to base it's virtual branch work on. To use
virtual branches, please push your code to a remote branch to use as a base.
<a
target="_blank"
rel="noreferrer"
class="font-bold"
href="https://docs.gitbutler.com/features/virtual-branches/base-branch">Learn more</a
>
</p> </p>
<!-- select menu of remoteBranches --> {:else}
{#if remoteBranchNames.length === 0} <select bind:value={targetChoice}>
<p class="mt-6 text-red-500">You don't have any remote branches.</p> {#each remoteBranchNames as branch}
<p class="mt-6 text-sm text-light-700"> {@const strippedBranch = branch.substring(13)}
Currently, GitButler requires a remote branch to base it's virtual branch work on. To {#if strippedBranch == 'origin/master' || strippedBranch == 'origin/main'}
use virtual branches, please push your code to a remote branch to use as a base. <option value={strippedBranch} selected>{strippedBranch}</option>
<a {:else}
target="_blank" <option value={strippedBranch}>{strippedBranch}</option>
rel="noreferrer" {/if}
class="font-bold" {/each}
href="https://docs.gitbutler.com/features/virtual-branches/base-branch">Learn more</a </select>
> <p class="text-base text-light-700 dark:text-dark-100">
</p> This is the branch that you consider "production", normally something like "origin/master"
{:else} or "origin/main".
<select bind:value={targetChoice}> </p>
{#each remoteBranchNames as branch} <div>
{@const strippedBranch = branch.substring(13)} <Button color="purple" height="small" on:click={onSetTargetClick}>Set Base Branch</Button>
{#if strippedBranch == 'origin/master' || strippedBranch == 'origin/main'} </div>
<option value={strippedBranch} selected>{strippedBranch}</option> {/if}
{:else}
<option value={strippedBranch}>{strippedBranch}</option>
{/if}
{/each}
</select>
<p class="text-base text-light-700 dark:text-dark-100">
This is the branch that you consider "production", normally something like
"origin/master" or "origin/main".
</p>
<div>
<Button color="purple" height="small" on:click={onSetTargetClick}
>Set Base Branch</Button
>
</div>
{/if}
</div>
</div> </div>
<div id="vb-data" class="m-auto flex h-full flex-col space-y-3 overflow-auto p-12 text-lg"> <div
id="vb-data"
class="flex h-full flex-col justify-center gap-y-3 overflow-y-auto p-12 text-lg"
>
<h1 class="text-xl font-bold">Getting Started with Virtual Branches</h1> <h1 class="text-xl font-bold">Getting Started with Virtual Branches</h1>
<p class="text-xl text-light-700 dark:text-dark-100"> <p class="text-xl text-light-700 dark:text-dark-100">
Virtual branches are just like normal Git branches, except that you can work on several of Virtual branches are just like normal Git branches, except that you can work on several of