schmidt1024/kashilo
1
0
Fork 0
Code Issues Pull Requests Releases Activity

improve listing

Browse Source
This commit is contained in:
Schmidt
2026-01-28 07:35:00 +01:00
parent d5724805aa
commit 213c4ef52f
4 changed files with 37 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
css/components.css
View File

@@ -150,6 +150,31 @@
.grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; }
}
/* Listings Grid - responsive 2/3/4/5 columns */
.listings-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
@media (min-width: 640px) {
.listings-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 900px) {
.listings-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1200px) {
.listings-grid {
grid-template-columns: repeat(5, 1fr);
}
}
/* Badges */
.badge {
display: inline-flex;

13
js/components/pages/page-home.js
View File

@@ -33,6 +33,7 @@ class PageHome extends HTMLElement {
<listing-card
listing-id="${i + 1}"
title="${t('home.placeholderTitle')}"
price="699"
location="${t('home.placeholderLocation')}"
></listing-card>
`).join('');
@@ -56,17 +57,5 @@ style.textContent = /* css */`
page-home section h2 {
margin-bottom: var(--space-lg);
}
page-home .listings-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
@media (min-width: 768px) {
page-home .listings-grid {
grid-template-columns: repeat(5, 1fr);
}
}
`;
document.head.appendChild(style);

12
js/components/pages/page-search.js
View File

@@ -185,18 +185,6 @@ style.textContent = /* css */`
margin-bottom: var(--space-md);
}
page-search .listings-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
@media (min-width: 768px) {
page-search .listings-grid {
grid-template-columns: repeat(4, 1fr);
}
}
page-search .loading {
display: flex;
flex-direction: column;

59
js/components/search-box.js
View File

@@ -16,7 +16,7 @@ const RADIUS_OPTIONS = [5, 10, 20, 50, 100, 200];
class SearchBox extends HTMLElement {
static get observedAttributes() {
return ['compact', 'category', 'subcategory', 'country', 'query'];
return ['category', 'subcategory', 'country', 'query'];
}
constructor() {
@@ -121,15 +121,9 @@ class SearchBox extends HTMLElement {
}
}
get isCompact() {
return this.hasAttribute('compact');
}
render() {
const compact = this.isCompact;
this.innerHTML = /* html */`
<form class="search-box ${compact ? 'search-box--compact' : ''}" id="search-form">
<form class="search-box" id="search-form">
<div class="search-row search-row-query">
<div class="search-field search-field-query">
<svg class="field-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -140,7 +134,7 @@ class SearchBox extends HTMLElement {
</div>
</div>
${!compact ? this.renderFilters() : ''}
${this.renderFilters()}
<div class="search-row search-row-submit">
<button type="submit" class="btn btn-primary btn-search">
@@ -690,26 +684,26 @@ style.textContent = /* css */`
width: auto;
}
search-box .search-box:not(.search-box--compact) {
search-box .search-box {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
border-radius: var(--radius-xl);
}
search-box .search-box:not(.search-box--compact) .search-row {
search-box .search-box .search-row {
border-bottom: none;
}
/* Row 1: Search field + Button */
search-box .search-box:not(.search-box--compact) .search-row-query {
search-box .search-box .search-row-query {
grid-column: 1;
grid-row: 1;
border-right: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
search-box .search-box:not(.search-box--compact) .search-row-submit {
search-box .search-box .search-row-submit {
grid-column: 2;
grid-row: 1;
padding: var(--space-xs);
@@ -718,25 +712,25 @@ style.textContent = /* css */`
}
/* Row 2: Filters */
search-box .search-box:not(.search-box--compact) .search-row-filters {
search-box .search-box .search-row-filters {
grid-column: 1 / -1;
grid-row: 2;
display: flex;
border-right: none;
}
search-box .search-box:not(.search-box--compact) .btn-search {
search-box .search-box .btn-search {
width: auto;
padding: var(--space-md);
border-radius: var(--radius-md);
}
search-box .search-box:not(.search-box--compact) .btn-search-text {
search-box .search-box .btn-search-text {
display: none;
}
/* Category truncation */
search-box .search-box:not(.search-box--compact) .category-dropdown-label {
search-box .search-box .category-dropdown-label {
max-width: 250px;
}
}
@@ -911,37 +905,6 @@ style.textContent = /* css */`
background: var(--color-primary-light);
color: var(--color-primary);
}
/* Compact mode */
search-box .search-box--compact {
max-width: 500px;
display: flex;
border-radius: var(--radius-xl);
}
search-box .search-box--compact .search-row {
border-bottom: none;
}
search-box .search-box--compact .search-row-query {
flex: 1;
}
search-box .search-box--compact .search-row-submit {
flex: 0 0 auto;
padding: var(--space-xs);
background: transparent;
}
search-box .search-box--compact .btn-search {
width: auto;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
}
search-box .search-box--compact .btn-search-text {
display: none;
}
`;
document.head.appendChild(style);