Skip to content

Commit ce04cb3

Browse files
srpiattsrpiatt
committed
Add page layout and navigation.
1 parent 3195fca commit ce04cb3

23 files changed

Lines changed: 318 additions & 112 deletions

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v21.6.1

‎README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,29 @@ npm run build
3636
You can preview the production build with `npm run preview`.
3737

3838
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
39+
40+
## Testing
41+
42+
If this is the first time testing is run, download new browsers:
43+
44+
```bash
45+
npx playwright install
46+
```
47+
48+
Run unit-tests:
49+
50+
```bash
51+
npm run test
52+
```
53+
54+
## Linting
55+
56+
Test if there are linting errors that need to be fixed:
57+
```bash
58+
npm run lint
59+
```
60+
61+
Format code using Prettier:
62+
```bash
63+
npm run format
64+
```

‎package-lock.json‎

Lines changed: 30 additions & 19 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 50 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,52 @@
11
{
2-
"name": "pic-sure-frontend",
3-
"version": "0.0.1",
4-
"private": true,
5-
"scripts": {
6-
"dev": "vite dev",
7-
"build": "vite build",
8-
"preview": "vite preview",
9-
"test": "npm run test:integration && npm run test:unit",
10-
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
11-
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
12-
"lint": "prettier --check . && eslint .",
13-
"format": "prettier --write .",
14-
"test:integration": "playwright test --reporter=html",
15-
"test:unit": "vitest"
16-
},
17-
"devDependencies": {
18-
"@playwright/test": "^1.28.1",
19-
"@skeletonlabs/skeleton": "2.6.0",
20-
"@skeletonlabs/tw-plugin": "0.3.0",
21-
"@sveltejs/adapter-auto": "^3.0.0",
22-
"@sveltejs/adapter-node": "^2.0.0",
23-
"@sveltejs/kit": "^2.0.0",
24-
"@sveltejs/vite-plugin-svelte": "^3.0.0",
25-
"@tailwindcss/forms": "0.5.7",
26-
"@tailwindcss/typography": "0.5.10",
27-
"@types/node": "20.10.5",
28-
"@typescript-eslint/eslint-plugin": "^6.0.0",
29-
"@typescript-eslint/parser": "^6.0.0",
30-
"autoprefixer": "10.4.16",
31-
"eslint": "^8.28.0",
32-
"eslint-config-prettier": "^9.1.0",
33-
"eslint-plugin-svelte": "^2.30.0",
34-
"postcss": "8.4.32",
35-
"prettier": "^3.1.1",
36-
"prettier-plugin-svelte": "^3.1.2",
37-
"svelte": "^4.2.7",
38-
"svelte-check": "^3.6.0",
39-
"tailwindcss": "3.3.6",
40-
"tslib": "^2.4.1",
41-
"typescript": "^5.0.0",
42-
"vite": "^5.0.3",
43-
"vite-plugin-tailwind-purgecss": "0.2.0",
44-
"vitest": "^1.0.0"
45-
},
46-
"type": "module",
47-
"dependencies": {
48-
"@floating-ui/dom": "1.5.3",
49-
"dotenv": "^16.3.1"
50-
}
2+
"name": "pic-sure-frontend",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite dev",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"test": "npm run test:integration && npm run test:unit",
10+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
11+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
12+
"lint": "prettier --check . && eslint .",
13+
"format": "prettier --write .",
14+
"test:integration": "playwright test --reporter=html",
15+
"test:unit": "vitest"
16+
},
17+
"devDependencies": {
18+
"@playwright/test": "^1.28.1",
19+
"@skeletonlabs/skeleton": "2.6.0",
20+
"@skeletonlabs/tw-plugin": "0.3.0",
21+
"@sveltejs/adapter-auto": "^3.0.0",
22+
"@sveltejs/adapter-node": "^2.0.0",
23+
"@sveltejs/kit": "^2.0.0",
24+
"@sveltejs/vite-plugin-svelte": "^3.0.0",
25+
"@tailwindcss/forms": "0.5.7",
26+
"@tailwindcss/typography": "0.5.10",
27+
"@types/node": "20.10.5",
28+
"@typescript-eslint/eslint-plugin": "^6.0.0",
29+
"@typescript-eslint/parser": "^6.0.0",
30+
"autoprefixer": "10.4.16",
31+
"eslint": "^8.28.0",
32+
"eslint-config-prettier": "^9.1.0",
33+
"eslint-plugin-svelte": "^2.30.0",
34+
"postcss": "8.4.32",
35+
"prettier": "^3.1.1",
36+
"prettier-plugin-svelte": "^3.1.2",
37+
"svelte": "^4.2.7",
38+
"svelte-check": "^3.6.0",
39+
"tailwindcss": "3.3.6",
40+
"tslib": "^2.4.1",
41+
"typescript": "^5.0.0",
42+
"vite": "^5.0.3",
43+
"vite-plugin-tailwind-purgecss": "0.2.0",
44+
"vitest": "^1.0.0"
45+
},
46+
"type": "module",
47+
"dependencies": {
48+
"@floating-ui/dom": "1.5.3",
49+
"@fortawesome/fontawesome-free": "^6.5.1",
50+
"dotenv": "^16.3.1"
51+
}
5152
}

