acl-anthology icon indicating copy to clipboard operation
acl-anthology copied to clipboard

Published 20 hours ago • verified publisher icon acl-org

Update css & js

Open akoehn opened this issue 3 years ago • 32 comments

See commit messages for contents; mainly housekeeping and cleaning up a bit

akoehn avatar Jul 08 '21 14:07 akoehn

Build successful. You can preview it here: https://preview.aclanthology.org/update-css-js This preview will be removed when the branch is merged.

github-actions[bot] avatar Jul 08 '21 14:07 github-actions[bot]

This commit also fixes aria labels for the search box; forgot to mention that.

Together with a better caching policy for our assets and enabling http/2, this should make the site faster for slow connections. It is also the first step to proper minification of css and js.

akoehn avatar Jul 09 '21 07:07 akoehn

Good point regarding bootstrap CSS -- I will bump that as well.

Re FontAwesomeCDN: The problem is as follows: fa is a css and a font (.woff2) resource. When we use a CDN, we need to load both from the CDN. This means:

  • load html
  • see that we need fa css, request that
  • once fa css is there, request the font
  • for both, we load everything even though we only use a small subset

Now:

  • load html, css&font marked as preload
  • css is merged with our main css, no overhead there
  • font is requested from our site

With http/2, we only need a single connection in contrast to several and it does speed things up according to my measurements. Maybe we could also preload from the CDN, but then we rely on links to the fonts never changing in the externally hosted css.

When we serve fa ourselves, we can minify it and only serve the subset the anthology is actually using.

akoehn avatar Jul 09 '21 11:07 akoehn

Note that bumping the Bootstrap CSS is a bit more involved, and would probably require careful checking of the migration guide here: https://getbootstrap.com/docs/5.0/migration/

mbollmann avatar Jul 09 '21 11:07 mbollmann 

* css is merged with our main css, no overhead there

* font is requested from our site

Counterpoint would be that our CSS gets bigger, and the font always needs to be requested instead of potentially being reused from cache if the user already visited another site using FontAwesome before.

mbollmann avatar Jul 09 '21 11:07 mbollmann

I'll leave this one to you two to resolve.

mjpost avatar Jul 11 '21 15:07 mjpost

I made it a draft and will push this and that in the near future.

akoehn avatar Jul 12 '21 15:07 akoehn

It might also be a good time to update Hugo, if it's not too much extra work. Our version is getting a bit dated. We could make this a general housekeeping update.

mjpost avatar Jul 12 '21 15:07 mjpost

It might also be a good time to update Hugo

I already snuck in the relevant changes into this PR and use 0.85 locally :-)

akoehn avatar Jul 13 '21 07:07 akoehn

@akoehn any interest in updating this and pushing it through? I’ll do my best to do a fast turnaround on a review.

mjpost avatar Feb 14 '22 00:02 mjpost

Yes, I will continue to work on it soon-ish. Time to dust off my js&css skills from ~2004-2006 lol

akoehn avatar Feb 15 '22 19:02 akoehn

I rebased and force-pushed this branch because I did not want to merge one year of work. This is still WIP, as a lot of CSS has changed (also, jquery was dropped)

akoehn avatar Mar 17 '22 13:03 akoehn

I'm going through the CSS changes for bootstrap 5 and the behavior of badges has changed.

We are currently using badges in a lot of places where we provide a hyperlink (link to bibliography, code, PDF, ...) and bootstrap dropped support for hover on badges. I think they want badges to be non-clickable elements and push people to use buttons instead.

I tried using buttons but these are too big for the list view:

grafik

OTOH, the badges were quite small and maybe not that accessible. Thoughts?

akoehn avatar Mar 22 '22 10:03 akoehn

I don't see a good reason to change the styling; the badges are currently as high as the text that follows, so if people find them too small they'd probably enlarge the entire site anyway. But that's just my guess, I'm happy to hear of other's experiences.

You could argue that semantically, these indeed act like buttons, which might make a difference from a semantic XML/screenreader etc. perspective. I don't have enough experience with that.

If the current behavior (w.r.t. to hovering etc.) can only be replicated with buttons in BS5, my first thought would be to make a CSS class btn-badgelike or btn-tiny or something, to emulate the look of the old badges. I would start by copying the source for the btn-sm class, copy margin & padding values (and probably font size/style) from the old badges, and see where that gets us.

mbollmann avatar Mar 22 '22 12:03 mbollmann

There are two possible approaches:

  • make tiny buttons
  • make "buttonized" badges (i.e. make them react to hover again)

I think I prefer the first one because it is cleaner and also probably easier to implement (at least not harder). Interestingly, there was a btn-xs in BS4, but that, too, was dropped in BS5.

akoehn avatar Mar 22 '22 12:03 akoehn

+1 for doing the first one. Seems to make more sense from a semantic perspective.

mbollmann avatar Mar 22 '22 13:03 mbollmann

I finally got around to continue this transition (and re-learning css on the way), there is one thing I am struggling with: Some "buttons" (which partly used to be badges) have the class btn-attachment and badge-attachment, but I cannot find the definition of the classes. @mbollmann do you know this?

akoehn avatar Apr 20 '22 11:04 akoehn

I have pushed the current state. Known problems:

  • attachment button not rendered correctly (see Q above)
  • "more options" in the copy citations line is not working
  • cite -> preformatted not working

The last two are probably JS related, as bootstrap has dropped jquery; I have not started working on the js changes yet. Please have a look whether there is anything else not working as intended or not looking good.

akoehn avatar Apr 20 '22 12:04 akoehn

I finally got around to continue this transition (and re-learning css on the way), there is one thing I am struggling with: Some "buttons" (which partly used to be badges) have the class btn-attachment and badge-attachment, but I cannot find the definition of the classes. @mbollmann do you know this?

I think that used to be generated from the "attachment" theme color that's added in hugo/assets/css/main.scss.

I'm completely swamped with work at the moment so it'll be a while until I can take a closer look at the changes.

mbollmann avatar Apr 20 '22 12:04 mbollmann

Build successful. Some useful links:

This preview will be removed when the branch is merged.

github-actions[bot] avatar Apr 20 '22 12:04 github-actions[bot]

Thanks @mbollmann that was the hint I needed :-)

Everything should be fixed now, please have a look at the preview -- after it is built.

one thing to note: bootstrap 5 has changed the font handling a bit and you might find that the new version uses different fonts (it does on my system). Bootstrap always tried to use system fonts by default and how it does that has evolved a bit.

akoehn avatar Apr 20 '22 15:04 akoehn

Thanks for picking this up! In Safari on a Mac, things do not look right:

  • Links are underlined, bad spacing on PDF button https://preview.aclanthology.org/update-css-js/2021.iwslt-1.1/ image

  • Main page not displaying info box correctly. Also no margins in the header (but maybe that's fine?)

image

mjpost avatar Apr 20 '22 16:04 mjpost

Will look into underline & icon spacing (I have that as well, but here the lines are thinner so I did not notice ...)

Is the second image a forced narrow rendering or what is the context?

akoehn avatar Apr 20 '22 16:04 akoehn

The new default font choice is ... surprising. On my system, it's remarkably different from how it used to look, and my first reaction is that I find it unpleasant:

grafik

I also never really noticed this big of a difference between systems with the current site (though I haven't explicitly tested it).

Also, I notice that the font color is now black on all the buttons, whereas before it used to be white on buttons with sufficiently dark background. I believe the old Bootstrap used to determine that automatically based on an SCSS function that determines color brightness or something. Does this need to be done explicitly now?

mbollmann avatar Apr 20 '22 19:04 mbollmann

Ah, so the new Bootstrap defaults to whatever the user's system UI font is. That means it's completely unpredictable what the font will be for a given user, which I'm not sure I'm a big fan of from a branding perspective... At the very least, it seems this would make it harder to test layout changes & ensure they look good for everyone? I haven't looked into Bootstrap's rationale for this change, though.

mbollmann avatar Apr 20 '22 19:04 mbollmann

The new default font should be closer to your system default, the old one you saw is still there as a fallback in case the correct one cannot be loaded. The rationale is unchanged, the method has just evolved. Edit: in other words: the font has not become less predictable; bootstrap 4 already tried to use the system font.

If I remember / understand the theming for the buttons correctly, they have black text on everything brighter than 50% and white on darker than 50%. I noticed that as well last year, looked into it and they had a reason to change it but I forgot what it was.

underline & icon spacing is now fixed.

akoehn avatar Apr 20 '22 19:04 akoehn

On my desktop (MacBook Pro in Safari, all latest) I still see this on the main page:

image

unless I zoom way out:

image

mjpost avatar Apr 20 '22 19:04 mjpost

Thanks! I will look at the scaling issue. Can reproduce when zooming in to 150%.

akoehn avatar Apr 21 '22 05:04 akoehn

Links still underlined on list pages (volume/author pages).

I still feel strongly that the font should be set to something more predictable. At the risk of sounding like a grumpy old Linux user, the font I set for my system UI is very much not a font I'd like to see websites or documents in, as they serve very different purposes. That, plus all the other reasons I gave in my last comment. Still happy to be convinced otherwise; maybe I'm the only weirdo who will complain that the Anthology suddenly got a lot uglier.

mbollmann avatar Apr 21 '22 09:04 mbollmann

We can use a custom font; all I wanted to say is that bootstrap 4 already tried to use a system font and the main difference for bootstrap 5 is that there is a new approach to find the system font, which may result in a different font being used now. There is no new feature or explicitly changed font here.

Wrapping for the landing page is updated, the header is not looking correct and the link underline for lists needs a look (this underline thing is a mess)

Do you have a font to propose? I tried computer modern for fun, but it is very dense.

akoehn avatar Apr 21 '22 10:04 akoehn