added mobile styles (#26), main work done, but some things still to f…

…ollow

css/design.css

@@ -85,6 +85,9 @@
     text-overflow: ellipsis;
 }
 
+#dokuwiki__header .mobileTools {
+    display: none; /* hide mobile tools dropdown to only show in mobile view */
+}
 
 /*____________ user tools ____________*/
 
@@ -233,6 +236,10 @@
 /* content
 ********************************************************************/
 
+#dokuwiki__content {
+    position: relative;
+}
+
 .dokuwiki .pageId {
     position: absolute;
     top: -2.3em;

css/mobile.css

@@ -0,0 +1,164 @@
+/**
+ * This file provides styles for mobile devices
+ * and smaller screens (up to 480px width).
+ *
+ * @author Anika Henke <anika@selfthinker.org>
+ */
+
+@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
+
+
+/*____________ structure ____________*/
+
+#dokuwiki__site {
+    max-width: 100%;
+}
+#dokuwiki__site .site {
+    padding: 0 .5em;
+}
+#dokuwiki__header {
+    padding: .5em 0;
+}
+
+#dokuwiki__aside {
+    width: 100%;
+    float: none;
+}
+#dokuwiki__aside .pad {
+    margin: 0;
+}
+
+.hasSidebar #dokuwiki__content {
+    float: none;
+    margin-left: 0;
+    width: 100%;
+}
+.hasSidebar #dokuwiki__content .pad {
+    margin-left: 0;
+}
+
+
+/*____________ header ____________*/
+
+#dokuwiki__header ul.a11y.skip {
+    position: static !important;
+    left: 0 !important;
+    width: auto !important;
+    height: auto !important;
+    float: right;
+    font-size: 0.875em;
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+}
+#dokuwiki__header ul.a11y.skip li {
+    margin-left: .35em;
+    display: inline;
+}
+
+#dokuwiki__header .headings,
+#dokuwiki__header .tools {
+    float: none;
+    text-align: left;
+    width: auto;
+    margin-bottom: .5em;
+}
+#dokuwiki__sitetools {
+    text-align: left;
+}
+#dokuwiki__usertools,
+#dokuwiki__sitetools ul,
+#dokuwiki__sitetools h3,
+#dokuwiki__pagetools,
+.dokuwiki div.breadcrumbs, /* @todo: maybe move breadcrumbs to the bottom? */
+.dokuwiki .pageId {
+    display: none;
+}
+
+/* search form */
+#dokuwiki__sitetools form.search {
+    float: left;
+    margin: 0 .2em .2em 0;
+    width: 49%;
+    position: relative;
+}
+#dokuwiki__sitetools form.search input.edit {
+    width: 90% !important;
+}
+#dokuwiki__sitetools form.search input.button {
+    position: absolute;
+    top: .2em;
+    right: .2em;
+}
+.dokuwiki form.search div.ajax_qsearch {
+    display: none !important;
+}
+
+/* action dropdown is alternative for all hidden tools */
+#dokuwiki__header .mobileTools {
+    display: block;
+    font-size: 0.875em;
+    margin: 0 0 .2em 0;
+    float: right;
+    width: 49%;
+}
+#dokuwiki__header .mobileTools select {
+    padding: .25em .1em;
+    width: 100% !important;
+}
+
+
+/*____________ content ____________*/
+
+.dokuwiki div.page {
+    padding: .5em;
+}
+
+h1 {
+    margin-top: 0;
+}
+
+/* toc */
+.dokuwiki div.toc {
+    float: none;
+    margin: 0 0 1em 0;
+    width: auto;
+    border-left-width: 0;
+    border-bottom: 1px solid __border__;
+}
+.dokuwiki div.tocheader {
+    padding: 0 0 .5em;
+}
+.dokuwiki #toc__inside {
+    padding: .2em 0 .5em;
+}
+
+/* form elements */
+#config__manager fieldset td.value,
+#config__manager td .input,
+.dokuwiki fieldset,
+.dokuwiki input.edit,
+.dokuwiki textarea,
+.dokuwiki select {
+    width: auto !important;
+    max-width: 100% !important;
+}
+#config__manager fieldset {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+/* _edit */
+.dokuwiki div.section_highlight {
+    margin: 0;
+    padding: 0;
+    border-width: 0;
+}
+.dokuwiki div.preview {
+    margin: 0 -.5em;
+    padding: .5em;
+}
+
+
+
+} /* /@media */

