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

feat: reorganize filter display and improve layout for selected tags and brands

Browse Source
This commit is contained in:
sHa
2025-05-29 16:23:25 +03:00
parent 2010eb6704
commit ac263276af
1 changed files with 111 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/Header.svelte
View File

@@ -483,6 +483,7 @@
{/if} {/if}
</div> </div>
<div class="selected-filters">
{#each selectedTags as tagText} {#each selectedTags as tagText}
<button <button
class="selected-tag" class="selected-tag"
@@ -549,6 +550,7 @@
</button> </button>
{/if} {/if}
</div> </div>
</div>
<div class="view-toggle"> <div class="view-toggle">
<div class="view-mode-group button-group"> <div class="view-mode-group button-group">
<button <button
@@ -734,10 +736,10 @@
} }
.filter-section { .filter-section {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: auto 1fr;
gap: 0.3rem; gap: 0.5rem;
align-items: center; align-items: flex-start;
position: relative; position: relative;
} }
@@ -746,9 +748,9 @@
color: #fff; color: #fff;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
padding: 0.2em 0.8em 0.2em 0.8em; padding: 0.1em 0.8em;
font-size: 0.85em; font-size: 0.75em;
font-weight: 500; font-weight: 300;
letter-spacing: 0.02em; letter-spacing: 0.02em;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@@ -778,9 +780,9 @@
color: var(--color-text); color: var(--color-text);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
padding: 0.2em 0.8em; padding: 0.1em 0.8em;
font-size: 0.85em; font-size: 0.75em;
font-weight: 500; font-weight: 300;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.4em; gap: 0.4em;
@@ -812,6 +814,7 @@
} }
.filter-dropdown { .filter-dropdown {
grid-column: 1;
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
@@ -1219,6 +1222,17 @@
opacity: 1; opacity: 1;
} }
.selected-filters {
grid-column: 2;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
align-items: flex-end;
min-height: 2.5rem;
max-height: 5rem;
overflow: hidden;
}
@media (max-width: 700px) { @media (max-width: 700px) {
.header-row { .header-row {
display: grid; display: grid;
@@ -1245,5 +1259,28 @@
padding-top: 0; padding-top: 0;
justify-self: start; justify-self: start;
} }
.header-controls {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 1rem;
margin: 1rem 0;
}
.search-bar {
grid-column: 1;
grid-row: 1;
}
.view-toggle {
grid-column: 2;
grid-row: 1;
}
.filter-section {
grid-column: 1 / -1;
grid-row: 2;
}
} }
</style> </style>