Commit 2f117fec authored by Robert Lyon's avatar Robert Lyon Committed by Gerrit Code Review
Browse files

Merge "Bug #1824044 'skip to main content' link skips the new page header on collections"

parents 515cfba6 5d0989ad
......@@ -165,19 +165,15 @@ jQuery(function($) {
* Custom dropdown creates a fake select box that can have items of an
* arbitrary length (unlike attachInputDropdown which uses a select).
* For screenreaders, it works like a UL of links.
* Keyboard nav doesn't work for sighted users though.
*/
// open the dropdown when it is clicked
$('.custom-dropdown > .picker').on("click", function() {
$(this).parent().children('ul').toggleClass('d-none');
});
// close the dropdown when there is a click anywhere outside it
$(document).on('click', function(event) {
if (!$(event.target).closest('.custom-dropdown').length) {
$('.custom-dropdown').children('ul').addClass('d-none');
}
/* Utilize bootstrap functions for showing/ hiding the list when
* user presses the 'Enter' key (keyCode 13)
*/
$('.custom-dropdown > .picker').keydown(function(e){
if (e.keyCode == 13) {
$(this).parent().children('ul').collapse('toggle');
}
});
}
......
......@@ -163,19 +163,15 @@ jQuery(function($) {
* Custom dropdown creates a fake select box that can have items of an
* arbitrary length (unlike attachInputDropdown which uses a select).
* For screenreaders, it works like a UL of links.
* Keyboard nav doesn't work for sighted users though.
*/
// open the dropdown when it is clicked
$('.custom-dropdown > .picker').on("click", function() {
$(this).parent().children('ul').toggleClass('d-none');
});
// close the dropdown when there is a click anywhere outside it
$(document).on('click', function(event) {
if (!$(event.target).closest('.custom-dropdown').length) {
$('.custom-dropdown').children('ul').addClass('d-none');
}
/* Utilize bootstrap functions for showing/ hiding the list when
* user presses the 'Enter' key (keyCode 13)
*/
$('.custom-dropdown > .picker').keydown(function(e){
if (e.keyCode == 13) {
$(this).parent().children('ul').collapse('toggle');
}
});
}
......
......@@ -123,6 +123,10 @@
z-index: 3;
margin-left: 5px;
}
// except add pages to collections need no margin-left
.pagesavailable .btn-group {
margin-left: 0;
}
// Chrome bug - flex container doesn't work on fieldset tag
fieldset.btn-group {
......
......@@ -180,7 +180,8 @@ body.presentation-iframe {
// Pages and collections page header
.pageactions {
position: relative;
position: absolute;
top: 0px;
.btn-group-vertical {
position: fixed;
......@@ -192,6 +193,7 @@ body.presentation-iframe {
.pageheader {
background: $pageheader-bg;
position: relative;
.main {
padding-top: 30px;
......@@ -229,8 +231,8 @@ body.presentation-iframe {
}
// push in the right page margin to allow room for floating menu
.pageactions ~ .pageheader .pageheader-content,
.pageactions ~ .main-content {
.pageheader-actions,
.pageheader-actions + .main-content {
padding-right: 50px;
}
......
......@@ -6,7 +6,13 @@
<span id="collectionbtns" class="collection-nav-btns">
<nav class="custom-dropdown dropdown">
<ul class="d-none">
{foreach from=$collection item=view name=page}
{if $view->view == $viewid}
{$currentindex = $dwoo.foreach.page.index}
{/if}
{/foreach}
<span class="picker form-control" tabindex="0" data-toggle="collapse" data-target="#pagelist" aria-expanded="false" role="button" aria-controls="#pagelist">{str tag="viewingpage" section="collection"}<span id="currentindex" data-currentindex="{$currentindex}">{$currentindex + 1}</span>/{count($collection)}</span>
<ul id="pagelist" class="collapse">
{foreach from=$collection item=view name=page}
<li>
{if $view->view == $viewid}
......@@ -18,7 +24,6 @@
</li>
{/foreach}
</ul>
<span class="picker form-control">{str tag="viewingpage" section="collection"}<span id="currentindex" data-currentindex="{$currentindex}">{$currentindex + 1}</span>/{count($collection)}</span>
</nav>
{if count($collection) > 1}
......
......@@ -5,7 +5,7 @@
{include file="header/head.tpl"}
<body data-usethemedjs="true" class="no-js {if $ADMIN || $INSTITUTIONALADMIN || $STAFF || $INSTITUTIONALSTAFF}admin{/if} {if $loggedout}loggedout{/if} {if $pagename}{$pagename}{/if} {$presentation|default:'window'}">
<div class="skiplink btn-group btn-group-top">
<a class="sr-only sr-only-focusable btn btn-secondary" href="#main">{str tag=skipmenu}</a>
<a class="sr-only sr-only-focusable btn btn-secondary" {if $headertype=='page'}href="#header-content"{else}href="#main"{/if}>{str tag=skipmenu}</a>
</div>
{if $USERMASQUERADING || !$PRODUCTIONMODE || $SITECLOSED || $SITETOP}
......@@ -120,10 +120,8 @@
</header>
{if $headertype == "page"}
{include file="header/pageactions.tpl"}
{include file="header/pageheader.tpl"}
{elseif $headertype == "profile"}
{include file="header/profileactions.tpl"}
{include file="header/profileheader.tpl"}
{elseif $headertype == "matrix"}
{include file="header/matrixheader.tpl"}
......
<div class="pageheader">
<div id="header-content" class="pageheader pageheader-actions">
<div class="container pageheader-content">
<div class="row">
<div class="col-md-12 main">
......@@ -42,6 +42,7 @@
{/if}
</h1>
{/if}
<div class="btn-group-top-below">
{if $toolbarhtml}
{$toolbarhtml|safe}
......@@ -64,6 +65,8 @@
</div>
{/if}
</div>
{include file="header/pageactions.tpl"}
</div>
</div>
</div>
......
<div class="pageheader profileheader">
<div class="pageheader profileheader pageheader-actions">
<div class="container pageheader-content">
<div class="row">
<div class="{if $relationship == 'pending'}col-lg-6 {else}col-md-12{/if} main">
......@@ -45,6 +45,7 @@
{/if}
{/if}
{include file="header/profileactions.tpl"}
</div>
{if $relationship == 'pending'}
......
......@@ -703,7 +703,7 @@ This is the general layout of blocks. An example of this being used is the 'Late
<h2>{str tag=Collection section=collection}: Collection 1</h2>
<p class="navlabel">{str tag=navtopage section=collection}</p>
<nav class="custom-dropdown dropdown">
<ul class="d-none">
<ul id="pagelist" class="collapse">
<li>
<a href="" data-index="0">Page 1</a>
</li>
......@@ -714,7 +714,7 @@ This is the general layout of blocks. An example of this being used is the 'Late
<a href="" data-index="2">Page 3</a>
</li>
</ul>
<span class="picker form-control">{str tag=viewingpage section=collection}
<span class="picker form-control" tabindex="0" data-toggle="collapse" data-target="#pagelist" aria-expanded="false" role="button" aria-controls="#pagelist">{str tag=viewingpage section=collection}
<span id="currentindex" data-currentindex="1">2</span>
/3
</span>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment