Upgrade UI to use Bootstrap 5

[osma]

The current Skosmos UI uses Bootstrap CSS version 3.

We should upgrade to Bootstrap 4, which among other things uses flexbox for layout. This should make it easy to fix alignment issues such as those described in issue #1006.

Upgrading Bootstrap is a large undertaking as all the HTML templates and CSS files are affected.

Bootstrap 4 drops support from some older browsers. We should verify that this doesn't cause problems for users of important Skosmos installations such as Finto.

[kinow]

@osma I spoke yesterday with a friend who uses Bootstrap too about this task, but he told me he was using Bootstrap 5. Should we aim at moving to Bootstrap 5 here instead?

From what he told me, it looks like it's in beta state, but apparently it contains two versions, one Bootstrap 5 with JS, and another pure CSS, that doesn't require JQuery.

WDYT?

[kinow]

Beta 2 was released 10/feb this year.

There is a chance that beta 3 will be promoted to stable released - Bootstrap v5.0.0-beta3 (possibly promoted to v5 stable)

Their projects page includes 5.3.0b and v5.stable details.

[kinow]

Got the news last week that Bootstrap 5.0.0 was out. So if that's OK I will reading what's necessary to upgrade the UI to Bootstrap 5 👍 - https://getbootstrap.com/

[osma]

OK - in the current circumstances, aiming for Bootstrap 5 sounds like a good idea! So yes, please @kinow :)
One benefit of Bootstrap 5 is that it's independent of jQuery. Since we are now also trying to upgrade many jQuery based components as well as jQuery itself, decoupling that from the Bootstrap upgrade would probably make things easier.

[kinow]

Taking a look at how complex this would be. Draft PR coming soon with initial work. For now working on https://github.com/kinow/Skosmos/tree/bootstrap-5.

Todo:

• use composer to install Bootstrap 5
• verify what is working, and what is not, then fix it
  • layout area broken (BS5 has a larger viewport apparently) NB: I think it actually looks better, mention in the review for feedback
  • dropdowns broken (language, choose vocabulary) 🔴
    • https://getbootstrap.com/docs/5.0/components/dropdowns/
    • the alignment of dropdowns appear to have a problem when using `-end (note to self: try latest version?)
  • tooltips broken
    • https://getbootstrap.com/docs/5.0/components/tooltips/
  • search auto complete (typeahead 0.11 changed CSS classes, https://github.com/twitter/typeahead.js/compare/v0.10.5..v0.11.1)
  • multiselect JQuery component broken
  • fonts are not the same (see About screen for instance)
  • padding & margins differences (see any vocabulary page, the bottom)
  • text alignment (see any vocabulary page, left side)
  • vocabularies sidebar tabs broken
  • vocabularies sidebar alphabet links not wrapping
  • vocabularies hierarchy not aligned (top of the groups & hierarchy panel)
  • navbars broken (.active now on the <a> not <li> element, need to update styles.css and templates)
  • copy to clipboard icon not showing in the vocabulary page
  • match fonts (h1, h2, etc; @osma feedback)
  • fix typescript URL appending (upgrading the version of typeahead, they changed their API too, @osma feedback)
  • fix search bar font sizes (@osma feedback)
  • define the clipboard SVG icon via CSS loading an external file instead of copying the SVG in multiple places (thanks @osma!)
  • check mobile interface (appears to be pretty much the same, fixing the issues above, it should match what we had before 🎉 ) @osma found that "there seems to be a lot of empty space on e.g. the vocabulary information page"
  • update HTML tags

Notes:

Release notes will need to mention:

• We have upgraded to Bootstrap 5
• Support to some browsers has been dropped, see note below from Bootstrap migration guide [1]

Dropped Internet Explorer 10 and 11
Dropped Microsoft Edge < 16 (Legacy Edge)
Dropped Firefox < 60
Dropped Safari < 12
Dropped iOS Safari < 12
Dropped Chrome < 60

• There has been some RTL (right-to-left) interest in the mailing list, best to mention this note from the Bootstrap migration guide too.

Horizontal direction specific variables, utilities, and mixins have all been renamed to use logical properties like those found in flexbox layouts—e.g., start and end in lieu of left and right.

Notes:

In the Vocabulary Information page, the link of the navigation tab (e.g. Alphabetical) now shows the click mouse cursor. In skosmos.dev.finto.fi, it is showing as pointer. Leave as it is, or should we try to copy the previous mouse cursor?

Refs:

• [1] https://getbootstrap.com/docs/5.0/migration/

WIP: will keep updating this comment…