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

#145 relayout home page

Browse source
This commit is contained in:
neil 2023-01-16 09:52:13 +08:00
parent ea9c6fccce
commit 4fba7f87b8
6 changed files with 30 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
modules/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte
View file

@ -6,12 +6,15 @@
import Preloader from '@tea/ui/Preloader/Preloader.svelte'; import Preloader from '@tea/ui/Preloader/Preloader.svelte';
import { postsStore } from '$libs/stores'; import { postsStore } from '$libs/stores';
export let title = 'Workshops';
export let ctaLabel = 'View all';
let courses: AirtablePost[] = []; let courses: AirtablePost[] = [];
postsStore.subscribeByTag('course', (posts) => (courses = posts)); postsStore.subscribeByTag('course', (posts) => (courses = posts));
</script> </script>
<PanelHeader title="Essential Workshops" ctaLabel="View all" ctaLink="/" /> <PanelHeader {title} {ctaLabel} ctaLink="/" />
{#if courses.length} {#if courses.length}
<Posts posts={courses} linkTarget="_blank" /> <Posts posts={courses} linkTarget="_blank" />
{:else} {:else}

2
modules/gui/src/components/FooterLinks/FooterLinks.svelte
View file

@ -12,7 +12,7 @@
here. here.
</p> </p>
<div class="w-3/4"> <div class="w-3/4">
<img src="/static/images/footer-grid-element.svg" alt="grid" /> <img src="/images/footer-grid-element.svg" alt="grid" />
</div> </div>
</div> </div>

6
modules/gui/src/components/TopPackages/TopPackages.svelte → modules/gui/src/components/Packages/Packages.svelte
View file

@ -5,9 +5,13 @@
import Preloader from '@tea/ui/Preloader/Preloader.svelte'; import Preloader from '@tea/ui/Preloader/Preloader.svelte';
import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte'; import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
// TODO: replace with getting foundation essentials
import { getTopPackages } from '$libs/api/mock'; import { getTopPackages } from '$libs/api/mock';
import { installPackage } from '@api'; import { installPackage } from '@api';
export let title = 'Packages';
let packages: GUIPackage[] = []; let packages: GUIPackage[] = [];
const getCTALabel = (state: PackageStates): string => { const getCTALabel = (state: PackageStates): string => {
@ -27,7 +31,7 @@
</script> </script>
<header class="flex items-center justify-between border border-gray bg-black p-4 text-primary"> <header class="flex items-center justify-between border border-gray bg-black p-4 text-primary">
<span>TOP PACKAGES</span> <span>{title}</span>
<a href="/packages" class="font-sono text-sm underline">View all packages</a> <a href="/packages" class="font-sono text-sm underline">View all packages</a>
</header> </header>
<ul class="grid grid-cols-3 bg-black"> <ul class="grid grid-cols-3 bg-black">

13
modules/gui/src/components/PageHeader/PageHeader.svelte
View file

@ -1,3 +1,12 @@
<figure class="mb-8 font-machina text-6xl uppercase text-primary"> <script lang="ts">
<slot /> export let coverUrl: string = '';
</script>
<figure class="relative mb-8 h-32 w-full font-machina uppercase">
{#if coverUrl}
<img src={coverUrl} class="absolute z-0 h-32 w-full object-cover" alt="cover" />
{/if}
<div class="absolute bottom-0 z-10 text-6xl leading-[32px] text-primary">
<slot />
</div>
</figure> </figure>

23
modules/gui/src/routes/+page.svelte
View file

@ -2,27 +2,22 @@
<script lang="ts"> <script lang="ts">
import '$appcss'; import '$appcss';
import PageHeader from '$components/PageHeader/PageHeader.svelte'; import PageHeader from '$components/PageHeader/PageHeader.svelte';
import FeaturedPackages from '$components/FeaturedPackages/FeaturedPackages.svelte'; import EssentialWorkshops from '$components/EssentialWorkshops/EssentialWorkshops.svelte';
import GettingStarted from '$components/GettingStarted/GettingStarted.svelte'; import Packages from '$components/Packages/Packages.svelte';
import TopPackages from '$components/TopPackages/TopPackages.svelte';
import News from '$components/News/News.svelte'; import News from '$components/News/News.svelte';
import CategorizedPackages from '$components/CategorizedPackages/CategorizedPackages.svelte'; import CategorizedPackages from '$components/CategorizedPackages/CategorizedPackages.svelte';
</script> </script>
<div> <div>
<PageHeader>Discover</PageHeader> <PageHeader coverUrl="/images/headers/header_bg_1.png">Discover</PageHeader>
<section> <section class="mt-8 mb-8">
<FeaturedPackages /> <Packages title="FOUNDATIN ESSENTIALS" />
</section> </section>
<section class="mt-8"> <PageHeader coverUrl="/images/headers/header_bg_1.png">TUTORIALS</PageHeader>
<GettingStarted /> <section class="mt-8 mb-8">
</section> <EssentialWorkshops title="WORKSHOPS TO GET STARTED" ctaLabel="Read more articles >" />
<section class="mt-8">
<TopPackages />
</section>
<section class="mt-8">
<CategorizedPackages />
</section> </section>
<PageHeader coverUrl="/images/headers/header_bg_1.png">OPEN-SOURCE NEWS</PageHeader>
<section class="mt-8"> <section class="mt-8">
<News /> <News />
</section> </section>

BIN
modules/gui/static/images/headers/header_bg_1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 316 KiB