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

htdocs/admin/site/options.php

@@ -40,7 +40,7 @@ $spamtraps = available_spam_traps();
 $siteoptionform = array(
     'name'       => 'siteoptions',
     'jsform'     => true,
-    'renderer'   => 'table',
+    'renderer'   => 'div',
     'plugintype' => 'core',
     'pluginname' => 'admin',
     'jssuccesscallback' => 'checkReload',

htdocs/js/mahara.js

@@ -331,7 +331,7 @@ function sendjsonrequest(script, data, rtype, successcallback, errorcallback, qu
         }
 
         var errtype = false;
-        if (!data.error) { 
+        if (!data.error) {
             errtype = 'ok';
         }
         else if (data.error == 'local') {
@@ -402,7 +402,7 @@ function newfilename(oldname, fileexistsfunc) {
 
 // Return the filename part of a full path
 function basename(path) {
-    if (path.indexOf('/') > -1) { 
+    if (path.indexOf('/') > -1) {
         var separator = '/';
     }
     else {
@@ -470,7 +470,7 @@ function contextualHelp(formName, helpName, pluginType, pluginName, page, sectio
     else if (section) {
         key = pluginType + '/' + pluginName + '/' + section;
         url_params.section = section;
-    } 
+    }
     else {
         key = pluginType + '/' + pluginName + '/' + formName + '/' + helpName;
         url_params.form = formName;
@@ -680,16 +680,16 @@ function clearCookie( name ) {
 }
 
 // expires is in seconds
-function setCookie( name, value, expires, path, domain, secure ) 
+function setCookie( name, value, expires, path, domain, secure )
 {
     // set time, it's in milliseconds
     var today = new Date();
     today.setTime( today.getTime() );
 
     /*
-    if the expires variable is set, make the correct 
-    expires time, the current script below will set 
-    it for x number of days, to make it for hours, 
+    if the expires variable is set, make the correct
+    expires time, the current script below will set
+    it for x number of days, to make it for hours,
     delete * 24, for minutes, delete * 60 * 24
     */
     if (expires) {
@@ -699,8 +699,8 @@ function setCookie( name, value, expires, path, domain, secure )
     var expires_date = new Date( today.getTime() + (expires) );
 
     document.cookie = name + "=" + escape( value ) +
-    ( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) + 
-    ( ( path ) ? ";path=" + path : "" ) + 
+    ( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) +
+    ( ( path ) ? ";path=" + path : "" ) +
     ( ( domain ) ? ";domain=" + domain : "" ) +
     ( ( secure ) ? ";secure" : "" );
 }
@@ -712,7 +712,7 @@ function toggleChecked(c) {
         for (cb in e) {
         if (e[cb].checked == true) {
                 e[cb].checked = '';
-            } 
+            }
             else {
                 e[cb].checked = 'checked';
             }
@@ -741,7 +741,7 @@ function countKeys(x) {
 }
 
 function keepElementInViewport(element) {
-    var pixels = getViewportPosition().y + getViewportDimensions().h 
+    var pixels = getViewportPosition().y + getViewportDimensions().h
         - getElementPosition(element).y - getElementDimensions(element).h;
     if (pixels < 0) {
         window.scrollBy(0,-pixels);
@@ -811,7 +811,7 @@ function augment_tags_control(elem, returnContainer) {
     }
 
     var help = getFirstElementByTagAndClassName('span', 'help', elem.parentNode);
-    
+
     var newNode = DIV();
     swapDOM(elem, newNode);
     appendChildNodes(newNode, tagContainer, elem, ' ', help);

htdocs/lang/en.utf8/mahara.php

@@ -638,7 +638,7 @@ $string['email']                    = 'Email';
 $string['emails']                    = 'Emails';
 $string['subject']                  = 'Subject';
 $string['message']                  = 'Message';
-$string['messageoptional']          = 'Message <span class="accessible-hidden">(optional)</span>';
+$string['messageoptional']          = 'Message <span class="accessible-hidden sr-only">(optional)</span>';
 $string['messagesent']              = 'Your message has been sent';
 $string['nosendernamefound']        = 'No sender name was submitted';
 $string['emailnotsent']             = 'Failed to send contact email. Error message: "%s"';
@@ -1184,4 +1184,3 @@ $string['vspace'] = 'Vertical space';
 $string['hspace'] = 'Horizontal space';
 $string['border'] = 'Border width';
 $string['alignment'] = 'Alignment';
-

htdocs/lib/form/elements/checkboxes.php

@@ -35,7 +35,7 @@ function pieform_element_checkboxes(Pieform $form, $element) {/*{{{*/
 
     $elementtitle = '';
     if (isset($element['title'])) {
-        $elementtitle = '<span class="accessible-hidden">' . $element['title'] . ': </span>';
+        $elementtitle = '<span class="accessible-hidden sr-only">' . $element['title'] . ': </span>';
     }
 
     foreach ($element['elements'] as $e) {

htdocs/lib/form/elements/color.php

@@ -48,7 +48,7 @@ EOF;
 
         $title = '';
         if (!empty($element['title'])) {
-            $title = '<span class="accessible-hidden">' . $element['title'] . ':</span>';
+            $title = '<span class="accessible-hidden sr-only">' . $element['title'] . ':</span>';
         }
 
         $optional .= ' <input type="checkbox" '
@@ -119,4 +119,3 @@ function pieform_element_color_get_headdata($element) {
     );
     return $result;
 }
-

htdocs/lib/pieforms/pieform.php

@@ -1467,7 +1467,7 @@ EOF;
             }
 
             if (!empty($element['hiddenlabel'])) {
-                $labelclass = ' class="accessible-hidden"';
+                $labelclass = ' class="accessible-hidden sr-only"';
             }
             else {
                 $labelclass = '';

htdocs/lib/pieforms/pieform/elements/bytes.php

@@ -73,7 +73,7 @@ function pieform_element_bytes(Pieform $form, $element) {/*{{{*/
         $numberinput .= ' aria-describedby="' . $form->element_descriptors($element) . '"';
     }
     $numberinput .= ">\n";
-    $uselect = '<label for="' . $formname . '_' . $name . '_units" class="accessible-hidden">' . get_string('units') . '</label>';
+    $uselect = '<label for="' . $formname . '_' . $name . '_units" class="accessible-hidden sr-only">' . get_string('units') . '</label>';
     $uselect .= '<select name="' . $name . '_units" id="' . $formname . '_' . $name . '_units"' . ' tabindex="' . Pieform::hsc($element['tabindex']) . '"';
     if (isset($element['description'])) {
         $uselect .= ' aria-describedby="' . $form->element_descriptors($element) . '"';

htdocs/lib/pieforms/pieform/elements/date.php

@@ -77,7 +77,7 @@ EOF;
 
     // Year
     $value = pieform_element_date_get_timeperiod_value('year', $element['minyear'], $element['maxyear'], $element, $form);
-    $year = '<label for="' . $name . '_year" class="accessible-hidden">' . get_string('year') . '</label>';
+    $year = '<label for="' . $name . '_year" class="accessible-hidden sr-only">' . get_string('year') . '</label>';
     $year .= '<select name="' . $name . '_year" id="' . $name . '_year"'
         . (!$required && !$dateisset ? ' disabled="disabled"' : '')
         . ' tabindex="' . Pieform::hsc($element['tabindex']) . '"';
@@ -92,7 +92,7 @@ EOF;
 
     // Month
     $value = pieform_element_date_get_timeperiod_value('month', 1, 12, $element, $form);
-    $month = '<label for="' . $name . '_month" class="accessible-hidden">' . get_string('month') . '</label>';
+    $month = '<label for="' . $name . '_month" class="accessible-hidden sr-only">' . get_string('month') . '</label>';
     $month .= '<select name="' . $name . '_month" id="' . $name . '_month"'
         . (!$required && !$dateisset ? ' disabled="disabled"' : '')
         . ' tabindex="' . Pieform::hsc($element['tabindex']) . '"';
@@ -108,7 +108,7 @@ EOF;
 
     // Day
     $value = pieform_element_date_get_timeperiod_value('day', 1, 31, $element, $form);
-    $day = '<label for="' . $name . '_day" class="accessible-hidden">' . get_string('day') . '</label>';
+    $day = '<label for="' . $name . '_day" class="accessible-hidden sr-only">' . get_string('day') . '</label>';
     $day .= '<select name="' . $name . '_day" id="' . $name . '_day"'
         . (!$required && !$dateisset ? ' disabled="disabled"' : '')
         . ' tabindex="' . Pieform::hsc($element['tabindex']) . '"';

htdocs/lib/pieforms/pieform/elements/expiry.php

@@ -73,7 +73,7 @@ function pieform_element_expiry(Pieform $form, $element) {/*{{{*/
         $numberinput .= ' aria-describedby="' . $form->element_descriptors($element) . '"';
     }
     $numberinput .= (isset($element['error']) ? ' class="error"' : '') . ">\n";
-    $uselect = '<label for="' . $formname . '_' . $name . '_units" class="accessible-hidden">' . get_string('units', 'mahara') . '</label>';
+    $uselect = '<label for="' . $formname . '_' . $name . '_units" class="accessible-hidden sr-only">' . get_string('units', 'mahara') . '</label>';
     $uselect .= '<select onchange="' . $name . '_change()" ';
     $uselect .= 'name="' . $name . '_units" id="' . $formname . '_' . $name . '_units"' . ' tabindex="' . Pieform::hsc($element['tabindex']) . '"';
     if (isset($element['description'])) {

htdocs/lib/pieforms/pieform/elements/radio.php

@@ -55,12 +55,12 @@ function pieform_element_radio(Pieform $form, $element) {
     $nolabels = isset($element['nolabels']) ? $element['nolabels'] : false;
     $classname = '';
     if (!empty($element['hiddenlabels'])) {
-        $classname = ' class="accessible-hidden"';
+        $classname = ' class="accessible-hidden sr-only"';
     }
 
     $titletext = '';
     if (!empty($element['title'])) {
-        $titletext = '<span class="accessible-hidden">' . Pieform::hsc($element['title']) . ': </span>';
+        $titletext = '<span class="accessible-hidden sr-only">' . Pieform::hsc($element['title']) . ': </span>';
     }
 
     $i = 0;

htdocs/lib/pieforms/pieform/renderers/div.php

@@ -32,6 +32,7 @@
  * @return string          The element rendered inside an appropriate container
  */
 function pieform_renderer_div(Pieform $form, $element) {/*{{{*/
+
     $formname = $form->get_name();
     // Set the class of the enclosing <div> to match that of the element
     $result = '<div';
@@ -39,7 +40,14 @@ function pieform_renderer_div(Pieform $form, $element) {/*{{{*/
         $result .= ' id="' . $formname . '_' .  Pieform::hsc($element['name']) . '_container"';
     }
     if (!empty($element['class'])) {
+
+        // add form-group classes to all real form fields
+        if ($element['class'] !== 'html') {
+            $element['class'] = $element['class'] . ' form-group';
+        }
+
         $result .= ' class="' . Pieform::hsc($element['class']) . '"';
+
     }
     $result .= '>';
 

htdocs/theme/bootstrap/artefact/blog/templates/import/blogs.tpl

@@ -42,7 +42,7 @@
             {foreach from=$displaydecisions key=opt item=displayopt}
                 {if !$blog.disabled[$opt]}
                 <input id="decision_{$blog.id}_{$opt}" class="blogdecision" id="{$blog.id}" type="radio" name="decision_{$blog.id}" value="{$opt}"{if $blog.decision == $opt} checked="checked"{/if}>
-                <label for="decision_{$blog.id}_{$opt}">{$displayopt}<span class="accessible-hidden">({$blog.title})</span></label><br>
+                <label for="decision_{$blog.id}_{$opt}">{$displayopt}<span class="accessible-hidden sr-only">({$blog.title})</span></label><br>
                 {/if}
             {/foreach}
         </div>
@@ -117,7 +117,7 @@
                 {foreach from=$displaydecisions key=opt item=displayopt}
                     {if !$post.disabled[$opt]}
                     <input id="decision_{$post.id}_{$opt}" class="postdecision" type="radio" name="decision_{$post.id}" value="{$opt}"{if $post.decision == $opt} checked="checked"{/if}>
-                    <label for="decision_{$post.id}_{$opt}">{$displayopt}<span class="accessible-hidden">({$post.title})</span></label><br>
+                    <label for="decision_{$post.id}_{$opt}">{$displayopt}<span class="accessible-hidden sr-only">({$post.title})</span></label><br>
                     {/if}
                 {/foreach}
             </div>

htdocs/theme/bootstrap/artefact/file/templates/form/filebrowser.tpl

@@ -90,10 +90,10 @@
 <input type="hidden" name="{$prefix}_move" id="{$prefix}_move" value="" />
 <input type="hidden" name="{$prefix}_moveto" id="{$prefix}_moveto" value="" />
 {/if}
-  
+
 {if $config.createfolder}
   <div id="createfolder"{if $uploaddisabled} class="hidden"{/if}><div id="{$prefix}_createfolder_messages" class="createfolder-message"></div>
-    <label for="{$prefix}_createfolder_name" class="accessible-hidden">{str tag=createfolder section=artefact.file}</label>
+    <label for="{$prefix}_createfolder_name" class="accessible-hidden sr-only">{str tag=createfolder section=artefact.file}</label>
     <input type="text" class="text" name="{$prefix}_createfolder_name" id="{$prefix}_createfolder_name" size="40" />
     <input type="submit" class="submit" name="{$prefix}_createfolder" id="{$prefix}_createfolder" value="{str tag=createfolder section=artefact.file}" /></div>
 {/if}

htdocs/theme/bootstrap/artefact/file/templates/form/filelist.tpl

@@ -18,7 +18,7 @@
    <th class="right"></th>
   {/if}
    <th class="right nowrap">
-       <span class="accessible-hidden">{str tag=edit}</span>
+       <span class="accessible-hidden sr-only">{str tag=edit}</span>
    </th>
   </tr>
  </thead>
@@ -41,7 +41,7 @@
     {assign var=displaytitle value=$file->title|safe}
     {if $file->artefacttype == 'folder'}
       <a href="{$querybase|safe}folder={$file->id}{if $owner}&owner={$owner}{if $ownerid}&ownerid={$ownerid}{/if}{/if}" id="changefolder:{$file->id}" class="changefolder" title="{str tag=gotofolder section=artefact.file arg1=$displaytitle}">
-        <span class="accessible-hidden">{str tag=folder section=artefact.file}:</span>
+        <span class="accessible-hidden sr-only">{str tag=folder section=artefact.file}:</span>
         <span class="display-title {if $file->isparent}accessible-hidden{/if}">{$displaytitle}</span>
     </a>
     {elseif !$publishable}

htdocs/theme/bootstrap/artefact/file/templates/form/ownertabs.tpl

 <ul class="artefactchooser-tabs files">
   {foreach from=$tabs.tabs item=displayname key=name}
-  <li{if $tabs.owner == $name} class="current"{/if}><a class="changeowner" href="{$querybase}owner={$name}">{$displayname}<span class="accessible-hidden">({str tag=tab}{if $tabs.owner == $name} {str tag=selected}{/if})</span></a></li>
+  <li{if $tabs.owner == $name} class="current"{/if}><a class="changeowner" href="{$querybase}owner={$name}">{$displayname}<span class="accessible-hidden sr-only">({str tag=tab}{if $tabs.owner == $name} {str tag=selected}{/if})</span></a></li>
   {/foreach}
 </ul>

htdocs/theme/bootstrap/artefact/file/templates/import/files.tpl

@@ -29,7 +29,7 @@
             {foreach from=$displaydecisions key=opt item=displayopt}
                 {if !$file.disabled[$opt]}
                 <input id="decision_{$file.id}_{$opt}" class="filedecision" id="{$file.id}" type="radio" name="decision_{$file.id}" value="{$opt}"{if $file.decision == $opt} checked="checked"{/if}>
-                <label for="decision_{$file.id}_{$opt}">{$displayopt}<span class="accessible-hidden">({$file.title})</span></label><br>
+                <label for="decision_{$file.id}_{$opt}">{$displayopt}<span class="accessible-hidden sr-only">({$file.title})</span></label><br>
                 {/if}
             {/foreach}
         </div>

htdocs/theme/bootstrap/artefact/file/templates/profileicons.tpl

 {include file="header.tpl"}
             {$settingsformtag|safe}
-            <table id="profileicons" class="hidden tablerenderer fullwidth">
+            <table id="profileicons" class="hidden tablerenderer fullwidth table">
                 <thead>
                     <tr>
                         <th class="profileiconcell">{str tag="image"}</th>

htdocs/theme/bootstrap/artefact/internal/static/style/style.css

-/**
- * CSS rules for the internal artefact plugin
- *
- * @author     Catalyst IT Ltd
- * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL version 3 or later
- * @copyright  For copyright information on Mahara, please see the README file distributed with this software.
- */
-input#myfriends_addfriend_add {
-    font-weight: bold;
-}
-#userfriendstable a {
-    display: block;
-}
-#userfriendstable .membername a {
-    display: inline;
-}
-#sendmessage input,
-#invitetogroup #invitetogroup_submit_container input {
-    margin: 0;
-}
-#email_list {
-    line-height: 2em;
-}
-#email_list a {
-    color: #ca0000;
-    text-decoration: none;
-    margin-left: 5px;
-}
-fieldset.safe-hidden .mceEditor {
-    display: none;
-}
\ No newline at end of file

htdocs/theme/bootstrap/artefact/internal/templates/import/profilefields.tpl

@@ -38,7 +38,7 @@
                             <input id="decision_{$fieldvalue.id}_{$opt}" class="fieldvaluedecision" type="radio" name="decision_{$fieldvalue.id}" value="{$opt}"{if $fieldvalue.decision == $opt} checked="checked"{/if}>
                             <label for="decision_{$fieldvalue.id}_{$opt}">
                                 {$displayopt}
-                                <span class="accessible-hidden">({str tag=$fieldname section=artefact.internal}: {$fieldvalue.html|safe|strip_tags|str_shorten_text:80:true})</span></label><br>
+                                <span class="accessible-hidden sr-only">({str tag=$fieldname section=artefact.internal}: {$fieldvalue.html|safe|strip_tags|str_shorten_text:80:true})</span></label><br>
                             {/if}
                         {/foreach}
                     </div>

htdocs/theme/bootstrap/artefact/internal/templates/notes.tpl

@@ -7,7 +7,7 @@
       <th>{str tag=currenttitle section=artefact.internal}</th>
       <th>{str tag=containedin section=artefact.internal}</th>
       <th class="center"><img src="{theme_url filename="images/attachment.png"}" title="{str tag=Attachments section=artefact.resume}" alt="{str tag=Attachments section=artefact.resume}" /></th>
-      <th><span class="accessible-hidden">{str tag=edit}</span></th>
+      <th><span class="accessible-hidden sr-only">{str tag=edit}</span></th>
     </tr>
   </thead>
   <tbody>
@@ -15,9 +15,9 @@
     <tr class="{cycle values='r1,r0'}">
       <td class="note-name">
       {if $n->locked}
-        <h3 class="title"><a class="notetitle" href="" id="n{$n->id}">{$n->title|str_shorten_text:80:true} <span class="accessible-hidden">{str tag=clickformore}</span></a></h3>
+        <h3 class="title"><a class="notetitle" href="" id="n{$n->id}">{$n->title|str_shorten_text:80:true} <span class="accessible-hidden sr-only">{str tag=clickformore}</span></a></h3>
       {else}
-        <h3 class="title"><a class="notetitle" href="{$WWWROOT}artefact/internal/editnote.php?id={$n->id}" id="n{$n->id}">{$n->title|str_shorten_text:80:true} <span class="accessible-hidden">{str tag=clickformore}</span></a></h3>
+        <h3 class="title"><a class="notetitle" href="{$WWWROOT}artefact/internal/editnote.php?id={$n->id}" id="n{$n->id}">{$n->title|str_shorten_text:80:true} <span class="accessible-hidden sr-only">{str tag=clickformore}</span></a></h3>
       {/if}
        <div id="n{$n->id}_desc" class="hidden detail">{$n->description|clean_html|safe}
             {if $n->files}