Merge branch 'SPR-950' into 'master'

SPR-950 changes for mobile header

See merge request deutschlaender/sprintdoc-template!78

css/area_header.less

@@ -161,6 +161,21 @@
         }
     }
 
+    /* + + +  mobile select for doku wiki tools   + + + */
+    .menu-tool-select {
+        position: relative;
+        z-index: 1000;
+        display: none;
+        @media @screen_max-xxs {
+            display: block;
+        }
+
+        select {
+            display:  block;
+            width:100%;
+        }
+    }
+
 
 /* + + + + +  with magic matcher  + + + + + */
     &.has-magicmatcher {

css/area_main-sidebar-nav.less

@@ -313,10 +313,32 @@
 }
 
 
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1440px */
+
+@media @screen_max-xlg {
+    #dokuwiki__aside {
+        div.nav {
+            a {
+                margin-left: 1px;
+            }
+        }
+    }
+}
+
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1023px */
 
 @media @screen_max-md {
+    #dokuwiki__aside {
+        div.nav {
+            a {
+                margin-left: 0;
+            }
+        }
+    }
+
     body.show-mobile-sidebar {
         #dokuwiki__aside {
             display: block !important;

css/area_nav-page-attributes.less

@@ -72,5 +72,9 @@
             top: -.6em;
             font-size: @font-size-very-small;
         }
+
+        &:empty {
+          display: none;
+        }
     }
 }

css/area_nav-pagetools.less

@@ -41,6 +41,10 @@ nav#dokuwiki__pagetools {
         right: 8px;
     }
 
+    @media @screen_max-xxs {
+        display: none;
+    }
+
     ul {
         li {
             @page-tools_svg-size: 25px;

css/area_nav-usertools.less

@@ -50,11 +50,13 @@
             @media @screen_max-xs {
                 display: block;
                 float: none;
+
                 margin-bottom: @headericons-margin-xxs;
             }
 
             @media @screen_max-xxs {
                 margin-bottom: (@headericons-margin-xxs - .2);
+                display: none;
             }
 
             > span,
@@ -110,7 +112,7 @@
 
                 @media @screen_max-xxs {
                     left: -10px;
-                    right: (@toggle-size + @headericons-margin-xxs); // 1.75rem + .45rem
+                    right: 0;
                     width: auto;
                     padding-top: .35rem;
                 }

css/base_design.less

@@ -70,6 +70,10 @@ html, body {
         @media @screen_max-xs {
             padding-left: @margin-small;
         }
+
+        @media @screen_max-xxs {
+            padding-right: @margin-small;
+        }
     }
 
     .content #dokuwiki__pagetools {

css/base_structure.less

@@ -19,13 +19,13 @@
 
 @media @screen_min-xxs {
     html {
-        font-size: 114%; //16px
+        font-size: 100%; //16px
     }
 }
 
 @media @screen_min-xs {
     html {
-        font-size: 114%; //16px
+        font-size: 100%; //16px
     }
 }
 
@@ -40,7 +40,6 @@
     .make-grid(md);
     html {
         font-size: 87.5%; //14px
-        //font-size: 81.25%; //13px
     }
 }
 

css/plugins/edit.less

@@ -42,6 +42,26 @@
                 color: @color-editBox;
             }
         }
+
+        @media @screen_max-xs {
+            div.summary {
+                label[for=edit__summary] {
+                    white-space: normal;
+                    display: block;
+                    width: 100%;
+                    span {
+                        display: inline-block;
+                        padding-bottom: .4rem;
+                    }
+                    input#edit__summary{
+                        max-width: 100%;
+                        box-sizing: border-box;
+                    }
+                }
+            }
+        }
+
+
     }
 }
 

css/template_detail.less

@@ -60,7 +60,6 @@
 
 /* + + + + +  meta data  + + + + + */
     div.img_detail {
-
         @media screen {
             /* vertical minus margin of .img-detail corresponds to the padding of .page */
             background-color: @ini_background_page_header;
@@ -85,7 +84,6 @@
         }
 
         dl {
-
             @media screen {
                 .display-flex();
                 .flex-wrap();
@@ -112,18 +110,16 @@
                     width: 40%;
                 }
             }
-            @media screen {
 
-                dd {
+            dd {
-                    padding-left: (@small-spacing * 2);
+                padding-left: (@small-spacing * 2);
 
-                    @media @screen_min-xs {
+                @media @screen_min-xs {
-                        width: 66.6%;
+                    width: 66.6%;
-                    }
+                }
 
-                    @media @screen_max-xs {
+                @media @screen_max-xs {
-                        width: 59.9%;
+                    width: 59.9%;
-                    }
                 }
             }
         }

detail.php

@@ -92,7 +92,13 @@ include('tpl/favicon_tiles.php');
                 <div class="row">
                     <div class="col-xs-12">
                         <div class="claim main-sidebar">
-                            <?php if (tpl_getConf('logo') && file_exists(mediaFN(tpl_getConf('logo')))) {
+                            <div class="menu-togglelink mobile-only">
+                                <a href="#">
+                                    <span class="sr-out"><?php echo tpl_getLang('a11y_sidebartoggle'); ?></span>
+                                </a>
+                            </div>
+
+                            <?php
 
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@@ -100,7 +106,7 @@ include('tpl/favicon_tiles.php');
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* upload your logo into the data/media folder (root of the media manager) and replace 'logo.png' in der template config accordingly: */
                                 include('tpl/main-sidebar-logo.php');
-                            } ?>
+                            ?>
                             <div class="main-title">
                                 <?php if ($conf['title']):
 
@@ -112,8 +118,14 @@ include('tpl/favicon_tiles.php');
                                 <?php endif ?>
                             </div><!-- .main-title -->
 
+                            <div class="menu-tool-select">
+                                <h5 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_menu_tool-select') ?></h5>
+                                <?php tpl_actiondropdown($lang['tools'], "test"); ?>
+                            </div><!-- .menu-tool-select -->
                         </div><!-- .headings -->
                     </div><!-- .col -->
+
+
                     <div class="col-xs-12">
                         <div class="main-title desktop-only">
                             <?php if ($conf['title']):
@@ -145,6 +157,7 @@ include('tpl/favicon_tiles.php');
 /* headline menu area (Accessibility ) */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
         ?>
+
         <div class="sr-only nav-area-head">
             <h5 class="sr-only" aria-level="1"><?php echo tpl_getLang('nav-area-head') ?></h5>
         </div><!-- .nav-area-head -->
@@ -153,8 +166,6 @@ include('tpl/favicon_tiles.php');
             <div class="container">
                 <div class="row">
                     <div class="col-xs-12">
-
-
                         <div class="search main-sidebar">
                             <?php
 
@@ -162,7 +173,7 @@ include('tpl/favicon_tiles.php');
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* search form */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                            include('tpl/main-sidebar-search.php');
+                                include('tpl/main-sidebar-search.php');
                             ?>
                         </div><!-- .search -->
 
@@ -173,19 +184,35 @@ include('tpl/favicon_tiles.php');
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Include Hook: sidebarheader.html */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                            tpl_includeFile('sidebarheader.html')
+                                tpl_includeFile('sidebarheader.html')
                             ?>
                         </div><!-- .sidebarheader -->
 
-
                         <div id="dokuwiki__aside">
+
+                            <?php
+                            echo Template::getInstance()->getInclude(
+                                'sidebarheader',
+                                '<div class="sidebarheader">',
+                                '<div class="clearer"></div></div>'
+                            );
+                            ?>
+
                             <?php
 
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* sidebar */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                            include('tpl/main-sidebar-nav.php');
+                                include('tpl/main-sidebar-nav.php');
+                            ?>
+
+                            <?php
+                            echo Template::getInstance()->getInclude(
+                                'sidebarfooter',
+                                '<div class="sidebarfooter">',
+                                '<div class="clearer"></div></div>'
+                            );
                             ?>
                         </div><!-- .aside -->
 
@@ -194,6 +221,7 @@ include('tpl/favicon_tiles.php');
             </div><!-- .container -->
         </div><!-- .tools -->
 
+
         <div class="top-header">
             <div class="container">
                 <div class="row">

lang/de/lang.php

@@ -24,6 +24,7 @@ $lang['head_breadcrumb_youarehere'] = 'Standortanzeiger';
 $lang['head_menu_trace']            = 'Zuletzt Angesehen';
 $lang['head_meta_box']              = 'Metainformationen zur Seite';
 $lang['head_menu_starred']          = 'gemerkte Seite';
+$lang['head_menu_tool-select']      = 'Werkzeuge';
 
 $lang['jump_to_quicksearch']        = 'Springe zur Schnellsuche';
 

lang/en/lang.php

@@ -24,6 +24,7 @@ $lang['head_breadcrumb_youarehere'] = 'location indicator';
 $lang['head_menu_trace']            = 'Last Visited Pages';
 $lang['head_meta_box']              = 'meta data for this page';
 $lang['head_menu_starred']          = 'Starred Pages';
+$lang['head_menu_tool-select']      = 'Tools';
 
 $lang['jump_to_quicksearch']        = 'Jump to quick search';
 

main.php

@@ -130,12 +130,18 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
                             <div class="main-title">
                                 <?php if ($conf['title']):
 
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Wiki Title Mobile */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?>
                                     <p class="title mobile-only"><?php echo $conf['title'] ?></p>
                                 <?php endif ?>
                             </div><!-- .main-title -->
+
+                            <div class="menu-tool-select">
+                                <h5 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_menu_tool-select') ?></h5>
+                                <?php tpl_actiondropdown($lang['tools'], "test"); ?>
+                            </div><!-- .menu-tool-select -->
                         </div><!-- .headings -->
                     </div><!-- .col -->
 
@@ -144,6 +150,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
                         <div class="main-title desktop-only">
                             <?php if ($conf['title']):
 
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Wiki Title Desktop */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?>
@@ -151,6 +158,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
                             <?php endif ?>
                             <?php if ($conf['tagline']):
 
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Wiki Tagline Desktop */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?>
@@ -158,6 +166,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
                             <?php endif ?>
                         </div><!-- .main-title -->
                     </div><!-- .col -->
+
                 </div><!-- .row -->
             </div><!-- .container -->
         </div><!-- .header -->
@@ -187,6 +196,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
                                 include('tpl/main-sidebar-search.php');
                             ?>
                         </div><!-- .search -->
+
                         <div class="sidebarheader main-sidebar">
                             <?php
 
@@ -194,7 +204,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Include Hook: sidebarheader.html */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                            tpl_includeFile('sidebarheader.html')
+                                tpl_includeFile('sidebarheader.html')
                             ?>
                         </div><!-- .sidebarheader -->
 
@@ -209,6 +219,8 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
                             ?>
 
                             <?php
+
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* sidebar */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */