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

improve markup

Browse Source
This commit is contained in:
Schmidt
2026-01-28 07:19:17 +01:00
parent 344024e44c
commit d5724805aa
11 changed files with 27 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
css/base.css
View File

@@ -7,6 +7,7 @@
html {
font-size: 16px;
scroll-behavior: smooth;
scrollbar-gutter: stable;
}
body {

2
js/components/app-footer.js
View File

@@ -8,7 +8,7 @@ class AppFooter extends HTMLElement {
render() {
const year = new Date().getFullYear();
this.innerHTML = /* html */ `
this.innerHTML = /* html */`
<div class="footer-inner container">
<p class="footer-copyright">
&copy; ${year} dgray. <span data-i18n="footer.rights">${t('footer.rights')}</span>

2
js/components/app-header.js
View File

@@ -70,7 +70,7 @@ class AppHeader extends HTMLElement {
}
render() {
this.innerHTML = /* html */ `
this.innerHTML = /* html */`
<div class="header-inner container">
<a href="#/" class="logo">dgray</a>

2
js/components/app-shell.js
View File

@@ -25,7 +25,7 @@ class AppShell extends HTMLElement {
}
render() {
this.innerHTML = /* html */ `
this.innerHTML = /* html */`
<app-header></app-header>
<main class="container" id="router-outlet"></main>
<app-footer></app-footer>

4
js/components/listing-card.js
View File

@@ -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 */`
<a href="#/listing/${escapeHTML(id)}" class="listing-link">
<div class="listing-image" ${image ? `style="background-image: url('${escapeHTML(image)}')"` : ''}></div>
<div class="listing-info">
@@ -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;

4
js/components/pages/page-create.js
View File

@@ -23,7 +23,7 @@ class PageCreate extends HTMLElement {
}
render() {
this.innerHTML = /* html */ `
this.innerHTML = /* html */`
<div class="create-page">
<h1 data-i18n="create.title">${t('create.title')}</h1>
@@ -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;

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

@@ -13,17 +13,11 @@ class PageHome extends HTMLElement {
}
render() {
this.innerHTML = /* html */ `
this.innerHTML = /* html */`
<section class="search-section">
<search-box></search-box>
</section>
<section class="categories-desktop">
<div class="category-badges">
${this.renderCategoryBadges()}
</div>
</section>
<section class="recent-listings">
<h2>${t('home.recentListings')}</h2>
<div class="listings-grid">
@@ -33,13 +27,6 @@ class PageHome extends HTMLElement {
`;
}
renderCategoryBadges() {
const topCategories = ['electronics', 'vehicles', 'furniture', 'clothing', 'sports'];
return topCategories.map(cat => `
<a href="#/search?category=${cat}" class="badge">${t(`categories.${cat}`)}</a>
`).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);

8
js/components/pages/page-listing.js
View File

@@ -42,7 +42,7 @@ class PageListing extends HTMLElement {
render() {
if (this.loading) {
this.innerHTML = /* html */ `
this.innerHTML = /* html */`
<div class="loading">
<div class="spinner"></div>
</div>
@@ -51,7 +51,7 @@ class PageListing extends HTMLElement {
}
if (!this.listing) {
this.innerHTML = /* html */ `
this.innerHTML = /* html */`
<div class="empty-state">
<div class="empty-state-icon">😕</div>
<p data-i18n="listing.notFound">${t('listing.notFound')}</p>
@@ -61,7 +61,7 @@ class PageListing extends HTMLElement {
return;
}
this.innerHTML = /* html */ `
this.innerHTML = /* html */`
<article class="listing-detail">
<div class="listing-gallery">
<div class="listing-image-main"></div>
@@ -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;

4
js/components/pages/page-not-found.js
View File

@@ -11,7 +11,7 @@ class PageNotFound extends HTMLElement {
}
render() {
this.innerHTML = /* html */ `
this.innerHTML = /* html */`
<div class="not-found">
<div class="not-found-icon">404</div>
<h1 data-i18n="notFound.title">${t('notFound.title')}</h1>
@@ -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;

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

@@ -76,10 +76,10 @@ class PageSearch extends HTMLElement {
}
render() {
this.innerHTML = /* html */ `
this.innerHTML = /* html */`
<div class="search-page">
<section class="search-header">
<search-box compact no-navigate></search-box>
<search-box no-navigate></search-box>
</section>
<section class="search-results" id="results">
@@ -120,7 +120,7 @@ class PageSearch extends HTMLElement {
renderResults() {
if (this.loading) {
return /* html */ `
return /* html */`
<div class="loading">
<div class="spinner"></div>
<p>${t('search.loading')}</p>
@@ -129,7 +129,7 @@ class PageSearch extends HTMLElement {
}
if (!this.hasFilters() && this.results.length === 0) {
return /* html */ `
return /* html */`
<div class="empty-state">
<div class="empty-state-icon">🔍</div>
<p>${t('search.enterQuery')}</p>
@@ -138,7 +138,7 @@ class PageSearch extends HTMLElement {
}
if (this.results.length === 0) {
return /* html */ `
return /* html */`
<div class="empty-state">
<div class="empty-state-icon">😕</div>
<p>${t('search.noResults')}</p>
@@ -146,10 +146,10 @@ class PageSearch extends HTMLElement {
`;
}
return /* html */ `
return /* html */`
<p class="results-count">${t('search.resultsCount', { count: this.results.length })}</p>
<div class="listings-grid">
${this.results.map(item => /* html */ `
${this.results.map(item => /* html */`
<listing-card
listing-id="${item.id}"
title="${this.escapeHtml(item.title)}"
@@ -171,7 +171,7 @@ class PageSearch extends HTMLElement {
customElements.define('page-search', PageSearch);
const style = document.createElement('style');
style.textContent = /* css */ `
style.textContent = /* css */`
page-search .search-page {
padding: var(--space-lg) 0;
}

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

@@ -128,7 +128,7 @@ class SearchBox extends HTMLElement {
render() {
const compact = this.isCompact;
this.innerHTML = /* html */ `
this.innerHTML = /* html */`
<form class="search-box ${compact ? 'search-box--compact' : ''}" id="search-form">
<div class="search-row search-row-query">
<div class="search-field search-field-query">
@@ -159,7 +159,7 @@ class SearchBox extends HTMLElement {
// Track which category accordion is expanded
this._expandedCategory = this._expandedCategory || '';
return /* html */ `
return /* html */`
<!-- Accordion Category Dropdown -->
<div class="search-row search-row-filters">
<div class="category-dropdown">
@@ -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;
}