Small proposed change to hourly weather precipitation probability styling

Hi!

I'd like to propose a small change to the hourly weather XML regarding the precipitation probability. I've implemented the module with some style changes which has mostly gone pretty smoothly. The only issue I've had is the slightly clunky 100 % or 80 % text. Some slightly more powerful customisation would be really handy so we can do something like below:

Nearly all of the screenshot is doable with a custom CSS file. Unfortunately, I had to mess with the browser DOM to get the probability to look reasonable. Even ::after with content: '%'; is unhelpful here because it doesn't technically go after the element, it goes inside it at the end (so the same problem).

I've not used nunchucks before but I think this is possible without breaking any backwards compatibility. Replacing these two lines respectively should work:

MagicMirror/modules/default/weather/hourly.njk

Line 31 in 118e212

{{ hour.precipitationProbability | unit('precip', '%') }} <span class="precipitation-prob-unit">%</span>

MagicMirror/modules/default/weather/weatherutils.js

Line 34 in 118e212

if (valueUnit === "%") return `${value.toFixed(0)} ${valueUnit}`;

if (valueUnit === "%") return `${value.toFixed(0)}`;

It may need a small bit of additional styling like a margin left on the % icon to keep the gap but that should also be simple.

I would have opened a PR but it seemed worth asking here first.

Thanks.

Hi and thanks for your input. Can you provide your custom code so I can take a look at the propsoed changes myself?
I do like the style you are going for, maybe we can cook something up together

Sure. I took inspiration from the hourly widget on the iOS weather app. The CSS is a little janky but it's not all suprising considering it's a complete flip of the current layout. We could probably do something a lot cleaner if you want to update the default design.

    {
      // https://docs.magicmirror.builders/modules/weather.html
      module: "weather",
      position: "top_left",
      config: {
        type: "hourly",
        roundTemp: true,
        appendLocationNameToHeader: false,
        showPrecipitationProbability: true,

        fade: false,
        maxEntries: 11,

        weatherEndpoint: "/onecall",
        apiKey: "${WEATHER_API_KEY}",
        lat: "${WEATHER_LAT}",
        lon: "${WEATHER_LON}"
      }
    },

/* MagicMirror² Custom CSS | MIT Licensed */
/* Beware that properties cannot be unitless. E.g. 'width: 0' -> 'width: 0px' */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root {
  --font-primary: "Montserrat";
  --font-secondary: "Montserrat";
}

#module_0_clock {
  .digital {
    display: flex;
    flex-direction: column-reverse;
  }
}

#module_1_weather {
  * {
    font-size: 16px;
  }

  .small > tbody {
    display: flex;
    margin-left: -10px;
  }

  .small > tbody > tr {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 40px;
  }

  .day {
    font-family: "Space Mono";
    overflow-y: hidden;
    width: 0px;
    text-indent: 2px;
    margin-left: -3px;
  }

  .precipitation-prob {
    color: var(--color-text);
    font-family: "Space Mono";
    text-align: center;
    font-size: 14px;

    overflow-y: hidden;
    padding: 0px;
    height: 24px;
    width: 40px;
  }

  .weather-icon {
    order: 1;
    padding: 0;

    .wi-day-sunny               { color: #ffff00; }
    .wi-day-cloudy              { color: #909090; }
    .wi-cloudy                  { color: #909090; }
    .wi-cloudy-windy            { color: #909090; }
    .wi-showers                 { color: #00e1ff; }
    .wi-rain                    { color: #00e1ff; }
    .wi-thunderstorm            { color: #00e1ff; }
    .wi-snow                    { color: #ffffff; }
    .wi-fog                     { color: #ffffff; }

    .wi-night-clear             { color: #ffffff; }
    .wi-night-cloudy            { color: #909090; }
    .wi-night-alt-cloudy-windy  { color: #909090; }
    .wi-night-showers           { color: #00e1ff; }
    .wi-night-rain              { color: #00e1ff; }
    .wi-night-thunderstorm      { color: #00e1ff; }
    .wi-night-snow              { color: #ffffff; }
  }
}

nice. just fyi, you can use the classes property to uniqely identify each module so you are not exposed to the position id #

module:'clock',
classes:'foo',
config:{.....

then css is
.foo
instead of
#module_0_clock

which will change if the order changes in config.js

That's neat. I must have missed that in the docs. Thanks