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 Button from '@tea/ui/Button/Button.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 { getPackageBottles } from '@api';
@ -33,20 +33,18 @@
<figure class="grow-1 w-1/3">
<img width={260} src={pkg.thumb_image_url} alt={pkg.full_name} />
</figure>
<article class="w-2/3 p-4">
<h3 class="text-5xl text-primary">{pkg.full_name}</h3>
{#if pkg.maintainer}
<h3>* {pkg.maintainer}</h3>
{/if}
<article class="w-2/3 p-4 pt-8">
<h3 class="text-3xl text-primary">{pkg.full_name}</h3>
<h3>&#x2022; {pkg.maintainer || ''}{pkg.maintainer ? ' |' : ''} {bottles.length} bottles</h3>
<div class="mt-4">
<StarRating maxRating={5} rating={packageRating} />
</div>
<p class="mt-4 font-sono text-sm">{pkg.desc}</p>
</article>
</header>
<section>
<!-- <section>
<Bottles {bottles} />
</section>
</section> -->
<footer class="flex h-20 border-t border-gray text-white">
<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>

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

@ -1,8 +1,10 @@
<script lang="ts">
export let coverUrl = '';
let clazz = '';
export { clazz as class };
</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}
<img src={coverUrl} class="absolute z-0 h-32 w-full object-cover" alt="cover" />
{/if}

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

@ -36,14 +36,24 @@
</script>
<div>
<PageHeader>{pkg.full_name}</PageHeader>
<PageHeader coverUrl={pkg.thumb_image_url}>{pkg.full_name}</PageHeader>
<section>
<PackageBanner {pkg} />
</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>
<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}
<PageHeader class="mt-8" coverUrl="/images/headers/header_bg_1.png"
>YOU MAY ALSO LIKE...</PageHeader
>
<section class="mt-8">
<SuggestedPackages {pkg} />
</section>