mirror of
https://github.com/dancojocaru2000/foxbank.git
synced 2025-02-22 23:39:36 +02:00
fancy scroll bars
This commit is contained in:
DariusTFox
parent
e69eacd257
commit
b229ef9c60
2 changed files with 68 additions and 30 deletions
|
|
@ -15,27 +15,7 @@
|
|||
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"},
|
||||
];
|
||||
export let transactions=[];
|
||||
|
||||
function copyIban(){
|
||||
//todo: Code here
|
||||
|
|
@ -63,16 +43,16 @@
|
|||
<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 class="p-1 flex-shrink">
|
||||
<h2 class='font-sans mt-3 mb-2 pl-2 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" : ""}">
|
||||
<div class="flex flex-col flex-grow pr-2 max-h-full relative scroller {isExpanded ? "overflow-auto overflow-x-hidden" : ""}">
|
||||
|
||||
{#if isExpanded }
|
||||
{#each transactions as transaction}
|
||||
<DetailField class="my-3 py-1 flex-shrink">
|
||||
<DetailField class="my-3 py-1 flex-shrink min-w-transaction">
|
||||
<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>
|
||||
|
|
@ -171,4 +151,33 @@
|
|||
{/if}
|
||||
</div>
|
||||
|
||||
</CardBG>
|
||||
</CardBG>
|
||||
|
||||
<style>
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 2px rgba(141, 140, 140, 0.281);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(238, 236, 236, 0.897);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(182, 182, 182, 0.918);
|
||||
}
|
||||
|
||||
.scroller {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(238, 236, 236, 0.897) rgba(141, 140, 140, 0.281);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -13,6 +13,36 @@ import AccountCard from './AccountCard.svelte';
|
|||
let accountnr = "2";
|
||||
let maincurrency = "RON";
|
||||
|
||||
let accounts = [
|
||||
{type:"RON Account", currency:"RON", balance:"420,42", iban:"RONFOX62188921", isExpanded: false,
|
||||
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"},
|
||||
]
|
||||
},
|
||||
{type:"EUR Account", currency:"EUR", balance:"620,42", iban:"EURFOX62188921", isExpanded: false,
|
||||
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"},
|
||||
]
|
||||
},
|
||||
];
|
||||
let expandedAccount = null;
|
||||
|
||||
function dispatchLogout(){
|
||||
//todo: CHeck here
|
||||
dispatch("logOut",null);
|
||||
|
|
@ -23,8 +53,7 @@ import AccountCard from './AccountCard.svelte';
|
|||
dispatch("showNotifications",null);
|
||||
}
|
||||
|
||||
let accounts = [{}, {}];
|
||||
let expandedAccount = null;
|
||||
|
||||
|
||||
function expanded(index) {
|
||||
if (!expandedAccount && expandedAccount !== 0) {
|
||||
|
|
@ -40,10 +69,10 @@ import AccountCard from './AccountCard.svelte';
|
|||
<main class="h-full flex flex-col items-stretch md:flex-row">
|
||||
<div class="flex flex-col items-stretch max-h-full">
|
||||
{#if expandedAccount || expandedAccount === 0}
|
||||
<AccountCard balance="{expandedAccount}" isExpanded={true} on:expanded={() => expanded(null)}></AccountCard>
|
||||
<AccountCard type={accounts[expandedAccount].type} currency={accounts[expandedAccount].currency} balance={accounts[expandedAccount].balance} iban={accounts[expandedAccount].iban} transactions={accounts[expandedAccount].transactions} isExpanded={true} on:expanded={() => expanded(null)}></AccountCard>
|
||||
{:else}
|
||||
{#each accounts as account,i}
|
||||
<AccountCard balance="{i}" isExpanded={false} on:expanded={() => expanded(i)}></AccountCard>
|
||||
<AccountCard type={account.type} currency={account.currency} balance={account.balance} iban={account.iban} transactions={account.transactions} isExpanded={false} on:expanded={() => expanded(i)}></AccountCard>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue