Dev Diary 2020.03.29 – Components - davidhorm/wavelength GitHub Wiki
Lets actually do some project work.
I got to do some funky math to align the elements the way I want them to. I initially started doing the math offline, but then I remembered some random blog somewhere that said CSS % should only be in increments of 25% or something like that. And here I am making something 43.07% that wouldn't make any sense if I needed to update this in the future. So I'll break that up into it's own function with named variables.
Random Aside: I was thinking maybe I could use image-size-loader since most of the math is based off of the existing sizes, but there's a specific custom measurement I need, so might as well hardcode all of the measurements than figure out how to use this now.
I set the overflow to hidden. I was thinking about masking the bottom part of the gauge, i.e. between the last dash and the bottom of the image. I tried clipping the target image, but the clip moved with the image. I was wondering if a mask would work, but decided the overflow is good enough. Time to keep moving on!
I created a component to hold the controls, state, and component. The