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

fix(mobile): compact what's-new widget — hide descriptions, limit to 2 items on mobile
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
Details
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
Details
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
Details
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions
Details

Browse Source 
On mobile screens the "Co nowego na platformie" section took up excessive
vertical space by showing full descriptions of all starred items. Now on
<768px: descriptions hidden, only 2 items shown, reduced padding.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-03-28 03:52:53 +01:00
parent 2b82ad52d9
commit 07baf43c56
2 changed files with 73 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
static/css/microsoft-fluent.css
View File

@ -989,4 +989,66 @@ small, .small { font-size: var(--fluent-font-size-caption); color: var(--fluent-
.theme-name {
font-weight: 500;
}
/* What's New Widget */
.whats-new-widget {
display: flex;
align-items: flex-start;
gap: var(--spacing-md);
background: var(--surface);
border: 1px solid var(--border-color, #e5e7eb);
border-left: 4px solid var(--primary);
border-radius: var(--radius-lg);
padding: var(--spacing-md) var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
.whats-new-icon {
font-size: 1.5rem;
flex-shrink: 0;
margin-top: 2px;
}
.whats-new-items {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-top: 4px;
}
.whats-new-item {
padding: 3px 0;
}
.whats-new-link {
color: var(--primary);
font-weight: 500;
font-size: var(--font-size-sm);
white-space: nowrap;
flex-shrink: 0;
text-decoration: none;
margin-top: 2px;
}
.whats-new-link:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.whats-new-widget {
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
}
.whats-new-icon {
font-size: 1.2rem;
}
.whats-new-desc {
display: none;
}
.whats-new-extra {
display: none;
}
}

19
templates/index.html
View File

@ -967,14 +967,14 @@
<!-- Co nowego na platformie -->
{% if latest_release %}
<div style="display: flex; align-items: flex-start; gap: var(--spacing-md); background: var(--surface); border: 1px solid var(--border-color, #e5e7eb); border-left: 4px solid var(--primary); border-radius: var(--radius-lg); padding: var(--spacing-md) var(--spacing-lg); margin-bottom: var(--spacing-lg);">
<div style="font-size: 1.5rem; flex-shrink: 0; margin-top: 2px;">&#10024;</div>
<div class="whats-new-widget">
<div class="whats-new-icon">&#10024;</div>
<div style="flex: 1; min-width: 0;">
<div style="display: flex; align-items: baseline; gap: var(--spacing-sm); flex-wrap: wrap;">
<span style="font-weight: 600; color: var(--text-primary);">Co nowego na platformie?</span>
<span style="font-size: var(--font-size-xs); color: var(--text-secondary);">{{ latest_release.version }} &middot; {{ latest_release.date }}</span>
</div>
<div style="font-size: var(--font-size-sm); color: var(--text-secondary); margin-top: 4px;">
<div class="whats-new-items">
{% set all_items = (latest_release.new or []) + (latest_release.improve or []) %}
{% set starred = [] %}
{% for item in all_items %}{% if item.startswith('★') %}{% if starred.append(item) %}{% endif %}{% endif %}{% endfor %}
@ -983,9 +983,10 @@
{% for item in starred %}
{% set item_title = item|striptags|replace('★ ', '') %}
{% set item_title_short = item_title.split(' - ')[0]|trim %}
{% set item_desc = item_title.split(' - ')[1]|trim if ' - ' in item_title else '' %}
{% set link = starred_links.get(item_title_short, '') if starred_links.get is defined else '' %}
<div style="padding: 3px 0;">
{{ item|safe }}
<div class="whats-new-item{% if loop.index > 2 %} whats-new-extra{% endif %}">
★ <strong>{{ item_title_short }}</strong><span class="whats-new-desc">{{ ' - ' + item_desc if item_desc else '' }}</span>
{% if link %}
<a href="{{ link }}" style="color: var(--primary); font-weight: 500; text-decoration: none; margin-left: 6px; font-size: var(--font-size-xs);" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Wypróbuj &rarr;</a>
{% endif %}
@ -997,14 +998,16 @@
{% endif %}
{% set total_changes = (latest_release.new|length if latest_release.new else 0) + (latest_release.improve|length if latest_release.improve else 0) + (latest_release.fix|length if latest_release.fix else 0) %}
{% set starred_count = starred|length %}
{% if total_changes > starred_count and starred_count > 0 %}
{% set hidden_starred = starred|length - 2 if starred|length > 2 else 0 %}
{% set extra_count = total_changes - starred_count + hidden_starred %}
{% if extra_count > 0 %}
<div style="margin-top: 4px;">
<a href="{{ url_for('release_notes') }}" style="color: var(--primary); font-weight: 500; text-decoration: none; font-size: var(--font-size-sm);" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">+ {{ total_changes - starred_count }} {{ 'inna zmiana' if total_changes - starred_count == 1 else ('inne zmiany' if total_changes - starred_count < 5 else 'innych zmian') }} &rarr;</a>
<a href="{{ url_for('release_notes') }}" style="color: var(--primary); font-weight: 500; text-decoration: none; font-size: var(--font-size-sm);" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">+ {{ extra_count }} {{ 'inna zmiana' if extra_count == 1 else ('inne zmiany' if extra_count < 5 else 'innych zmian') }} &rarr;</a>
</div>
{% endif %}
</div>
</div>
<a href="{{ url_for('release_notes') }}" style="color: var(--primary); font-weight: 500; font-size: var(--font-size-sm); white-space: nowrap; flex-shrink: 0; text-decoration: none; margin-top: 2px;" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'">Zobacz wszystko &rarr;</a>
<a href="{{ url_for('release_notes') }}" class="whats-new-link">Zobacz wszystko &rarr;</a>
</div>
{% endif %}