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

Waste section: single stacked comparison bar instead of two rows

Browse Source
This commit is contained in:
dadaloop82
2026-04-29 16:13:43 +00:00
parent da46fec174
commit 85274948b4
2 changed files with 49 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/style.css
+40 -41
View File
@@ -440,42 +440,41 @@ body {
.aw-grade-c { background: #fb923c; }
.aw-grade-d { background: #dc2626; }
/* ── Dual animated comparison bars ──────────────────────── */
/* ── Stacked single comparison bar ──────────────────────── */
.aw-cmp-wrap { margin-bottom: 10px; }
.aw-cmp-bar-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.aw-cmp-bar-label {
font-size: 0.68rem;
font-weight: 700;
width: 42px;
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.aw-cmp-bar-label-you { color: #16a34a; }
.aw-cmp-bar-label-avg { color: #f97316; }
/* Track = the outer gray rail */
.aw-cmp-bar-track {
flex: 1;
height: 14px;
background: rgba(0,0,0,.06);
border-radius: 7px;
overflow: hidden;
position: relative;
height: 18px;
background: rgba(0,0,0,.07);
border-radius: 9px;
overflow: hidden; /* clip both fills */
margin-bottom: 5px;
}
.aw-cmp-bar-fill {
height: 100%;
border-radius: 7px;
width: 0; /* starts at 0 — animated via JS */
/* Avg (orange) fills from the left — always the wider/background layer */
.aw-cmp-bar-fill-avg {
position: absolute;
left: 0; top: 0; bottom: 0;
border-radius: 9px;
width: 0;
background: linear-gradient(90deg, #fdba74, #f97316);
transition: width 1.1s cubic-bezier(.4,0,.2,1);
position: relative;
overflow: hidden;
}
/* Shimmer overlay */
.aw-cmp-bar-fill::after {
/* Your bar (green) sits on top, same height */
.aw-cmp-bar-fill-you {
position: absolute;
left: 0; top: 0; bottom: 0;
border-radius: 9px;
width: 0;
background: linear-gradient(90deg, #4ade80, #16a34a);
transition: width 1.1s cubic-bezier(.4,0,.2,1) 0.15s;
z-index: 1;
overflow: hidden;
}
/* Shimmer on both fills */
.aw-cmp-bar-fill-avg::after,
.aw-cmp-bar-fill-you::after {
content: '';
position: absolute;
inset: 0;
@@ -484,22 +483,22 @@ body {
opacity: 0;
transition: opacity 0.5s 1s;
}
.aw-cmp-bar-fill.loaded::after { opacity: 1; }
.aw-cmp-bar-fill-avg.loaded::after,
.aw-cmp-bar-fill-you.loaded::after { opacity: 1; }
@keyframes aw-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
100% { transform: translateX(200%); }
}
.aw-cmp-bar-fill-you { background: linear-gradient(90deg, #4ade80, #16a34a); }
.aw-cmp-bar-fill-avg { background: linear-gradient(90deg, #fdba74, #f97316); }
.aw-cmp-bar-pct {
font-size: 0.8rem;
font-weight: 800;
width: 30px;
text-align: right;
flex-shrink: 0;
/* Labels row below the bar */
.aw-cmp-legend {
display: flex;
justify-content: space-between;
font-size: 0.68rem;
font-weight: 600;
margin-bottom: 3px;
}
.aw-cmp-bar-pct-you { color: #16a34a; }
.aw-cmp-bar-pct-avg { color: #f97316; }
.aw-cmp-legend-you { color: #16a34a; }
.aw-cmp-legend-avg { color: #f97316; }
/* Inline status below bars */
.aw-status-inline {
font-size: 0.75rem;
assets/js/app.js
+8 -14
View File
@@ -2310,10 +2310,10 @@ function _renderAntiWasteSection(used30, wasted30, usedP30, wastedP30, usedP60,
statusCls = 'aw-status-ok';
}
// Dual animated comparison bars — scaled so the larger value fills ~88% of its track
// Single stacked bar: avg always fills 88% of track width; you fills proportionally inside
const scale = Math.max(myRate, avgRate, 1);
const youPct = +((myRate / scale) * 88).toFixed(1);
const avgPct = +((avgRate / scale) * 88).toFixed(1);
const avgPct = 88; // avg always = reference width
const youPct = +((myRate / scale) * 88).toFixed(1); // your bar, same scale
const youLabel = t('antiwaste.you').split(' ')[0]; // "Tu" / "You" / "Du"
// Trend cards
@@ -2379,19 +2379,13 @@ function _renderAntiWasteSection(used30, wasted30, usedP30, wastedP30, usedP60,
</div>
<div class="aw-cmp-wrap">
<div class="aw-cmp-bar-row">
<span class="aw-cmp-bar-label aw-cmp-bar-label-you">${youLabel}</span>
<div class="aw-cmp-bar-track">
<div id="aw-bar-you" class="aw-cmp-bar-fill aw-cmp-bar-fill-you"></div>
<div id="aw-bar-avg" class="aw-cmp-bar-fill-avg"></div>
<div id="aw-bar-you" class="aw-cmp-bar-fill-you"></div>
</div>
<span class="aw-cmp-bar-pct aw-cmp-bar-pct-you">${myRate}%</span>
</div>
<div class="aw-cmp-bar-row">
<span class="aw-cmp-bar-label aw-cmp-bar-label-avg">${country}</span>
<div class="aw-cmp-bar-track">
<div id="aw-bar-avg" class="aw-cmp-bar-fill aw-cmp-bar-fill-avg"></div>
</div>
<span class="aw-cmp-bar-pct aw-cmp-bar-pct-avg">${avgRate}%</span>
<div class="aw-cmp-legend">
<span class="aw-cmp-legend-you">▮ ${youLabel} <strong>${myRate}%</strong></span>
<span class="aw-cmp-legend-avg">${country} <strong>${avgRate}%</strong> ▮</span>
</div>
<p class="aw-status-inline ${statusCls}">${statusMsg}</p>
</div>