From d5724805aa5ff157cc498c9d69130ff7dc4dc9c6 Mon Sep 17 00:00:00 2001 From: Alexander Schmidt Date: Wed, 28 Jan 2026 07:19:17 +0100 Subject: [PATCH] improve markup --- css/base.css | 1 + js/components/app-footer.js | 2 +- js/components/app-header.js | 2 +- js/components/app-shell.js | 2 +- js/components/listing-card.js | 4 +- js/components/pages/page-create.js | 4 +- js/components/pages/page-home.js | 54 +-------------------------- js/components/pages/page-listing.js | 8 ++-- js/components/pages/page-not-found.js | 4 +- js/components/pages/page-search.js | 16 ++++---- js/components/search-box.js | 6 +-- 11 files changed, 27 insertions(+), 76 deletions(-) diff --git a/css/base.css b/css/base.css index b989269..64f7b62 100644 --- a/css/base.css +++ b/css/base.css @@ -7,6 +7,7 @@ html { font-size: 16px; scroll-behavior: smooth; + scrollbar-gutter: stable; } body { diff --git a/js/components/app-footer.js b/js/components/app-footer.js index 7a2a726..939c115 100644 --- a/js/components/app-footer.js +++ b/js/components/app-footer.js @@ -8,7 +8,7 @@ class AppFooter extends HTMLElement { render() { const year = new Date().getFullYear(); - this.innerHTML = /* html */ ` + this.innerHTML = /* html */`

© ${year} dgray. ${t('footer.rights')} diff --git a/js/components/app-header.js b/js/components/app-header.js index 881a914..4d2502b 100644 --- a/js/components/app-header.js +++ b/js/components/app-header.js @@ -70,7 +70,7 @@ class AppHeader extends HTMLElement { } render() { - this.innerHTML = /* html */ ` + this.innerHTML = /* html */`

diff --git a/js/components/app-shell.js b/js/components/app-shell.js index 42f8c96..0dab634 100644 --- a/js/components/app-shell.js +++ b/js/components/app-shell.js @@ -25,7 +25,7 @@ class AppShell extends HTMLElement { } render() { - this.innerHTML = /* html */ ` + this.innerHTML = /* html */`
diff --git a/js/components/listing-card.js b/js/components/listing-card.js index 0b3649f..a250841 100644 --- a/js/components/listing-card.js +++ b/js/components/listing-card.js @@ -58,7 +58,7 @@ class ListingCard extends HTMLElement { const priceDisplay = price ? formatPrice(parseFloat(price), currency) : '–'; const favoriteLabel = this.isFavorite ? t('home.removeFavorite') : t('home.addFavorite'); - this.innerHTML = /* html */ ` + this.innerHTML = /* html */`
@@ -112,7 +112,7 @@ class ListingCard extends HTMLElement { customElements.define('listing-card', ListingCard); const style = document.createElement('style'); -style.textContent = /* css */ ` +style.textContent = /* css */` listing-card { display: block; position: relative; diff --git a/js/components/pages/page-create.js b/js/components/pages/page-create.js index 1911e18..063ef1e 100644 --- a/js/components/pages/page-create.js +++ b/js/components/pages/page-create.js @@ -23,7 +23,7 @@ class PageCreate extends HTMLElement { } render() { - this.innerHTML = /* html */ ` + this.innerHTML = /* html */`

${t('create.title')}

@@ -164,7 +164,7 @@ class PageCreate extends HTMLElement { customElements.define('page-create', PageCreate); const style = document.createElement('style'); -style.textContent = /* css */ ` +style.textContent = /* css */` page-create .create-page { max-width: 600px; margin: 0 auto; diff --git a/js/components/pages/page-home.js b/js/components/pages/page-home.js index 6734938..e2437a5 100644 --- a/js/components/pages/page-home.js +++ b/js/components/pages/page-home.js @@ -13,17 +13,11 @@ class PageHome extends HTMLElement { } render() { - this.innerHTML = /* html */ ` + this.innerHTML = /* html */`
-
-
- ${this.renderCategoryBadges()} -
-
-

${t('home.recentListings')}

@@ -33,13 +27,6 @@ class PageHome extends HTMLElement { `; } - renderCategoryBadges() { - const topCategories = ['electronics', 'vehicles', 'furniture', 'clothing', 'sports']; - return topCategories.map(cat => ` - ${t(`categories.${cat}`)} - `).join(''); - } - renderPlaceholderListings() { const placeholders = Array(10).fill(null); return placeholders.map((_, i) => /* html */` @@ -55,49 +42,12 @@ class PageHome extends HTMLElement { customElements.define('page-home', PageHome); const style = document.createElement('style'); -style.textContent = /* css */ ` +style.textContent = /* css */` /* Search Section */ page-home .search-section { padding: var(--space-xl) 0; } - /* Category Badges (Desktop only) */ - page-home .categories-desktop { - display: none; - margin-bottom: var(--space-xl); - } - - @media (min-width: 768px) { - page-home .categories-desktop { - display: block; - } - } - - page-home .category-badges { - display: flex; - flex-wrap: wrap; - gap: var(--space-sm); - justify-content: center; - } - - page-home .badge { - display: inline-block; - padding: var(--space-xs) var(--space-md); - background: var(--color-bg-secondary); - border: 1px solid var(--color-border); - border-radius: var(--radius-full); - color: var(--color-text); - text-decoration: none; - font-size: var(--font-size-sm); - transition: all var(--transition-fast); - } - - page-home .badge:hover { - background: var(--color-primary); - color: var(--color-bg); - border-color: var(--color-primary); - } - /* Listings */ page-home section { margin-bottom: var(--space-xl); diff --git a/js/components/pages/page-listing.js b/js/components/pages/page-listing.js index 09e388f..ee195f4 100644 --- a/js/components/pages/page-listing.js +++ b/js/components/pages/page-listing.js @@ -42,7 +42,7 @@ class PageListing extends HTMLElement { render() { if (this.loading) { - this.innerHTML = /* html */ ` + this.innerHTML = /* html */`
@@ -51,7 +51,7 @@ class PageListing extends HTMLElement { } if (!this.listing) { - this.innerHTML = /* html */ ` + this.innerHTML = /* html */`
😕

${t('listing.notFound')}

@@ -61,7 +61,7 @@ class PageListing extends HTMLElement { return; } - this.innerHTML = /* html */ ` + this.innerHTML = /* html */`
@@ -111,7 +111,7 @@ class PageListing extends HTMLElement { customElements.define('page-listing', PageListing); const style = document.createElement('style'); -style.textContent = /* css */ ` +style.textContent = /* css */` page-listing .listing-detail { display: grid; grid-template-columns: 1fr 400px; diff --git a/js/components/pages/page-not-found.js b/js/components/pages/page-not-found.js index 0d7462c..2795816 100644 --- a/js/components/pages/page-not-found.js +++ b/js/components/pages/page-not-found.js @@ -11,7 +11,7 @@ class PageNotFound extends HTMLElement { } render() { - this.innerHTML = /* html */ ` + this.innerHTML = /* html */`
404

${t('notFound.title')}

@@ -27,7 +27,7 @@ class PageNotFound extends HTMLElement { customElements.define('page-not-found', PageNotFound); const style = document.createElement('style'); -style.textContent = /* css */ ` +style.textContent = /* css */` page-not-found .not-found { text-align: center; padding: var(--space-3xl) 0; diff --git a/js/components/pages/page-search.js b/js/components/pages/page-search.js index 9222d0a..ccdd0f1 100644 --- a/js/components/pages/page-search.js +++ b/js/components/pages/page-search.js @@ -76,10 +76,10 @@ class PageSearch extends HTMLElement { } render() { - this.innerHTML = /* html */ ` + this.innerHTML = /* html */`
- +
@@ -120,7 +120,7 @@ class PageSearch extends HTMLElement { renderResults() { if (this.loading) { - return /* html */ ` + return /* html */`

${t('search.loading')}

@@ -129,7 +129,7 @@ class PageSearch extends HTMLElement { } if (!this.hasFilters() && this.results.length === 0) { - return /* html */ ` + return /* html */`
🔍

${t('search.enterQuery')}

@@ -138,7 +138,7 @@ class PageSearch extends HTMLElement { } if (this.results.length === 0) { - return /* html */ ` + return /* html */`
😕

${t('search.noResults')}

@@ -146,10 +146,10 @@ class PageSearch extends HTMLElement { `; } - return /* html */ ` + return /* html */`

${t('search.resultsCount', { count: this.results.length })}

- ${this.results.map(item => /* html */ ` + ${this.results.map(item => /* html */`
@@ -159,7 +159,7 @@ class SearchBox extends HTMLElement { // Track which category accordion is expanded this._expandedCategory = this._expandedCategory || ''; - return /* html */ ` + return /* html */`
@@ -547,7 +547,7 @@ class SearchBox extends HTMLElement { customElements.define('search-box', SearchBox); const style = document.createElement('style'); -style.textContent = /* css */ ` +style.textContent = /* css */` search-box { display: block; }