ditatompel/xmr-remote-nodes
1
0
Fork 0
mirror of https://github.com/ditatompel/xmr-remote-nodes.git synced 2025-01-08 05:52:10 +07:00
Code Issues Projects Releases Packages Wiki Activity

Place modal and toast at the root of layout.svelte

Browse source
This commit is contained in:
Cristian Ditaputratama 2024-05-08 02:16:16 +07:00
parent a522d729fb
commit c8c0cf7ebb
Signed by: ditatompel
GPG key ID: 31D3D06D77950979
5 changed files with 17 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/app.css
View file

@ -7,7 +7,15 @@ html,
body { body {
@apply h-full; @apply h-full;
} }
p {
@apply mb-2;
}
.link {
@apply text-primary-800 dark:text-primary-500 hover:brightness-110;
}
a.external {
@apply link after:content-['_↗']
}
.dashboard-card { .dashboard-card {
@apply bg-surface-50-900-token rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700; @apply bg-surface-50-900-token rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700;
} }

2
frontend/src/lib/components/navigation/MainNav.svelte
View file

@ -61,6 +61,6 @@
@apply block rounded bg-primary-500 p-2 text-black; @apply block rounded bg-primary-500 p-2 text-black;
} }
.nav-link { .nav-link {
@apply block rounded hover:bg-secondary-500 md:p-2 hover:text-black; @apply block rounded hover:bg-secondary-500 md:p-2 hover:text-white;
} }
</style> </style>

17
frontend/src/routes/(front)/+layout.svelte
View file

@ -1,23 +1,10 @@
<script> <script>
// import { writable } from 'svelte/store';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
import '../../app.css'; import '../../app.css';
import { import { Drawer } from '@skeletonlabs/skeleton';
Toast,
Modal,
Drawer,
initializeStores,
storePopup // PopUps
} from '@skeletonlabs/skeleton';
import { MainNav, MobileDrawer } from '$lib/components/navigation'; import { MainNav, MobileDrawer } from '$lib/components/navigation';
import Footer from '$lib/components/Footer.svelte'; import Footer from '$lib/components/Footer.svelte';
initializeStores();
// popups
storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
/* prettier-ignore */ /* prettier-ignore */
const metaDefaults = { const metaDefaults = {
title: 'Monero is private, decentralized cryptocurrency that keeps your finances confidential and secure.', title: 'Monero is private, decentralized cryptocurrency that keeps your finances confidential and secure.',
@ -76,8 +63,6 @@
<meta name="twitter:description" content={meta.twitter.description} /> <meta name="twitter:description" content={meta.twitter.description} />
</svelte:head> </svelte:head>
<Modal />
<Toast />
<Drawer> <Drawer>
<h2 class="p-4">Navigation</h2> <h2 class="p-4">Navigation</h2>
<hr /> <hr />

5
frontend/src/routes/(loggedin)/+layout.svelte
View file

@ -1,11 +1,8 @@
<script> <script>
import { Toast, Drawer, Modal } from '@skeletonlabs/skeleton'; import { Drawer } from '@skeletonlabs/skeleton';
import { AdminNav, AdminSidebar, AdminMobileDrawer } from '$lib/components/navigation'; import { AdminNav, AdminSidebar, AdminMobileDrawer } from '$lib/components/navigation';
</script> </script>
<Toast />
<Modal />
<Drawer> <Drawer>
<h2 class="p-4">Navigation</h2> <h2 class="p-4">Navigation</h2>
<hr /> <hr />

16
frontend/src/routes/+layout.svelte
View file

@ -1,29 +1,23 @@
<script> <script>
// import { base } from '$app/paths';
import '../app.css'; import '../app.css';
import { Toast, Modal } from '@skeletonlabs/skeleton';
import { beforeNavigate, afterNavigate } from '$app/navigation'; import { beforeNavigate, afterNavigate } from '$app/navigation';
import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom'; import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
import { import { ProgressBar, initializeStores, storePopup } from '@skeletonlabs/skeleton';
ProgressBar,
initializeStores,
storePopup // PopUps
} from '@skeletonlabs/skeleton';
initializeStores(); initializeStores();
// popups
storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow }); storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
let isLoading = false; let isLoading = false;
// progress bar show
beforeNavigate(() => (isLoading = true)); beforeNavigate(() => (isLoading = true));
afterNavigate(() => { afterNavigate(() => {
isLoading = false; isLoading = false;
}); });
</script> </script>
<Modal />
<Toast />
{#if isLoading} {#if isLoading}
<ProgressBar <ProgressBar
class="fixed top-0 z-50" class="fixed top-0 z-50"