Merge branch 'master' of gitlab.cosmocode.de:deutschlaender/sprintdoc-template into spis-master
This commit is contained in:
Silke Pisulla
commit
c27edccc74
15 changed files with 361 additions and 185 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
// 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 */
|
||||
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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__;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -165,13 +165,13 @@
|
|||
}
|
||||
|
||||
.wide-content {
|
||||
.logo{ }
|
||||
.content {
|
||||
.row > .col-xs-12 {
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.showSidebar {
|
||||
.content {
|
||||
.row > .col-xs-12 {
|
||||
|
|
@ -179,7 +179,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.main-sidebar {
|
||||
|
|
@ -236,6 +235,7 @@
|
|||
@media @screen_max-md {
|
||||
.claim {
|
||||
min-height: 3rem;
|
||||
|
||||
.logo {
|
||||
.mobile-only {
|
||||
margin: .8rem 1rem .6rem 0;
|
||||
|
|
@ -243,3 +243,28 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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
1
img/menu.svg
Normal 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 |
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -2,21 +2,21 @@
|
|||
* 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 () {
|
||||
var setWideContent = function () {
|
||||
$nav.find('div.nav-panel').hide(); // close all panels
|
||||
jQuery('body').addClass('wide-content');
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* opens the sidebar
|
||||
*/
|
||||
const setDefaultContent = function () {
|
||||
setDefaultContent = function () {
|
||||
jQuery('body').removeClass('wide-content');
|
||||
|
||||
};
|
||||
|
|
@ -26,18 +26,18 @@ jQuery(function () {
|
|||
*
|
||||
* @param {jQuery} $elem
|
||||
*/
|
||||
const focusFirstSubLink = function ($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');
|
||||
toggleNav = function ($toggler) {
|
||||
var $panel = $toggler.next('div.nav-panel');
|
||||
var isOpen = $panel.is(':visible');
|
||||
// open sidebar on interaction
|
||||
setDefaultContent();
|
||||
// toggle the panel, focus first link after opening
|
||||
|
|
@ -46,35 +46,36 @@ jQuery(function () {
|
|||
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');
|
||||
initContentNav = function () {
|
||||
var $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);
|
||||
var ELEMENT = 'h1,h2,h3,h4,h5'; // FIXME move to config
|
||||
var $elements = $main.find(ELEMENT);
|
||||
$elements.each(function () {
|
||||
const $me = jQuery(this);
|
||||
var $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">')
|
||||
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]) {
|
||||
const src = data[1].trim();
|
||||
var 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>')
|
||||
var $toggler = jQuery('<a>')
|
||||
.addClass('nav')
|
||||
.attr('href', '#')
|
||||
.attr('role', 'heading')
|
||||
|
|
@ -85,11 +86,11 @@ jQuery(function () {
|
|||
;
|
||||
|
||||
// wrap all following siblings til the next element in a wrapper
|
||||
const $wrap = jQuery('<div>')
|
||||
var $wrap = jQuery('<div>')
|
||||
.addClass('nav-panel');
|
||||
const $sibs = $me.nextAll();
|
||||
for (let i = 0; i < $sibs.length; i++) {
|
||||
const $sib = jQuery($sibs[i]);
|
||||
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);
|
||||
}
|
||||
|
|
@ -98,36 +99,36 @@ jQuery(function () {
|
|||
// replace element with toggler
|
||||
$me.replaceWith($toggler);
|
||||
});
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize the open/close toggling of menu entries
|
||||
*/
|
||||
const initMenuHandling = function () {
|
||||
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');
|
||||
initContentMinHeight = function () {
|
||||
var $sidebar = jQuery('.page-wrapper').find('> .tools').find('.col-xs-12');
|
||||
if ($sidebar.length == 1) {
|
||||
const num = parseFloat($sidebar.height());
|
||||
var 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');
|
||||
initSidebarToggling = function () {
|
||||
var $toggler = jQuery('.togglelink.page_main-content').find('a');
|
||||
$toggler.click(function (e) {
|
||||
e.preventDefault();
|
||||
if (jQuery('body').hasClass('wide-content')) {
|
||||
|
|
@ -136,18 +137,29 @@ jQuery(function () {
|
|||
setWideContent();
|
||||
}
|
||||
});
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Show sidebar when accessing the search
|
||||
*/
|
||||
const initSearchToggling = function () {
|
||||
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
|
||||
|
|
@ -156,5 +168,6 @@ jQuery(function () {
|
|||
initMenuHandling();
|
||||
initContentMinHeight();
|
||||
initSearchToggling();
|
||||
initMobileToggling();
|
||||
});
|
||||
|
||||
|
|
|
|||
2
main.php
2
main.php
|
|
@ -363,7 +363,7 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
|
|||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* copyright */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
tpl_license('');
|
||||
tpl_license($img = false, $imgonly = false, $return = false, $wrap = false);
|
||||
?>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,3 +6,4 @@
|
|||
/* DOKUWIKI:include js/meta-box.js */
|
||||
/* DOKUWIKI:include js/sidebar.js */
|
||||
/* DOKUWIKI:include js/breadcrumb.js */
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,14 @@
|
|||
<?php
|
||||
if(!defined('DOKU_INC')) die();
|
||||
|
||||
echo '<div class="menu-togglelink mobile-only"><a href=\'#\'>MOB</a></div>';
|
||||
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>';
|
||||
|
||||
echo '<div class="logo">';
|
||||
|
||||
\dokuwiki\template\sprintdoc\Template::getInstance()->mainLogo();
|
||||
|
||||
echo "<hr class=\"structure\" /></div>";
|
||||
echo '<hr class="structure" />';
|
||||
echo '</div>';
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
|
||||
|
||||
<?php if($conf['breadcrumbs']): ?>
|
||||
<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>
|
||||
|
|
@ -68,4 +69,5 @@
|
|||
?>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<?php endif ?>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue