Ku6epXBOCTuK/easy-png-tools2
1
0
Fork 0
mirror of https://github.com/Ku6epXBOCTuK/easy-png-tools.git synced 2026-09-14 21:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: css fixes

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-09-08 18:29:56 +05:00
parent 3f21f1c024
commit 420d03f58c
16 changed files with 130 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/kit/CatalogGroup.svelte
+1
View File
@@ -46,6 +46,7 @@
}
.tool-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-m);
}
</style>
web/src/lib/components/kit/CatalogToolbar.svelte
+8 -4
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Filter, Search } from "@lucide/svelte";
import { Funnel, Search } from "@lucide/svelte";
interface Props {
query: string;
@@ -18,6 +18,8 @@
{ value: "analyze", label: "ANALYZE" },
{ value: "generate", label: "GENERATE" },
];
// TODO: Button component
</script>
<div class="catalog-toolbar">
@@ -30,13 +32,15 @@
/>
</label>
<div class="catalog-filters">
<Filter size={15} />
<Funnel size={15} />
{#each FILTERS as f (f.value)}
<button
type="button"
class:active={category === f.value}
onclick={() => (category = f.value)}>{f.label}</button
onclick={() => (category = f.value)}
>
{f.label}
</button>
{/each}
</div>
</div>
@@ -79,7 +83,7 @@
}
.catalog-filters button {
border: var(--size-border) solid var(--color-border);
background: transparent;
background: var(--color-panel);
color: var(--color-text-muted);
font: var(--font-size-s) var(--font-mono);
letter-spacing: var(--space-text-m);
web/src/lib/components/kit/Dropzone.svelte
+2 -2
View File
@@ -73,8 +73,8 @@
cursor: pointer;
text-align: center;
transition:
border-color var(--duration-m) ease,
background var(--duration-m) ease;
border-color var(--duration-s) ease,
background var(--duration-s) ease;
}
.dropzone:hover,
.dropzone:focus-visible,
web/src/lib/components/kit/PanelHeading.svelte
+1
View File
@@ -26,6 +26,7 @@
gap: var(--space-xl);
padding: var(--space-l) var(--space-xl);
border-bottom: var(--size-border) solid var(--color-border);
margin-bottom: var(--space-m);
}
.heading-text {
display: flex;
web/src/lib/components/kit/SchemaResultTile.svelte
+23 -4
View File
@@ -1,8 +1,8 @@
<script lang="ts">
import SchemaTextResult from "./SchemaTextResult.svelte";
import { toDataUrl } from "$lib/core/io";
import type { PixelImage } from "$lib/core/types";
import { Check } from "@lucide/svelte";
import { Check, RefreshCw } from "@lucide/svelte";
import SchemaTextResult from "./SchemaTextResult.svelte";
interface Props {
resultKind?: "image" | "text" | "verdict";
@@ -27,7 +27,14 @@
</script>
<figure class="tile" style:grid-column={wide ? "1 / -1" : undefined}>
<figcaption><span>RESULT {running ? "…" : ""}</span></figcaption>
<figcaption>
<span>
RESULT
{#if running}
<RefreshCw class="rotating" size="16" />
{/if}
</span>
</figcaption>
<div class="canvas" class:checker={resultKind === "image"}>
{#if resultKind === "text" && textResult}
<div class="text-result-wrap">
@@ -65,6 +72,9 @@
margin-bottom: var(--space-m);
font: var(--font-size-s) var(--font-mono);
color: var(--color-text-muted);
& :global(.rotating) {
animation: rotate var(--duration-l) linear infinite;
}
}
.canvas {
display: flex;
@@ -72,7 +82,7 @@
justify-content: center;
min-height: clamp(var(--space-brand), 30vh, 60vh);
border: var(--size-border) solid var(--color-border);
border-radius: var(--radius-m);
border-radius: var(--radius-s);
overflow: hidden;
background: var(--color-background-muted);
color: var(--color-text-muted);
@@ -98,4 +108,13 @@
padding: var(--space-l);
box-sizing: border-box;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
web/src/lib/components/kit/SchemaSourceTile.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import SchemaTextSource from "./SchemaTextSource.svelte";
import { toDataUrl } from "$lib/core/io";
import type { PixelImage } from "$lib/core/types";
import SchemaTextSource from "./SchemaTextSource.svelte";
interface Props {
mode: "file" | "text";
@@ -58,7 +58,7 @@
justify-content: center;
min-height: clamp(var(--space-brand), 30vh, 60vh);
border: var(--size-border) solid var(--color-border);
border-radius: var(--radius-m);
border-radius: var(--radius-s);
overflow: hidden;
background: var(--color-background-muted);
color: var(--color-text-muted);
web/src/lib/components/kit/SchemaToolView.svelte
+1
View File
@@ -221,6 +221,7 @@
.schema-tool {
padding: calc(var(--space-xxxl) + var(--space-l))
clamp(var(--space-m), 4vw, var(--space-xxxl));
flex: 1;
}
.header {
display: flex;
web/src/lib/components/kit/ToolCard.svelte
+3 -3
View File
@@ -29,9 +29,9 @@
<style>
.tool-card {
display: grid;
grid-template-columns: var(--size-tool-icon) minmax(0, 1fr) var(
--space-xxl
) var(--size-tool-arrow);
grid-template-columns:
var(--size-tool-icon) minmax(0, 1fr) var(--space-xxl)
var(--size-tool-arrow);
align-items: center;
gap: var(--space-l);
min-height: var(--size-tool-min-height);
web/src/lib/components/kit/layout/Footer.svelte
+1
View File
@@ -13,6 +13,7 @@
align-items: center;
justify-content: space-between;
padding: var(--space-xl);
background: var(--color-background);
border-top: var(--size-border) solid var(--color-border);
font: var(--font-size-s) var(--font-mono);
color: var(--color-text-muted);
web/src/lib/components/kit/ui/LangToggle.svelte
+4 -2
View File
@@ -9,8 +9,10 @@
type="button"
class="lang-btn"
class:active={lang === "RU"}
onclick={() => (lang = "RU")}>RU</button
><span class="lang-div">/</span>
onclick={() => (lang = "RU")}
>
RU
</button>
<button
type="button"
class="lang-btn"
web/src/lib/components/kit/ui/TopNav.svelte
+1 -4
View File
@@ -3,11 +3,8 @@
</script>
<nav class="nav">
<a href={resolve("/preview")}>Home page</a>
<a href={resolve("/preview/list-tools")}>Catalog</a>
<a href={resolve("/preview/tools/linear-gradient-png")}>Gradient</a>
<a href={resolve("/preview/tools/remove-background-png")}>
Background remover
</a>
<a href={resolve("/preview/kit")}> UI Kit </a>
</nav>
web/src/lib/registry.ts
+7 -6
View File
@@ -2,14 +2,16 @@
import type { OutputMime } from "./core/io";
import type { PixelImage } from "./core/types";
import { convertEntries } from "./registry/convert";
import { geometryEntries } from "./registry/geometry";
import { alphaEntries } from "./registry/alpha";
import { colorEntries } from "./registry/color";
import { analyzeEntries } from "./registry/analyze";
import { generateEntries } from "./registry/generate";
import { textEntries } from "./registry/text";
import { colorEntries } from "./registry/color";
import { convertEntries } from "./registry/convert";
import { filterEntries } from "./registry/filters";
import { generateEntries } from "./registry/generate";
import { geometryEntries } from "./registry/geometry";
import { textEntries } from "./registry/text";
// TODO: remove convert tools - move to load image \ download button flow
export type ParamDef =
| {
@@ -119,7 +121,6 @@ export const TOOLS: ToolEntry[] = [
..._analyze.slice(11, 13),
];
import { TOOL_ICONS } from "./tools/tool-icons";
import { TOOL_POPULARITY } from "./tools/tool-popularity";
for (const entry of TOOLS) {
web/src/preview.css
+3 -2
View File
@@ -176,8 +176,9 @@
--radius-s: 0px;
--radius-m: 4px;
--duration-s: 0.12s;
--duration-m: 0.15s;
--duration-s: 0.15s;
--duration-m: 0.3s;
--duration-l: 0.8s;
}
[data-theme="dark"] {
web/src/routes/preview/+layout.svelte
+3 -1
View File
@@ -56,12 +56,14 @@
</main>
<style>
main {
.preview-root {
background-color: var(--color-background);
background-image:
linear-gradient(var(--color-background-muted) 1px, transparent 1px),
linear-gradient(90deg, var(--color-background-muted) 1px, transparent 1px);
background-size: var(--space-xxxl) var(--space-xxxl);
min-height: 100vh;
display: flex;
flex-direction: column;
}
</style>
web/src/routes/preview/+page.svelte
+58 -88
View File
@@ -1,108 +1,78 @@
<script lang="ts">
import TextField from "$lib/components/kit/fields/TextField.svelte";
import Panel from "$lib/components/kit/layout/Panel.svelte";
import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
import CatalogGroup from "$lib/components/kit/CatalogGroup.svelte";
import CatalogHeader from "$lib/components/kit/CatalogHeader.svelte";
import CatalogToolbar from "$lib/components/kit/CatalogToolbar.svelte";
import ToolCard from "$lib/components/kit/ToolCard.svelte";
import Button from "$lib/components/kit/ui/Button.svelte";
import { TOOLS } from "$lib/registry-new";
import { Search } from "@lucide/svelte";
import { PREVIEW_GROUPS, PREVIEW_TOTAL } from "$lib/preview/catalog";
import { TOOL_ICONS } from "$lib/preview/tool-icons";
let query = $state("");
const results = $derived(
TOOLS.filter((t) =>
(t.title + " " + t.description)
.toLowerCase()
.includes(query.toLowerCase()),
).slice(0, 24),
let category = $state<string>("all");
const groups = $derived(
PREVIEW_GROUPS.map((g) => ({
id: g.id,
label: g.label,
tools: g.tools.filter(
(t) =>
(category === "all" || category === g.id) &&
(query.trim() === "" ||
t.title.toLowerCase().includes(query.trim().toLowerCase()) ||
t.description.toLowerCase().includes(query.trim().toLowerCase())),
),
})).filter((g) => g.tools.length > 0),
);
// TODO: make main page different from catalog - larger and simpler search, no categories
</script>
<section class="workspace">
<header class="ws-head">
<span class="ws-eyebrow">EASY PNG TOOLS</span>
<h1 class="ws-title">Workspace</h1>
<p class="ws-lede">
Откройте PNG-инструмент, загрузите изображение и получите результат без
установки и регистрации.
</p>
</header>
<Panel title="Search" eyebrow="tools">
<div class="ws-search">
<div class="ws-field">
<TextField
label="Search tools"
bind:value={query}
placeholder="Search tools…"
/>
</div>
<Button
icon={Search}
variant="primary"
onclick={() => {}}
label="Search"
/>
</div>
<div class="ws-results">
{#each results as tool (tool.id)}
<div class="catalog-page">
<CatalogHeader total={PREVIEW_TOTAL} />
<CatalogToolbar bind:query bind:category />
<div class="catalog-groups">
{#each groups as group (group.id)}
<CatalogGroup label={group.label} count={group.tools.length}>
{#each group.tools as tool, i (tool.id)}
<ToolCard
title={tool.title}
id={tool.id}
description={tool.description}
index={i + 1}
icon={TOOL_ICONS[tool.id]}
/>
{/each}
</CatalogGroup>
{/each}
</div>
<SettingsFooter>
<Button onclick={() => {}} label="Open last project" />
</SettingsFooter>
</Panel>
</section>
<footer class="catalog-footer">
ALL OPERATIONS RUN LOCALLY <span>•</span> YOUR FILES NEVER LEAVE THIS DEVICE
</footer>
</div>
<style>
.workspace {
max-width: var(--size-content-max);
margin: 0 auto;
padding: var(--space-page-top) var(--space-xl) var(--space-page-bottom);
display: flex;
flex-direction: column;
gap: var(--space-xxl);
.catalog-page {
padding: var(--space-page-top)
clamp(var(--space-xxl), 4vw, var(--space-page-bottom))
var(--space-page-bottom);
}
.ws-head {
display: flex;
flex-direction: column;
gap: var(--space-m);
}
.ws-eyebrow {
font-family: var(--font-mono);
font-size: var(--font-size-s);
letter-spacing: var(--space-text-2xl);
color: var(--color-text-muted);
}
.ws-title {
margin: 0;
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--color-text);
}
.ws-lede {
margin: 0;
max-width: 56ch;
color: var(--color-text-muted);
font-size: var(--font-size-l);
}
.ws-search {
display: flex;
gap: var(--space-m);
padding: var(--space-l) var(--space-xl);
align-items: center;
}
.ws-field {
flex: 1;
}
.ws-results {
.catalog-groups {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--size-card-min), 1fr));
gap: var(--space-l);
padding: var(--space-m) var(--space-xl);
gap: var(--space-page-top) var(--space-xxl);
}
.catalog-footer {
display: flex;
gap: var(--space-xxl);
flex-wrap: wrap;
margin-top: var(--space-page-top);
padding-top: var(--space-xxl);
border-top: var(--size-border) solid var(--color-border);
font: var(--font-size-xs) var(--font-mono);
letter-spacing: var(--space-text-l);
color: var(--color-text-muted);
}
@media (--bp-tablet) {
.catalog-groups {
grid-template-columns: 1fr;
}
}
</style>
web/src/routes/preview/list-tools/+page.svelte
+5 -4
View File
@@ -1,10 +1,10 @@
<script lang="ts">
import { PREVIEW_GROUPS, PREVIEW_TOTAL } from "$lib/preview/catalog";
import { TOOL_ICONS } from "$lib/preview/tool-icons";
import CatalogGroup from "$lib/components/kit/CatalogGroup.svelte";
import CatalogHeader from "$lib/components/kit/CatalogHeader.svelte";
import CatalogToolbar from "$lib/components/kit/CatalogToolbar.svelte";
import CatalogGroup from "$lib/components/kit/CatalogGroup.svelte";
import ToolCard from "$lib/components/kit/ToolCard.svelte";
import { PREVIEW_GROUPS, PREVIEW_TOTAL } from "$lib/preview/catalog";
import { TOOL_ICONS } from "$lib/preview/tool-icons";
let query = $state("");
let category = $state<string>("all");
@@ -22,6 +22,8 @@
),
})).filter((g) => g.tools.length > 0),
);
// TODO: переделать расположение - категория выводится в 2 колонки, а не как сейчас - каждая категория - 1 колонка и две категории в ряд
</script>
<div class="catalog-page">
@@ -55,7 +57,6 @@
}
.catalog-groups {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-page-top) var(--space-xxl);
}
.catalog-footer {