diff options
| -rwxr-xr-x | css/design.css | 7 | ||||
| -rw-r--r-- | css/mobile.css | 164 | ||||
| -rwxr-xr-x | css/rtl.css | 59 | ||||
| -rwxr-xr-x | style.ini | 1 | ||||
| -rw-r--r-- | tpl_header.php | 14 |
5 files changed, 233 insertions, 12 deletions
diff --git a/css/design.css b/css/design.css index 9718d2879..a6e52f16f 100755 --- a/css/design.css +++ b/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; diff --git a/css/mobile.css b/css/mobile.css new file mode 100644 index 000000000..c54c28473 --- /dev/null +++ b/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 */ diff --git a/css/rtl.css b/css/rtl.css index 6478e01d8..e073acba3 100755 --- a/css/rtl.css +++ b/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 */ @@ -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 diff --git a/tpl_header.php b/tpl_header.php index 5d49f125d..40094e30e 100644 --- a/tpl_header.php +++ b/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'); |