Forecast UI: no savings-modal rerender, fixed safari scroll overlays (#28660)

This commit is contained in:
Michael Geers 2026-03-30 17:46:26 +02:00 • committed by GitHub
parent 1850f805cb
commit 6115c08258
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 12 additions and 17 deletions

View file

@ -462,8 +462,8 @@ html:has(.modal.show) {
}
/* Safari renders non-overlay scrollbars above modal backdrops at compositor level */
body.modal-open .forecast-chart-scroll::-webkit-scrollbar {
opacity: 0;
body.modal-open .scroll-overlay-fix {
scrollbar-color: transparent transparent;
}
.cursor-pointer {

View file

@ -1,5 +1,5 @@
<template>
<div ref="scrollEl" class="forecast-chart-scroll" @scroll="onScroll">
<div ref="scrollEl" class="forecast-chart-scroll scroll-overlay-fix" @scroll="onScroll">
<div ref="chartEl" :style="{ height: '200px', width: chartWidth + 'px' }"></div>
</div>
</template>

View file

@ -1,5 +1,5 @@
<template>
<div ref="scrollEl" class="forecast-chart-scroll" @scroll="onScroll">
<div ref="scrollEl" class="forecast-chart-scroll scroll-overlay-fix" @scroll="onScroll">
<div ref="chartEl" :style="{ height: '200px', width: chartWidth + 'px' }"></div>
</div>
</template>

View file

@ -1,5 +1,5 @@
<template>
<div ref="scrollEl" class="forecast-chart-scroll" @scroll="onScroll">
<div ref="scrollEl" class="forecast-chart-scroll scroll-overlay-fix" @scroll="onScroll">
<div ref="chartEl" :style="{ height: '200px', width: chartWidth + 'px' }"></div>
</div>
</template>

View file

@ -1,7 +1,7 @@
<template>
<div class="root position-relative">
<div
class="chart position-relative"
class="chart scroll-overlay-fix position-relative"
:class="{ 'chart--with-target': targetText, inactive }"
>
<div

View file

@ -3,10 +3,9 @@
class="container px-4 safe-area-inset d-flex flex-column"
:class="{ 'empty-container': !forecastAvailable }"
>
<TopHeader v-if="forecastAvailable" :title="$t('forecast.modalTitle')" />
<TopHeader :title="$t('forecast.modalTitle')" />
<div v-if="!forecastAvailable" class="flex-grow-1 d-flex">
<div class="empty-box d-flex flex-column p-5">
<h2 class="fs-4 mb-4">{{ $t("forecast.empty.title") }}</h2>
<ul class="list-unstyled mb-4">
<li class="d-flex align-items-start gap-2 mb-3">
<shopicon-regular-sun

View file

@ -929,8 +929,7 @@
"co2": "Erfahre, wann Netzstrom in deiner Region sauber ist. Ladepläne werden auf niedrige Emissionen optimiert und CO₂-Einsparungen berechnet.",
"price": "Dynamischen Stromtarif konfigurieren, um Ladepläne automatisch zu optimieren und Einsparungen zu berechnen.",
"setup": "Tarife und Vorhersagen einrichten",
"solar": "Erwartete Solarproduktion für heute und die nächsten Tage. Wird in Zukunft auch für die automatische Ladeoptimierung verwendet.",
"title": "Tarife & Vorhersagen"
"solar": "Erwartete Solarproduktion für heute und die nächsten Tage. Wird in Zukunft auch für die automatische Ladeoptimierung verwendet."
},
"modalTitle": "Vorhersage",
"price": {

View file

@ -930,8 +930,7 @@
"co2": "See when grid energy in your region is clean. Charging plans will optimize for low emissions and calculate CO₂ savings.",
"price": "Configure your dynamic electricity tariff to automatically optimize charging plans and calculate savings.",
"setup": "Set up tariffs and forecasts",
"solar": "See expected solar production for today and the coming days. Will also be used for automatic charging optimization in the future.",
"title": "Tariffs & Forecasts"
"solar": "See expected solar production for today and the coming days. Will also be used for automatic charging optimization in the future."
},
"modalTitle": "Forecast",
"price": {

View file

@ -937,8 +937,7 @@
"co2": "Näytä milloin sähköverkon energia on puhdasta. Lataussuunnitelmissa optimoidaan alhaiset päästöt ja laskelmoidut CO₂-säästöt.",
"price": "Määritä vaihteleva energian hintasi optimoidaksesi automaattisesti lataussuunnitelmasi ja laskeaksesi käytetyn energian kustannukset.",
"setup": "Määritä hinnat ja ennusteet",
"solar": "Katso aurinkotuotannon ennuste täksi ja tuleviksi päiviksi. Käytetään tulevaisuudessa myös latauksien optimoitiin.",
"title": "Hinnat & ennusteet"
"solar": "Katso aurinkotuotannon ennuste täksi ja tuleviksi päiviksi. Käytetään tulevaisuudessa myös latauksien optimoitiin."
},
"modalTitle": "Ennuste",
"price": {

View file

@ -938,8 +938,7 @@
"co2": "Sužinokite, kada jūsų regione energija yra mažiausiai tarši. Įkrovimo planai bus optimizuoti mažiausiam išmetamųjų teršalų kiekiui, apskaičiuosime CO₂ sutaupymą.",
"price": "Sukonfigūruokite dinaminį elektros energijos tarifą, kad automatiškai optimizuotumėte įkrovimo planus ir apskaičiuotumėte sutaupytas lėšas.",
"setup": "Sukonfigūruoti tarifus ir prognozes",
"solar": "Prognozuojama saulės energijos gamyba šiandienai ir ateinančiomis dienomis. Ateityje taip pat bus naudojama automatiniam įkrovimo optimizavimui.",
"title": "Tarifai ir Prognozės"
"solar": "Prognozuojama saulės energijos gamyba šiandienai ir ateinančiomis dienomis. Ateityje taip pat bus naudojama automatiniam įkrovimo optimizavimui."
},
"modalTitle": "Prognozė",
"price": {

View file

@ -73,7 +73,7 @@ test.describe("bottom navigation", async () => {
await expect(page.getByRole("heading", { name: "Home Battery" })).toBeVisible();
await tabForecast.click();
await expect(page.getByRole("heading", { name: "Tariffs & Forecasts" })).toBeVisible();
await expect(page.getByRole("heading", { name: "Forecast" })).toBeVisible();
await tabSessions.click();
await expect(page.getByRole("heading", { name: "Sessions" })).toBeVisible();