Merge branch 'master' of gitlab.cosmocode.de:deutschlaender/sprintdoc-template into spis-master

This commit is contained in:
Silke Pisulla 2017-03-03 09:24:27 +01:00
commit c27edccc74
15 changed files with 361 additions and 185 deletions

View file

@ -16,10 +16,12 @@
font-size: @font-size-default;
text-align: right;
padding: @margin-small @margin-default;
bdi {
font-weight: bold;
}
}
#dokuwiki__footer {
.main-footer {
position: relative;
@ -27,24 +29,30 @@
box-sizing: border-box;
background-color: @color-site-bg;
}
p {
font-size: @font-size-default;
margin: 0;
}
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* min-width: 1024px */
@media @screen_min-md {
#dokuwiki__footer {
.col-xs-12 {
float: right;
width: 100%;
}
.main-footer {
padding: @margin-default 0;
}
}
.showSidebar {
#dokuwiki__footer {
.col-xs-12 {
@ -52,6 +60,7 @@
}
}
}
.wide-content {
&.showSidebar {
#dokuwiki__footer {
@ -62,8 +71,11 @@
}
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* max-width: 1023px */
@media @screen_max-md {
#dokuwiki__footer {
.main-footer {

View file

@ -3,3 +3,45 @@
*
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*/
#dokuwiki__header {
.menu-togglelink {
border: 1px solid @color-border;
border-radius: @border-radius;
text-align: center;
margin: @very-small-spacing -(@very-small-spacing) 0 0;
font-size: @font-size-small;
min-height: 2em;
min-width: 2em;
box-sizing: border-box;
line-height: 2em;
cursor: pointer;
background-color: #fff;
text-decoration: none;
transition: @transition color, @transition background-color, @transition border-color;
svg {
height: @font-size-default + (@font-scale-factor * 4);
width: @font-size-default + (@font-scale-factor * 4);
vertical-align: middle;
path {
fill: @color-nav
}
}
&:hover,
&:active,
&:focus {
background-color: @button_color;
border-color: @button_background;
svg path {
fill: @button_background;
}
}
}
}

View file

@ -4,28 +4,32 @@
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
* @author Andreas Gohr <gohr@cosmocode.de>
*/
#dokuwiki__aside {
@icon-size: @font-size-big;
@menu-margin: @icon-size + @margin-small*2; // FIXME this is still wrong
margin-left: @menu-margin; // moves *all* sidebar content to the right
> * {
margin-left: @menu-margin; // moves *all* sidebar content to the right
}
// the toggle element
a.nav {
font-size: @font-size-head6;
margin: 0 0 @font-size-head6;
cursor: pointer;
font-weight: normal;
margin: 0 0 @font-size-head6;
margin-left: (@menu-margin * -1); // moves the toggles back to the left
color: @color-nav;
font-size: @font-size-head6;
font-weight: normal;
border: 1px solid transparent;
border-radius: @fix_border-radius;
transition: @transition color, @transition background-color, @transition border-color;
height: @icon-size + @margin-small;
display: flex;
display: -ms-flexbox;
flex-direction: row;
-ms-flex-direction: row;
align-items: center;
span {
@ -60,13 +64,13 @@
border: 2px solid @color-nav;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
}
// real icon
svg {
width: @icon-size;
height: @icon-size;
path {
fill: @color-nav;
}
@ -98,6 +102,69 @@
}
}
/**
* Sidebar handling in mobile view
*/
@media @screen_max-md {
// hide on medium and smaller screens
#dokuwiki__aside {
display: none;
}
// show when toggled
body.show-mobile-sidebar {
#dokuwiki__aside {
display: block;
position: absolute;
left: 1.25rem; //left margin of content container
z-index: 200; // above all
box-shadow: @box-shadow-right-bottom;
min-width: 45%;
max-width: 90%;
height: auto;
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: @ini_background;
background: -webkit-linear-gradient(left, @ini_background, @color-content-bg);
background: linear-gradient(left, @ini_background, @color-content-bg);
z-index: 0;
}
> nav {
position: relative;
//display: block;
z-index: 2;
&:first-child {
margin-top: 1.2rem;
}
}
a.nav {
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
}
.nav-panel,
a.nav {
padding-right: .8em;
}
}
}
}
// FIXME check if the stuff below is still relevant
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
@ -127,6 +194,7 @@
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* max-width: 1199px */

View file

@ -159,7 +159,10 @@
right: 0;
width: auto;
border: 0 none;
background: @color-site-bg;
background: @background_page-header;
background: -webkit-linear-gradient(top, @background_page-header, @color-content-bg);
background: linear-gradient(top, @background_page-header, @color-content-bg);
box-shadow: @box-shadow-bottom;
z-index: 2000;
#plugin__qc__out{

