search

TryItOnline / tryitonline

The Try It Online family of online interpreters.
https://tryitonline.net
MIT License
539 stars 58 forks source link

Can't select certain text #80

Open MikeRich88 opened 4 years ago

MikeRich88 commented 4 years ago

https://tio.run/#hbcht

"Half Broken Car In Traffic" sounds interesting, I've never heard of it before. I want to Google that.

But I can't select the text. And I don't realize that the title is a link, because it's not blue or underlined or anything (but blue would look wrong there). And even when I realize that it's a link, it goes to a scary error page as of May 11th, 2020 because the certificate is 1 day too old (which is of course, the end of the world and most assuredly means the hax0rz are up in my int3rnetz). I only realize its a link when right-clicking on it for the inspector.

There was going to be a 4th thing here about how I typed it wrong and got frustrating results, but remarkably both Google and Bing show the correct results for minor variations. Even "Half Busted Car In Traffic" (without quotes) gets correct results at the top for Google.

Anyway, "-webkit-user-select: none" is being applied to * in the CSS "HEX-frontend.css", but then it's given back on some specific selectors. Probably safe to allow text selection on <h2> elements. Also, underline dang links. If you have to get right down to it, it's an accessibility issue. Having the link brighten a bit on mouse hover is not something available to people who use the mouse in an alternative way. It also totally fails on a tablet for example, but I think something like this could have great usefulness on a tablet which is otherwise "locked down".

I can do a pull request if you want.

(Is there some specific purpose to adding the HEX stuff to all the filenames? Some kind of versioning or cache-busting?)

Crystal-RainSlide commented 2 years ago

(Ref:)

https://github.com/TryItOnline/tryitonline/blob/898a41f69eeeff915b579bf4602b3ed9aea07910/usr/share/tio.run/frontend.css#L160

Crystal-RainSlide commented 2 years ago

I'd like to say, if we just look at the result, the overall style seems normal; but the CSS code, the way its whole visual is made up, is very, very, very terrible.

I was about to write some userstyle, to fix this user-select problem as it annoys me too, and maybe add a max-width to the page content... However, when I really look into it, to know about how should I wrote that userstyle, I got both confused and shocked.

Aside from this selection problem, it abuses relative length unit (%), abuses absolute layout a little, and the CSS code, it rather looks like some hack-ish userstyle, written for some bad webpages without proper class names and IDs, instead of an organized stylesheet, for an organized website.

The user-select thing should be fixed, but I think what the frontend really needs is a rewrite.