#17: make header layout configurable

This commit is contained in:
Jana Deutschländer 2019-03-11 16:08:20 +01:00 committed by Andreas Gohr
commit 72166b7941
9 changed files with 171 additions and 3 deletions

View file

@ -5,4 +5,4 @@
*/
$conf['sidebar_sections'] = 'h1,h2,h3,h4,h5';
$conf['header_layout'] = 'header-default';

View file

@ -9,3 +9,12 @@ $meta['sidebar_sections'] = array(
'li.level1 > .li',
),
);
$meta['header_layout'] = array(
'multichoice',
'_choices' => array(
'header-default',
'header-compact',
'header-hidden',
),
);

View file

@ -207,3 +207,75 @@
}
}
}
/* + + + + + layout option compact + + + + + */
.header-compact {
#dokuwiki__header {
.main-title.desktop-only p.claim,
p.claim {
display: none;
}
// desktop
@media @screen_min-md {
div.claim {
vertical-align: top;
}
.main-title.desktop-only {
vertical-align: top;
}
.main-title.desktop-only,
.logo {
padding-top: 0.4rem
}
}
// mobile middle
@media @screen_max-md {
.logo {
display: block;
position: absolute;
top: 0;
left: 3rem;
.mobile-only {
margin: .4rem;
height: 1.75rem;
}
}
.main-title:not([class*="desktop-only"]) {
display: inline-block;
vertical-align: top;
padding-left: 1.75rem;
}
p.title {
font-size: 1rem;
}
}
@media @screen_max-sm {
min-height: 2.7rem;
}
@media @screen_max-xxs {
min-height: 70px; // needed for menu select toolbar
.logo {
left: 2rem;
}
.menu-tool-select {
padding-top: .3rem;
}
}
}
}

View file

@ -297,3 +297,73 @@
} // a
} // ul
} // nav-usertools
/* + + + + + layout option compact + + + + + */
.header-compact {
#dokuwiki__usertools.nav-usertools {
// mobile
@media @screen_max-md {
left: 6rem;
ul {
overflow: hidden;
li.user {
color: @ini_background_site;
bdi {
position: absolute;
width: 0;
padding: 0;
text-indent: -10000px;
&:before {
transition: @transition background-color;
background-color: @ini_background_site;
color: @ini_nav_menu_color;
text-indent: 0;
}
}
> a {
padding: 0 .2em;
color: @ini_nav_menu_hover_bg;
bdi {
&:before {
background-color: @ini_nav_menu_hover_bg;
color: @ini_nav_menu_hover_color;
}
}
&:hover {
color: @ini_nav_menu_hover_color;
bdi {
&:before {
background-color: @ini_nav_menu_hover_color;
color: @ini_nav_menu_hover_bg;
}
}
}
}
bdi + bdi {
display: none;
}
}
}
}
@media @screen_max-sm {
ul li {
position: static;
float: right;
top: 0; right: 0;
}
}
}
}

View file

@ -166,6 +166,16 @@
}
}
/* + + + + + layout option compact + + + + + */
.header-compact {
.header {
.row > .col-xs-12 {
height: auto;
min-height: fit-content;
}
}
}
.tools {
.row > .col-xs-12 {
position: absolute;

View file

@ -65,7 +65,7 @@ include('tpl/favicon_tiles.php');
<?php tpl_includeFile('meta.html') ?>
</head>
<body id="dokuwiki__top" class="<?php echo tpl_classes(); ?> wide-content showSidebar">
<body id="dokuwiki__top" class="<?php echo tpl_classes(); ?> wide-content showSidebar <?php echo tpl_getConf('header_layout'); ?>">
<div id="dokuwiki__site">
<?php

View file

@ -10,3 +10,7 @@ $lang['sidebar_sections_o_h1'] = 'Überschriften 1. Ordnung';
$lang['sidebar_sections_o_h1,h2'] = 'Überschriften der 1. und 2. Ordnung';
$lang['sidebar_sections_o_h1,h2,h3,h4,h5'] = 'Alle Überschriften';
$lang['sidebar_sections_o_li.level1 > .li'] = 'Top-level Listeneinträge in verschachtelten Listen';
$lang['header_layout'] = 'Layout des Headers anpassen:';
$lang['header_layout_o_default'] = 'großer Header für langen Wiki Titel und Tagline';
$lang['header_layout_o_compact'] = 'kompakter Header für kurzen Wiki Titel ohne Tagline';

View file

@ -11,4 +11,7 @@ $lang['sidebar_sections_o_h1,h2'] = '1st and 2nd order headings';
$lang['sidebar_sections_o_h1,h2,h3,h4,h5'] = 'All headings';
$lang['sidebar_sections_o_li.level1 > .li'] = 'Top-level list items';
$lang['header_layout'] = 'Adjust header layout:';
$lang['header_layout_o_default'] = 'generous header layout for long wiki titel and tagline';
$lang['header_layout_o_compact'] = 'compact header layout for short wiki title and hidden tagline';

View file

@ -69,7 +69,7 @@ $showSidebar = true;
/* #dokuwiki__top used as anchor for "back to top" button/link links */
$classWideContent = ($ACT === "show") ? "": "wide-content ";
?>
<body id="dokuwiki__top" class="<?php echo ($ACT) ? 'do-'.$ACT : 'do-none'; ?> <?php echo $classWideContent; ?><?php echo ($showSidebar) ? 'showSidebar' : ''; ?>">
<body id="dokuwiki__top" class="<?php echo ($ACT) ? 'do-'.$ACT : 'do-none'; ?> <?php echo $classWideContent; ?><?php echo ($showSidebar) ? 'showSidebar' : ''; ?> <?php echo tpl_getConf('header_layout'); ?>">
<div id="dokuwiki__site" class="<?php echo tpl_classes(); ?>">
<?php