structure

This commit is contained in:
Jana Deutschländer 2016-11-22 17:24:51 +01:00
commit cf24d7da37
12 changed files with 235 additions and 41 deletions

View file

@ -0,0 +1,11 @@
/**
* This file provides the design styles for the direct / menu jump links.
*
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*/
.nav-usertools {
ul{
float: right;
}
}

View file

@ -7,22 +7,84 @@
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* global vars */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* fonts */
@line-height-default: 125%;
@line-height-big: 135%;
@line-height-bigger: 140%;
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* breakpoints */
@break-min-xxs: 480;
@break-max-xxs: (@break-min-xxs - 1);
@break-min-xs: 768;
@break-max-xs: (@break-min-xs - 1);
@break-min-sm: 992;
@break-max-sm: (@break-min-xs - 1);
@break-min-md: 1024;
@break-max-md: (@break-min-md - 1);
@break-min-lg: 1440;
@break-min-lg: 1200;
@break-max-lg: (@break-min-lg - 1);
@break-min-xlg: 1440;
@break-max-xlg: (@break-min-xlg - 1);
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* media queries for breakpoints */
@screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)";
@screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)";
@screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)";
@screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)";
@screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)";
@screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)";
@screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)";
@screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)";
@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";
@screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
@screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";
@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* col width */
@c12: 100%;
@c11: 91.66666667%;
@c10: 83.33333333%;
@c9: 75%;
@c8: 66.66666667%;
@c7: 58.33333333%;
@c6: 50%;
@c5: 41.66666667%;
@c4: 33.33333333%;
@c3: 25%;
@c2: 16.66666667%;
@c1: 8.33333333%;
@grid-columns: 12;
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* margin / padding */
@margin-big: 2.5rem;
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* all media */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@ -31,11 +93,12 @@ html, body{
.reset();
}
header{
header, .nav-direct{
.elementsReset();
}
div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, abbr, em,acronym, img, strong,
@ -103,7 +166,7 @@ header, footer, .container, .row, nav, nav > ul{
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* screen */
/* screen only */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@media screen{
@ -255,7 +318,7 @@ header, footer, .container, .row, nav, nav > ul{
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* print */
/* print only */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@media print{
body{

View file

@ -78,3 +78,31 @@
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* Col Grid */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
.make-grid(@class) {
.float-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class, width);
}
.float-grid-columns(@class) {
.col-@{class}-1, .col-@{class}-2, .col-@{class}-3, .col-@{class}-4, .col-@{class}-5, .col-@{class}-6, .col-@{class}-7, .col-@{class}-8, .col-@{class}-9, .col-@{class}-10, .col-@{class}-11, .col-@{class}-12 {
float: left;
}
}
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
.calc-grid-column(@index, @class, @type);
// next iteration
.loop-grid-columns((@index - 1), @class, @type);
}
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}

View file

@ -3,3 +3,55 @@
*
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*/
/* Col Grid */
.make-grid(xs);
@media screen{
.container{
margin: 0 @margin-big;
}
}
@media @screen_min-xxs {
.container{
border: 1px solid deeppink;
}
}
@media @screen_min-xs {
.container{
border: 1px solid orangered;
}
}
@media @screen_min-sm {
.container{
border: 1px solid green;
}
.make-grid(sm);
}
@media @screen_min-md {
.container{
border: 1px solid blue;
}
.make-grid(md);
}
@media @screen_min-lg {
.container{
border: 1px solid blue;
}
.make-grid(lg);
}
@media @screen_min-xlg {
html{
font-size: 130%;
}
.container{
border: 1px solid red;
}
}

View file

@ -9,6 +9,7 @@
/* magic matcher bar with form on top of page */
#dokuwiki_magic-matcher{
#magicmatcher__context{
box-sizing: border-box;
background-color: __nav_direct_background__;

View file

@ -9,8 +9,16 @@ $lang['direct_prefix'] = 'Direkt';
$lang['direct_content_main'] = 'Hauptinhalt dieser Seite';
$lang['direct_menu_main'] = 'Hauptmenü';
$lang['nav-area-head'] = 'Navigationsmenüs und Suche';
$lang['head_magic_matcher'] = 'MagicMatcher';
$lang['discussion'] = 'Diskussion';
$lang['back_to_article'] = 'Zurück zum Artikel';
$lang['userpage'] = 'Benutzer-Seite';
$lang['__existing__'] = 'The color for links to existing pages';
$lang['__missing__'] = 'The color for links to non-existing pages';
$lang['__site_width__'] = 'The width of the full site (can be any length unit: %, px, em, ...)';
$lang['__sidebar_width__'] = 'The width of the sidebar, if any (can be any length unit: %, px, em, ...)';
//Setup VIM: ex: et ts=2 :

View file

@ -8,6 +8,9 @@ $lang['direct_prefix'] = 'jump to';
$lang['direct_content_main'] = 'main content';
$lang['direct_menu_main'] = 'main menu';
$lang['nav-area-head'] = 'menus and quick search';
$lang['head_magic_matcher'] = 'MagicMatcher';
$lang['discussion'] = 'Discussion';
$lang['back_to_article'] = 'Back to article';
$lang['userpage'] = 'User page';

View file

@ -106,58 +106,42 @@ $showSidebar = page_findnearest($conf['sidebar']) && ($ACT=='show');
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* MagicMatcher */
/* Headline Menu AREA */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
?>
<div id="dokuwiki_magic-matcher" class="magic-matcher no-print">
<div class="container">
<?php
$mm = plugin_load('helper', 'magicmatcher_context');
if($mm){
$mm->tpl();
}
?>
</div><!-- .container -->
</div><!-- .magic-matcher -->
<div class="nav-area-head">
<h5 class="sr-only" role="heading" aria-level="1"><?php echo tpl_getLang('nav-area-head') ?></h5>
</div><!-- .nav-area-head -->
<?php
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* MagicMatcher */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
include('tpl/nav-magicmatcher.php');
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* Include Hook: header.html */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
tpl_includeFile('header.html');
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* Header */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
?>
<div id="dokuwiki__header" class="header no-print">
<div class="container">
<div class="row">
<?php if ($conf['useacl'] && $showTools): ?>
<div class="col-xs-12">
<?php
<nav id="dokuwiki__usertools">
<h6 class="sr-only" role="heading" aria-level="2"><?php echo $lang['user_tools']; ?></h6>
<ul>
<?php
if (!empty($_SERVER['REMOTE_USER'])) {
echo '<li class="user"><span class="sr-only">'.$lang['loggedinas'].' </span>'.userlink().'</li>';
}?>
<li class="log"><?php tpl_actionlink('login'); ?></li>
<?php tpl_toolsevent('usertools', array(
'admin' => tpl_action('admin', 1, 'li', 1),
'userpage' => _tpl_action('userpage', 1, 'li', 1),
'profile' => tpl_action('profile', 1, 'li', 1),
'register' => tpl_action('register', 1, 'li', 1),
)); ?>
</ul>
</nav><!-- #dokuwiki__usertools -->
<?php endif ?>
</div>
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* User Tools */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
include('tpl/nav-usertools.php'); ?>
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container -->
<div class="headings">

View file

@ -62,6 +62,7 @@ css/area_content.less = all
css/area_header.less = all
css/area_footer.less = all
css/area_nav-direct.less = all
css/area_nav-usertools.less = all
; _____________ plugin styles _____________

View file

@ -12,7 +12,7 @@
<span class="skip">
<a href="#content"><?php echo tpl_getLang('direct_content_main'); ?></a><span class="sr-out"> /</span>
<a href="#dokuwiki__usertools"><?php echo $lang['user_tools']; ?></a><span class="sr-out"> /</span>
<a href="#nav-main"><?php echo tpl_getLang('direct_menu_main'); ?>
<a href="#nav-main"><?php echo tpl_getLang('direct_menu_main'); ?></a>
</span>
</p>

19
tpl/nav-magicmatcher.php Normal file
View file

@ -0,0 +1,19 @@
<?php
if (!defined('DOKU_INC')) die();
?>
<div id="dokuwiki_magic-matcher" class="magic-matcher no-print">
<div class="container">
<?php
$mm = plugin_load('helper', 'magicmatcher_context');
if($mm){
echo "<h6 class=\"sr-only\" role=\"heading\" aria-level=\"2\">";
echo tpl_getLang('head_magic_matcher');
echo "</h6>";
$mm->tpl();
}
?>
</div><!-- .container -->
</div><!-- .magic-matcher -->

24
tpl/nav-usertools.php Normal file
View file

@ -0,0 +1,24 @@
<?php
if (!defined('DOKU_INC')) die();
if ($conf['useacl'] && $showTools): ?>
<nav id="dokuwiki__usertools" class="nav-usertools">
<h6 class="sr-only" role="heading" aria-level="2"><?php echo $lang['user_tools']; ?></h6>
<ul>
<?php
if (!empty($_SERVER['REMOTE_USER'])) {
echo '<li class="user"><span class="sr-only">'.$lang['loggedinas'].' </span>'.userlink().'</li>';
}?>
<li class="log"><?php tpl_actionlink('login'); ?></li>
<?php tpl_toolsevent('usertools', array(
'admin' => tpl_action('admin', 1, 'li', 1),
'userpage' => _tpl_action('userpage', 1, 'li', 1),
'profile' => tpl_action('profile', 1, 'li', 1),
'register' => tpl_action('register', 1, 'li', 1),
)); ?>
</ul>
</nav><!-- #dokuwiki__usertools -->
<?php endif ?>