ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-06-07 15:50:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #28 from teaxyz/placeholder-layouts

Browse source 
#27 initialize placeholder
This commit is contained in:
Neil 2022-11-25 14:41:55 +08:00 committed by GitHub
commit 24875c0631
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 252 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/gui/src/app.css
View file

@ -4,12 +4,12 @@
@font-face { @font-face {
font-family: "pp-neue-machina"; font-family: "pp-neue-machina";
src: url("../static/fonts/PPNeueMachina-InktrapLight.woff"); src: url("/fonts/PPNeueMachina-InktrapLight.woff");
} }
@font-face { @font-face {
font-family: "sono"; font-family: "sono";
src: url("../static/fonts/Sono-Light.woff2"); src: url("/fonts/Sono-Light.woff2");
} }
html { html {

1
packages/gui/src/components/NavBar/NavBar.svelte
View file

@ -35,5 +35,6 @@
<style> <style>
#NavBar { #NavBar {
height: 100vh; height: 100vh;
width: 100%;
} }
</style> </style>

3
packages/gui/src/components/PageHeader/PageHeader.svelte Normal file
View file

@ -0,0 +1,3 @@
<header class="text-primary text-6xl font-machina uppercase">
<slot></slot>
</header>

24
packages/gui/src/components/Placeholder/Placeholder.svelte Normal file
View file

@ -0,0 +1,24 @@
<script type="ts">
export let label:string = "";
</script>
<section>
<header>{label}</header>
<slot></slot>
</section>
<style>
section {
position: relative;
min-height: 240px;
height: 100%;
width: 100%;
min-width: 100%;
background-color: #CCC;
display: flex;
}
header {
color: rgb(50, 48, 48);
font-size: 3em;
}
</style>

3
packages/gui/src/libs/stores.ts Normal file
View file

@ -0,0 +1,3 @@
import { writable } from "svelte/store";
export const backLink = writable<string>('/');

61
packages/gui/src/routes/+layout.svelte Normal file
View file

