New UI main page

[amclain]

Resolves #78

Adjustments & Notes

• The design for the list of animation types is currently in flux, so exposing a mechanism to retrieve their names in the UI would add code that we would need to refactor. To avoid this, I have kept the buttons to cycle to the previous/next animation in this iteration.
  • Style the select element options list (Style the select element options list #99)
• I have avoided creating a custom options list for the select box because it was not possible with pure CSS and according to tailwind, "Custom select controls like this require a considerable amount of JS to implement from scratch. We're planning to build some low-level libraries to make this easier with popular frameworks [...]".^link It may be simpler to wait for the tailwind helper library to be released before attempting this.
• I have omitted the menu icon in the nav bar because there are no other pages to navigate to yet.
• I have omitted the IP address of the hardware in the UI because it may be unnecessary information. The browser connected via xebow.local, and if the connection were down there would be no way to get to the UI to see this information.

Screenshot

[amclain]

I copied in the entire lato.scss file, made the necessary changes for this project, and commented out the fonts we aren't using. As much as I try to avoid committing commented code, this should be at low-risk of changing and sets the next developer up to only have to uncomment the code if we add another lato font to the project (like italics).

[vanvoljg]

I'm pretty okay with it. There's not a lack of space in these devices, so this is fine.

[amclain]

Do we need to keep the boilerplate live view styling around, or should I delete it?

[pthompson]

You probably want to keep or modify the styling for the feedback, phx-click-loading, phx-disconnected, and alert classes.

[amclain]

👍 Thanks!

[amclain]

I'm going to hold off on updating this branch to master until #97 is in to avoid merge commit spam.

[vanvoljg]

Thank you, this looks great!

I left a couple tiny comments, nothing blocking.

There's something in the styling that shifts the keypad to the right when it renders the configuration section. I don't know if that's intentional, but it's worth noting to fix for later.

[vanvoljg]

I'm pretty okay with it. There's not a lack of space in these devices, so this is fine.

[doughsay]

💯