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

improve listing

Browse Source
This commit is contained in:
Schmidt
2026-02-01 10:47:29 +01:00
parent 87b1185623
commit 43a905c027
3 changed files with 28 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
AGENTS.md
View File

@@ -92,6 +92,7 @@ locales/
- **Font-Size**: `var(--font-size-xs|sm|base|lg|xl|2xl|3xl)` - **Font-Size**: `var(--font-size-xs|sm|base|lg|xl|2xl|3xl)`
- **Font-Family**: `var(--font-family)` für Body, `var(--font-family-heading)` für Headlines - **Font-Family**: `var(--font-family)` für Body, `var(--font-family-heading)` für Headlines
- **Border-Radius**: `var(--radius-sm|md|lg|xl|full)` - **Border-Radius**: `var(--radius-sm|md|lg|xl|full)`
- **Breakpoint**: `@media (max-width: 768px)` - einziger Mobile-Breakpoint für alle Komponenten
### i18n ### i18n
- Schlüssel: `section.key` (z.B. `home.title`) - Schlüssel: `section.key` (z.B. `home.title`)

48
css/components.css
View File

@@ -149,40 +149,22 @@
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
@media (max-width: 1024px) {
.grid-cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) { @media (max-width: 768px) {
.grid-cols-4, .grid-cols-3 { grid-template-columns: repeat(2, 1fr); } .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-2 { grid-template-columns: 1fr; }
} }
@media (max-width: 480px) { /* Listings Grid - responsive columns */
.grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; }
}
/* Listings Grid - responsive 2/3/4/5 columns */
.listings-grid { .listings-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(4, 1fr);
gap: var(--space-md); gap: var(--space-md);
} }
@media (min-width: 640px) { @media (max-width: 768px) {
.listings-grid { .listings-grid {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(2, 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);
} }
} }
@@ -285,28 +267,28 @@ app-header .btn-profile {
app-header .btn-login-text, app-header .btn-login-text,
app-header .btn-profile-text { app-header .btn-profile-text {
display: none; display: inline;
} }
@media (min-width: 480px) { @media (max-width: 768px) {
app-header .btn-create { app-header .btn-create {
padding: var(--space-sm) var(--space-md); padding: var(--space-sm);
border-radius: var(--radius-md); border-radius: var(--radius-full);
} }
app-header .btn-create-text { app-header .btn-create-text {
display: inline; display: none;
} }
app-header .btn-login, app-header .btn-login,
app-header .btn-profile { app-header .btn-profile {
padding: var(--space-sm) var(--space-md); padding: var(--space-sm);
border-radius: var(--radius-md); border-radius: var(--radius-full);
} }
app-header .btn-login-text, app-header .btn-login-text,
app-header .btn-profile-text { app-header .btn-profile-text {
display: inline; display: none;
} }
} }

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

@@ -508,7 +508,7 @@ style.textContent = /* css */`
align-items: start; align-items: start;
} }
@media (max-width: 900px) { @media (max-width: 768px) {
page-listing .listing-content { page-listing .listing-content {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -517,6 +517,10 @@ style.textContent = /* css */`
position: static; position: static;
order: -1; order: -1;
} }
page-listing .sidebar-card {
padding: var(--space-md);
}
} }
/* Main Info */ /* Main Info */
@@ -584,6 +588,12 @@ style.textContent = /* css */`
gap: var(--space-md); gap: var(--space-md);
} }
@media (max-width: 768px) {
page-listing .listing-sidebar {
position: static;
}
}
page-listing .sidebar-card { page-listing .sidebar-card {
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
@@ -629,6 +639,7 @@ style.textContent = /* css */`
page-listing .action-btn.active { page-listing .action-btn.active {
color: var(--color-accent); color: var(--color-accent);
background: var(--color-bg-tertiary);
} }
page-listing .action-btn.copied { page-listing .action-btn.copied {