kbruen/foxbank
1
0
Fork 0
mirror of https://github.com/dancojocaru2000/foxbank.git synced 2025-11-04 12:26:31 +02:00
Code Releases Activity

Merge pull request #1 from dancojocaru2000/Frontend-Kenny-Attempt-1

Browse source 
Layout modifications to frontend
This commit is contained in:
DariusTFox24 2021-11-17 21:21:30 +02:00 • committed by GitHub
commit 80aefdfe28
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 87 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
client/src/App.svelte
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
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
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
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>

104
client/src/MainPage.svelte
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(); const dispatch = createEventDispatcher();
let username = "Firstname Lastname"; let username = "Firstname Lastname";
let code = ""; let code = "";
let totalbalance = "2455,22"; let totalbalance = "2455,22";
let accountnr = "2"; let accountnr = "2";
let maincurrency = "RON" let maincurrency = "RON"
function dispatchLogout(){ function dispatchLogout(){
//todo: CHeck here //todo: CHeck here
dispatch("logOut",null); dispatch("logOut",null);
} }
function showNotifications(){ function showNotifications(){
//todo: CHeck here //todo: CHeck here
dispatch("showNotifications",null); dispatch("showNotifications",null);
} }
</script> </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="container h-screen flex flex-col justify-center"> <div class="flex-shrink md:flex-shrink-0 md:flex-grow"></div>
<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"> <CardBG class="flex-shrink flex flex-col items-stretch md:self-start">
<h2 class='font-sans text-4xl text-gray-50'>Total balance: <span style="color: #264D59">{totalbalance}</span>{maincurrency}</h2> <div class="flex flex-row">
<p class='font-sans text-1xl text-gray-50 m-2'>➜ from {accountnr} accounts</p> <h1 class='font-sans text-5xl text-gray-50 m-6 border-b-2'>{username}</h1>
</div> <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 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 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> </div>
</main> <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 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>
</main>

15
client/src/TopBorder.svelte
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">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%);
} }