Devlog #2. Building the sidebar consoleI
spent this session working on the sidebar panel. The layout is like a
“mission control”. A console on the left and a globe on the right. I
used CSS grid to achieve this. The console has a fixed width of 392px
and the rest of the space goes to the globe.I
built the console piece by piece. First I added a header with a status
light. It’s green when live orange when theres a warning and red when
theres an error. It’s basic. It gets the job done.Then
I added rows to show data. I styled them like telemetry data with a
key-value pair format. I used a number format called tabular-nums. This
keeps the digits lined up properly when they update.I
also added some toggle buttons, location input fields and a table to
predict when the ISS will be visible from a location. I tried to use a
monospace font for the data and a regular sans font, for the labels.
This makes it feel like an instrument panel and less like a website.While
writing this I found a typo bug. I had written –line-2 in my root
variables. Used var(–line2) in a couple of places. It took me a while
to notice why some borders weren’t showing up. It was a mistake.Next I need to hook up ISS position data. I want to wire the readout rows to show numbers instead of placeholders.