mirror of
https://github.com/dancojocaru2000/foxbank.git
synced 2025-11-04 16:46:33 +02:00
Expandable account cards
This commit is contained in:
DariusTFox
parent
80aefdfe28
commit
e69eacd257
11 changed files with 288 additions and 2268 deletions
2244
client/package-lock.json
generated
2244
client/package-lock.json
generated
File diff suppressed because it is too large
Load diff
174
client/src/AccountCard.svelte
Normal file
174
client/src/AccountCard.svelte
Normal 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>
|
||||
|
|
@ -5,22 +5,22 @@ import Login from "./Login.svelte";
|
|||
import MainPage from "./MainPage.svelte";
|
||||
import TopBorder from "./TopBorder.svelte";
|
||||
|
||||
let loggedin = false;
|
||||
let loggedin = true;
|
||||
function toggleLoggedIn() {
|
||||
loggedin = !loggedin;
|
||||
}
|
||||
</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>
|
||||
<div class="flex-grow">
|
||||
<div class="flex-grow max-h-full overflow-hidden">
|
||||
{#if loggedin}
|
||||
<MainPage on:logOut={toggleLoggedIn}></MainPage>
|
||||
{:else}
|
||||
<Login on:loginSuccess={toggleLoggedIn}></Login>
|
||||
{/if}
|
||||
</div>
|
||||
<BottomBorder class="flex-shrink"></BottomBorder>
|
||||
<BottomBorder class="flex-none"></BottomBorder>
|
||||
</main>
|
||||
|
||||
<svelte:head>
|
||||
|
|
|
|||
10
client/src/BaseButton.svelte
Normal file
10
client/src/BaseButton.svelte
Normal 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>
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
main{
|
||||
width:100%;
|
||||
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%);
|
||||
}
|
||||
|
|
|
|||
23
client/src/DetailField.svelte
Normal file
23
client/src/DetailField.svelte
Normal 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
Normal file
22
client/src/GreenButton.svelte
Normal 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>
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
<script>
|
||||
import Button from "./Button.svelte";
|
||||
import OrangeButton from "./OrangeButton.svelte";
|
||||
|
||||
import CardBG from "./CardBG.svelte";
|
||||
import InputField from "./InputField.svelte";
|
||||
import {createEventDispatcher} from 'svelte';
|
||||
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let username = "";
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
</div>
|
||||
|
||||
<div class="m-3 flex-shrink">
|
||||
<Button on:click={checkLogin}>Login</Button>
|
||||
<OrangeButton on:click={checkLogin}>Login</OrangeButton>
|
||||
</div>
|
||||
|
||||
<div class="flex-grow">
|
||||
|
|
@ -38,8 +39,8 @@
|
|||
</div>
|
||||
|
||||
<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://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/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://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>
|
||||
|
||||
</CardBG>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
import CardBG from "./CardBG.svelte";
|
||||
import {createEventDispatcher} from 'svelte';
|
||||
import AccountCard from './AccountCard.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
|
|
@ -10,7 +11,7 @@
|
|||
let code = "";
|
||||
let totalbalance = "2455,22";
|
||||
let accountnr = "2";
|
||||
let maincurrency = "RON"
|
||||
let maincurrency = "RON";
|
||||
|
||||
function dispatchLogout(){
|
||||
//todo: CHeck here
|
||||
|
|
@ -22,20 +23,37 @@
|
|||
dispatch("showNotifications",null);
|
||||
}
|
||||
|
||||
let accounts = [{}, {}];
|
||||
let expandedAccount = null;
|
||||
|
||||
function expanded(index) {
|
||||
if (!expandedAccount && expandedAccount !== 0) {
|
||||
expandedAccount = index;
|
||||
}
|
||||
else {
|
||||
expandedAccount = 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 class="flex flex-col items-stretch max-h-full">
|
||||
{#if expandedAccount || expandedAccount === 0}
|
||||
<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 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">
|
||||
<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 class="m-3 flex-shrink">
|
||||
|
|
@ -48,18 +66,16 @@
|
|||
<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="m-16"></div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<a href='https://google.com' target="_blank" class='text-3xl text-gray-400 m-6 flex-auto text-center'>Help!</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>
|
||||
|
||||
</CardBG>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,18 @@
|
|||
<script>
|
||||
import BaseButton from "./BaseButton.svelte";
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<button on:click class="rounded-2xl p-6 w-full text-center text-3xl text-gray-50">
|
||||
<div class="orange">
|
||||
<BaseButton on:click>
|
||||
<slot></slot>
|
||||
</button>
|
||||
</main>
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
button{
|
||||
.orange {
|
||||
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);
|
||||
border-radius: 20px;
|
||||
|
|
@ -18,6 +18,16 @@ module.exports = {
|
|||
"welcome":['Rochester', 'cursive'],
|
||||
"sans":['Roboto', 'sans-serif']
|
||||
},
|
||||
|
||||
colors: {
|
||||
'regal-blue': '#243c5a',
|
||||
'lime-c': '#6DE25ACC',
|
||||
'red-c': '#FB6666',
|
||||
},
|
||||
|
||||
minWidth: {
|
||||
'transaction': '420px',
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue