maximize usage of svelte directives: cleanup css and attr values (#427)

* maximize usage of svelte directives: cleanup css

* bump v0.0.28

---------

Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>
This commit is contained in:
Neil 2023-04-10 15:19:48 +08:00 committed by GitHub
parent a5ad1310e0
commit 8774467336
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 21 additions and 16 deletions

View file

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

View file

@ -24,7 +24,7 @@
</script>
<Button
class={`w-full border p-0 text-xs text-white ${buttonSize === "small" ? "h-8" : "h-10"}`}
class="w-full border p-0 text-xs text-white {buttonSize === "small" ? "h-8" : "h-10"}"
type="plain"
color={getColor(pkg.state)}
{onClick}

View file

@ -26,7 +26,7 @@
<PackageCard
{pkg}
availableVersions={findAvailableVersions(pkg)}
link={`/packages/${pkg.slug}?tab=${tab}`}
link="/packages/{pkg.slug}?tab={tab}"
progessLoading={pkg.install_progress_percentage}
{onClickCTA}
/>

View file

@ -4,7 +4,7 @@
export { clazz as class };
</script>
<figure class={`relative mb-8 h-32 w-full uppercase ${clazz}`}>
<figure class="relative mb-8 h-32 w-full uppercase {clazz}">
{#if coverUrl}
<img src={coverUrl} class="absolute z-0 h-32 w-full object-cover" alt="cover" />
{/if}

View file

@ -35,7 +35,8 @@
{#each sortOptions as option}
<li class="flex items-center">
<button
class={`sort-btn ${sortBy === option ? 'active' : ''}`}
class="sort-btn"
class:active={sortBy === option}
on:click={() => setSortBy(option)}
>
{optionLabels[option]}

View file

@ -56,7 +56,7 @@
class="w-full rounded-sm h-9"
size="small"
autofocus={true}
placeholder={`${$t("store-search-placeholder")}`}
placeholder="{$t("store-search-placeholder")}"
onSearch={(search) => {
term = search;
searchStore.search(search);

View file

@ -8,8 +8,11 @@
export let count = 0;
</script>
<button on:click class={`text-xs w-full flex transition-all rounded-sm hover:bg-opacity-25 border-gray hover:border px-1 gap-2 items-center align-middle text-left hover:bg-gray box-border ${active && 'active'}`}>
<i class={`icon-${icon} mt-1`}/>
<button on:click
class="text-xs w-full flex transition-all rounded-sm hover:bg-opacity-25 border-gray hover:border px-1 gap-2 items-center align-middle text-left hover:bg-gray box-border"
class:active
>
<i class="icon-{icon} mt-1"/>
<div class="font-thin text-sm">
{label}
{#if count > 0}

View file

@ -28,7 +28,7 @@
<SearchInput
class="w-full border border-gray rounded-sm h-9"
size="small"
placeholder={`${$t("store-search-placeholder")}`}
placeholder="{$t("store-search-placeholder")}"
onFocus={() => {
searchStore.searching.set(true);
}}

View file

@ -64,7 +64,8 @@
<div class="flex-grow mt-20 px-12 relative">
<h1 class="text-primary text-4xl mb-4">Welcome to the tea app!</h1>
<p class="font-inter mb-4">This app is your gateway into the world of open-source software. Easily explore and manage packages with a click of a button. This app will notify you of any available software updates to ensure youre safe and secure. Under the hood is the powerful tea cli.</p>
<Button type="plain" color="secondary" class={`w-7/12 ${installing && "animate-pulse"}`}
<Button type="plain" color="secondary" class="w-7/12"
loading={installing}
onClick={onOpenTerminal}
>
INSTALL TEA CLI v{tea?tea.version:"latest"}

View file

@ -56,7 +56,7 @@
<a class="hover:text-white hover:opacity-80" href="/">{$t("common.home")}</a>
>
{#if tab !== "all"}
<a class="hover:text-white hover:opacity-80" href={`/?tab=${tab || "all"}`}>{$t(`tags.${tab}`) || "all"}</a>
<a class="hover:text-white hover:opacity-80" href="/?tab={tab || "all"}">{$t(`tags.${tab}`) || "all"}</a>
>
{/if}
<span class="text-white">{pkg?.full_name}</span>

View file

@ -16,7 +16,7 @@
<div class="button-container">
<button
type="button"
class={`w-full p-2 text-gray ${clazz} ${type} ${color}`}
class="w-full p-2 text-gray {clazz} {type} {color}"
class:active
class:animate-pulse={loading}
on:click={() => onClick && onClick()}

View file

@ -23,7 +23,7 @@
</script>
<header class="flex items-center gap-4 px-4">
<button class={`${active ? "rotate-90" : "hover:rorate-90"}`} on:click={() => (active = !active)}>
<button class={active ? "rotate-90" : "hover:rorate-90"} on:click={() => (active = !active)}>
<i class="icon-enter-arrow" />
</button>
<figure class="h-8 w-8 overflow-clip rounded-full bg-gray">

View file

@ -28,7 +28,7 @@
<section class="border border-gray p-4">
<header class=" text-lg text-primary">{review.title}</header>
<div class="mt-2 flex text-xs">
<i class={`${getStarType()} text-primary`} />
<i class="{getStarType()} text-primary" />
<span class="pl-2 text-gray">{getStarLabel()}</span>
</div>
<p class="mt-2 text-sm">{review.comment}</p>

View file

@ -40,7 +40,7 @@
});
</script>
<section class={`flex items-center pb-1 ${size} ${clazz}`}>
<section class="flex items-center pb-1 {size} {clazz}">
<div class="icon pl-4">
<i class="icon-search-icon" />
</div>

View file

@ -26,7 +26,7 @@
});
</script>
<section class={`relative h-auto ${clazz || ""}`}>
<section class="relative h-auto {clazz}">
<menu class="flex gap-1">
{#each tabs as tab}
<div class="border border-x-0 border-t-0 border-gray text-white">