@ -0,0 +1,61 @@
<!-- home / discover / welcome page -->
<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>
<nav class="">
<NavBar/>
</nav>
<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: fixed;
left: 240px;
right: 0px;
height: 100vh;
overflow-y: scroll;
}
figure {
position: absolute;
top: 180px;
left: 0px;
right: 0px;
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>

52
packages/gui/src/routes/+page.svelte
View file

@ -1,47 +1,23 @@
<!-- home / discover / welcome page --> <!-- home / discover / welcome page -->
<script lang="ts"> <script lang="ts">
import "$appcss"; import "$appcss";
// import { get } from '../libs/api'; import { backLink } from '$libs/stores';
// import type { S3Package } from '../libs/types'; import Placeholder from "$components/Placeholder/Placeholder.svelte";
import Button from '@tea/ui/Button/Button.svelte'; import PageHeader from "$components/PageHeader/PageHeader.svelte";
import NavBar from '$components/NavBar/NavBar.svelte'; backLink.set('');
// let packages: S3Package[] = []
// async function loadPackages(){
// try {
// const data = await get<S3Package[]>('/packages');
// console.log(data);
// if (packages.length) {
// packages = data;
// }
// } catch (error) {
// console.error(error);
// }
// }
</script> </script>
<section class="flex">
<nav> <div>
<NavBar/> <PageHeader>Discover</PageHeader>
</nav> <header>
<div> <Placeholder label="featured packages"/>
<h1>Home / Discover</h1> </header>
<!-- <a href="/others">Go to install package</a> <section class="mt-8">
<Button primary={true} on:click={loadPackages} label="Load Packages"></Button> <Placeholder label="Getting started with tea"/>
<ul> </section>
{#each packages as p} </div>
<li>{p.full_name}</li>
{/each}
</ul>
<a href="/packages/specific">Go to specific package</a> -->
<Button primary={true} label="does nothing" />
</div>
</section>
<style> <style>
ul {
color: green;
}
</style> </style>

29
packages/gui/src/routes/cli/+page.svelte
View file

@ -1,17 +1,20 @@
<script> <script>
import "$appcss"; import "$appcss";
import PageHeader from "$components/PageHeader/PageHeader.svelte";
import NavBar from '$components/NavBar/NavBar.svelte'; import Placeholder from "$components/Placeholder/Placeholder.svelte";
import { page } from '$app/stores'; import { backLink } from '$libs/stores';
/** @type {import('./$types').PageData} */ backLink.set('/');
export let data;
</script> </script>
<section class="flex">
<nav> <div>
<NavBar/> <PageHeader>INSTALL TEA</PageHeader>
</nav>
<div> <header>
<h1>How to install cli</h1> <Placeholder label="big tea icon version with copy curl"/>
</div> </header>
</section>
<section class="mt-8">
<Placeholder label="big black blank space"/>
</section>
</div>

29
packages/gui/src/routes/documentation/+page.svelte
View file

@ -1,17 +1,20 @@
<script> <script>
import "$appcss"; import "$appcss";
import PageHeader from "$components/PageHeader/PageHeader.svelte";
import NavBar from '$components/NavBar/NavBar.svelte'; import Placeholder from "$components/Placeholder/Placeholder.svelte";
import { page } from '$app/stores'; import { backLink } from '$libs/stores';
/** @type {import('./$types').PageData} */ backLink.set('/');
export let data;
</script> </script>
<section class="flex">
<nav> <div>
<NavBar/> <PageHeader>Documentation</PageHeader>
</nav>
<div> <header>
<h1>Documentation</h1> <Placeholder label="featured courses"/>
</div> </header>
</section>
<section class="mt-8">
<Placeholder label="Essential workshops"/>
</section>
</div>

53
packages/gui/src/routes/packages/+page.svelte
View file

@ -1,24 +1,35 @@
<!-- package list --> <script>
<script lang="ts">
import "$appcss"; import "$appcss";
import PageHeader from "$components/PageHeader/PageHeader.svelte";
import NavBar from '$components/NavBar/NavBar.svelte'; import Placeholder from "$components/Placeholder/Placeholder.svelte";
import { backLink } from '$libs/stores';
backLink.set('/');
</script> </script>
<section class="flex">
<nav> <div>
<NavBar/> <PageHeader>Packages</PageHeader>
</nav> <section>
<div> <Placeholder label="filter packages"/>
<h1>Packages Listing</h1> </section>
<ul> <ul class="grid grid-cols-3 gap-8 mt-8">
<li> <li>
<a href="/packages/pkg-a">Sample Pkg A</a> <a href="/packages/pkg-a"><Placeholder label="Pkg A"></Placeholder></a>
</li> </li>
<li> <li>
<a href="/packages/pkg-b">Sample Pkg B</a> <a href="/packages/pkg-b"><Placeholder label="Pkg B"></Placeholder></a>
</li> </li>
</ul> <li>
</div> <a href="/packages/pkg-c"><Placeholder label="Pkg C"></Placeholder></a>
</section> </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>

24
packages/gui/src/routes/packages/[slug]/+page.svelte
View file

@ -1,17 +1,21 @@
<script> <script>
import "$appcss"; import "$appcss";
import PageHeader from "$components/PageHeader/PageHeader.svelte";
import NavBar from '$components/NavBar/NavBar.svelte'; import Placeholder from "$components/Placeholder/Placeholder.svelte";
import { page } from '$app/stores'; import { page } from '$app/stores';
import { backLink } from '$libs/stores';
backLink.set('/packages');
/** @type {import('./$types').PageData} */ /** @type {import('./$types').PageData} */
export let data; export let data;
</script> </script>
<section class="flex"> <div>
<nav> <PageHeader>{data.title}</PageHeader>
<NavBar/> <section>
</nav> <Placeholder label="package cover w/ copy link" />
<div> </section>
<h1>{data.title}: {$page.params.slug}</h1> <section class="mt-8">
</div> <Placeholder label="reviews" />
</section> </section>
</div>

2
packages/gui/src/routes/packages/[slug]/+page.ts
View file

@ -4,7 +4,7 @@ import type { LoadEvent } from '@sveltejs/kit';
export function load({ params }: LoadEvent) { export function load({ params }: LoadEvent) {
// TODO: search package details here // TODO: search package details here
return { return {
title: `Hello Package: ${params.slug}!`, title: `${params.slug}!`,
content: 'Welcome to our blog. Lorem ipsum dolor sit amet...' content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
}; };
} }

40
packages/gui/src/routes/profile/+page.svelte
View file

@ -1,16 +1,30 @@
<!-- user profile page --> <script>
<script lang="ts">
import "$appcss"; import "$appcss";
import PageHeader from "$components/PageHeader/PageHeader.svelte";
import NavBar from '$components/NavBar/NavBar.svelte'; import Placeholder from "$components/Placeholder/Placeholder.svelte";
import { backLink } from '$libs/stores';
backLink.set('/');
</script> </script>
<section class="flex">
<nav> <div>
<NavBar/> <PageHeader>PROFILE</PageHeader>
</nav>
<div> <header>
<h1>User Profile</h1> <Placeholder label="github username and wallet address"/>
</div> </header>
</section>
<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>

28
packages/gui/static/images/footer-grid-element.svg Normal file
View file

@ -0,0 +1,28 @@
<svg xmlns="http://www.w3.org/2000/svg" width="961.504" height="157.742" viewBox="0 0 961.504 157.742">
<g id="Group_1224" data-name="Group 1224" transform="translate(-159.75 -8720.324)">
<path id="Rectangle_616" data-name="Rectangle 616" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(160 8720.574)" fill="#949494"/>
<path id="Rectangle_617" data-name="Rectangle 617" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(240.084 8720.574)" fill="#949494"/>
<path id="Rectangle_618" data-name="Rectangle 618" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(320.168 8720.574)" fill="#949494"/>
<path id="Rectangle_619" data-name="Rectangle 619" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(400.251 8720.574)" fill="#949494"/>
<path id="Rectangle_620" data-name="Rectangle 620" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(480.334 8720.574)" fill="#949494"/>
<path id="Rectangle_621" data-name="Rectangle 621" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(560.418 8720.574)" fill="#949494"/>
<path id="Rectangle_622" data-name="Rectangle 622" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(640.502 8720.574)" fill="#949494"/>
<path id="Rectangle_2829" data-name="Rectangle 2829" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(880.754 8720.574)" fill="#949494"/>
<path id="Rectangle_623" data-name="Rectangle 623" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(720.586 8720.574)" fill="#949494"/>
<path id="Rectangle_2827" data-name="Rectangle 2827" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(960.838 8720.574)" fill="#949494"/>
<path id="Rectangle_624" data-name="Rectangle 624" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(800.669 8720.574)" fill="#949494"/>
<path id="Rectangle_2825" data-name="Rectangle 2825" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(1040.92 8720.574)" fill="#949494"/>
<path id="Rectangle_616-2" data-name="Rectangle 616" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(160 8799.358)" fill="#949494"/>
<path id="Rectangle_617-2" data-name="Rectangle 617" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(240.084 8799.358)" fill="#949494"/>
<path id="Rectangle_618-2" data-name="Rectangle 618" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(320.168 8799.358)" fill="#949494"/>
<path id="Rectangle_619-2" data-name="Rectangle 619" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(400.251 8799.358)" fill="#949494"/>
<path id="Rectangle_620-2" data-name="Rectangle 620" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(480.334 8799.358)" fill="#949494"/>
<path id="Rectangle_621-2" data-name="Rectangle 621" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(560.418 8799.358)" fill="#949494"/>
<path id="Rectangle_622-2" data-name="Rectangle 622" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(640.502 8799.358)" fill="#949494"/>
<path id="Rectangle_2830" data-name="Rectangle 2830" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(880.754 8799.358)" fill="#949494"/>
<path id="Rectangle_623-2" data-name="Rectangle 623" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(720.586 8799.358)" fill="#949494"/>
<path id="Rectangle_2828" data-name="Rectangle 2828" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(960.838 8799.358)" fill="#949494"/>
<path id="Rectangle_624-2" data-name="Rectangle 624" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(800.669 8799.358)" fill="#949494"/>
<path id="Rectangle_2826" data-name="Rectangle 2826" d="M-.25-.25H80.334V78.708H-.25Zm80.084.5H.25V78.208H79.834Z" transform="translate(1040.92 8799.358)" fill="#949494"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

3
packages/gui/tsconfig.json
View file

@ -11,7 +11,8 @@
"strict": true, "strict": true,
"paths": { "paths": {
"$appcss": ["src/app.css"], "$appcss": ["src/app.css"],
"$libs/*": ["src/lib/*"], "$libs/*": ["src/libs/*"],
"@api": ["src/lib/api.ts"],
"$components/*": ["src/components/*"], "$components/*": ["src/components/*"],
"@tea/ui": ["../ui/src/*"], "@tea/ui": ["../ui/src/*"],
} }

8
packages/tsconfig.cli.json Normal file
View file

@ -0,0 +1,8 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"paths": {
"@api": ["src/lib/api_cli.ts"],
}
},
}