ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-04-23 14:07:14 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui fixes (#443)

Browse source 
* scroll fix for install option

* add better link hover on external links

* hide bots from users

* partial blur

* bump v0.0.30

---------

Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>
This commit is contained in:
Neil 2023-04-12 15:08:34 +08:00 committed by GitHub
parent 0287a5fb9a
commit 7f423a41dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 65 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
modules/desktop/package.json
View file

@ -1,6 +1,6 @@
{
"name": "tea",
"version": "0.0.29",
"version": "0.0.30",
"private": true,
"description": "tea gui app",
"author": "tea.xyz",

22
modules/desktop/src/components/install-button/install-button.svelte
View file

@ -95,6 +95,7 @@
border-radius: 2px;
max-height: 160px;
overflow-y: auto;
overflow-x: hidden;
}
.version-item {
@ -137,4 +138,25 @@
.visible {
display: block;
}
/* width */
::-webkit-scrollbar {
width: 6px;
}
/* Track */
::-webkit-scrollbar-track {
background: #272626;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #949494;
border-radius: 4px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: white;
}
</style>

2
modules/desktop/src/components/package-banner/package-banner.svelte
View file

@ -48,7 +48,7 @@
<h3 class="text-primary text-3xl">{pkg.full_name}</h3>
{#if pkg.homepage}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<span on:click={() => shellOpenExternal(pkg.homepage)} >{pkg.homepage}</span>
<span class="cursor-pointer hover:text-primary" on:click={() => shellOpenExternal(pkg.homepage)} >{pkg.homepage}</span>
{/if}
<p class="mt-4 text-sm">{pkg.desc}</p>
<menu class="mt-4 grid h-10 grid-cols-3 gap-4 text-xs">

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

@ -27,41 +27,45 @@
class="package-card border-gray relative h-auto border"
style="background-image: url({imgUrl})"
>
<aside class="blur-sm">
<figure style="background-image: url({imgUrl})"></figure>
</aside>
<a href={link}>
<div class="package-card-content flex h-full w-full flex-col justify-between">
<div class="package-card-content absolute flex h-full w-full flex-col justify-between">
<div class="hint-container">
<div class="hint">
<div class="text-xs">view more details</div>
<div class="hint-icon"><i class="icon-upward-arrow" /></div>
</div>
</div>
<div class="content-container">
<article class="card-thumb-label">
<div class="content-container relative">
<article class="card-thumb-label relative">
<h3 class="text-bold font-mona line-clamp-1 text-2xl font-bold text-white">{pkg.name}</h3>
<p class="line-clamp-2 h-[32px] text-xs font-thin">{pkg.desc ?? ""}</p>
</article>
<div class="mt-3.5 flex w-full">
<div class="mt-3.5 flex w-full relative">
<div class="install-button">
<InstallButton {pkg} {availableVersions} onClick={onClickCTA}
uninstall={onUninstall}
/>
</div>
</div>
<div class="mt-1 h-[10px] leading-[10px]">
<div class="mt-1 h-[10px] leading-[10px] relative">
{#if pkg.state === "NEEDS_UPDATE"}
<span class="text-[0.5rem]">Updating from v{findRecentInstalledVersion(pkg)}</span>
{/if}
</div>
{#if progessLoading > 0 && progessLoading < 100}
<div class="absolute left-0 top-0 h-full w-full bg-black bg-opacity-50">
<div class="absolute left-0 right-0 top-1/2 m-auto -mt-12 h-24 w-24">
<ProgressCircle value={progessLoading} />
</div>
</div>
{/if}
</div>
</div>
</a>
{#if progessLoading > 0 && progessLoading < 100}
<div class="absolute z-40 left-0 top-0 h-full w-full bg-black bg-opacity-50">
<div class="absolute left-0 right-0 top-1/2 m-auto -mt-12 h-24 w-24">
<ProgressCircle value={progessLoading} />
</div>
</div>
{/if}
</section>
<style>
@ -69,6 +73,26 @@
transition: all 0.3s;
width: 100%;
height: 340px;
background-size: cover;
box-sizing: border-box;
}
aside {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 50%;
overflow: hidden;
}
figure {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 340px;
background-size: cover;
background-repeat: no-repeat;
}
.content-container {

10
modules/ui/src/package-metas/package-metas.svelte
View file

@ -52,7 +52,7 @@
<ul class="mb-10 flex flex-col gap-2">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<li on:click={() => shellOpenExternal(pkg.homepage)}>
<span>{pkg.homepage}</span>
<span class="cursor-pointer hover:text-primary">{pkg.homepage}</span>
</li>
</ul>
{#if pkg.documentation_url}
@ -60,7 +60,7 @@
<ul class="mb-10 flex flex-col gap-2">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<li on:click={() => shellOpenExternal(pkg.documentation_url)}>
<span>{pkg.documentation_url}</span>
<span class="cursor-pointer hover:text-primary">{pkg.documentation_url}</span>
</li>
</ul>
{/if}
@ -69,20 +69,20 @@
<ul class="mb-10 flex flex-col gap-2">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<li on:click={() => shellOpenExternal(`https://github.com/${pkg.github}`)}>
<span>{pkg.github}</span>
<span class="cursor-pointer hover:text-primary">{pkg.github}</span>
</li>
</ul>
{/if}
{#if pkg.contributors?.length}
<h1 class="text-primary">{$t("common.contributors")}</h1>
<ul class="mb-10 flex flex-col gap-2">
{#each pkg.contributors as contributor}
{#each (pkg.contributors || []).filter((c) => !c.login.includes("[bot]")) as contributor}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<li on:click={() => shellOpenExternal(`https://github.com/${contributor.login}`)}>
<!-- <figure class="h-5 w-5 bg-gray">
<img src={contributor.avatar_url} alt={contributor.login} />
</figure> -->
<span>{contributor.login}</span>
<span class="cursor-pointer hover:text-primary">{contributor.login}</span>
</li>
{/each}
</ul>