maciejpi/nordabiz
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style(zopk): Ujednolicenie stylu kart newsów z /zopk/aktualnosci

Browse Source 
- Obrazki newsów (lub zielony placeholder z ikoną)
- Większy padding i promień zaokrąglenia kart
- Dłuższe opisy (250 znaków zamiast 200)
- Data w formacie DD.MM.YYYY w jednej linii ze źródłem
- Hover z efektem podniesienia (translateY)
- Responsive: obrazki na pełną szerokość na mobile

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-01-15 06:00:10 +01:00
parent 819192bdad
commit 82d4c870a0
1 changed files with 44 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
templates/zopk/index.html
View File

@ -218,20 +218,20 @@
color: var(--border);
}
/* News */
/* News - matching /zopk/aktualnosci style */
.news-grid {
display: grid;
gap: var(--spacing-md);
gap: var(--spacing-lg);
margin-bottom: var(--spacing-2xl);
}
.news-card {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--spacing-md);
grid-template-columns: 100px 1fr;
gap: var(--spacing-lg);
background: var(--surface);
padding: var(--spacing-md);
border-radius: var(--radius);
padding: var(--spacing-lg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
text-decoration: none;
color: inherit;
@ -240,44 +240,47 @@
.news-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.news-date {
text-align: center;
padding: var(--spacing-sm);
.news-image {
width: 100px;
height: 80px;
border-radius: var(--radius);
object-fit: cover;
background: var(--background);
border-radius: var(--radius-sm);
min-width: 60px;
}
.news-date-day {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--primary);
}
.news-date-month {
font-size: var(--font-size-xs);
color: var(--text-secondary);
text-transform: uppercase;
.news-placeholder {
width: 100px;
height: 80px;
border-radius: var(--radius);
background: linear-gradient(135deg, #059669, #047857);
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.news-content h4 {
font-size: var(--font-size-base);
margin-bottom: var(--spacing-xs);
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-sm);
line-height: 1.4;
}
.news-content p {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.5;
line-height: 1.6;
margin-bottom: var(--spacing-sm);
}
.news-source {
.news-meta {
display: flex;
gap: var(--spacing-md);
font-size: var(--font-size-xs);
color: var(--text-muted);
margin-top: var(--spacing-xs);
}
/* Resources */
@ -346,11 +349,10 @@
grid-template-columns: 1fr;
}
.news-date {
display: flex;
gap: var(--spacing-sm);
justify-content: flex-start;
padding: var(--spacing-xs) var(--spacing-sm);
.news-image,
.news-placeholder {
width: 100%;
height: 150px;
}
}
</style>
@ -485,22 +487,23 @@
<div class="news-grid">
{% for news in news_items %}
<a href="{{ news.url }}" target="_blank" rel="noopener" class="news-card">
<div class="news-date">
{% if news.published_at %}
<div class="news-date-day">{{ news.published_at.strftime('%d') }}</div>
<div class="news-date-month">{{ news.published_at.strftime('%b') }}</div>
{% else %}
<div class="news-date-day">--</div>
<div class="news-date-month">---</div>
{% endif %}
{% if news.image_url %}
<img src="{{ news.image_url }}" alt="" class="news-image">
{% else %}
<div class="news-placeholder">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
</div>
{% endif %}
<div class="news-content">
<h4>{{ news.title }}</h4>
{% if news.description %}
{% set clean_desc = news.description|striptags %}
<p>{{ clean_desc[:200] }}{% if clean_desc|length > 200 %}...{% endif %}</p>
<p>{{ clean_desc[:250] }}{% if clean_desc|length > 250 %}...{% endif %}</p>
{% endif %}
<div class="news-source">{{ news.source_name or news.source_domain }}</div>
<div class="news-meta">
<span>{{ news.source_name or news.source_domain }}</span>
<span>{{ news.published_at.strftime('%d.%m.%Y') if news.published_at else '-' }}</span>
</div>
</div>
</a>
{% endfor %}