nomadjimbob / mikio

Customizable, Bootstrap 4 inspired template for Dokuwiki
GNU General Public License v2.0
22 stars 6 forks source link

[Bug] / [Feature request]: Working __site_width__ to customize maximum page width for better readability #22

Closed hubdot closed 3 years ago

hubdot commented 3 years ago

Hey nomad,

thanks again for the great work on the template. This one could be a bug or feature request: In the Template Style Settings a __site_width__ can be set (default 73%) but currently doesn't seem to have an effect. https://i.imgur.com/vtoAcOe.png

I was expecting this to limit the total site width, as on bigger screens text readability suffers a lot if too wide. Thus I attempted multiple settings (e.g. 66%, 33%, 1000px, 30rem) but saw no changes no matter the input value: https://i.imgur.com/USKn2vr.png

A draft of what I thought it'd look like is this: https://i.imgur.com/YoEs9tS.png

nomadjimbob commented 3 years ago

These style settings do not appear to be from the Mikio template so I am not sure where they have come from. The template also has language data for its placeholders so there should not be any placeholders that Mikio supports starting, or ending with "__".

Mikio always uses 100% view width. I can add an option for a max-width, which is what Bootstrap does, centring the site content container on the site. (ie if the site content has a max width of 800 pixels, and the window is 1000 pixels wide, there will be 100 pixel whitespace each site of the site content.

hubdot commented 3 years ago

Hey nomad, :)

thanks for your support. That said you may be absolutely right about your assumption - this is backed up by the following observation, the behavior however is reproducable.

  1. This theme was applied to a standard DokuWikiStick on a windows machine.
  2. When going to the Template Styling Options (.../doku.php?id=home&do=admin&page=styling), at the very bottom it shows the following options by default: https://i.imgur.com/4xxSGAZ.png
  3. However, if you click on [Revert Styles Back To Template's Default] it deletes those options, the result looking like this: https://i.imgur.com/eTZmwZa.png
  4. I have now reset to the templates defaults as a base and as you suggested it now doesn't have the option to width-limit anymore.

That said I'd love your suggestion of adding the option for a max-width based on e.g. rem or px. 👍 I'd be perfectly happy with the centered site as longer text just get's really hard to read at a certain breakpoint, especially on ultra wide screens. You may want to consider giving it your own personal styling flavor though. E.g. a 100% footer or headerbar could be a design element you want to keep. The herobar should likely resize with the max-width of the content though. As for width-related readability I believe only the main body is important.

Best regards :)

nomadjimbob commented 3 years ago

The next release will add/support the site width setting under the Template Style Settings admin panel. An example of it working is below. Note that I have set the width to smaller than usual to highlight the it on a wide viewport

The next release should be available in a day or 2 once I do a little more testing

Screen Shot 2021-05-31 at 4 08 24 pm