morgane/EverShelf
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

Banner: adapt expired icon/color/title to safety level (non-alarmist)

Browse Source 
- ok level (long-life/freezer safe): green banner, ✅ icon, 'Scaduto (ancora ok)'
- warning level: amber banner, 👀 icon, 'Scaduto (controlla)'
- danger level: unchanged red 🚫 banner
- Added banner-expired-ok / banner-expired-warning CSS variants
- Added expiry.expired_suffix_ok / expired_suffix_warning i18n keys (IT/EN/DE)
- Updated README and CHANGELOG
This commit is contained in:
dadaloop82
2026-04-30 05:21:50 +00:00
parent 9249a2f936
commit 8359b14931
7 changed files with 57 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/style.css
+22
View File
@@ -5641,6 +5641,28 @@ body {
background: #fee2e2;
color: #dc2626;
}
.alert-banner.banner-expired-ok {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border-color: #16a34a;
}
.banner-expired-ok .alert-banner-title {
color: #14532d;
}
.banner-expired-ok .alert-banner-counter {
color: #15803d;
}
.banner-expired-ok .banner-dot.active { background: #16a34a; }
.alert-banner.banner-expired-warning {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
border-color: #d97706;
}
.banner-expired-warning .alert-banner-title {
color: #78350f;
}
.banner-expired-warning .alert-banner-counter {
color: #92400e;
}
.banner-expired-warning .banner-dot.active { background: #d97706; }
.alert-banner.banner-expired-danger {
background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
border-color: #b91c1c;
assets/js/app.js
+16 -5
View File
@@ -2840,11 +2840,22 @@ function renderBannerItem() {
? t('expiry.expired_today_long')
: t('expiry.expired_ago_long').replace('{n}', item.days_expired);
const safety = getExpiredSafety(item, item.days_expired);
banner.className = safety.level === 'danger'
? 'alert-banner banner-expired banner-expired-danger'
: 'alert-banner banner-expired';
iconEl.textContent = '🚫';
titleEl.textContent = `${item.name}${item.brand ? ' (' + item.brand + ')' : ''} ${t('expiry.expired_suffix')}`;
if (safety.level === 'danger') {
banner.className = 'alert-banner banner-expired banner-expired-danger';
iconEl.textContent = '🚫';
} else if (safety.level === 'warning') {
banner.className = 'alert-banner banner-expired banner-expired-warning';
iconEl.textContent = '👀';
} else {
banner.className = 'alert-banner banner-expired banner-expired-ok';
iconEl.textContent = '✅';
}
const expiredSuffix = safety.level === 'ok'
? t('expiry.expired_suffix_ok')
: safety.level === 'warning'
? t('expiry.expired_suffix_warning')
: t('expiry.expired_suffix');
titleEl.textContent = `${item.name}${item.brand ? ' (' + item.brand + ')' : ''} ${expiredSuffix}`;
const baseDetail = t('dashboard.banner_expired_detail').replace('{when}', daysText).replace('{qty}', qtyDisplay);
detailEl.innerHTML = `${baseDetail} <span class="banner-safety-tip banner-safety-${safety.level}">${safety.icon} ${safety.tip}</span>`;
let btns = '';