Commit 85b78c1f authored by Naomi Guyer's avatar Naomi Guyer Committed by Aaron Wells
Browse files

Navigation (bootstrap)

Bug 1465107: Use Bootstrap CSS Framework
Applied bootstrap tabs and tidy up form styling
Mobile menu
Add bootstrap accessibility, tab styling to bootstrap

Change-Id: Ifa42d482f5fd7e1cdfb52bae1ebb5ff3bf5085a9
parent 506c5805
......@@ -11,10 +11,10 @@
<th>{str tag="name" section="interaction.forum"}</th>
<th class="center">{str tag="Topics" section="interaction.forum"}</th>
<th class="subscribeth">
<span class="accessible-hidden">{str tag=Subscribe section=interaction.forum}</span>
<span class="accessible-hidden sr-only">{str tag=Subscribe section=interaction.forum}</span>
</th>
<th class="right btns2">
<span class="accessible-hidden">{str tag=edit}</span>
<span class="accessible-hidden sr-only">{str tag=edit}</span>
</th>
</tr>
{foreach from=$forums item=forum}
......
......@@ -41,7 +41,7 @@ foreach ($templatedata['basiclayoutoptions'] as $value => $data) {
$description = (isset($data['description'])) ? $data['description'] : '';
$text = Pieform::hsc($data['columns']);
$output .= '<div class="layoutoption">'
. '<label class="accessible-hidden" for="radiolayout_' . Pieform::hsc($value) . '">' . $text . '</label>'
. '<label class="accessible-hidden sr-only" for="radiolayout_' . Pieform::hsc($value) . '">' . $text . '</label>'
. '<input type="radio" id="radiolayout_' . Pieform::hsc($value) . '" name="layoutselect"'
. ' value="' . Pieform::hsc($value) . '"'
. (($templatedata['currentlayout'] == $value) ? ' checked="checked"' : '') . '>'
......@@ -76,7 +76,7 @@ for ($row = 0; $row < $templatedata['maxrows']; $row++) {
$description = (isset($data['description'])) ? $data['description'] : '';
$text = Pieform::hsc($data['columns']);
$output .= '<div class="layoutoption">'
. '<label class="accessible-hidden" for="advancedlayout_' . Pieform::hsc($value) . '">' . $text . '</label>'
. '<label class="accessible-hidden sr-only" for="advancedlayout_' . Pieform::hsc($value) . '">' . $text . '</label>'
. '<input type="radio" name="advancedlayoutselect" id="advancedlayout_' . Pieform::hsc($value) . '"'
. ' value="' . Pieform::hsc($value) . '"'
. (($templatedata['currentlayout'] == $value) ? ' checked="checked"' : '') . '>'
......@@ -164,4 +164,4 @@ echo '<div id="exportsubmitcontainer">';
echo $elements['submit']['html'];
echo '</div>';
echo $hidden_elements;
echo '</form>';
\ No newline at end of file
echo '</form>';
......@@ -11,9 +11,9 @@
{foreach from=$facets item=term}
{if $term.count > 0}
<li{if $term.term == $selected} class="current-tab"{/if}>
<a href="{$WWWROOT}search/elasticsearch/index.php?query={$query}&mainfacetterm={$term.term}{if $tagsonly}&tagsonly=true{/if}&limit={$limit}"{if $term.term == $selected} class="current-tab"{/if}>{str tag=$term.display section=search.elasticsearch} ({$term.count})<span class="accessible-hidden">({str tag=tab}{if $term.term == $selected} {str tag=selected}{/if})</span></a></li>
<a href="{$WWWROOT}search/elasticsearch/index.php?query={$query}&mainfacetterm={$term.term}{if $tagsonly}&tagsonly=true{/if}&limit={$limit}"{if $term.term == $selected} class="current-tab"{/if}>{str tag=$term.display section=search.elasticsearch} ({$term.count})<span class="accessible-hidden sr-only">({str tag=tab}{if $term.term == $selected} {str tag=selected}{/if})</span></a></li>
{else}
<li><span class="inactive">{str tag=$term.display section=search.elasticsearch}<span class="accessible-hidden">({str tag=tab} {str tag=disabled})</span></span></li>
<li><span class="inactive">{str tag=$term.display section=search.elasticsearch}<span class="accessible-hidden sr-only">({str tag=tab} {str tag=disabled})</span></span></li>
{/if}
{/foreach}
</ul></div>
\ No newline at end of file
</ul></div>
/*jslint browser: true, nomen: true, white: true */
jQuery(function($) {
"use strict";
$('.pieform.jstabs').prepend('<ul class="nav nav-tabs"></ul>');
var id,
listitem,
heading,
tabcontent = $('.pieform.jstabs .pieform-fieldset').parent(),
tabnav = $('.pieform.jstabs').find('.nav-tabs');
// Remove class collasped that has been generated by pieform
$('.pieform-fieldset').removeClass('collapsed');
tabcontent.removeClass('collapsed');
// Add div and bootstrap class on tabcontent to show and hide
tabcontent.addClass('tab-pane').wrapAll('<div class="tab-content">');
tabcontent.first().addClass('active');
// Set up tab navigation
for(var i = 0; i < tabcontent.length; i = i + 1){
// get id and title from div (tabcontent)
id = $(tabcontent[i]).attr('id');
heading = $(tabcontent[i]).find('legend h4').first().text();
listitem = '<li role="presentation"><a href="#'+id+'" data-toggle="tab">'+heading+'</a></li>';
tabnav.append(listitem);
}
tabnav.find('li:first-child').addClass('active');
});
// using bootstrap popover to style the help content
.contextualHelp {
position: absolute;
top: 0;
left: 0;
z-index: $zindex-popover;
max-width: $popover-max-width;
padding: 1px;
// Reset font and text propertes given new insertion method
font-family: $font-family-base;
font-size: $font-size-base;
font-weight: normal;
line-height: $line-height-base;
text-align: left;
background-color: $popover-bg;
background-clip: padding-box;
border: 1px solid $popover-fallback-border-color;
border: 1px solid $popover-border-color;
border-radius: $border-radius-large;
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion
white-space: normal;
.fr {
float: right;
}
h3 {
margin: 0; // reset heading margin
padding: 8px 14px;
font-size: $font-size-base;
background-color: $popover-title-bg;
border-bottom: 1px solid darken($popover-title-bg, 5%);
border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0;
}
p {
padding: 9px;
}
}
......@@ -11,7 +11,6 @@
color: $gray;
margin-left: 20px;
}
.pieform-fieldset {
.html {
@include clearfix;
......@@ -51,6 +50,12 @@ select {
@extend .form-control;
}
input[type="text"],
textarea,
select {
@extend .form-control;
}
.form-group {
@media (min-width: $screen-sm-min) {
&.input-small {
......@@ -81,7 +86,6 @@ select {
}
}
}
// remove styles on outer element as class is duplicated to form element
.form-group.btn {
background: none;
......@@ -92,7 +96,6 @@ select {
border: none;
}
}
.wysiwyg label,
.textarea label {
vertical-align: top;
......@@ -103,8 +106,6 @@ select {
.pieform-fieldset legend {
display: none;
}
.radio-aligned {
display: inline-block;
}
......@@ -126,6 +127,22 @@ select {
@media (min-width: $screen-sm-min) {
margin-left: 200px;
}
> a {
display: inline-block;
margin-left: 0;
@media (min-width: 768px) {
margin-left: 200px;
}
}
}
.requiredmarker {
color:red;
}
.help {
vertical-align: top;
}
.requiredmarker {
......
.header {
.site-logo{
padding-top: 3px;
float: left;
padding-left: 5px;
margin-top: 21px;
a {
float:left
}
@media (min-width: 768px) {
margin-top: 0;
}
}
.admin-title {
display:none;
position: absolute;
height: 65px;
top: 0;
clear: none;
line-height: 1em;
margin-left: 25px;
background-color: lighten($brand-default, 2%);
padding: 25px 15px 5px 40px;
@media (min-width: 768px) {
display: inline-block;
}
a {
color:#777;
}
&:before {
position: absolute;
left: 0;
top: 0px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 32.5px 0 32.5px 20px;
border-color: transparent transparent transparent #fff;
}
&:after {
position: absolute;
right: -20px;
top: 0px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 32.5px 0 32.5px 20px;
border-color: transparent transparent transparent lighten($brand-default, 2%);
}
}
}
......@@ -2,40 +2,29 @@
* Base structure
*/
/* Move down content because we have a fixed navbar that is 50px tall */
body {
max-width:100%;
overflow-x:hidden;
@media (min-width: 768px) {
padding-top: 65px;
padding-top: 65px; // Move down content because we have a fixed navbar on desktop/tablet that is 50px tall
}
}
// override some stuff from RAW @todo deleteonce we don't need this anymore
.header{
ul li {
margin: 0;
&.admin {
background-color: $brand-default;
.main {
margin: 10px 5px;
background-color: #fff;
@media (min-width: 768px) {
margin:0;
margin-bottom: 20px;
}
}
}
.main {
margin:20px 0;
}
}
#site-logo {
margin: 0
}
#usf {
float: none;
clear: none;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.main {
......@@ -49,22 +38,6 @@ body {
}
}
.site-logo{
padding-top: 5px;
float: left;
padding-left: 5px;
}
/*
* Main content
*/
.main .page-header {
margin-top: 0;
}
.footer {
max-width:100%;
}
\ No newline at end of file
/*
* Primary navigation menu
*/
.main-nav {
.container {
@media (max-width: $screen-sm-min) {
padding:0;
}
}
ul {
min-width: 0;
margin:0;
@media (min-width: $screen-md-min) {
margin: 0px -5px 0px -15px;
}
@media (min-width: $screen-sm-min) and (max-width: $screen-md-min - 1) {
margin: 0px -5px 0px 0px;
}
}
.navbar-header{
margin:0;
@media (min-width: $screen-sm-min) {
margin-left:-15px;
}
@media (min-width: $screen-md-min) {
+ ul {
margin-left:0;
}
}
}
li {
margin: 0;
a {
color: rgba(#fff, 0.8);
}
}
.navbar-brand{
color:#fff;
padding: 13px 15px;
margin-left: -10px;
border-bottom:1px solid lighten($navbar-inverse-bg, 2%);
width:100%;
@media (min-width: $screen-sm-min) {
width:auto;
margin-left:0;
border:0;
}
.glyphicon {
top:3px;
}
}
.nav > li > a {
border-top:1px solid darken($navbar-inverse-bg, 2%);
border-bottom:1px solid lighten($navbar-inverse-bg, 2%);
padding: 10px 29px;
line-height: 20px;
font-weight:normal;
@media (min-width: $screen-sm-min) {
border:none;
padding: 15px 29px;
}
@media (min-width: $screen-sm-min) and (max-width: $screen-md-min - 1) {
padding: 15px 10px;
}
&:hover, &:focus {
text-decoration:none;
}
}
// on hover, if dropdown. show
ul.nav > li:hover > ul.dropdown-menu {
display: block;
}
//only shown on mobile, or when dropdiowns are turned on
.child-nav {
background-color: darken($navbar-inverse-bg, 10%);
border-top:0;
min-width: 200px;
max-width: 100%;
overflow: hidden;
padding: 15px 17px;
@media (min-width: $screen-sm-min) {
background-color: #fff;
margin-left: -1px;
}
li {
display: block;
a {
padding: 10px 12px; //needs to override bootstrap
font-weight: normal; //needs to override bootstrap
&:hover, &:focus {
text-decoration:none;
background-color: rgba(darken($navbar-inverse-link-hover-bg, 5%), 0.5);
}
}
}
.active > a {
font-weight: bold;
background-color: rgba(darken($navbar-inverse-link-hover-bg, 5%), 0.8);
@media (min-width: $screen-sm-min) {
background-color: $brand-default;
&:hover {
color: $text-color;
}
}
}
a {
display:block;
width:100%;
@include text-overflow;
@media (min-width: $screen-sm-min) {
border:0;
max-width: 300px;
color:$link-color;
}
}
}
}
/*
* Modificatiosn to bootstraps default navbar components
*/
.navbar.header {
margin-bottom:0;
padding: 7px 0;
border-bottom:1px solid #f0f0f0;
}
.navbar-fixed-top {
position:relative;
border: 0;
@media (min-width: $screen-sm-min) {
position:fixed;
}
}
.navbar-nav {
font-size:14px;
margin: 7px -5px;
@media (min-width: $screen-sm-min) {
float:none;
margin: 0px -15px;
}
}
.navbar-collapse {
padding:0;
}
.navbar-form {
padding-right: 0;
@media (max-width: $screen-sm-min - 1) {
width:100%;
margin:0;
padding: 10px 0;
.container > & {
margin: 0 auto;
}
}
@media (min-width: $screen-sm-min) {
@include transition-duration(0.3s);
}
input[type=submit] {
display: none !important; // temp
}
}
.nav>li>a {
padding: 10px 5px;
@media (min-width: $screen-sm-min) {
padding: 10px 15px;
}
}
.navbar-inverse {
.navbar-nav {
>.active {
> a,
> a:hover,
> a:focus {
@media (max-width: $screen-sm-min - 1) {
border-top-color: rgba(darken($navbar-inverse-bg, 7%), 0.5);
font-weight:bold;
color: $navbar-inverse-link-hover-color;
background-color: $navbar-inverse-link-hover-bg;
}
}
}
}
}
.top-nav.navbar-nav {
float:right;
margin-right: 10%;
@media (min-width: 768px) {
clear:none;
float:none;
margin-right: 0;
}
>li {
display: inline-block;
float: left;
}
.has-icon {
.nav-title{
display:none; //if icon - hide title on mobile
@media (min-width: 768px) {
display:inline-block;
}
}
.glyphicon {
margin-right:5px;
}
}
}
.header.navbar {
margin-bottom:0;
padding: 5px 0;
border-bottom:1px solid #f0f0f0;
}
.navbar-fixed-top{
position:relative;
@media (min-width: 768px) {
position:fixed;
}
}
.navbar-nav {
font-size:14px;
}
.navbar-form {
height: 0;
visibility: hidden;
opacity:0;
@media (min-width: 768px) {
opacity:1;