en.javascript.info icon indicating copy to clipboard operation
en.javascript.info copied to clipboard

Page styling

Open Nickwiz opened this issue 2 years ago • 2 comments

First off: 100 and 1 thanks for the awesome work.

Some thoughts on the page rendering.

  1. Show visited links in a different color. a. It helps navigation, memory re-calls etc.
  2. Keep site toolbar visible at all times. a. One have a quick link to the front-page without having to scroll to top. b. The search is readily available.
  3. Display list items on front page as block a. As it is now items overflowing get a quirked rendering by one list item being "appended" to the next column and partially overlay the next item. I.e. like pt 3.2 here: image (I have custom color on visited links in image) With custom CSS forcing block view: image

I use a custom style-sheet with Stylus to fix this but some of it might be worth a thought for general design / options.

a:visited {
    color: #955;
}
.frontpage-content .list-sub__item {
    display: block;
}
.sitetoolbar {
	position: sticky;
	top: 0;
}

Nickwiz avatar Jun 07 '22 17:06 Nickwiz

Thanks for your ideas, see the comments below:

  1. We are thinking about better progress tracking, colour for visited links is just a part of it. We use different colour in the site map already and might port this to the homepage as well.
  2. Currently we save the state of the sidebar, so if you want to have it visible all the time, you can just expand it and leave it as is. At the same time it provides some level of flexibility for people with smaller screens.
  3. I can't reproduce the issue with 3.2. @GSemikozov what do you think?

Bezart avatar Jun 23 '22 11:06 Bezart

Thanks for feedback.

  1. I meant the top-bar (i.e. the one with link to front-page / index + search). It's surely different how people uses the site. Personally I jump a lot around and sometimes go back and forth. Hence the index / front is good. But only a thought.

  1. I checked the issue with long topics wrapping to next line on front-page (E.g. 3.2 under Browser: Document, Events, Interfaces) again, and it is till wrapping.

Linux / Firefox v102 (Developer edition) also tested with v99 and same issue there.

Also tested with Vivaldi, and it renders fine, so looks like either a Firefox bug / quirk or that they have some difference of opinion on how the rendering is to be done.

Anyhow: from testing. It is the <li> elements: <li class="list-sub__item"> which have class:

 /* Inactive ones due to compatibility removed */
.frontpage-content .list-sub__item {
 counter-increment           : b;
 break-inside                : avoid;
 margin                      : 0;
 display                     : flex;
}

The wrapping disappear if I change display or overflow. For example:

  • display set to inline-flex, block, inline-block instead of flex or
  • Add either of: overflow, overflow-x, overflow-y with either auto or hidden

Also if I set height to a fixed height that is a few pixels higher then the one "given" by the layout engine.

Nickwiz avatar Jun 27 '22 06:06 Nickwiz