byte/expensetracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed popup placement, size and scaling

Browse Source
This commit is contained in:
Daniel
2023-10-25 19:24:17 +03:00
parent 8f9476a130
commit 5353df8958
7 changed files with 104 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Content.svelte
View File

@@ -1,13 +0,0 @@
<script>
import { getContext } from 'svelte';
import Popup from './Popup.svelte';
const { open } = getContext('simple-modal');
const showSurprise = () => open(Popup, { message: "It's aff modal!" });
</script>
<div id="logout" role="button"
tabindex="0"
on:click={showSurprise}
on:keydown={() => console.log("keydown")}>
Log out
</div>

35
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
View File

@@ -1,13 +1,14 @@
<script>
import Modal from 'svelte-simple-modal';
import Content from "./contents/ContentExpense.svelte";
import { onMount, afterUpdate } from 'svelte';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import Modal from 'svelte-simple-modal';
import Content from "./Content.svelte";
let data = [];
let parentHeight;
let listParentHeight;
onMount(async () => {
const token = getCookie('access_token');
@@ -29,16 +30,16 @@
afterUpdate(() => {
parentHeight = document.querySelector('#expenseInfo').offsetHeight;
listParentHeight = document.querySelector('#expenseList').offsetHeight;
});
</script>
<div id="expenseInfo" style="max-height: {parentHeight}px;">
<div id="options">
<h2>Incomes</h2>
<div id="modal">
<Modal><Content /></Modal>
</div>
<div id="expenseList">
<div id="expenseList" style="max-height: {listParentHeight}px;">
<ul>
{#each data as item}
<li>
@@ -51,29 +52,25 @@
</div>
</div>
<style>
<style>
#expenseInfo {
flex: 1;
border-radius: 10px;
margin: 10px;
overflow-y: auto;
max-height: 100%;
display: flex;
flex-direction: column;
}
#options {
#modal {
position: sticky;
top: 0;
background-color: #f2f2f2;
padding: 0 0 10px;
margin: 0;
border-radius: 10px 10px 0 0;
z-index: 1;
}
#expenseList {
margin-top: 10px;
scrollbar-width: none;
flex: 1;
border-radius: 10px;
margin: 10px;
overflow-y: auto;
max-height: 100%;
}
#expenseList::-webkit-scrollbar {

35
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
View File

@@ -1,5 +1,5 @@
<script>
import Content from './Content.svelte';
import Content from './contents/ContentIncome.svelte';
import Modal from 'svelte-simple-modal';
import { onMount, afterUpdate } from 'svelte';
@@ -8,6 +8,7 @@
let data = [];
let parentHeight;
let listParentHeight;
onMount(async () => {
const token = getCookie('access_token');
@@ -29,17 +30,16 @@
afterUpdate(() => {
parentHeight = document.querySelector('#incomeInfo').offsetHeight;
listParentHeight = document.querySelector('#expenseList').offsetHeight;
});
</script>
<div id="incomeInfo" style="max-height: {parentHeight}px;">
<div id="incomeOptions">
<h2>Incomes</h2>
<div id="modal">
<Modal><Content /></Modal>
</div>
<div id="incomeList">
<div id="incomeList" style="max-height: {listParentHeight}px;">
<ul>
{#each data as item}
<li>
@@ -53,18 +53,18 @@
</div>
<style>
#incomeOptions {
top: 0;
background-color: #f2f2f2;
padding: 10px;
border-radius: 10px 10px 0 0;
z-index: 1;
padding: 0 0 10px;
margin: 0;
#modal {
position: sticky;
}
#incomeInfo {
display: flex;
flex-direction: column;
}
#incomeList {
margin-top: 10px;
scrollbar-width: none;
flex: 1;
border-radius: 10px;
margin: 10px;
@@ -72,10 +72,6 @@
max-height: 100%;
}
#incomeList {
margin-top: 10px;
}
ul {
list-style: none;
padding: 0;
@@ -94,4 +90,7 @@
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
#incomeList::-webkit-scrollbar {
display: none;
}
</style>

33
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte Normal file
View File

@@ -0,0 +1,33 @@
<script>
import { getContext } from 'svelte';
import Popup from '../popups/IncomePopup.svelte';
const { open } = getContext('simple-modal');
const showSurprise = () => open(Popup, { message: "It's EXOENSE!" });
</script>
<div id="exp">
<h2>Expenses</h2>
<div id="openModal" role="button"
tabindex="0"
on:click={showSurprise}
on:keydown={() => console.log("keydown")}>
Log out
</div>
</div>
<style>
#exp {
position: sticky;
}
#openModal {
top: 0;
position: sticky;
background-color: #f2f2f2;
padding: 10px;
border-radius: 10px 10px 0 0;
z-index: 1;
padding: 0 0 10px;
margin: 0;
}
</style>

33
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte Normal file
View File

@@ -0,0 +1,33 @@
<script>
import { getContext } from 'svelte';
import Popup from '../popups/IncomePopup.svelte';
const { open } = getContext('simple-modal');
const showSurprise = () => open(Popup, { message: "It's aINCOME!" });
</script>
<div id="inc">
<h2>Incomes</h2>
<div id="openModal" role="button"
tabindex="0"
on:click={showSurprise}
on:keydown={() => console.log("keydown")}>
Log out
</div>
</div>
<style>
#inc {
position: sticky;
}
#openModal {
top: 0;
position: sticky;
background-color: #f2f2f2;
padding: 10px;
border-radius: 10px 10px 0 0;
z-index: 1;
padding: 0 0 10px;
margin: 0;
}
</style>

0
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Popup.svelte → src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/popups/ExpensePopup.svelte
View File

5
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/popups/IncomePopup.svelte Normal file
View File

@@ -0,0 +1,5 @@
<script>
export let message = 'Hi';
</script>
<p>🎉 {message} 🍾</p>