mirror of
https://github.com/ivabus/gui
synced 2025-04-23 14:07:14 +03:00
discover page styling (#511)
This commit is contained in:
ABevier
GitHub
parent
6278c023fe
commit
b19410f080
3 changed files with 131 additions and 106 deletions
|
|
@ -17,20 +17,20 @@
|
|||
};
|
||||
|
||||
$: packages = $allPackages
|
||||
.filter((p) => p.categories.includes(SideMenuOptions.discover))
|
||||
.sort((a, b) => {
|
||||
return a.manual_sorting - b.manual_sorting;
|
||||
});
|
||||
console.log("test",packages)
|
||||
.filter((p) => p.categories.includes(SideMenuOptions.discover))
|
||||
.sort((a, b) => {
|
||||
return a.manual_sorting - b.manual_sorting;
|
||||
});
|
||||
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}"/>
|
||||
</div>
|
||||
{#each packages as pkg, idx}
|
||||
<div class="z-1 p-1">
|
||||
<Package tab={packageFilter} {pkg} layout={idx % 2 === 0 ? "left" : "right"} />
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
{#each Array(9) as _}
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
ul {
|
||||
margin-top: 0px;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 8px;
|
||||
padding-bottom: 8px;
|
||||
height: calc(100vh - 49px);
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
|
|
|
|||
|
|
@ -1,69 +1,77 @@
|
|||
<script lang="ts">
|
||||
import type { GUIPackage } from "$libs/types";
|
||||
import { onMount } from "svelte";
|
||||
import type { GUIPackage } from "$libs/types";
|
||||
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";
|
||||
export let layout: "bottom" | "right" | "left" | "none" = "bottom";
|
||||
|
||||
export let pkg: GUIPackage;
|
||||
export let pkg: GUIPackage;
|
||||
|
||||
const defaultImgUrl = "/images/default-thumb.jpg";
|
||||
let loadedImg = "";
|
||||
let loaded = false;
|
||||
$: loadedImg = "";
|
||||
let loaded = false;
|
||||
|
||||
const loadImage = async (url:string): Promise<string> => {
|
||||
const image = new Image();
|
||||
image.src = url;
|
||||
return new Promise((resolve, reject) => {
|
||||
image.onload = () => {
|
||||
loadedImg = url;
|
||||
setTimeout(() => {
|
||||
loaded = true;
|
||||
}, 300);
|
||||
resolve(url);
|
||||
};
|
||||
image.onerror = () => {
|
||||
reject(new Error(`file/url does not exist ${url}`));
|
||||
};
|
||||
});
|
||||
};
|
||||
const loadImage = async (url: string): Promise<string> => {
|
||||
const image = new Image();
|
||||
image.src = url;
|
||||
return new Promise((resolve, reject) => {
|
||||
image.onload = () => {
|
||||
loadedImg = url;
|
||||
setTimeout(() => {
|
||||
loaded = true;
|
||||
}, 300);
|
||||
resolve(url);
|
||||
};
|
||||
image.onerror = () => {
|
||||
reject(new Error(`file/url does not exist ${url}`));
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const recachePkg = async () => {
|
||||
const url = await packagesStore.cachePkgImage(pkg)
|
||||
loadImage(url);
|
||||
}
|
||||
const recachePkg = async () => {
|
||||
const url = await packagesStore.cachePkgImage(pkg);
|
||||
loadImage(url);
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
if (pkg.cached_image_url) {
|
||||
loadImage(pkg.cached_image_url)
|
||||
.catch(() => {
|
||||
if (pkg.thumb_image_url) {
|
||||
loadImage(pkg.thumb_image_url);
|
||||
recachePkg();
|
||||
}
|
||||
});
|
||||
} else if (pkg.thumb_image_url) {
|
||||
recachePkg();
|
||||
}
|
||||
if (pkg.cached_image_url) {
|
||||
loadImage(pkg.cached_image_url).catch(() => {
|
||||
if (pkg.thumb_image_url) {
|
||||
loadImage(pkg.thumb_image_url);
|
||||
recachePkg();
|
||||
}
|
||||
});
|
||||
} else if (pkg.thumb_image_url) {
|
||||
recachePkg();
|
||||
}
|
||||
});
|
||||
</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})">
|
||||
<!-- 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}>
|
||||
<figure class="bg-center" style="background-image: url({loadedImg})" />
|
||||
</aside>
|
||||
{/if}
|
||||
<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"}
|
||||
<!-- 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>
|
||||
section {
|
||||
section {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -93,17 +101,17 @@
|
|||
margin-top: -15px;
|
||||
}
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
div {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
box-sizing: border-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
aside {
|
||||
}
|
||||
aside {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
|
|
@ -117,7 +125,7 @@
|
|||
aside.left {
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
width: 40%;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
aside.right {
|
||||
|
|
@ -126,7 +134,7 @@
|
|||
width: 60%;
|
||||
}
|
||||
|
||||
figure {
|
||||
figure {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
|
|
@ -134,17 +142,22 @@
|
|||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
aside.bottom figure {
|
||||
left: 0px;
|
||||
}
|
||||
aside.right figure {
|
||||
height: 100%;
|
||||
width: 150%;
|
||||
right: 0px;
|
||||
}
|
||||
aside.left figure {
|
||||
height: 100%;
|
||||
width: 250%;
|
||||
|
||||
aside.bottom figure {
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
aside.right figure {
|
||||
height: 100%;
|
||||
/* 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%;
|
||||
/* the overlay is 60% of the image, so we need to oversize the background image back to 100% */
|
||||
width: 166.66666666%;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
<BgImage class="absolute top-0 left-0 h-full w-full" {layout} {pkg} />
|
||||
|
||||
<a href={link} on:mousedown={activate} on:mouseup={deactivate} on:mouseleave={deactivate}>
|
||||
<div class="package-card-content absolute h-full w-full flex-col justify-between">
|
||||
<div class="package-card-content absolute h-full w-full flex-col justify-between">
|
||||
<div class="hint-container">
|
||||
<div class="hint">
|
||||
<div class="line-clamp-1 text-xs">view more details</div>
|
||||
|
|
@ -42,28 +42,31 @@
|
|||
</div>
|
||||
<div class="content-container absolute bottom-0 w-full {layout}">
|
||||
<article class="card-thumb-label relative">
|
||||
<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>
|
||||
{#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>
|
||||
{:else}
|
||||
<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 flex w-full">
|
||||
<div class="install-button" on:mousedown={preventPropagation}>
|
||||
<div class="relative mt-3.5 w-full">
|
||||
<div class="install-button {layout}" on:mousedown={preventPropagation}>
|
||||
{#if pkg.state === PackageStates.INSTALLED}
|
||||
<div>
|
||||
<PackageInstalledBadge version={pkg.version} />
|
||||
</div>
|
||||
<PackageInstalledBadge version={pkg.version} />
|
||||
{:else}
|
||||
<div on:mousedown={preventPropagation}>
|
||||
<PackageInstallButton
|
||||
{pkg}
|
||||
onClick={(evt) => {
|
||||
// prevent default to prevent the link that this button is inside of from being followed
|
||||
evt?.preventDefault();
|
||||
onClickCTA();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<PackageInstallButton
|
||||
{pkg}
|
||||
onClick={(evt) => {
|
||||
// prevent default to prevent the link that this button is inside of from being followed
|
||||
evt?.preventDefault();
|
||||
onClickCTA();
|
||||
}}
|
||||
/>
|
||||
{/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%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue