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

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

Layout modifications to frontend
pull/4/head
DariusTFox24 3 years ago committed by GitHub
parent
2d0bee72ff 81a37c864b
commit
80aefdfe28
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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
Split 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>
<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>

13
client/src/BottomBorder.svelte
Unescape View File

@ -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%);
}

12
client/src/CardBG.svelte
Unescape View File

@ -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);

8
client/src/Login.svelte
Unescape View File

@ -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>

108
client/src/MainPage.svelte
Unescape View File

@ -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>

15
client/src/TopBorder.svelte
Unescape View File

@ -1,21 +1,16 @@
<script>
let clazz;
export {clazz as class};
</script>
<main>
<div >
<h1 class="font-title text-7xl text-gray-50">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%);
}

Write Preview
Loading…
Cancel
Save