sha/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2025-12-20 03:26:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Enhance logo search and display functionality

Browse Source 
- Updated logo filtering to include title in search criteria across multiple components.
- Modified CardFull, CardMiddle, CardSmall, and CardTiny components to display title or name as appropriate.
- Added support for displaying logo variants in CardFull component.
- Improved logo retrieval logic in Preview page to account for title matching.
This commit is contained in:
sHa
2025-06-12 18:23:42 +03:00
parent de3c5dc52b
commit d88c5b802d
8 changed files with 557 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ToDo.md
View File

@@ -4,4 +4,4 @@
[ ] Improove: In the preview page, add possibility select custom color for each target.
[ ] Strategy: Add differents base/collections of images: Flags,
[v] Strategy: WebApp, PWA
[ ] Improove: Add to filter Image variants - just logo, line logo, square logo
[v] Improove: Add to filter Image variants - just logo, line logo, square logo

738
public/data/logos.json
View File

File diff suppressed because it is too large Load Diff

3
src/App.svelte
View File

@@ -39,6 +39,7 @@
window.appData.filteredLogos = window.appData.logos.filter((logo) => {
const matchesSearch =
logo.name.toLowerCase().includes(val.toLowerCase()) ||
(logo.title && logo.title.toLowerCase().includes(val.toLowerCase())) ||
(logo.brand && logo.brand.toLowerCase().includes(val.toLowerCase()));
const matchesTags =
!selectedTags.length ||
@@ -349,6 +350,7 @@
$: filteredLogos = logos.filter((logo) => {
const matchesSearch =
logo.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
(logo.title && logo.title.toLowerCase().includes(searchQuery.toLowerCase())) ||
(logo.brand &&
logo.brand.toLowerCase().includes(searchQuery.toLowerCase()));
const matchesTags =
@@ -704,6 +706,7 @@
window.appData.filteredLogos = window.appData.logos.filter((logo) => {
const matchesSearch =
logo.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
(logo.title && logo.title.toLowerCase().includes(searchQuery.toLowerCase())) ||
(logo.brand && logo.brand.toLowerCase().includes(searchQuery.toLowerCase()));
const matchesTags =
!selectedTags.length ||

39
src/components/CardFull.svelte
View File

@@ -132,7 +132,7 @@
{#if logo}
<div class="modal-header">
<div class="header-spacer"></div>
<h2>{logo.name}</h2>
<h2>{logo.title || logo.name}</h2>
<div class="header-spacer"></div>
</div>
<div class="preview-body">
@@ -149,10 +149,10 @@
sets={logo.sets}
colors={logo.colors}
activeSet={logo._activeSet}
alt={logo.name}
alt={logo.title || logo.name}
/>
{:else}
<img src={logo.path} alt={logo.name} />
<img src={logo.path} alt={logo.title || logo.name} />
{/if}
</div>
<div class="right-column">
@@ -185,6 +185,13 @@
{/each}
</div>
{/if}
{#if logo.variants && logo.variants.length}
<div class="variants-list">
{#each logo.variants as variant}
<span class="logo-variant">{variant}</span>
{/each}
</div>
{/if}
</div>
<div class="preview-actions-container">
@@ -295,6 +302,13 @@
flex-wrap: wrap;
gap: 0.5rem;
}
.variants-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
}
.logo-tag {
display: inline-block;
background: var(--color-accent);
@@ -309,6 +323,25 @@
margin-bottom: 0.2em;
transition: background 0.2s;
}
.logo-variant {
display: inline-block;
background: #9b59b6;
color: white;
border-radius: 12px;
padding: 0.2em 0.8em;
font-size: 0.85em;
font-weight: 500;
letter-spacing: 0.02em;
margin-right: 0.3em;
margin-top: 0.2em;
margin-bottom: 0.2em;
transition: background 0.2s;
}
.logo-variant:hover {
background: #8e44ad;
}
.preview-actions-container {
width: 100%;
background: var(--color-card);

6
src/components/CardMiddle.svelte
View File

@@ -51,16 +51,16 @@
sets={logo.sets}
colors={logo.colors}
activeSet={logo._activeSet}
alt={logo.name}
alt={logo.title || logo.name}
/>
{/key}
{:else}
<img src={logo.path} alt={logo.name} />
<img src={logo.path} alt={logo.title || logo.name}/>
{/if}
</div>
<div class="logo-info">
<div class="logo-title-row">
<h3>{logo.name}</h3>
<h3>{logo.title || logo.name}</h3>
{#if logo.brand}
<button
class="brand-filter-btn"

4
src/components/CardSmall.svelte
View File

@@ -55,12 +55,12 @@
/>
{/key}
{:else}
<img src={logo.path} alt={logo.name} />
<img src={logo.path} alt={logo.title || logo.name} />
{/if}
</div>
<div class="logo-content">
<div class="logo-header">
<h3>{logo.name}</h3>
<h3>{logo.title || logo.name}</h3>
{#if logo.brand}
<button
class="brand-filter-btn"

6
src/components/CardTiny.svelte
View File

@@ -51,10 +51,10 @@
sets={logo.sets}
colors={logo.colors}
activeSet={logo._activeSet}
alt={logo.name}
alt={logo.title || logo.name}
/>
{:else}
<img src={logo.path} alt={logo.name} />
<img src={logo.path} alt={logo.title || logo.name} />
{/if}
</div>
{#if logo.colors}
@@ -63,7 +63,7 @@
logo._activeSet = setName;
}} />
{/if}
<div class="name">{logo.name}</div>
<div class="name">{logo.title || logo.name}</div>
</div>
<style>

4
src/pages/Preview.svelte
View File

@@ -22,8 +22,10 @@
}
const logoName = params.logoName.replace(/-/g, ' ');
logo = logos.find(l =>
l.name.toLowerCase() === params.logoName.toLowerCase() ||
l.name.toLowerCase().replace(/\s+/g, '-') === params.logoName.toLowerCase() ||
l.name.toLowerCase() === logoName.toLowerCase()
(l.title && l.title.toLowerCase() === logoName.toLowerCase()) ||
(l.title && l.title.toLowerCase().replace(/\s+/g, '-') === params.logoName.toLowerCase())
);
if (!logo) {
console.error("Logo not found:", params.logoName);