css/rtl.css

@@ -184,13 +184,6 @@ caption, legend {
     float: left;
 }
 
-.dokuwiki div.section_highlight {
-    margin: -3em -1.5em -.01em 0;
-    padding: 3em 1em .01em 0;
-    border-left-width: 0;
-    border-right: .5em solid __background_alt__;
-}
-
 
 /*____________ _modal ____________*/
 
@@ -523,3 +516,55 @@ form#subscribe__form fieldset {
     padding-right: 0;
 }
 
+
+/*____________ mobile ____________*/
+
+@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
+
+
+.hasSidebar #dokuwiki__content,
+.hasSidebar #dokuwiki__content .pad {
+    margin-right: 0;
+}
+
+#dokuwiki__header ul.a11y.skip {
+    left: auto !important;
+    right: 0 !important;
+    float: left;
+    padding-right: 0;
+}
+#dokuwiki__header ul.a11y.skip li {
+    margin: 0 .35em 0 0;
+}
+
+#dokuwiki__header .headings,
+#dokuwiki__header .tools {
+    float: none;
+    text-align: right;
+    width: auto;
+}
+#dokuwiki__sitetools {
+    text-align: right;
+}
+
+#dokuwiki__sitetools form.search {
+    float: right;
+    margin: 0 0 .2em .2em;
+}
+#dokuwiki__sitetools form.search input.button {
+    right: auto;
+    left: .2em;
+}
+
+#dokuwiki__header .mobileTools {
+    float: left;
+}
+
+.dokuwiki div.toc {
+    float: none;
+    margin: 0 0 1em 0;
+    border-right-width: 0;
+}
+
+
+} /* /@media */

style.ini

@@ -29,6 +29,7 @@ css/design.css            = screen
 css/pagetools.css         = screen
 css/content.css           = screen
 css/includes.css          = screen
+css/mobile.css            = screen
 
 css/rtl.css           = rtl
 css/print.css         = print

tpl_header.php

@@ -5,6 +5,10 @@
     <?php _tpl_include('header.html') ?>
 
     <div class="headings group">
+        <ul class="a11y skip">
+            <li><a href="#dokuwiki__content"><?php echo tpl_getLang('skip_to_content') ?></a></li>
+        </ul>
+
         <h1><?php tpl_link(
             wl(),
             '<img src="'.tpl_getFavicon(false, 'logo.png').'" width="64" height="64" alt="" /> <span>'.$conf['title'].'</span>',
@@ -13,10 +17,6 @@
         <?php if (tpl_getConf('tagline')): ?>
             <p class="claim"><?php echo tpl_getConf('tagline') ?></p>
         <?php endif ?>
-
-        <ul class="a11y">
-            <li><a href="#dokuwiki__content"><?php echo tpl_getLang('skip_to_content') ?></a></li>
-        </ul>
     </div>
 
     <div class="tools group">
@@ -44,7 +44,11 @@
         <!-- SITE TOOLS -->
         <div id="dokuwiki__sitetools">
             <h3 class="a11y"><?php echo tpl_getLang('site_tools') ?></h3>
-            <?php tpl_searchform() ?>
+            <?php tpl_searchform(); ?>
+            <?php /* all the tools in one dropdown (good for mobile view): */ ?>
+            <div class="mobileTools">
+                <?php tpl_actiondropdown('Tools'); /* @todo: lang */ ?>
+            </div>
             <ul>
                 <?php
                     tpl_action('recent', 1, 'li');