‎postcss.config.cjs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module.exports = {
22
plugins: {
33
tailwindcss: {},
4-
autoprefixer: {},
5-
},
6-
}
4+
autoprefixer: {}
5+
}
6+
};

‎src/app.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en" class="dark">
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
66
<meta name="viewport" content="width=device-width" />
77
%sveltekit.head%
88
</head>
9-
<body data-sveltekit-preload-data="hover" data-theme="vintage">
9+
<body data-sveltekit-preload-data="hover" data-theme="vintage" class="h-full overflow-hidden">
1010
<div style="display: contents">%sveltekit.body%</div>
1111
</body>
1212
</html>

‎src/app.postcss‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,54 @@
33
@tailwind utilities;
44
@tailwind variants;
55

6+
html,
7+
body {
8+
@apply h-full overflow-hidden;
9+
}
10+
611
/* vintage theme */
712
@font-face {
813
font-family: 'Abril Fatface';
914
src: url('/fonts/AbrilFatface.ttf');
1015
font-display: swap;
11-
}
16+
}
17+
18+
section.main-content {
19+
width: 60%; /* The width is 60%, by default */
20+
margin: 20px auto 0;
21+
}
22+
23+
/* Use a media query to add a breakpoint at 800px: */
24+
@media screen and (max-width: 800px) {
25+
section.main-content {
26+
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
27+
}
28+
}
29+
30+
nav#page-navigation {
31+
display: flex;
32+
flex-flow: row wrap;
33+
align-items: stretch;
34+
justify-content: flex-end;
35+
margin-left: 10px;
36+
}
37+
nav#page-navigation a {
38+
font-size: 1.2em;
39+
display: flex;
40+
justify-content: center;
41+
align-items: center;
42+
text-align: center;
43+
padding: 5px 5px;
44+
height: 80px;
45+
width: 150px;
46+
}
47+
nav#page-navigation a[aria-current='page'] {
48+
/* @apply bg-primary-500; */
49+
background-color: rgba(var(--color-primary-900));
50+
color: rgba(var(--color-primary-50));
51+
}
52+
nav#page-navigation a:hover {
53+
/* @apply bg-secondary-500; */
54+
background-color: rgba(var(--color-secondary-500));
55+
color: rgba(var(--color-surface-900));
56+
}

‎src/lib/assets/logo.png‎

1.57 KB
Loading

‎src/lib/content.svelte‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script lang="ts">
2+
export let title = 'Unknown page title';
3+
</script>
4+
5+
<section class="main-content">
6+
<h1 class="h1 mb-4">
7+
{title}
8+
</h1>
9+
<slot />
10+
</section>

‎src/lib/navigation.svelte‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script lang="ts">
2+
import { page } from '$app/stores';
3+
import { AppBar } from '@skeletonlabs/skeleton';
4+
import logo from '$lib/assets/logo.png';
5+
6+
const routes = [
7+
{ path: '/', id: 'home', text: 'Home' },
8+
{ path: '/explorer', text: 'Query Builder' },
9+
{ path: '/users', text: 'Users' },
10+
{ path: '/api', text: 'API' },
11+
{ path: '/dataset', text: 'Dataset Management' },
12+
{ path: '/help', text: 'Help' },
13+
{ path: '/admin', text: 'Admin' },
14+
{ path: '/admin/super', text: 'Super Admin' },
15+
{ path: '/#', id: 'logout', text: 'Logout' }
16+
];
17+
18+
function getId({ path, id }: { path: string; id?: string; text: string }) {
19+
return `nav-link` + (id ? `-` + id : path.replaceAll('/', '-'));
20+
}
21+
</script>
22+
23+
<AppBar padding="p-0">
24+
<svelte:fragment slot="lead">
25+
<img alt="PIC-Sure logo" src={logo} class="mx-1" />
26+
</svelte:fragment>
27+
<svelte:fragment slot="trail">
28+
<nav id="page-navigation">
29+
{#each routes as route}
30+
<a
31+
id={getId(route)}
32+
href={route.path}
33+
aria-current={$page.url.pathname === route.path ? 'page' : undefined}>{route.text}</a
34+
>
35+
{/each}
36+
</nav>
37+
</svelte:fragment>
38+
</AppBar>

0 commit comments

Comments
 (0)