mirror of
https://github.com/ivabus/gui
synced 2025-06-07 15:50:27 +03:00
#21 placeholder elements added for each page
This commit is contained in:
neil
parent
3c9944c504
commit
c8981b502e
14 changed files with 137 additions and 27 deletions
|
|
@ -35,5 +35,6 @@
|
|||
<style>
|
||||
#NavBar {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
<section>
|
||||
<header>{label}</header>
|
||||
<slot></slot>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
3
packages/gui/src/libs/stores.ts
Normal file
3
packages/gui/src/libs/stores.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import { writable } from "svelte/store";
|
||||
|
||||
export const backLink = writable<string>('/');
|
||||
|
|
@ -2,21 +2,45 @@
|
|||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import NavBar from '$components/NavBar/NavBar.svelte';
|
||||
|
||||
import { backLink as backLinkStore } from '$libs/stores';
|
||||
|
||||
let backLink: string = '';
|
||||
backLinkStore.subscribe((v) => {
|
||||
backLink = v;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex">
|
||||
<nav>
|
||||
<div>
|
||||
<nav class="">
|
||||
<NavBar/>
|
||||
</nav>
|
||||
<section class="grow p-16">
|
||||
<section class="px-16 pt-24">
|
||||
{#if backLink}
|
||||
<header>
|
||||
<a href={backLink}>back</a>
|
||||
</header>
|
||||
{/if}
|
||||
<figure></figure>
|
||||
<slot></slot>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
width: 100vh;
|
||||
height: 100vh;
|
||||
}
|
||||
nav {
|
||||
position: fixed;
|
||||
width: 240px;
|
||||
}
|
||||
section {
|
||||
position: relative;
|
||||
position: fixed;
|
||||
left: 240px;
|
||||
right: 0px;
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
figure {
|
||||
position: absolute;
|
||||
|
|
@ -26,4 +50,12 @@
|
|||
bottom: 0px;
|
||||
background-image: url('/images/footer-grid-element.svg');
|
||||
}
|
||||
header {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-bottom: #CCC 1px solid;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,11 @@
|
|||
<!-- home / discover / welcome page -->
|
||||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import { backLink } from '$libs/stores';
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import PageHeader from "$components/PageHeader/PageHeader.svelte";
|
||||
|
||||
backLink.set('');
|
||||
</script>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,20 @@
|
|||
<script>
|
||||
import "$appcss";
|
||||
import PageHeader from "$components/PageHeader/PageHeader.svelte";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import { backLink } from '$libs/stores';
|
||||
backLink.set('/');
|
||||
</script>
|
||||
|
||||
|
||||
<div>
|
||||
<h1>How to install cli</h1>
|
||||
<PageHeader>INSTALL TEA</PageHeader>
|
||||
|
||||
<header>
|
||||
<Placeholder label="big tea icon version with copy curl"/>
|
||||
</header>
|
||||
|
||||
<section class="mt-8">
|
||||
<Placeholder label="big black blank space"/>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -1,8 +1,20 @@
|
|||
<script>
|
||||
import "$appcss";
|
||||
import PageHeader from "$components/PageHeader/PageHeader.svelte";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import { backLink } from '$libs/stores';
|
||||
backLink.set('/');
|
||||
</script>
|
||||
|
||||
|
||||
<div>
|
||||
<h1>Documentation</h1>
|
||||
<PageHeader>Documentation</PageHeader>
|
||||
|
||||
<header>
|
||||
<Placeholder label="featured courses"/>
|
||||
</header>
|
||||
|
||||
<section class="mt-8">
|
||||
<Placeholder label="Essential workshops"/>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -1,16 +1,35 @@
|
|||
<!-- package list -->
|
||||
<script lang="ts">
|
||||
<script>
|
||||
import "$appcss";
|
||||
import PageHeader from "$components/PageHeader/PageHeader.svelte";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import { backLink } from '$libs/stores';
|
||||
backLink.set('/');
|
||||
</script>
|
||||
|
||||
|
||||
<div>
|
||||
<h1>Packages Listing</h1>
|
||||
<ul>
|
||||
<PageHeader>Packages</PageHeader>
|
||||
<section>
|
||||
<Placeholder label="filter packages"/>
|
||||
</section>
|
||||
<ul class="grid grid-cols-3 gap-8 mt-8">
|
||||
<li>
|
||||
<a href="/packages/pkg-a">Sample Pkg A</a>
|
||||
<a href="/packages/pkg-a"><Placeholder label="Pkg A"></Placeholder></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/packages/pkg-b">Sample Pkg B</a>
|
||||
<a href="/packages/pkg-b"><Placeholder label="Pkg B"></Placeholder></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/packages/pkg-c"><Placeholder label="Pkg C"></Placeholder></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/packages/pkg-a"><Placeholder label="Pkg D"></Placeholder></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/packages/pkg-b"><Placeholder label="Pkg E"></Placeholder></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/packages/pkg-c"><Placeholder label="Pkg F"></Placeholder></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -1,17 +1,21 @@
|
|||
<script>
|
||||
import "$appcss";
|
||||
|
||||
import NavBar from '$components/NavBar/NavBar.svelte';
|
||||
import PageHeader from "$components/PageHeader/PageHeader.svelte";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import { page } from '$app/stores';
|
||||
import { backLink } from '$libs/stores';
|
||||
backLink.set('/packages');
|
||||
|
||||
/** @type {import('./$types').PageData} */
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<section class="flex">
|
||||
<nav>
|
||||
<NavBar/>
|
||||
</nav>
|
||||
<div>
|
||||
<h1>{data.title}: {$page.params.slug}</h1>
|
||||
</div>
|
||||
</section>
|
||||
<div>
|
||||
<PageHeader>{data.title}</PageHeader>
|
||||
<section>
|
||||
<Placeholder label="package cover w/ copy link" />
|
||||
</section>
|
||||
<section class="mt-8">
|
||||
<Placeholder label="reviews" />
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -4,7 +4,7 @@ import type { LoadEvent } from '@sveltejs/kit';
|
|||
export function load({ params }: LoadEvent) {
|
||||
// TODO: search package details here
|
||||
return {
|
||||
title: `Hello Package: ${params.slug}!`,
|
||||
title: `${params.slug}!`,
|
||||
content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
|
||||
};
|
||||
}
|
||||
|
|
@ -1,8 +1,30 @@
|
|||
<!-- user profile page -->
|
||||
<script lang="ts">
|
||||
<script>
|
||||
import "$appcss";
|
||||
import PageHeader from "$components/PageHeader/PageHeader.svelte";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import { backLink } from '$libs/stores';
|
||||
backLink.set('/');
|
||||
</script>
|
||||
|
||||
|
||||
<div>
|
||||
<h1>User Profile</h1>
|
||||
<PageHeader>PROFILE</PageHeader>
|
||||
|
||||
<header>
|
||||
<Placeholder label="github username and wallet address"/>
|
||||
</header>
|
||||
|
||||
<section class="mt-8 grid grid-cols-2 gap-8">
|
||||
<div>
|
||||
<Placeholder label="pre-flight"/>
|
||||
</div>
|
||||
<div>
|
||||
<Placeholder label="badges"/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-8">
|
||||
<Placeholder label="my installs"/>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
"strict": true,
|
||||
"paths": {
|
||||
"$appcss": ["src/app.css"],
|
||||
"$libs/*": ["src/lib/*"],
|
||||
"$libs/*": ["src/libs/*"],
|
||||
"@api": ["src/lib/api.ts"],
|
||||
"$components/*": ["src/components/*"],
|
||||
"@tea/ui": ["../ui/src/*"],
|
||||
|
|
|
|||
Loading…
Reference in a new issue