glitchy-tozier / osocalc.org Goto Github PK

When the black and the orange line cross, this intersection should be highlighted by a circle and a line that goes all the way down to the year-count.

Current chart:

Goal: something like this:

(obviously the red lines shouldn't be a part of the design)

Basically make them red if the JavaScript-code detects that the input isn't a number.

Currently, if there is some faulty input (like a number-field that contains letters), it gets focused and the webpage scrolls there.

However, at least in Firefox, this input doesn't scroll into the middle of the screen. Instead, scrolling stops once the input is barely visible at the top of the screen. This causes the error-toast to (at least partially) hide the input.

It would be great if the input scrolled to about... 40% of the screen height, and then stayed there, in the middle of the screen.
Currently unsure how to accomplish that though.

When resizing the window, at some width the input-fields of the "General Data"-section still are positioned within three columns, but one label is too long and thus adds a line-break. This then displaces the input-field, making it look out of place compared to the neighboring inputs.

Not sure how to fix this issue though, as all those labels are within their own columns. I might be able to do some hacks with JavaScript by listening for a change in height of the first label and then giving all other labels of that row the same height. I would love to find an easier solution though.