From 81a37c864b1883a536da78c59578b5466d03fd0e Mon Sep 17 00:00:00 2001
From: Dan Cojocaru <dancojocaru2010@hotmail.com>
Date: Tue, 16 Nov 2021 23:30:26 +0200
Subject: [PATCH] Fixed alignment issues; added a lot more flexboxes

---
 client/src/App.svelte          |  18 +++---
 client/src/BottomBorder.svelte |  13 ++--
 client/src/CardBG.svelte       |  12 ++--
 client/src/Login.svelte        |   8 +--
 client/src/MainPage.svelte     | 108 +++++++++++++++++----------------
 client/src/TopBorder.svelte    |  15 ++---
 6 files changed, 84 insertions(+), 90 deletions(-)

diff --git a/client/src/App.svelte b/client/src/App.svelte
index 1e11f62..1d10678 100644
--- a/client/src/App.svelte
+++ b/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>
-	{#if loggedin}
-		<MainPage on:logOut={toggleLoggedIn}></MainPage>
-	{:else}
-		<Login on:loginSuccess={toggleLoggedIn}></Login>
-	{/if}
+<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>
diff --git a/client/src/BottomBorder.svelte b/client/src/BottomBorder.svelte
index abe9208..060778a 100644
--- a/client/src/BottomBorder.svelte
+++ b/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%);
     }
diff --git a/client/src/CardBG.svelte b/client/src/CardBG.svelte
index 28f6d20..dec1ccd 100644
--- a/client/src/CardBG.svelte
+++ b/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};">
-		<slot></slot>
-	</figure>
+<main class="rounded-x p-3 m-14 {clazz}" style="--width: {width}; --height: {height};">
+	<slot></slot>
 </main>
 
 <style>
-	figure{
+	main {
 		width: var(--width);
 		height: var(--height);
 
diff --git a/client/src/Login.svelte b/client/src/Login.svelte
index 1305f2c..05e30c0 100644
--- a/client/src/Login.svelte
+++ b/client/src/Login.svelte
@@ -1,5 +1,5 @@
 <script>
-import Button from "./Button.svelte";
+    import Button from "./Button.svelte";
 
     import CardBG from "./CardBG.svelte";
     import InputField from "./InputField.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>
diff --git a/client/src/MainPage.svelte b/client/src/MainPage.svelte
index c5541d3..c81c417 100644
--- a/client/src/MainPage.svelte
+++ b/client/src/MainPage.svelte
@@ -1,64 +1,68 @@
 <script>
     import Icon from '@iconify/svelte';
     
-        import CardBG from "./CardBG.svelte";
-        import {createEventDispatcher} from 'svelte';
-        
-        const dispatch = createEventDispatcher();
-    
-        let username = "Firstname Lastname";
-        let code = "";
-        let totalbalance = "2455,22";
-        let accountnr = "2";
-        let maincurrency = "RON"
+    import CardBG from "./CardBG.svelte";
+    import {createEventDispatcher} from 'svelte';
     
-        function dispatchLogout(){
-            //todo: CHeck here 
-            dispatch("logOut",null);
-        }
+    const dispatch = createEventDispatcher();
 
-        function showNotifications(){
-            //todo: CHeck here 
-            dispatch("showNotifications",null);
-        }
-    
-    </script>
+    let username = "Firstname Lastname";
+    let code = "";
+    let totalbalance = "2455,22";
+    let accountnr = "2";
+    let maincurrency = "RON"
+
+    function dispatchLogout(){
+        //todo: CHeck here 
+        dispatch("logOut",null);
+    }
+
+    function showNotifications(){
+        //todo: CHeck here 
+        dispatch("showNotifications",null);
+    }
+
+</script>
+
+<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>
+
+    <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>
+        </div>
+        
+        <div class="m-3 flex-shrink">
+            <h2 class='font-sans text-4xl text-gray-50'>Total balance: <span style="color: #264D59">{totalbalance}</span>{maincurrency}</h2>
+            <p class='font-sans text-1xl text-gray-50 m-2'>➜ from {accountnr} accounts</p>
+        </div>
+        
+        <div class="m-3 flex-shrink">
+            <h2 class='font-sans text-4xl text-gray-50'>Total balance: <span style="color: #264D59">{totalbalance}</span>{maincurrency}</h2>
+            <p class='font-sans text-1xl text-gray-50 m-2'>➜ from {accountnr} accounts</p>
+        </div>
+        
+        <div class="flex-grow"></div>
+        <div class="flex-grow"></div>
+        <div class="flex-grow"></div>
 
-    <main>
- 
-        <div class="container h-screen flex flex-col justify-center">
-            <CardBG width="514px" height="600px" class="flex flex-col items-stretch">
-                <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>
-                </div>
-               
-                <div class="m-3 flex-shrink">
-                    <h2 class='font-sans text-4xl text-gray-50'>Total balance: <span style="color: #264D59">{totalbalance}</span>{maincurrency}</h2>
-                    <p class='font-sans text-1xl text-gray-50 m-2'>➜ from {accountnr} accounts</p>
-                </div>
-                
-                <div class="m-3 flex-shrink">
-                    <h2 class='font-sans text-4xl text-gray-50'>Total balance: <span style="color: #264D59">{totalbalance}</span>{maincurrency}</h2>
-                    <p class='font-sans text-1xl text-gray-50 m-2'>➜ from {accountnr} accounts</p>
-                </div>
-                
+        <div class="flex flex-row">
+                <button on:click={dispatchLogout}> <Icon icon="ri:logout-box-line" color="gray" width="44" height="44"/></button>
                 <div class="flex-grow"></div>
                 <div class="flex-grow"></div>
                 <div class="flex-grow"></div>
-    
-                <div class="flex flex-row">
-                        <button on:click={dispatchLogout}> <Icon icon="ri:logout-box-line" color="gray" width="44" height="44"/></button>
-                        <div class="flex-grow"></div>
-                        <div class="flex-grow"></div>
-                        <div class="flex-grow"></div>
-                        <div class="flex-grow"></div>
-                        <a href='https://google.com' class='text-3xl text-gray-400 m-6 flex-auto text-center'>Help!</a>
-                        <a href='https://google.com' class='text-3xl text-gray-400 m-6 flex-auto text-center'>Feedback</a>
-                </div>
-                
-            </CardBG>
+                <div class="flex-grow"></div>
+                <a href='https://google.com' class='text-3xl text-gray-400 m-6 flex-auto text-center'>Help!</a>
+                <a href='https://google.com' class='text-3xl text-gray-400 m-6 flex-auto text-center'>Feedback</a>
         </div>
         
-    </main>
+    </CardBG>
+    
+</main>
 
diff --git a/client/src/TopBorder.svelte b/client/src/TopBorder.svelte
index 07db5e1..bd2f701 100644
--- a/client/src/TopBorder.svelte
+++ b/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%);
     }