structure
This commit is contained in:
parent
c58aab2fe3
commit
cf24d7da37
12 changed files with 235 additions and 41 deletions
11
css/area_nav-usertools.less
Normal file
11
css/area_nav-usertools.less
Normal 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;
|
||||
}
|
||||
}
|
|
@ -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{
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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__;
|
||||
|
|
|
@ -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 :
|
||||
|
|
|
@ -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';
|
||||
|
|
56
main.php
56
main.php
|
@ -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">
|
||||
|
|
|
@ -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 _____________
|
||||
|
|
|
@ -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
19
tpl/nav-magicmatcher.php
Normal 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
24
tpl/nav-usertools.php
Normal 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 ?>
|
Loading…
Add table
Add a link
Reference in a new issue