Fix bug where temp indicator was sometimes hidden

pkissling · Mar 29, 2023 · 5feb2f1 · 5feb2f1
1 parent 7b969d3
commit 5feb2f1
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/src/clock-weather-card.ts b/src/clock-weather-card.ts
@@ -242,11 +242,12 @@ export class ClockWeatherCard extends LitElement {
 
   private renderForecastTemperatureBar(gradientRange: Rgb[], minTemp: number, maxTemp: number, minTempDay: number, maxTempDay: number, isNow: boolean, currentTemp: number | null): TemplateResult {
     const { startPercent, endPercent } = this.calculateBarRangePercents(minTemp, maxTemp, minTempDay, maxTempDay)
+    const moveRight = maxTemp === minTemp ? 0 : (minTempDay - minTemp) / (maxTemp - minTemp)
     return html`
       <forecast-temperature-bar>
         <forecast-temperature-bar-background> </forecast-temperature-bar-background>
         <forecast-temperature-bar-range
-          style="--start-percent: ${startPercent}%; --end-percent: ${endPercent}%; --gradient: ${this.gradient(
+          style="--move-right: ${moveRight}; --start-percent: ${startPercent}%; --end-percent: ${endPercent}%; --gradient: ${this.gradient(
             gradientRange,
             startPercent,
             endPercent,

diff --git a/src/styles.ts b/src/styles.ts
@@ -108,6 +108,7 @@ export default css`
     background: linear-gradient(to right, var(--gradient));
     overflow: hidden;
     min-width: var(--bar-height);
+    margin-left: calc(var(--move-right) * -1 * var(--bar-height));
   }
 
   forecast-temperature-bar-current-indicator {