Sidebar responsive behavior

[daviddarts]

How would I change the sidebar's responsive behavior so that it renders the sidebar at the bottom of the page (below the page content rather than at the top of it) when viewed on a small (e.g. phone or small tablet) screen?

Thanks!

[apexskier]

I think bootstrap would make this possible.

Take lines 102 to 118 of main.php and move them below line 139.

Then add the appropriate push and pull classes to #dokuwikiaside and #dokuwikicontent. I got mine from the other's col-sm-x class generation.

dokuwiki__content will get something like this:

col-sm-push-<?php
    $cols = (int) tpl_getConf('sidebar_cols');
    if ($cols < 0 || $cols >= 12) {
        $cols = 3;
    }
    echo $cols; ?>

dokuwiki__aside will get something like this:

<?php if ($ACT == 'show'): ?>col-sm-pull-<?php echo 12 - $cols; ?><?php else: ?>col-xs-12<?php endif; ?>

I haven't tested any of this, but you should be able to get it to work.

[MaStr]

Hi, to get it working, moving the lines is not enough. I left out the changed # class configuration, because that messed the theme up.

In the moved block (and in your post above) is a variable "$cols" defined that is used after the moving uninitialized in the content-css generation.

First I followed your instructions above.

I added at the top of the script and below

 $showSidebar = page_findnearest($conf['sidebar']) && ($ACT=='show');

that line

$cols = (int) tpl_getConf('sidebar_cols');
if ($cols < 0 || $cols >= 12) {
        $cols = 3;
}

I removed that line wightin the <!- ASIDE -> block, of course.

After that. The sidebar apread on the wrong side, and is moved while resizing.

on

<aside id="dokuwiki__aside" 

I changed the class part with to

class="col-sm-<?php echo $cols; ?> col-sm-pull-<?php echo 12 - $cols; ?>">

I removed the other php code about the cols

and on the content div tag

 <div id="dokuwiki__content" class="<?php if ($ACT == 'show'): ?>col-sm-<?php echo 12 - $cols; ?><?php else: ?>col-xs-12<?php endif; ?>">

I exchanged the code to

 <div id="dokuwiki__content" class="<?php if ($ACT == 'show'): ?>col-sm-<?php echo 12 - $cols; ?>  col-sm-push-<?php echo $cols; ?>  <?php else: ?>col-xs-12<?php endif; ?>">

As far as I noticed, you need to definition in your class tag to get that push-pull thing working.

Thanks for the help and pointing us to the right direct.!!

:+1:

regards Matthias

[apexskier]

So will doing something similar to what I previously suggested work, after pulling these changes?

[MaStr]

to be honest, after writing up the comment, I got the idea to patch the configuration-variable initialization. The pull-request does not change the default behaviour.

Do you want a pull request for that sidebar behavior? Or should I update the instructions above?

[apexskier]

I'd like to try out what you did, so a pull request would be nice. I'll consider merging it in.

[apexskier]

I need to consider adding a skip to navigation link near the skip to content one. (my note)

[MaStr]

I think, you should consider exchanging the "skip to content" with "skip to sidebar" .

What do you think?

[apexskier]

That's probably best. I'll probably keep a visually hidden skip to content link for accessibility purposes, but the existing skip to link is for mobile users to get past content.