View file

@ -34,6 +34,8 @@
@box-shadow-offset: __box_shadow_offset__;
@box-shadow: __box_shadow__;
@box-shadow-colored: __box_shadow_colored__;
@box-shadow-right-bottom:__box_shadow_right_bottom__;
@box-shadow-bottom: __box_shadow_bottom__;
@th_background: __background_alt__;

View file

@ -130,13 +130,13 @@
display: table-cell;
height: 100%;
vertical-align: middle;
.logo {
/*position: absolute;
bottom: 1em;
overflow: visible;*/
padding: 1rem 0 .3rem;
img {
height: 4.6rem;
width: auto;
@ -164,22 +164,21 @@
}
}
.wide-content{
.logo{ }
.wide-content {
.content {
.row > .col-xs-12 {
width: auto;
float: none;
}
}
&.showSidebar{
&.showSidebar {
.content {
.row > .col-xs-12 {
margin-left: @toggle-showsidebar_width;
}
}
}
}
.main-sidebar {
@ -233,13 +232,39 @@
}
}
@media @screen_max-md{
.claim{
@media @screen_max-md {
.claim {
min-height: 3rem;
.logo{
.mobile-only{
.logo {
.mobile-only {
margin: .8rem 1rem .6rem 0;
}
}
}
}
@media @screen_max-xxs {
@mobileMargin: 4px;
.container {
margin: 0 @mobileMargin;
}
body.show-mobile-sidebar #dokuwiki__aside {
left: @mobileMargin;
}
#dokuwiki__usertools {
right: @mobileMargin;
}
#dokuwiki__footer {
.main-footer {
> * {
padding-left: 2rem;
padding-right: 2rem;
}
}
}
}

1
img/menu.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>

After

Width:  |  Height:  |  Size: 143 B

View file

@ -2,14 +2,14 @@
* Sets up the breadcrumb behaviour (adds do / ACT status information)
*/
jQuery(function () {
const $breadcrumb = jQuery('.breadcrumbs');
var $breadcrumb = jQuery('.breadcrumbs');
if (!$breadcrumb.length) return;
/**
* add ACT status to breadcrumb (if not show)
*
*/
const mode = $breadcrumb.attr('data-do');
var mode = $breadcrumb.attr('data-do');
if(mode && mode.indexOf('show') !== 0){
var markup = '<bdi lang="en"><span class="curid"> : <strong>' + mode + '</strong></span></bdi>';
$breadcrumb.find('p').append(markup);

View file

@ -1,5 +1,5 @@
jQuery(function () {
const $metaBox = jQuery('#spr__meta-box');
var $metaBox = jQuery('#spr__meta-box');
if (!$metaBox.length) return;
/**
@ -10,8 +10,8 @@ jQuery(function () {
*/
$metaBox.on('click', '.meta-tabs a', function (e) {
e.preventDefault();
const $tab = jQuery(this);
const isopen = $tab.attr('aria-expanded') === 'true';
var $tab = jQuery(this),
isopen = $tab.attr('aria-expanded') === 'true';
// disable all existing tabs
$metaBox.find('.meta-tabs li')

View file

@ -2,153 +2,165 @@
* Sets up the sidebar behaviour
*/
jQuery(function () {
const $nav = jQuery('#dokuwiki__aside');
var $nav = jQuery('#dokuwiki__aside');
if (!$nav.length) return;
/**
* closes sidebar
*/
const setWideContent = function () {
$nav.find('div.nav-panel').hide(); // close all panels
jQuery('body').addClass('wide-content');
};
/**
* closes sidebar
*/
var setWideContent = function () {
$nav.find('div.nav-panel').hide(); // close all panels
jQuery('body').addClass('wide-content');
},
/**
* opens the sidebar
*/
const setDefaultContent = function () {
jQuery('body').removeClass('wide-content');
/**
* opens the sidebar
*/
setDefaultContent = function () {
jQuery('body').removeClass('wide-content');
};
};
/**
* Accessibility helper, focuses the first link witih the given element
*
* @param {jQuery} $elem
*/
const focusFirstSubLink = function ($elem) {
$elem.find('a').first().focus();
};
/**
* Accessibility helper, focuses the first link witih the given element
*
* @param {jQuery} $elem
*/
focusFirstSubLink = function ($elem) {
$elem.find('a').first().focus();
},
/**
* Toggle a navigation panel
*
* @param {jQuery} $toggler The h6 toggler
*/
const toggleNav = function ($toggler) {
const $panel = $toggler.next('div.nav-panel');
const isOpen = $panel.is(':visible');
// open sidebar on interaction
setDefaultContent();
// toggle the panel, focus first link after opening
$panel.dw_toggle(!isOpen, function () {
if (!isOpen) {
focusFirstSubLink($panel);
}
});
};
/**
* Initialize the content navigation
*
* It mangles the sidebar content and handles inline Icon configuration
*/
const initContentNav = function () {
const $main = $nav.find('nav.nav-main');
if (!$main.length) return;
const ELEMENT = 'h1,h2,h3,h4,h5'; // FIXME move to config
const $elements = $main.find(ELEMENT);
$elements.each(function () {
const $me = jQuery(this);
// prepare text and the optional icon
const data = $me.text().split('@', 2);
const text = data[0].trim();
const $icon = jQuery('<span class="ico">')
.text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase())
.wrapInner('<strong>');
if (data[1]) {
const src = data[1].trim();
$icon.load(DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg=' + src + '&e=1'); // directly embed
}
// make the new toggler
const $toggler = jQuery('<a>')
.addClass('nav')
.attr('href', '#')
.attr('role', 'heading')
.attr('aria-level', '2')
.text(text)
.wrapInner('<span class="lbl">')
.prepend($icon)
;
// wrap all following siblings til the next element in a wrapper
const $wrap = jQuery('<div>')
.addClass('nav-panel');
const $sibs = $me.nextAll();
for (let i = 0; i < $sibs.length; i++) {
const $sib = jQuery($sibs[i]);
if ($sib.is(ELEMENT)) break;
$sib.detach().appendTo($wrap);
}
$wrap.insertAfter($me);
// replace element with toggler
$me.replaceWith($toggler);
});
};
/**
* Initialize the open/close toggling of menu entries
*/
const initMenuHandling = function () {
$nav.on('click', 'a.nav', function (e) {
toggleNav(jQuery(this));
e.preventDefault();
});
};
/**
* Make sure the content area is always as high as the sidebar
*/
const initContentMinHeight = function () {
const $sidebar = jQuery('.page-wrapper').find('> .tools').find('.col-xs-12');
if ($sidebar.length == 1) {
const num = parseFloat($sidebar.height());
if (!isNaN(num)) {
jQuery('#dokuwiki__content').css('minHeight', num + 100);
}
}
};
/**
* Initialize the sidebar handle behaviour
*/
const initSidebarToggling = function () {
const $toggler = jQuery('.togglelink.page_main-content').find('a');
$toggler.click(function (e) {
e.preventDefault();
if (jQuery('body').hasClass('wide-content')) {
setDefaultContent();
} else {
setWideContent();
}
});
};
/**
* Show sidebar when accessing the search
*/
const initSearchToggling = function () {
jQuery('.toggleSearch').find('a').click(function (e) {
/**
* Toggle a navigation panel
*
* @param {jQuery} $toggler The h6 toggler
*/
toggleNav = function ($toggler) {
var $panel = $toggler.next('div.nav-panel');
var isOpen = $panel.is(':visible');
// open sidebar on interaction
setDefaultContent();
e.preventDefault();
jQuery('#qsearch__in').focus();
});
// toggle the panel, focus first link after opening
$panel.dw_toggle(!isOpen, function () {
if (!isOpen) {
focusFirstSubLink($panel);
}
});
},
};
/**
* Initialize the content navigation
*
* It mangles the sidebar content and handles inline Icon configuration
*/
initContentNav = function () {
var $main = $nav.find('nav.nav-main');
if (!$main.length) return;
var ELEMENT = 'h1,h2,h3,h4,h5'; // FIXME move to config
var $elements = $main.find(ELEMENT);
$elements.each(function () {
var $me = jQuery(this),
// prepare text and the optional icon
data = $me.text().split('@', 2),
text = data[0].trim();
var $icon = jQuery('<span class="ico">')
.text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase())
.wrapInner('<strong>');
if (data[1]) {
var src = data[1].trim();
$icon.load(DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg=' + src + '&e=1'); // directly embed
}
// make the new toggler
var $toggler = jQuery('<a>')
.addClass('nav')
.attr('href', '#')
.attr('role', 'heading')
.attr('aria-level', '2')
.text(text)
.wrapInner('<span class="lbl">')
.prepend($icon)
;
// wrap all following siblings til the next element in a wrapper
var $wrap = jQuery('<div>')
.addClass('nav-panel');
var $sibs = $me.nextAll();
for (var i = 0; i < $sibs.length; i++) {
var $sib = jQuery($sibs[i]);
if ($sib.is(ELEMENT)) break;
$sib.detach().appendTo($wrap);
}
$wrap.insertAfter($me);
// replace element with toggler
$me.replaceWith($toggler);
});
},
/**
* Initialize the open/close toggling of menu entries
*/
initMenuHandling = function () {
$nav.on('click', 'a.nav', function (e) {
toggleNav(jQuery(this));
e.preventDefault();
});
},
/**
* Make sure the content area is always as high as the sidebar
*/
initContentMinHeight = function () {
var $sidebar = jQuery('.page-wrapper').find('> .tools').find('.col-xs-12');
if ($sidebar.length == 1) {
var num = parseFloat($sidebar.height());
if (!isNaN(num)) {
jQuery('#dokuwiki__content').css('minHeight', num + 100);
}
}
},
/**
* Initialize the sidebar handle behaviour
*/
initSidebarToggling = function () {
var $toggler = jQuery('.togglelink.page_main-content').find('a');
$toggler.click(function (e) {
e.preventDefault();
if (jQuery('body').hasClass('wide-content')) {
setDefaultContent();
} else {
setWideContent();
}
});
},
/**
* Show sidebar when accessing the search
*/
initSearchToggling = function () {
jQuery('.toggleSearch').find('a').click(function (e) {
setDefaultContent();
e.preventDefault();
jQuery('#qsearch__in').focus();
});
},
/**
* Open and close the sidebar in mobile view
*/
initMobileToggling = function () {
jQuery('.menu-togglelink').find('a').click(function (e) {
e.preventDefault();
var $body = jQuery('body');
$body.toggleClass('show-mobile-sidebar');
});
};
// main
initContentNav();
@ -156,5 +168,6 @@ jQuery(function () {
initMenuHandling();
initContentMinHeight();
initSearchToggling();
initMobileToggling();
});

View file

@ -363,7 +363,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* copyright */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
tpl_license('');
tpl_license($img = false, $imgonly = false, $return = false, $wrap = false);
?>
</p>
</div>

View file

@ -6,3 +6,4 @@
/* DOKUWIKI:include js/meta-box.js */
/* DOKUWIKI:include js/sidebar.js */
/* DOKUWIKI:include js/breadcrumb.js */

View file

@ -160,6 +160,8 @@ __nav_direct_background__ = "#FFF"
__nav_direct_color__ = "#286da8"
__box_shadow_colored__ = "0 0 .5em rgba(40,109,168,.5)"
__box_shadow__ = "0 0 .5em rgb(153,153,153,.5)"
__box_shadow_right_bottom__ = "0.1em 0.3rem 0.5em rgb(153,153,153,.5)"
__box_shadow_bottom__ = "0 0.1em 0.5em rgb(153,153,153,.5)"
__box_shadow_offset__ = ".1em .1em .1em rgb(153,153,153,.5)"
__nav_menu_color__ = "#696969"
__nav_menu_hover_color__ = "#286da8"

View file

@ -1,9 +1,14 @@
<?php
if (!defined('DOKU_INC')) die();
if(!defined('DOKU_INC')) die();
echo '<div class="menu-togglelink mobile-only"><a href=\'#\'>MOB</a></div>';
echo '<div class="logo">';
echo '<div class="menu-togglelink mobile-only">';
echo '<a href="#">';
echo inlineSVG(__DIR__ . '/../img/menu.svg');
echo '<span class="sr-out">'.tpl_getLang('a11y_sidebartoggle').'</span>';
echo '</a>';
echo '</div>';
\dokuwiki\template\sprintdoc\Template::getInstance()->mainLogo();
echo "<hr class=\"structure\" /></div>";
echo '<div class="logo">';
\dokuwiki\template\sprintdoc\Template::getInstance()->mainLogo();
echo '<hr class="structure" />';
echo '</div>';

View file

@ -50,22 +50,24 @@
<?php if($conf['breadcrumbs']): ?>
<a class="nav" role="heading" aria-level="2">
<span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg') ?></span>
<span class="lbl"><?php echo tpl_getLang('head_menu_trace'); ?></span>
</a>
<div class="nav-panel level1">
<ul>
<?php /* trace breadcrumbs as list */
// FIXME move to helper class
$crumbs = breadcrumbs();
$crumbs = array_reverse($crumbs, true);
foreach($crumbs as $id => $name) {
echo '<li>';
tpl_link(wl($id), hsc($name), 'title="' . $id . '"');
echo '</li>';
}
?>
</ul>
</div>
<nav class="nav-trace">
<a class="nav" role="heading" aria-level="2">
<span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg') ?></span>
<span class="lbl"><?php echo tpl_getLang('head_menu_trace'); ?></span>
</a>
<div class="nav-panel level1">
<ul>
<?php /* trace breadcrumbs as list */
// FIXME move to helper class
$crumbs = breadcrumbs();
$crumbs = array_reverse($crumbs, true);
foreach($crumbs as $id => $name) {
echo '<li>';
tpl_link(wl($id), hsc($name), 'title="' . $id . '"');
echo '</li>';
}
?>
</ul>
</div>
</nav>
<?php endif ?>