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

#154 new package page layout

Browse source
This commit is contained in:
neil 2023-01-18 11:23:37 +08:00
parent d4fb5c37ef
commit 056bade873
3 changed files with 22 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
modules/gui/src/components/PackageBanner/PackageBanner.svelte
View file

@ -4,7 +4,7 @@
import type { Package, Bottle } from '@tea/ui/types'; import type { Package, Bottle } from '@tea/ui/types';
import Button from '@tea/ui/Button/Button.svelte'; import Button from '@tea/ui/Button/Button.svelte';
import StarRating from '@tea/ui/StarRating/StarRating.svelte'; import StarRating from '@tea/ui/StarRating/StarRating.svelte';
import Bottles from '@tea/ui/Bottles/Bottles.svelte'; // import Bottles from '@tea/ui/Bottles/Bottles.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { getPackageBottles } from '@api'; import { getPackageBottles } from '@api';
@ -33,20 +33,18 @@
<figure class="grow-1 w-1/3"> <figure class="grow-1 w-1/3">
<img width={260} src={pkg.thumb_image_url} alt={pkg.full_name} /> <img width={260} src={pkg.thumb_image_url} alt={pkg.full_name} />
</figure> </figure>
<article class="w-2/3 p-4"> <article class="w-2/3 p-4 pt-8">
<h3 class="text-5xl text-primary">{pkg.full_name}</h3> <h3 class="text-3xl text-primary">{pkg.full_name}</h3>
{#if pkg.maintainer} <h3>&#x2022; {pkg.maintainer || ''}{pkg.maintainer ? ' |' : ''} {bottles.length} bottles</h3>
<h3>* {pkg.maintainer}</h3>
{/if}
<div class="mt-4"> <div class="mt-4">
<StarRating maxRating={5} rating={packageRating} /> <StarRating maxRating={5} rating={packageRating} />
</div> </div>
<p class="mt-4 font-sono text-sm">{pkg.desc}</p> <p class="mt-4 font-sono text-sm">{pkg.desc}</p>
</article> </article>
</header> </header>
<section> <!-- <section>
<Bottles {bottles} /> <Bottles {bottles} />
</section> </section> -->
<footer class="flex h-20 border-t border-gray text-white"> <footer class="flex h-20 border-t border-gray text-white">
<input class="click-copy flex-grow bg-black pl-4" disabled value={copyValue} /> <input class="click-copy flex-grow bg-black pl-4" disabled value={copyValue} />
<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button> <Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>

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

@ -1,8 +1,10 @@
<script lang="ts"> <script lang="ts">
export let coverUrl = ''; export let coverUrl = '';
let clazz = '';
export { clazz as class };
</script> </script>
<figure class="relative mb-8 h-32 w-full font-machina uppercase"> <figure class={`relative mb-8 h-32 w-full font-machina uppercase ${clazz}`}>
{#if coverUrl} {#if coverUrl}
<img src={coverUrl} class="absolute z-0 h-32 w-full object-cover" alt="cover" /> <img src={coverUrl} class="absolute z-0 h-32 w-full object-cover" alt="cover" />
{/if} {/if}

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

@ -36,14 +36,24 @@
</script> </script>
<div> <div>
<PageHeader>{pkg.full_name}</PageHeader> <PageHeader coverUrl={pkg.thumb_image_url}>{pkg.full_name}</PageHeader>
<section> <section>
<PackageBanner {pkg} /> <PackageBanner {pkg} />
</section> </section>
<section class="mt-8">
<PackageReviews reviews={reviews || []} /> <section class="mt-8 flex gap-8">
<div class="h-64 w-2/3 bg-gray">details and versions</div>
<div class="h-64 w-1/3 bg-gray">metas</div>
</section> </section>
<PageHeader class="mt-8" coverUrl="/images/headers/header_bg_1.png">SNIPPETS</PageHeader>
<section class="mt-8 h-64 bg-gray">snippets</section>
<!-- <section class="mt-8">
<PackageReviews reviews={reviews || []} />
</section> -->
{#if pkg} {#if pkg}
<PageHeader class="mt-8" coverUrl="/images/headers/header_bg_1.png"
>YOU MAY ALSO LIKE...</PageHeader
>
<section class="mt-8"> <section class="mt-8">
<SuggestedPackages {pkg} /> <SuggestedPackages {pkg} />
</section> </section>