kbruen
/
foxbank
mirror of https://github.com/dancojocaru2000/foxbank.git
1
0
Fork 0
Code Releases Activity
Browse Source

Fixed alignment issues; added a lot more flexboxes

Frontend-Kenny-Attempt-1
Kenneth Bruen 3 years ago
parent
024a3c84a7
commit
81a37c864b
Signed by: kbruen
GPG Key ID: C1980A470C3EE5B1
6 changed files with 84 additions and 90 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      client/src/App.svelte
  2. 13
      client/src/BottomBorder.svelte
  3. 12
      client/src/CardBG.svelte
  4. 8
      client/src/Login.svelte
  5. 108
      client/src/MainPage.svelte
  6. 15
      client/src/TopBorder.svelte

18
client/src/App.svelte
Unescape View File

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

13
client/src/BottomBorder.svelte
Unescape View File

@ -1,21 +1,16 @@
<script> <script>
let clazz;
export {clazz as class};
</script> </script>
<main> <main class={clazz}>
<div >
</div>
</main> </main>
<style> <style>
div{ main{
width:100%; width:100%;
height:80px; 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%); background: linear-gradient(270.31deg, rgba(38, 77, 89, 0.7) 21.94%, rgba(38, 77, 89, 0) 89.29%);
} }

12
client/src/CardBG.svelte
Unescape View File

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

8
client/src/Login.svelte
Unescape View File

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

108
client/src/MainPage.svelte
Unescape View File

@ -1,64 +1,68 @@
<script> <script>
import Icon from '@iconify/svelte'; import Icon from '@iconify/svelte';
import CardBG from "./CardBG.svelte"; import CardBG from "./CardBG.svelte";
import {createEventDispatcher} from 'svelte'; import {createEventDispatcher} from 'svelte';
const dispatch = createEventDispatcher();
let username = "Firstname Lastname";
let code = "";
let totalbalance = "2455,22";
let accountnr = "2";
let maincurrency = "RON"
function dispatchLogout(){ const dispatch = createEventDispatcher();
//todo: CHeck here
dispatch("logOut",null);
}
function showNotifications(){ let username = "Firstname Lastname";
//todo: CHeck here let code = "";
dispatch("showNotifications",null); let totalbalance = "2455,22";
} let accountnr = "2";
let maincurrency = "RON"
</script>
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="flex flex-row">
<button on:click={dispatchLogout}> <Icon icon="ri:logout-box-line" color="gray" width="44" height="44"/></button>
<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-grow"></div> <div class="flex-grow"></div>
<div class="flex-grow"></div> <div class="flex-grow"></div>
<div class="flex-grow"></div> <div class="flex-grow"></div>
<div class="flex-grow"></div>
<div class="flex flex-row"> <a href='https://google.com' class='text-3xl text-gray-400 m-6 flex-auto text-center'>Help!</a>
<button on:click={dispatchLogout}> <Icon icon="ri:logout-box-line" color="gray" width="44" height="44"/></button> <a href='https://google.com' class='text-3xl text-gray-400 m-6 flex-auto text-center'>Feedback</a>
<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> </div>
</main> </CardBG>
</main>

15
client/src/TopBorder.svelte
Unescape View File

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

Write Preview
Loading…
Cancel
Save