Browse Source

Expandable account cards

pull/4/head
DariusTFox 3 years ago
parent
commit
e69eacd257
  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

File diff suppressed because it is too large Load Diff

174
client/src/AccountCard.svelte

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

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

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

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

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

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

@ -1,9 +1,10 @@
<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();
@ -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>

42
client/src/MainPage.svelte

@ -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">
@ -47,19 +65,17 @@
<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="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>

13
client/src/Button.svelte → client/src/OrangeButton.svelte

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

10
client/tailwind.config.js

@ -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…
Cancel
Save