Browse Source

Fixed alignment issues; added a lot more flexboxes

Frontend-Kenny-Attempt-1
Kenneth Bruen 3 years ago
parent
commit
81a37c864b
Signed by: kbruen
GPG Key ID: C1980A470C3EE5B1
  1. 8
      client/src/App.svelte
  2. 13
      client/src/BottomBorder.svelte
  3. 10
      client/src/CardBG.svelte
  4. 6
      client/src/Login.svelte
  5. 12
      client/src/MainPage.svelte
  6. 15
      client/src/TopBorder.svelte

8
client/src/App.svelte

@ -11,14 +11,16 @@ import TopBorder from "./TopBorder.svelte";
}
</script>
<main class="bg-banner bg-cover bg-center h-screen font-sans">
<TopBorder></TopBorder>
<BottomBorder></BottomBorder>
<main class="flex flex-col items-stretch bg-banner bg-cover bg-center h-screen font-sans">
<TopBorder class="flex-shrink"></TopBorder>
<div class="flex-grow">
{#if loggedin}
<MainPage on:logOut={toggleLoggedIn}></MainPage>
{:else}
<Login on:loginSuccess={toggleLoggedIn}></Login>
{/if}
</div>
<BottomBorder class="flex-shrink"></BottomBorder>
</main>
<svelte:head>

13
client/src/BottomBorder.svelte

@ -1,21 +1,16 @@
<script>
let clazz;
export {clazz as class};
</script>
<main>
<div >
<main class={clazz}>
</div>
</main>
<style>
div{
main{
width:100%;
height:80px;
background:#00f;
position:fixed;
bottom:0;
left:0;
background: linear-gradient(270.31deg, rgba(38, 77, 89, 0.7) 21.94%, rgba(38, 77, 89, 0) 89.29%);
}

10
client/src/CardBG.svelte

@ -1,19 +1,17 @@
<script>
export let width;
export let height;
export let width = "inherit";
export let height = "inherit";
let clazz;
export {clazz as class}
</script>
<main>
<figure class="rounded-x p-3 m-14 {clazz}" style="--width: {width}; --height: {height};">
<main class="rounded-x p-3 m-14 {clazz}" style="--width: {width}; --height: {height};">
<slot></slot>
</figure>
</main>
<style>
figure{
main {
width: var(--width);
height: var(--height);

6
client/src/Login.svelte

@ -17,9 +17,9 @@ import Button from "./Button.svelte";
</script>
<main>
<div class="container h-screen flex flex-col justify-center">
<CardBG width="464px" height="550px" class="flex flex-col items-stretch">
<main class="h-full">
<div class="h-full flex flex-col justify-center items-center md:items-start">
<CardBG class="flex flex-col items-stretch">
<h1 class='font-welcome text-7xl text-gray-50 m-6 border-b-2'>Welcome,</h1>
<div class="m-3 flex-shrink">
<InputField placeholder="Username" isPassword={false} value={username}></InputField>

12
client/src/MainPage.svelte

@ -24,10 +24,15 @@
</script>
<main>
<main class="h-full flex flex-col items-stretch md:flex-row">
<div class="flex flex-col items-stretch">
<CardBG>Item 1</CardBG>
<CardBG>Item 2</CardBG>
</div>
<div class="flex-shrink md:flex-shrink-0 md:flex-grow"></div>
<div class="container h-screen flex flex-col justify-center">
<CardBG width="514px" height="600px" class="flex flex-col items-stretch">
<CardBG class="flex-shrink flex flex-col items-stretch md:self-start">
<div class="flex flex-row">
<h1 class='font-sans text-5xl text-gray-50 m-6 border-b-2'>{username}</h1>
<button on:click={showNotifications} style=" filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));"> <Icon icon="akar-icons:envelope" color="#FB6666" width="64" height="64" /></button>
@ -58,7 +63,6 @@
</div>
</CardBG>
</div>
</main>

15
client/src/TopBorder.svelte

@ -1,21 +1,16 @@
<script>
let clazz;
export {clazz as class};
</script>
<main>
<div >
<h1 class="font-title text-7xl text-gray-50 mx-8">FOXBANK</h1>
</div>
<main class={clazz}>
<h1 class="font-title text-7xl text-gray-50 m-8">FOXBANK</h1>
</main>
<style>
div{
main{
width:100%;
height:80px;
background:#00f;
position:fixed;
top:0;
left:0;
background: linear-gradient(90.12deg, rgba(38, 77, 89, 0.7) 19.7%, rgba(38, 77, 89, 0) 93.77%);
}

Loading…
Cancel
Save