Weather Card: Beautify by zsarnett · Pull Request #5387 · home-assistant/frontend

zsarnett · 2020-03-31T22:02:04Z

Proposed change

New

Type of change

Dependency upgrade
Bugfix (non-breaking change which fixes an issue)
New feature (thank you!)
Breaking change (fix/feature causing existing functionality to break)
Code quality improvements to existing code or addition of tests

Example configuration

- entity: weather.dark_sky
  type: weather-forecast
- type: weather-forecast
  entity: weather.dark_sky
  show_forecast: false

Additional information

Link to documentation pull request:

Checklist

The code change is tested and works locally.
There is no commented out code in this PR.
Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

Documentation added/updated for www.home-assistant.io

zsarnett · 2020-04-01T00:05:06Z

There a few hitches in the gif. Just because with the recorder and the speed I am changing the size it doesn't catch up

Misiu · 2020-04-01T06:30:08Z

What about humidity and wind speed? Are those going to be displayed (if available)?

zsarnett · 2020-04-01T13:25:57Z

Those attributes will be available via more-info window. With all of our cards the goal should not to show all details available but the most important so the card is glancable and more information can be found my clicking the card

zsarnett · 2020-04-01T13:27:07Z

Technically, the attributes will be shown in this priority:

Extrema
Precipitation
Humidity
None

zsarnett · 2020-04-01T23:17:54Z

bramkragten · 2020-04-08T12:18:20Z

+      this.removeAttribute("verynarrow");
+    }
+    if (card.offsetWidth < 200) {
+      this.setAttribute("veryverynarrow", "");


Do we need veryverynarrow? Can't we just use verynarrow?

Very very narrow is to deal with times when its in a horizontal stack on a phone. Makes the icon and temp stacked nicely in the center

zsarnett · 2020-04-20T00:28:54Z

Thank you to cgtobi (I cant find your github username) for the new images that don't include a shadow

zsarnett · 2020-04-20T00:29:35Z

@bramkragten This is ready for review.

bramkragten · 2020-04-21T15:30:05Z

  }

+  get _show_forecast(): boolean {
+    return this._config!.show_forecast || true;


This is a bool, so it will always return true now.

…t-card-editor.ts Co-Authored-By: Bram Kragten <mail@bramkragten.nl>

…tant-polymer into weather-card

bramkragten · 2020-04-21T19:26:29Z

-  get _show_forecast(): boolean {
-    return this._config!.show_forecast || true;
-  }


This might be still needed for the check in _valueChanged?

bramkragten · 2020-04-21T19:27:45Z

Comment on the layout, I think the left and right side should be aligned, now the right is higher than the left.

zsarnett · 2020-04-22T03:01:51Z

bramkragten · 2020-04-22T08:54:23Z

+  }
+
  public getCardSize(): number {
    return 4;


This should change depending on if we show forecast

bramkragten · 2020-04-22T08:56:20Z

+    const forecast = stateObj.attributes.forecast?.length
+      ? stateObj.attributes.forecast.slice(0, this._narrow ? 3 : 5)
      : undefined;

+    let hourly: boolean | undefined;
+
+    if (forecast?.length && forecast?.length > 1) {
+      const date1 = new Date(forecast[0].datetime);
+      const date2 = new Date(forecast[1].datetime);
+      const timeDiff = date2.getTime() - date1.getTime();
+
+      hourly = timeDiff < DAY_IN_MILLISECONDS;
+    }


We should only do this if we are going to show the forecast

bramkragten · 2020-04-22T09:12:10Z

In edit mode the card is always rendered as veryverynarrow because the card doesn't get display: block from hui-card-options

bramkragten · 2020-04-22T09:45:31Z

Is that a weird cut off shadow in the png?

cgtobi · 2020-04-23T21:48:33Z

Great work, my github handle is @cgtobi ;-)

homeassistant added the cla-signed label Mar 31, 2020

zsarnett changed the title ~~Weather card~~ Weather Card: Beautify Apr 1, 2020

zsarnett commented Apr 1, 2020

View reviewed changes

Comment thread src/panels/lovelace/cards/hui-weather-forecast-card.ts Outdated

bramkragten reviewed Apr 8, 2020

View reviewed changes

Comment thread src/panels/lovelace/cards/hui-weather-forecast-card.ts Outdated

bramkragten reviewed Apr 8, 2020

View reviewed changes

Comment thread src/panels/lovelace/cards/hui-weather-forecast-card.ts Outdated

bramkragten reviewed Apr 8, 2020

View reviewed changes

Comment thread src/panels/lovelace/cards/hui-weather-forecast-card.ts Outdated

bramkragten reviewed Apr 8, 2020

View reviewed changes

zsarnett added 16 commits April 18, 2020 18:56

Weather card

98dc244

Updates

cf0637e

Remove Precipitation from forecast

5d03ee9

Weather Card :)

74f12aa

Fix no breaking changes

e2fd8da

Size styles

07acd80

Space

5b93fc8

Fix some overlap

bd9e8ba

Unavailable

cdcc679

New unavailable

39eb728

Changed to check if less than day

3db4d95

Updates

e368ffc

oops

6457846

Little clean up

e3c37b7

styling

d8ac338

Reviews

584703c

zsarnett force-pushed the weather-card branch from b42b163 to 584703c Compare April 18, 2020 22:58

Fix merge

fd833c0

zsarnett added 3 commits April 18, 2020 19:14

Lint

51dc944

eslint

25e6a89

New images

6c9bb81

bramkragten reviewed Apr 21, 2020

View reviewed changes

Comment thread src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts Outdated

zsarnett and others added 3 commits April 21, 2020 13:42

Update src/panels/lovelace/editor/config-elements/hui-weather-forecas…

d7ba1eb

…t-card-editor.ts Co-Authored-By: Bram Kragten <mail@bramkragten.nl>

Reviews

14f5dae

Merge branch 'weather-card' of https://github.com/zsarnett/home-assis…

a014870

…tant-polymer into weather-card

bramkragten reviewed Apr 21, 2020

View reviewed changes

Reviews

24d4b31

bramkragten reviewed Apr 22, 2020

View reviewed changes

Comments

da6026a

bramkragten merged commit fdf7b51 into home-assistant:dev Apr 22, 2020

bramkragten mentioned this pull request Apr 22, 2020

20200422.0 #5586

Merged

lock Bot locked and limited conversation to collaborators Apr 25, 2020

zsarnett deleted the weather-card branch May 3, 2020 03:07

Conversation

zsarnett commented Mar 31, 2020

Proposed change

Previous

New

Type of change

Example configuration

Additional information

Checklist

Uh oh!

zsarnett commented Apr 1, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Misiu commented Apr 1, 2020

Uh oh!

zsarnett commented Apr 1, 2020

Uh oh!

zsarnett commented Apr 1, 2020

Uh oh!

Uh oh!

zsarnett commented Apr 1, 2020

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bramkragten Apr 8, 2020

Choose a reason for hiding this comment

Uh oh!

zsarnett Apr 8, 2020

Choose a reason for hiding this comment

Uh oh!

zsarnett commented Apr 20, 2020

Uh oh!

zsarnett commented Apr 20, 2020

Uh oh!

bramkragten Apr 21, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bramkragten Apr 21, 2020

Choose a reason for hiding this comment

Uh oh!

bramkragten commented Apr 21, 2020

Uh oh!

zsarnett commented Apr 22, 2020

Uh oh!

bramkragten Apr 22, 2020

Choose a reason for hiding this comment

Uh oh!

bramkragten Apr 22, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bramkragten commented Apr 22, 2020

Uh oh!

bramkragten commented Apr 22, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cgtobi commented Apr 23, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

zsarnett commented Apr 1, 2020 •

edited

Loading

bramkragten Apr 22, 2020 •

edited

Loading

bramkragten commented Apr 22, 2020 •

edited

Loading

cgtobi commented Apr 23, 2020 •

edited

Loading