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

Expandable account cards

pull/4/head
DariusTFox 3 years ago
parent
80aefdfe28
commit
e69eacd257
11 changed files with 288 additions and 2268 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. 2244
      client/package-lock.json
  2. 174
      client/src/AccountCard.svelte
  3. 8
      client/src/App.svelte
  4. 10
      client/src/BaseButton.svelte
  5. 1
      client/src/BottomBorder.svelte
  6. 23
      client/src/DetailField.svelte
  7. 22
      client/src/GreenButton.svelte
  8. 9
      client/src/Login.svelte
  9. 42
      client/src/MainPage.svelte
  10. 13
      client/src/OrangeButton.svelte
  11. 10
      client/tailwind.config.js

2244
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

174
client/src/AccountCard.svelte
Unescape View File

@ -0,0 +1,174 @@
<script>
import Icon from '@iconify/svelte';
import CardBG from "./CardBG.svelte";
import DetailField from './DetailField.svelte';
import GreenButton from './GreenButton.svelte';
import {createEventDispatcher} from 'svelte';
const dispatch = createEventDispatcher();
export let type="RON Account";
export let currency="RON";
export let balance="5425";
export let iban="RONFOX62188921";
export let isExpanded=false;
export let transactions=[
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
{title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
{title:"Transaction Name#4", status:"DECLINED", amount:"+469,09", time:"15:38 27/11/2021", type:"received"},
];
function copyIban(){
//todo: Code here
dispatch("copiedIban",null);
}
function expand(){
//todo: Code here
dispatch("expanded",isExpanded);
}
</script>
<CardBG class="flex-shrink flex flex-col items-stretch md:self-start px-6 pt-6 pb-0 max-h-full overflow-clip min-h-0">
<div class="flex flex-col flex-shrink">
<div class='font-sans mt-2 mx-2 border-b-1'>
<h3 class="text-gray-50 inline mr-4">{type}</h3>
<span class="text-gray-100">IBAN: {iban}</span>
<button on:click={copyIban} class="inline"> <Icon icon="akar-icons:copy" color="rgba(249, 250, 251, 1)"/></button>
</div>
<div class="w-full max-w-sm self-start border-solid border-gray-50 border mb-2"></div>
</div>
<div class="flex flex-row flex-grow max-h-full min-h-0">
<div class="flex flex-col">
<div>
<DetailField class="py-2 mt-4 flex-shrink">
<h2 class='font-sans ml-4 text-4xl text-gray-50'>Balance: <span style="color: #264D59">{balance}</span>{currency}</h2>
</DetailField>
</div>
<div class="flex flex-col flex-grow max-h-full relative {isExpanded ? "overflow-auto" : ""}">
{#if isExpanded }
{#each transactions as transaction}
<DetailField class="my-3 py-1 flex-shrink">
<div class='font-sans text-gray-50 mt-2 mx-4 border-b-1'>
<h3 class="inline mr-3">{transaction.title}: </h3>
<span class="text-4xl {transaction.type == "send" ? "text-red-c" : "text-lime-c"}">{transaction.amount}</span>
<span class="text-4xl">{currency}</span>
</div>
<div class='font-sans text-2xl text-gray-100 mt-2 mx-6 border-b-1'>
<p class="inline">at {transaction.time} </p>
{#if transaction.status == "PROCESSED"}
<span>
<Icon class="inline mb-1" icon="akar-icons:circle-check" color="#6DE25ACC"/>
</span>
{:else if transaction.status == "PENDING"}
<span>
<Icon class="inline mb-1" icon="akar-icons:arrow-cycle" color="#F6AF43"/>
</span>
{:else if transaction.status == "CANCELLED"}
<span>
<Icon class="inline mb-1" icon="akar-icons:circle-x" color="#F7630C"/>
</span>
{:else}
<span>
<Icon class="inline mb-1" icon="akar-icons:triangle-alert" color="#F7630C"/>
</span>
{/if}
{transaction.status}
</div>
</DetailField>
{/each}
{:else if transactions.length > 0}
<DetailField class="my-3 py-2 flex-shrink min-w-transaction">
<div class='font-sans text-gray-50 mt-2 mx-4 border-b-1'>
<h3 class="inline mr-3">{transactions[0].title}: </h3>
<span class="text-4xl {transactions[0].type == "send" ? "text-red-c" : "text-lime-c"}">{transactions[0].amount}</span>
<span class="text-4xl">{currency}</span>
</div>
<div class='font-sans text-2xl text-gray-100 mt-2 mx-6 border-b-1'>
<p class="inline">at {transactions[0].time} </p>
{#if transactions[0].status == "PROCESSED"}
<span>
<Icon class="inline mb-1" icon="akar-icons:circle-check" color="#6DE25ACC"/>
</span>
{:else if transactions[0].status == "PENDING"}
<span>
<Icon class="inline mb-1" icon="akar-icons:arrow-cycle" color="#F6AF43"/>
</span>
{:else if transactions[0].status == "CANCELLED"}
<span>
<Icon class="inline mb-1" icon="akar-icons:circle-x" color="#F7630C"/>
</span>
{:else}
<span>
<Icon class="inline mb-1" icon="akar-icons:triangle-alert" color="#F7630C"/>
</span>
{/if}
{transactions[0].status}
</div>
</DetailField>
{:else}
<DetailField class="my-3 py-2 flex-shrink min-w-transaction">
<div class='font-sans text-gray-200 mt-2 mx-4 border-b-1'>
<h3 class="inline mr-3">No transactions made on this account.</h3>
</div>
</DetailField>
{/if}
</div>
</div>
<div class="flex flex-col flex-shrink">
<GreenButton class="mx-8">
<Icon class="inline" icon="akar-icons:arrow-right" color="rgba(249, 250, 251, 1)"/>
send money
</GreenButton>
</div>
</div>
<div class="self-center p-2">
{#if transactions.length > 1}
{#if isExpanded == false }
<button on:click={expand}><Icon icon="akar-icons:chevron-down" color="rgba(249, 250, 251, 1)"/></button>
{:else}
<button on:click={expand}><Icon icon="akar-icons:chevron-up" color="rgba(249, 250, 251, 1)"/></button>
{/if}
{/if}
</div>
</CardBG>

8
client/src/App.svelte
Unescape View File

@ -5,22 +5,22 @@ import Login from "./Login.svelte";
import MainPage from "./MainPage.svelte"; import MainPage from "./MainPage.svelte";
import TopBorder from "./TopBorder.svelte"; import TopBorder from "./TopBorder.svelte";
let loggedin = false; let loggedin = true;
function toggleLoggedIn() { function toggleLoggedIn() {
loggedin = !loggedin; loggedin = !loggedin;
} }
</script> </script>
<main class="flex flex-col items-stretch bg-banner bg-cover bg-center h-screen font-sans"> <main class="flex flex-col items-stretch bg-banner bg-cover bg-center bg-fixed h-screen font-sans">
<TopBorder class="flex-shrink"></TopBorder> <TopBorder class="flex-shrink"></TopBorder>
<div class="flex-grow"> <div class="flex-grow max-h-full overflow-hidden">
{#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> </div>
<BottomBorder class="flex-shrink"></BottomBorder> <BottomBorder class="flex-none"></BottomBorder>
</main> </main>
<svelte:head> <svelte:head>

10
client/src/BaseButton.svelte
Unescape View File

@ -0,0 +1,10 @@
<script>
let clazz = "";
export { clazz as class };
</script>
<main class={clazz}>
<button on:click class="rounded-2xl p-6 w-full text-center text-3xl text-gray-50">
<slot></slot>
</button>
</main>

1
client/src/BottomBorder.svelte
Unescape View File

@ -11,6 +11,7 @@
main{ main{
width:100%; width:100%;
height:80px; height:80px;
flex-basis: 80px;
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%);
} }

23
client/src/DetailField.svelte
Unescape View File

@ -0,0 +1,23 @@
<script>
export let width = "inherit";
export let height = "inherit";
let clazz;
export {clazz as class}
</script>
<main class="rounded-x {clazz}" style="--width: {width}; --height: {height};">
<slot></slot>
</main>
<style>
main{
width: var(--width);
height: var(--height);
background: linear-gradient(92.55deg, rgba(76, 172, 135, 0.95) -28.27%, rgba(249, 224, 127, 0.096) 115.79%);
filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.25));
border-radius: 3px;
}
</style>

22
client/src/GreenButton.svelte
Unescape View File

@ -0,0 +1,22 @@
<script>
import BaseButton from "./BaseButton.svelte";
let clazz = "";
export { clazz as class };
</script>
<div class="green {clazz}">
<BaseButton on:click>
<slot></slot>
</BaseButton>
</div>
<style>
.green {
background: linear-gradient(92.55deg, rgba(67, 151, 141, 0.95) -28.27%, rgba(249, 224, 127, 0) 115.79%);
filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.25));
border-radius: 16px;
}
</style>

9
client/src/Login.svelte
Unescape View File

@ -1,9 +1,10 @@
<script> <script>
import Button from "./Button.svelte"; import OrangeButton from "./OrangeButton.svelte";
import CardBG from "./CardBG.svelte"; import CardBG from "./CardBG.svelte";
import InputField from "./InputField.svelte"; import InputField from "./InputField.svelte";
import {createEventDispatcher} from 'svelte'; import {createEventDispatcher} from 'svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -30,7 +31,7 @@
</div> </div>
<div class="m-3 flex-shrink"> <div class="m-3 flex-shrink">
<Button on:click={checkLogin}>Login</Button> <OrangeButton on:click={checkLogin}>Login</OrangeButton>
</div> </div>
<div class="flex-grow"> <div class="flex-grow">
@ -38,8 +39,8 @@
</div> </div>
<div class="flex"> <div class="flex">
<a href='https://google.com' class='text-3xl text-gray-400 m-6 flex-auto text-center'>Help!</a> <a href='https://support.google.com/accounts/answer/1066447?hl=ro&co=GENIE.Platform%3DAndroid' target="_blank" 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'>Can't login?</a> <a href='https://support.google.com/accounts/answer/185834?hl=en' target="_blank" class='text-3xl text-gray-400 m-6 flex-auto text-center'>Can't login?</a>
</div> </div>
</CardBG> </CardBG>

42
client/src/MainPage.svelte
Unescape View File

@ -3,6 +3,7 @@
import CardBG from "./CardBG.svelte"; import CardBG from "./CardBG.svelte";
import {createEventDispatcher} from 'svelte'; import {createEventDispatcher} from 'svelte';
import AccountCard from './AccountCard.svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -10,7 +11,7 @@
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
@ -22,20 +23,37 @@
dispatch("showNotifications",null); dispatch("showNotifications",null);
} }
let accounts = [{}, {}];
let expandedAccount = null;
function expanded(index) {
if (!expandedAccount && expandedAccount !== 0) {
expandedAccount = index;
}
else {
expandedAccount = null;
}
}
</script> </script>
<main class="h-full flex flex-col items-stretch md:flex-row"> <main class="h-full flex flex-col items-stretch md:flex-row">
<div class="flex flex-col items-stretch"> <div class="flex flex-col items-stretch max-h-full">
<CardBG>Item 1</CardBG> {#if expandedAccount || expandedAccount === 0}
<CardBG>Item 2</CardBG> <AccountCard balance="{expandedAccount}" isExpanded={true} on:expanded={() => expanded(null)}></AccountCard>
{:else}
{#each accounts as account,i}
<AccountCard balance="{i}" isExpanded={false} on:expanded={() => expanded(i)}></AccountCard>
{/each}
{/if}
</div> </div>
<div class="flex-shrink md:flex-shrink-0 md:flex-grow"></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"> <CardBG class="flex-shrink flex flex-col items-stretch md:self-start p-6">
<div class="flex flex-row"> <div class="flex flex-row">
<h1 class='font-sans text-5xl text-gray-50 m-6 border-b-2'>{username}</h1> <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> <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="36" height="36" /></button>
</div> </div>
<div class="m-3 flex-shrink"> <div class="m-3 flex-shrink">
@ -47,19 +65,17 @@
<h2 class='font-sans text-4xl text-gray-50'>Total balance: <span style="color: #264D59">{totalbalance}</span>{maincurrency}</h2> <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> <p class='font-sans text-1xl text-gray-50 m-2'>➜ from {accountnr} accounts</p>
</div> </div>
<div class="flex-grow"></div> <div class="m-16"></div>
<div class="flex-grow"></div>
<div class="flex-grow"></div>
<div class="flex flex-row"> <div class="flex flex-row">
<button on:click={dispatchLogout}> <Icon icon="ri:logout-box-line" color="gray" width="44" height="44"/></button> <button on:click={dispatchLogout}> <Icon icon="ri:logout-box-line" color="gray" width="34" height="34"/></button>
<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-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' target="_blank" 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> <a href='mailto:foxbank.fx@gmail.com' target="_blank" class='text-3xl text-gray-400 m-6 flex-auto text-center'>Feedback</a>
</div> </div>
</CardBG> </CardBG>

13
client/src/Button.svelte → client/src/OrangeButton.svelte
Unescape View File

@ -1,15 +1,18 @@
<script> <script>
import BaseButton from "./BaseButton.svelte";
</script> </script>
<main> <div class="orange">
<button on:click class="rounded-2xl p-6 w-full text-center text-3xl text-gray-50"> <BaseButton on:click>
<slot></slot> <slot></slot>
</button> </BaseButton>
</main> </div>
<style> <style>
button{ .orange {
background: linear-gradient(272.39deg, rgba(247, 175, 67, 0.93) -34.2%, rgba(245, 72, 17, 0.93) 100%); background: linear-gradient(272.39deg, rgba(247, 175, 67, 0.93) -34.2%, rgba(245, 72, 17, 0.93) 100%);
box-shadow: 0px 8px 4px rgba(0, 0, 0, 0.25); box-shadow: 0px 8px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px; border-radius: 20px;

10
client/tailwind.config.js
Unescape View File

@ -18,6 +18,16 @@ module.exports = {
"welcome":['Rochester', 'cursive'], "welcome":['Rochester', 'cursive'],
"sans":['Roboto', 'sans-serif'] "sans":['Roboto', 'sans-serif']
}, },
colors: {
'regal-blue': '#243c5a',
'lime-c': '#6DE25ACC',
'red-c': '#FB6666',
},
minWidth: {
'transaction': '420px',
},
}, },
}, },
variants: { variants: {

Write Preview
Loading…
Cancel
Save