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

fixing login page unaligned with center on mobile

Browse Source
This commit is contained in:
Lucas Lima 2022-08-27 01:52:24 +00:00
parent c471eed808
commit 3b6e5853d8
3 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/ui/src/routes/__layout.svelte
View File

@ -388,5 +388,7 @@
{/if} {/if}
{/if} {/if}
<main> <main>
<slot /> <div class="px-20">
<slot />
</div>
</main> </main>

9
apps/ui/src/routes/login.svelte
View File

@ -69,6 +69,7 @@
required required
bind:this={emailEl} bind:this={emailEl}
bind:value={email} bind:value={email}
class="w-56 md:w-96"
/> />
<input <input
type="password" type="password"
@ -76,6 +77,7 @@
placeholder={$t('forms.password')} placeholder={$t('forms.password')}
bind:value={password} bind:value={password}
required required
class="w-56 md:w-96"
/> />
<div class="flex space-x-2 h-8 items-center justify-center pt-8"> <div class="flex space-x-2 h-8 items-center justify-center pt-8">
@ -83,14 +85,13 @@
type="submit" type="submit"
disabled={loading} disabled={loading}
class="btn btn-sm" class="btn btn-sm"
class:loading={loading} class:loading
class:bg-coollabs={!loading} class:bg-coollabs={!loading}
>{loading ? $t('login.authenticating') : $t('login.login')}</button >{loading ? $t('login.authenticating') : $t('login.login')}</button
> >
<button <button on:click|preventDefault={gotoRegister} class="btn btn-sm"
on:click|preventDefault={gotoRegister} >{$t('register.register')}</button
class="btn btn-sm">{$t('register.register')}</button
> >
</div> </div>
</form> </form>

8
apps/ui/src/tailwind.css
View File

@ -24,12 +24,6 @@ body {
@apply min-h-screen overflow-x-hidden bg-coolblack text-sm text-white scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200; @apply min-h-screen overflow-x-hidden bg-coolblack text-sm text-white scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200;
} }
main,
.main {
width: calc(100% - 4rem);
margin-left: 4rem;
}
input { input {
@apply h-12 w-96 rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm; @apply h-12 w-96 rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
} }
@ -106,7 +100,7 @@ .title {
@apply mr-4 text-base tracking-tight md:text-2xl font-bold; @apply mr-4 text-base tracking-tight md:text-2xl font-bold;
} }
.nav-main { .nav-main {
@apply fixed top-0 left-0 min-h-screen w-16 min-w-[4rem] overflow-auto border-r border-stone-800 bg-coolgray-200 scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 xl:overflow-visible; @apply fixed top-0 left-0 min-h-screen w-16 min-w-[4rem] overflow-hidden border-r border-stone-800 bg-coolgray-200 scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 xl:overflow-visible;
} }
.nav-side { .nav-side {