#17: make header layout configurable
This commit is contained in:
parent
e9519300fa
commit
72166b7941
9 changed files with 171 additions and 3 deletions
|
@ -5,4 +5,4 @@
|
|||
*/
|
||||
|
||||
$conf['sidebar_sections'] = 'h1,h2,h3,h4,h5';
|
||||
|
||||
$conf['header_layout'] = 'header-default';
|
||||
|
|
|
@ -9,3 +9,12 @@ $meta['sidebar_sections'] = array(
|
|||
'li.level1 > .li',
|
||||
),
|
||||
);
|
||||
|
||||
$meta['header_layout'] = array(
|
||||
'multichoice',
|
||||
'_choices' => array(
|
||||
'header-default',
|
||||
'header-compact',
|
||||
'header-hidden',
|
||||
),
|
||||
);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
2
main.php
2
main.php
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue