Skip to content

fix(weather): reorder daily forecast columns #4118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MannXo wants to merge 4 commits into
base: develop
Choose a base branch
from
+58 −13
Open

fix(weather): reorder daily forecast columns #4118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
55f48c9
fix(weather): reorder daily forecast columns (#4117)
MannXo Apr 21, 2026
684d63e
test(weather): use class selectors for temp cells in forecast e2e tests
MannXo Apr 21, 2026
57c516c
fix(weather): restore forecast temp spacing
MannXo May 4, 2026
1e4c168
fix(weather): make forecast column order configurable
MannXo Jun 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions defaultmodules/weather/forecast.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% if forecast %}
{% set numSteps = forecast | calcNumSteps %}
{% set currentStep = 0 %}
<table class="{{ config.tableClass }}">
<table class="{{ config.tableClass }} weather-forecast">
{% if config.ignoreToday %}
{% set forecast = forecast.splice(1) %}
{% endif %}
Expand All @@ -21,20 +21,20 @@
<td class="bright weather-icon">
<span class="wi weathericon wi-{{ f.weatherType }}"></span>
</td>
<td class="align-right bright max-temp">{{ f.maxTemperature | roundValue | unit("temperature") | decimalSymbol }}</td>
<td class="align-right min-temp">{{ f.minTemperature | roundValue | unit("temperature") | decimalSymbol }}</td>
{% if config.showPrecipitationAmount %}
<td class="align-right bright precipitation-amount">{{ f.precipitationAmount | unit("precip", f.precipitationUnits) }}</td>
{% endif %}
{% if config.showPrecipitationProbability %}
<td class="align-right bright precipitation-prob">{{ f.precipitationProbability | unit('precip', '%') }}</td>
{% endif %}
<td class="align-right bright max-temp">{{ f.maxTemperature | roundValue | unit("temperature") | decimalSymbol }}</td>
{% if config.showUVIndex %}
<td class="align-right dimmed uv-index">
{{ f.uvIndex }}
<span class="wi dimmed weathericon wi-hot"></span>
</td>
{% endif %}
{% if config.showPrecipitationAmount %}
<td class="align-right bright precipitation-amount">{{ f.precipitationAmount | unit("precip", f.precipitationUnits) }}</td>
{% endif %}
{% if config.showPrecipitationProbability %}
<td class="align-right bright precipitation-prob">{{ f.precipitationProbability | unit('precip', '%') }}</td>
{% endif %}
</tr>
{% set currentStep = currentStep + 1 %}
{% endfor %}
Expand Down
39 changes: 38 additions & 1 deletion defaultmodules/weather/weather.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@
padding-bottom: 6px;
}

.weather .weather-forecast tr {
display: flex;
align-items: baseline;
}

.weather .day {
padding-left: 0;
padding-right: 25px;
Expand All @@ -22,10 +27,14 @@
}

.weather .min-temp {
padding-left: 20px;
padding-left: 0;
padding-right: 0;
}

.weather .max-temp {
padding-left: 20px;
}

.weather .precipitation-amount,
.weather .precipitation-prob,
.weather .humidity-hourly,
Expand All @@ -34,6 +43,34 @@
padding-right: 0;
}

.weather .weather-forecast .day {
order: var(--weather-forecast-day-order, 1);
}

.weather .weather-forecast .weather-icon {
order: var(--weather-forecast-icon-order, 2);
}

.weather .weather-forecast .min-temp {
order: var(--weather-forecast-min-temp-order, 3);
}

.weather .weather-forecast .max-temp {
order: var(--weather-forecast-max-temp-order, 4);
}

.weather .weather-forecast .uv-index {
order: var(--weather-forecast-uv-index-order, 5);
}

.weather .weather-forecast .precipitation-amount {
order: var(--weather-forecast-precipitation-amount-order, 6);
}

.weather .weather-forecast .precipitation-prob {
order: var(--weather-forecast-precipitation-prob-order, 7);
}

.weather tr.colored .min-temp {
color: #bcddff;
}
Expand Down
16 changes: 12 additions & 4 deletions tests/e2e/modules/weather_forecast_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@ describe("Weather module: Weather Forecast", () => {
const maxTemps = ["24.4°", "21.0°", "22.9°", "23.4°", "20.6°"];
for (const [index, temp] of maxTemps.entries()) {
it(`should render max temperature ${temp}`, async () => {
const maxTempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(3)`);
const maxTempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.max-temp`);
await expect(maxTempCell).toHaveText(temp);
});
}

const minTemps = ["15.3°", "13.6°", "13.8°", "13.9°", "10.9°"];
for (const [index, temp] of minTemps.entries()) {
it(`should render min temperature ${temp}`, async () => {
const minTempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(4)`);
const minTempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.min-temp`);
await expect(minTempCell).toHaveText(temp);
});
}
Expand Down Expand Up @@ -78,14 +78,22 @@ describe("Weather module: Weather Forecast", () => {
});

it("should render custom table class", async () => {
await expect(page.locator(".weather table.myTableClass")).toBeVisible();
await expect(page.locator(".weather table.myTableClass.weather-forecast")).toBeVisible();
});

it("should render colored rows", async () => {
const rows = page.locator(".weather table.myTableClass tr");
await expect(rows).toHaveCount(5);
});

it("should expose forecast column order through CSS", async () => {
const minTempCell = page.locator(".weather table.myTableClass tr:first-child td.min-temp");
const maxTempCell = page.locator(".weather table.myTableClass tr:first-child td.max-temp");

await expect(minTempCell).toHaveCSS("order", "3");
await expect(maxTempCell).toHaveCSS("order", "4");
});

const precipitations = [undefined, "2.51 mm"];
for (const [index, precipitation] of precipitations.entries()) {
if (precipitation) {
Expand All @@ -107,7 +115,7 @@ describe("Weather module: Weather Forecast", () => {
const temperatures = ["75_9°", "69_8°", "73_2°", "74_1°", "69_1°"];
for (const [index, temp] of temperatures.entries()) {
it(`should render custom decimalSymbol = '_' for temp ${temp}`, async () => {
const tempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td:nth-child(3)`);
const tempCell = page.locator(`.weather table.small tr:nth-child(${index + 1}) td.max-temp`);
await expect(tempCell).toHaveText(temp);
});
}
Expand Down