mobile view part 1

conf/default.php

@@ -5,6 +5,8 @@
  */
 
 $conf['logo']             = 'logo.png';
+$conf['mobile_logo']      = 'images/fav/favicon-32x32.png';
+
 $conf['logo_spacer']      = 'logo_spacer.png';
 
 $conf['discussionPage']   = 'discussion:@ID@';

css/area_nav-pagetools.less

@@ -156,6 +156,6 @@ nav#dokuwiki__pagetools{
 
 @media @screen_max-md {
     nav#dokuwiki__pagetools {
-        right: 0;
+        right: 8px;
     }
 }

css/area_sidetools.less

@@ -55,10 +55,29 @@
             transition: @transition background-color;
         }
 
-        + ul {
-            margin-top: .5em;
-            margin-bottom: .25em;
+        + ul,+ div {
+            height: auto;
+            overflow: hidden;
         }
+
+        &.opened {
+            + ul, + div {
+                height: auto;
+                overflow: hidden;
+            }
+            + ul {
+                margin-top: .5em;
+                margin-bottom: .25em;
+            }
+        }
+
+        &.closed {
+            + ul, + div {
+                height: 0;
+                padding: 0;
+            }
+        }
+
     }
 
 
@@ -78,6 +97,10 @@
         background-color: @background_page-header;
         border: 1px solid @color-border;
         padding: .4rem;
+        font-size: .8rem;
+        *{
+            font-size: inherit;
+        }
 
         .bchead,
         .bcsep {
@@ -169,4 +192,4 @@
             }
         }
     }
-}
+}

css/base_structure.less

@@ -193,3 +193,40 @@
     }
 }
 
+
+@media @screen_max-md {
+
+    .container {
+        margin: 0 2.5rem 0 1.25rem;
+    }
+
+    #dokuwiki__usertools{
+        margin-top: 0;
+        max-width: 75%;
+        position: absolute;
+        top: 0;
+    }
+
+    .content{
+        position: relative;
+        #dokuwiki__pagetools{
+            top: 0;
+
+        }
+    }
+
+    #dokuwiki__header{
+        .logo{
+            width: 200px;
+            max-width: 33%;
+            margin: .8rem 0;
+        }
+    }
+
+    .tools{
+        .main-sidebar{
+            display: none;
+        }
+    }
+}
+

css/plugins/magic-matcher.less

@@ -77,6 +77,15 @@ a.jiralink {
     }
 }
 
+@media @screen_max-md {
+    #dokuwiki_magic-matcher {
+        position: relative;
+        .container{
+            margin: .8rem 0 -5px;
+        }
+    }
+}
+
 
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

tpl/main-sidebar-logo.php

@@ -4,8 +4,11 @@
 
     /* homepage logo should not link to itself (BITV accessibility requirement) */
     if (strcmp(wl(), $_SERVER['REQUEST_URI']) === 0 ){
-        echo '<img src="'.ml(tpl_getConf('logo')).'" alt="'.tpl_getLang('adjunct_start_logo_text').$conf['title'].'" />';
+        echo '<img class="mobile-hide" src="'.ml(tpl_getConf('logo')).'" alt="'.tpl_getLang('adjunct_start_logo_text').$conf['title'].'" />';
+        echo '<img class="mobile-only" src="'.tpl_getMediaFile(array(':wiki:favicon-32x32.png', 'images/fav/favicon-32x32.png')).'" alt="'.tpl_getLang('adjunct_start_logo_text').$conf['title'].'" />';
+
     } else{
-        tpl_link( wl(),'<img src="'.ml(tpl_getConf('logo')).'" alt="'.$conf['title'].tpl_getLang('adjunct_linked_logo_text').'" />','accesskey="h" title="[H]"' );
+        tpl_link( wl(),'<img class="mobile-hide" src="'.ml(tpl_getConf('logo')).'" alt="'.$conf['title'].tpl_getLang('adjunct_linked_logo_text').'" />','accesskey="h" title="[H]"' );
+        tpl_link( wl(),'<img class="mobile-only" src="'.tpl_getMediaFile(array(':wiki:favicon-32x32.png', 'images/fav/favicon-32x32.png')).'" alt="'.$conf['title'].tpl_getLang('adjunct_linked_logo_text').'" />','accesskey="h" title="[H]"' );
     }
     echo "<hr class=\"structure\" /></div>";