Missing styles for existing applications

[ubbo]

To let the Publikator shine in the new style, a few element styles are missing. This GUI has to be migrated from Bootstrap 2.3.2

On a first look these are missing:

• alerts (warning, info, success) compare: https://getbootstrap.com/2.3.2/components.html#alerts
• progress bar: e.g.: https://getbootstrap.com/2.3.2/components.html#progress
• styled buttons according to color color styleguide
• possibly icons from themify macthing the glyphicons
• modal dialogs
• possibly (?) collapsable

At least for the last item the UX impacts of using such kind of GUI element within DARIAH applications should be discussed.

Other DARIAH applications must be checked for missing element-styles too.

[ubbo]

A grid layout with two columns is also used in the edit-view of the Publikator. The blog_row and post css classes may be candidates for re-use.

[bschnabel]

For the SelfService and Admin Portal we (at DAASI International) would also need something like the bootstrap "button addon" (https://getbootstrap.com/docs/3.3/components/#input-groups-buttons) included in the styleguide.
(maybe we can rename the issue in "missing styles for existing applications")

[maltevogl]

The wiki now contains a simple example for the Impactomatrix. I had to extend the Style Guide to incorporate the three-folded separation of the main window. I simply added the missing styles to a base template and used jinja2 to generate the static pages.

Questions is: Can bootstrap still be used, if the Style Guide takes precedence, i.e. require the style guide scripts and css after bootstrap

[bschnabel]

Hello,

So I've worked the last days on making bootstrap compatible with the new dariah styleguide.
I've created a version of bootstrap which causes no conflicts with the styleguide css. (I removed statements for general html elements and only left styles which refer to bootstrap-specific classes.) It should be included after the styleguide.min.css.

I've successfully used it to get the following functionalities

• input groups buttons
• bootstrap table (therefore you manually need to change the icons through the bootstrap table settings from glyphicon to themify icons)
• bootstrap tooltip
• bootstrap modal
• maybe more I can't think of right now

I the following filles

• jquery 3.3.1 (minified version)
• bootstrap.min.js version 3.4
• bootstrap-3.4_subset.css (as attached here, need to be included after styleguide.min.css)
• style-selfservice.css (as attached here)

In the last file I resolved some conflicts caused by the the html structure of the new styleguide and its css with bootstrap, as well as added a secondary button (which the styleguide misses - sometimes one wants to have this option if there is more then one button underneath an form)

boostrap-with-dariahStyleGuide.zip

Maybe this information helps someone

[maltevogl]

Thanks a lot for your work. I am sure others will find it useful 🤝