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

discover page styling (#511)

Browse source
This commit is contained in:
ABevier 2023-04-26 21:46:46 -04:00 committed by GitHub
parent 6278c023fe
commit b19410f080
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 131 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
modules/desktop/src/components/discover-packages/discover-packages.svelte
View file

@ -21,15 +21,15 @@
.sort((a, b) => {
return a.manual_sorting - b.manual_sorting;
});
console.log("test",packages)
console.log("test", packages);
</script>
<div class="relative h-full w-full">
<ul class="grid grid-cols-2 bg-black" on:scroll={onScroll}>
<ul class="flex flex-col items-stretch" on:scroll={onScroll}>
{#if packages.length > 0}
{#each packages as pkg}
<div class="z-1 p-1" class:col-span-2={["left", "right"].includes(pkg.card_layout)}>
<Package tab={packageFilter} {pkg} layout="{pkg.card_layout}"/>
{#each packages as pkg, idx}
<div class="z-1 p-1">
<Package tab={packageFilter} {pkg} layout={idx % 2 === 0 ? "left" : "right"} />
</div>
{/each}
{:else}

37
modules/desktop/src/components/package-card/bg-image.svelte
View file

@ -3,7 +3,7 @@
import { onMount } from "svelte";
import { packagesStore } from "$libs/stores";
let clazz = '';
let clazz = "";
export { clazz as class };
export let layout: "bottom" | "right" | "left" | "none" = "bottom";
@ -11,7 +11,7 @@
export let pkg: GUIPackage;
const defaultImgUrl = "/images/default-thumb.jpg";
let loadedImg = "";
$: loadedImg = "";
let loaded = false;
const loadImage = async (url: string): Promise<string> => {
@ -32,14 +32,13 @@
};
const recachePkg = async () => {
const url = await packagesStore.cachePkgImage(pkg)
const url = await packagesStore.cachePkgImage(pkg);
loadImage(url);
}
};
onMount(() => {
if (pkg.cached_image_url) {
loadImage(pkg.cached_image_url)
.catch(() => {
loadImage(pkg.cached_image_url).catch(() => {
if (pkg.thumb_image_url) {
loadImage(pkg.thumb_image_url);
recachePkg();
@ -52,14 +51,23 @@
</script>
<section class="bg-black {clazz} {layout}">
<i class="logo icon-tea-logo-iconasset-1 text-gray text-3xl animate-pulse {layout}"/>
<div class="bg-center transition-all opacity-0 duration-500" class:opacity-100={loaded} style="background-image: url({loadedImg})">
<i class="logo icon-tea-logo-iconasset-1 text-gray animate-pulse text-3xl {layout}" />
<div
class="bg-center opacity-0 transition-all duration-500"
class:opacity-100={loaded}
style="background-image: url({loadedImg})"
>
<!-- dup image: save processing power instead of computing the blur across all the HTML layers -->
{#if layout !== "none"}
<aside class="blur-sm {layout} transition-all opacity-0 duration-500" class:opacity-100={loaded}>
<!-- TODO: TALK TO NEIL -->
<aside
class="blur-sm {layout} opacity-0 transition-all duration-500"
class:opacity-100={loaded}
>
<figure class="bg-center" style="background-image: url({loadedImg})" />
</aside>
{/if}
</div>
</section>
<style>
@ -117,7 +125,7 @@
aside.left {
left: 0px;
height: 100%;
width: 40%;
width: 60%;
}
aside.right {
@ -134,17 +142,22 @@
background-size: cover;
background-repeat: no-repeat;
}
aside.bottom figure {
left: 0px;
}
aside.right figure {
height: 100%;
width: 150%;
/* the overlay is 60% of the image, so we need to oversize the background image back to 100% */
width: 166.6666666%;
right: 0px;
}
aside.left figure {
height: 100%;
width: 250%;
/* the overlay is 60% of the image, so we need to oversize the background image back to 100% */
width: 166.66666666%;
left: 0px;
}
</style>

46
modules/desktop/src/components/package-card/package-card.svelte
View file

@ -42,19 +42,23 @@
</div>
<div class="content-container absolute bottom-0 w-full {layout}">
<article class="card-thumb-label relative">
{#if layout === "bottom"}
<h3 class="text-bold font-mona line-clamp-1 text-2xl font-bold text-white">
{fixPackageName(pkg.name)}
</h3>
<p class="line-clamp-2 h-[32px] text-xs font-thin lowercase">{pkg.desc ?? ""}</p>
</article>
<div class="relative mt-3.5 flex w-full">
<div class="install-button" on:mousedown={preventPropagation}>
{#if pkg.state === PackageStates.INSTALLED}
<div>
<PackageInstalledBadge version={pkg.version} />
</div>
{:else}
<div on:mousedown={preventPropagation}>
<h3 class="text-bold font-mona line-clamp-1 mb-4 text-3xl font-bold text-white">
{fixPackageName(pkg.name)}
</h3>
<p class="line-clamp-10 h-[160px] text-xs font-thin lowercase">{pkg.desc ?? ""}</p>
{/if}
</article>
<div class="relative mt-3.5 w-full">
<div class="install-button {layout}" on:mousedown={preventPropagation}>
{#if pkg.state === PackageStates.INSTALLED}
<PackageInstalledBadge version={pkg.version} />
{:else}
<PackageInstallButton
{pkg}
onClick={(evt) => {
@ -63,7 +67,6 @@
onClickCTA();
}}
/>
</div>
{/if}
</div>
</div>
@ -96,9 +99,6 @@
background-size: cover;
box-sizing: border-box;
}
section.right {
height: 220px;
}
section.active::before {
position: absolute;
@ -125,19 +125,23 @@
padding: 28px 14px;
justify-content: center;
}
.content-container.bottom {
left: 0px;
}
.content-container.left {
height: 100%;
width: 40%;
width: 60%;
left: 0px;
padding: 28px 28px;
}
.content-container.right {
height: 100%;
width: 60%;
right: 0px;
padding: 28px 28px;
}
.hint-container {
@ -172,8 +176,12 @@
color: #e1e1e1;
}
.package-card {
background-size: cover;
.package-card.right {
min-width: 550px;
}
.package-card.left {
min-width: 550px;
}
.package-card:hover .hint {
@ -190,17 +198,21 @@
}
.install-button {
width: 160px;
}
.install-button.bottom {
min-width: 100%;
}
@media screen and (min-width: 650px) {
.install-button {
.install-button.bottom {
min-width: 60%;
}
}
@media screen and (min-width: 1000px) {
.install-button {
.install-button.bottom {
min-width: 50%;
}
}