nwpie/reiverr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Test application

Browse Source
This commit is contained in:
Aleksi Lassila
2023-12-28 12:00:13 +02:00
parent ac994277a5
commit 3ede2f59cf
6 changed files with 30 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -27,7 +27,7 @@
/>
</head>
<body class="bg-stone-950 min-h-screen text-white touch-manipulation relative -z-10">
<div id="app"></div>
<div id="app" class="min-h-screen relative flex"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

24
src/App.svelte
View File

@@ -3,6 +3,7 @@
import { Link, navigate, Route, Router } from 'svelte-navigator';
import { fade } from 'svelte/transition';
import { handleKeyboardNavigation, navigationContainers } from './lib/actions/focusAction';
import HomePage from './lib/pages/HomePage.svelte';
let focusableElements: HTMLElement[] = [];
@@ -19,36 +20,27 @@
}
const navBarContainer = navigationContainers.navBar.getRegisterer();
const mainContainer = navigationContainers.main.getRegisterer();
const homeContainer = navigationContainers.home.getRegisterer();
</script>
<I18n />
<main class="bg-stone-950 text-white flex">
<main class="bg-stone-950 text-white flex flex-1 w-screen">
<Router>
<nav class="border">
<Link to="/">
<div use:navBarContainer tabindex="0">Home</div>
</Link>
<Link to="about">
<div use:navBarContainer tabindex="0">About</div>
<Link to="library">
<div use:navBarContainer tabindex="0">Library</div>
</Link>
</nav>
<div class="flex-1">
<div class="flex-1 flex flex-col min-w-0" use:mainContainer>
<Route path="/">
<div class="flex flex-row">
<div use:homeContainer tabindex="0" transition:fade|global class="focus:ring">
Home path
</div>
<div use:homeContainer tabindex="0" transition:fade|global class="focus:ring">
Another item
</div>
<div use:homeContainer tabindex="0" transition:fade|global class="focus:ring">
Button perhaps?
</div>
</div>
<HomePage />
</Route>
<Route path="about">
<Route path="library">
<div transition:fade|global>about path</div>
</Route>
</div>

4
src/lib/actions/focusAction.ts
View File

@@ -174,11 +174,13 @@ export function handleKeyboardNavigation(event: KeyboardEvent) {
}
const navBar = new Container().setDirection('vertical');
const main = new Container().setDirection('vertical');
const home = new Container();
home.setLeftNeighbor(navBar);
home.setLeftNeighbor(main);
export const navigationContainers = {
home,
main,
navBar
};

1
src/lib/components/Card/CardPlaceholder.svelte
View File

@@ -19,4 +19,5 @@
})}
style={'animation-delay: ' + ((index * 100) % 2000) + 'ms;'}
transition:fade|global
tabindex="0"
/>

3
src/lib/components/Selectable.svelte Normal file
View File

@@ -0,0 +1,3 @@
<div>
<slot />
</div>

14
src/lib/pages/HomePage.svelte Normal file
View File

@@ -0,0 +1,14 @@
<script lang="ts">
import { navigationContainers } from '../actions/focusAction';
import { fade } from 'svelte/transition';
import Carousel from '../components/Carousel/Carousel.svelte';
import CarouselPlaceholderItems from '../components/Carousel/CarouselPlaceholderItems.svelte';
const homeContainer = navigationContainers.home.getRegisterer();
</script>
<div class="flex flex-col">
<Carousel>
<CarouselPlaceholderItems />
</Carousel>
</div>