mirror of
https://github.com/dancojocaru2000/foxbank.git
synced 2025-02-22 23:39:36 +02:00
Fixed alignment issues; added a lot more flexboxes
This commit is contained in:
parent
024a3c84a7
commit
81a37c864b
GPG key ID:
C1980A470C3EE5B1
6 changed files with 87 additions and 93 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,68 @@
|
|||
<script>
|
||||
import Icon from '@iconify/svelte';
|
||||
|
||||
import CardBG from "./CardBG.svelte";
|
||||
import {createEventDispatcher} from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
import CardBG from "./CardBG.svelte";
|
||||
import {createEventDispatcher} from 'svelte';
|
||||
|
||||
let username = "Firstname Lastname";
|
||||
let code = "";
|
||||
let totalbalance = "2455,22";
|
||||
let accountnr = "2";
|
||||
let maincurrency = "RON"
|
||||
|
||||
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"
|
||||
|
||||
<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-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>
|
||||
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>
|
||||
|
||||
</main>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
</main>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,16 @@
|
|||
<script>
|
||||
|
||||
let clazz;
|
||||
export {clazz as class};
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div >
|
||||
<h1 class="font-title text-7xl text-gray-50 mx-8">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%);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue