Style notifications pages and profile pages

Bug 1465107: Use Bootstrap CSS Framework

Change-Id: I8c11611c32f29ca461945332926d8fbe0431daef

htdocs/account/activity/index.php

@@ -179,6 +179,7 @@ $deleteall = pieform(array(
         ),
         'submit' => array(
             'type' => 'submit',
+            'class' => 'btn btn-success',
             'value' => get_string('deleteallnotifications', 'activity'),
             'confirm' => get_string('reallydeleteallnotifications', 'activity'),
         ),

htdocs/account/activity/preferences/index.php

@@ -24,15 +24,17 @@ $elements = get_notification_settings_elements($USER);
 
 $elements['submit'] = array(
     'type' => 'submit',
+    'class' => 'btn btn-success',
     'value' => get_string('save'),
 );
 
 
 $prefsform = pieform(array(
     'name'        => 'activityprefs',
+    'class'       => 'form-notifications',
     'method'      => 'post',
     'jsform'      => true,
-    'renderer'    => 'table',
+    'renderer'    => 'div',
     'plugintype'  => 'core',
     'pluginname'  => 'account',
     'elements'    => $elements,

htdocs/account/index.php

@@ -117,7 +117,6 @@ $elements['submit'] = array(
 $prefsform = array(
     'name'        => 'accountprefs',
     'renderer'    => 'div',
-    'class'       => 'form-group',
     'method'      => 'post',
     'jsform'      => true,
     'plugintype'  => 'core',

htdocs/artefact/blog/post.php

@@ -127,6 +127,7 @@ $form = pieform(array(
         'licensing_advanced' => license_form_el_advanced(isset($blogpostobj) ? $blogpostobj : null),
         'filebrowser' => array(
             'type'         => 'filebrowser',
+            'class'        => 'filebrowser',
             'title'        => get_string('attachments', 'artefact.blog'),
             'folder'       => $folder,
             'highlight'    => $highlight,

htdocs/artefact/file/profileicons.php

@@ -37,6 +37,7 @@ $settingsform = new Pieform(array(
 
 $uploadform = pieform(array(
     'name'   => 'upload',
+    'class'  => 'form-upload',
     'jsform' => true,
     'presubmitcallback'  => 'preSubmit',
     'postsubmitcallback' => 'postSubmit',
@@ -55,6 +56,7 @@ $uploadform = pieform(array(
         ),
         'submit' => array(
             'type' => 'submit',
+            'class' => 'btn btn-success',
             'value' => get_string('upload')
         )
     )

htdocs/artefact/multirecipientnotification/inbox.php

@@ -211,6 +211,7 @@ JAVASCRIPT;
 
 $deleteall = pieform(array(
     'name'        => 'delete_all_notifications',
+    'class'       => 'form-deleteall',
     'method'      => 'post',
     'plugintype'  => 'core',
     'pluginname'  => 'account',
@@ -221,6 +222,7 @@ $deleteall = pieform(array(
         ),
         'submit' => array(
             'type' => 'submit',
+            'class' => 'btn btn-success btn-deleteall',
             'value' => get_string('deleteallnotifications', 'activity'),
             'confirm' => get_string('reallydeleteallnotifications', 'activity'),
         ),

htdocs/artefact/multirecipientnotification/outbox.php

@@ -184,6 +184,7 @@ JAVASCRIPT;
 
 $deleteall = pieform(array(
     'name'        => 'delete_all_notifications',
+    'class'       => 'form-deleteall',
     'method'      => 'post',
     'plugintype'  => 'core',
     'pluginname'  => 'account',
@@ -194,6 +195,7 @@ $deleteall = pieform(array(
         ),
         'submit' => array(
             'type' => 'submit',
+            'class' => 'btn btn-success btn-deleteall',
             'value' => get_string('deleteallnotifications', 'activity'),
             'confirm' => get_string('reallydeleteallnotifications', 'activity'),
         ),

htdocs/artefact/multirecipientnotification/sendmessage.php

@@ -219,6 +219,7 @@ $form = pieform(array(
         ),
         'submit' => array(
             'type' => 'submitcancel',
+            'class' => 'btn btn-success',
             'value' => array($messages ? get_string('Reply', 'group') : get_string('sendmessage', 'group'), get_string('cancel')),
             'goto' => get_config('wwwroot') . $goto,
         )

htdocs/js/mahara.js

@@ -752,7 +752,7 @@ function keepElementInViewport(element) {
 function augment_tags_control(elem, returnContainer) {
     elem = getElement(elem);
 
-    var tagContainer = DIV();
+    var tagContainer = DIV({'class':'showtags'});
     // setElementDimensions(tagContainer, {'w': getElementDimensions(elem).w});
     var showLink = A({'href':''},get_string('showtags'));
     appendChildNodes(tagContainer, showLink);

htdocs/lib/form/elements/switchbox.php

@@ -26,6 +26,7 @@ require_once(get_config('docroot') . 'lib/pieforms/pieform/elements/checkbox.php
  */
 function pieform_element_switchbox(Pieform $form, $element) {
     $wrapper = !empty($element['wrapperclass']) ? $element['wrapperclass'] : '';
+
     $html = '<div class="' . $wrapper . '">' . pieform_element_checkbox($form, $element) . '</div>';
     // Dealing with the label text
     $switchtext = isset($element['switchtext']) ? $element['switchtext'] : 'onoff';

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

@@ -9,7 +9,7 @@
  */
  
  /* Blog list */
-#bloglist #blogdesc p {
+/*#bloglist #blogdesc p {
     margin: 5px 0;
 }
 #bloglist .buttonscell form,
@@ -47,4 +47,4 @@
 /* Insert Image Dialog */
 #img_src[disabled=""] {
     background-color: #F0F0EE;
-}
+}*/
\ No newline at end of file

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

@@ -4,12 +4,12 @@
       <table class="fileedittable">
         <tbody>
           <tr>
-            <th colspan="2" id="{$prefix}_edit_heading" class="fl">
+            <th colspan="2" id="{$prefix}_edit_heading" class="edit-heading">
             {if $fileinfo}{if $fileinfo->artefacttype == 'folder'}{str tag=editfolder section=artefact.file}{else}{str tag=editfile section=artefact.file}{/if}{/if}
             </th>
           </tr>
           <tr class="required">
-            <th><label for="{$prefix}_edit_title">{str tag=name}</label> <span class="requiredmarker">*</span></th>
+            <th><label for="{$prefix}_edit_title">{str tag=name}<span class="requiredmarker"> *</span></label></th>
             <td><input type="text" class="text" name="{$prefix}_edit_title" id="{$prefix}_edit_title" value="{$fileinfo->title}" size="40" /></td>
           </tr>
           {if $fileinfo->artefacttype != 'profileicon'}
@@ -69,7 +69,7 @@
           	<td></td>
             <td>
               <input class="submit btn btn-success" type="submit" name="{$prefix}_update[{$fileinfo->id}]" id="{$prefix}_edit_artefact" value="{str tag=savechanges section=artefact.file}" />
-              <input type="submit" class="cancel" name="{$prefix}_canceledit" id="{$prefix}_edit_cancel" value="{str tag=cancel}" />
+              <input type="submit" class="cancel btn btn-danger" name="{$prefix}_canceledit" id="{$prefix}_edit_cancel" value="{str tag=cancel}" />
             </td>
           </tr>
           <tr><td colspan="2" id="{$prefix}_edit_messages"></td></tr>

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

@@ -16,7 +16,7 @@
 </div>
 {/if}
 
-<div id="{$prefix}_upload_browse" class="upload_browse{if $config.select} select{if !$browse} hidden{/if}{/if}">
+<div id="{$prefix}_upload_browse" class="upload_browse {if $config.select} select{if !$browse} hidden{/if}{/if}">
 
 {if $config.select && !$config.alwaysopen}
 <input type="submit" class="buttondk" name="{$prefix}_cancelbrowse" id="{$prefix}_close_upload_browse" value="{str tag=Close}" />
@@ -52,10 +52,10 @@
   </div>
   {/if}
   {$licenseform|safe}
-  <div class="uploadform">
+  <div class="uploadform userfile">
     <label for="{$prefix}_userfile">{if $config.simpleupload}{str tag='uploadfile' section='artefact.file'}{else}{str tag='File' section='artefact.file'}{/if}</label>
       <span id="{$prefix}_userfile_container"><input type="file" class="file" id="{$prefix}_userfile" name="userfile[]" multiple size="20" /></span>
-      <span id="{$prefix}_userfile_maxuploadsize">({str tag=maxuploadsize section=artefact.file} {$maxuploadsize})</span>
+      <span id="{$prefix}_userfile_maxuploadsize" class="description">({str tag=maxuploadsize section=artefact.file} {$maxuploadsize})</span>
       {if $config.uploadagreement}<script>setNodeAttribute('{$prefix}_userfile', 'disabled', true);</script>{/if}
   </div>
   {if $config.resizeonuploaduseroption}
@@ -92,10 +92,12 @@
 {/if}
 
 {if $config.createfolder}
-  <div id="createfolder"{if $uploaddisabled} class="hidden"{/if}><div id="{$prefix}_createfolder_messages" class="createfolder-message"></div>
+  <div id="createfolder" class="{if $uploaddisabled}hidden{/if} form-createfolder form-group">
+    <div id="{$prefix}_createfolder_messages"></div>
     <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 class="submit btn btn-success" type="submit" name="{$prefix}_createfolder" id="{$prefix}_createfolder" value="{str tag=createfolder section=artefact.file}" /></div>
+    <input class="submit btn btn-success" type="submit" name="{$prefix}_createfolder" id="{$prefix}_createfolder" value="{str tag=createfolder section=artefact.file}" />
+  </div>
 {/if}
 
 <div id="{$prefix}_foldernav" class="foldernav">

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

 {include file="header.tpl"}
             {$settingsformtag|safe}
-            <table id="profileicons" class="hidden tablerenderer fullwidth table table-striped">
-                <thead>
-                    <tr>
-                        <th class="profileiconcell">{str tag="image"}</th>
-                        <th>{str tag="imagetitle" section=artefact.file}</th>
-                        <th class="">{str tag="Default" section=artefact.file}</th>
-                        <th class="">{str tag="delete"}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                </tbody>
-                <tfoot>
-                    <tr>
-                        <td colspan="4" class="align-right"><input id="settings_default" class="submit btn btn-success" type="submit" name="default" value="{str tag="setdefault" section=artefact.file}"> <input id="settings_delete" type="submit" class="delete btn btn-danger" name="delete" value="{str tag="deleteselectedicons" section=artefact.file}"></td>
-                    </tr>
-                </tfoot>
-            </table>
+            <div class="table-responsive">
+                <table id="profileicons" class="hidden tablerenderer fullwidth table table-striped">
+                    <thead>
+                        <tr>
+                            <th class="profileiconcell">{str tag="image"}</th>
+                            <th>{str tag="imagetitle" section=artefact.file}</th>
+                            <th class="">{str tag="Default" section=artefact.file}</th>
+                            <th class="">{str tag="delete"}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                    <tfoot>
+                        <tr>
+                            <td colspan="4" class="align-right"><input id="settings_default" class="submit btn btn-success" type="submit" name="default" value="{str tag="setdefault" section=artefact.file}"> <input id="settings_delete" type="submit" class="delete btn btn-danger" name="delete" value="{str tag="deleteselectedicons" section=artefact.file}"></td>
+                        </tr>
+                    </tfoot>
+                </table>
+            </div>
             <input type="hidden" name="pieform_settings" value="">
             <input type="hidden" name="sesskey" value="{$USER->get('sesskey')}">
             </form>

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

@@ -7,7 +7,7 @@
 
  * This file is distributed under the same terms as Mahara itself
  */
-
+/*
 .ui-autocomplete-category {
     font-weight: bold;
     padding: .2em .4em;
@@ -40,4 +40,4 @@
 .userlist img.togglebtn, .userlist span.recipientlist {
     float: left;
     margin-right: 2px;
-}
+}*/
\ No newline at end of file

htdocs/theme/bootstrap/artefact/multirecipientnotification/templates/activitylistin.tpl

@@ -84,7 +84,8 @@
     <td>{$item->date}</td>
     <td class="center">
       {if $item->read}
-        <img src="{theme_url filename='images/star.png'}" alt="{str tag=read section=activity}">
+        <span class="glyphicon glyphicon-ok"></span>
+        <span class="sr-only">{str tag=read section=activity}</span>
       {else}
         <label class="accessible-hidden sr-only" for="unread-{$item->table}-{$item->id}">{str tag='markasread' section='activity'}</label>
         <input type="checkbox" class="tocheckread" name="unread-{$item->table}-{$item->id}" id="unread-{$item->table}-{$item->id}">

htdocs/theme/bootstrap/artefact/multirecipientnotification/templates/indexin.tpl

 {include file="header.tpl"}
 
 <div id="notifications">
-    <form method="post">
-        <label for="notifications_type">{str section='activity' tag='type'}:</label>
-        <select id="notifications_type" name="type">
-        {foreach from=$options item=name key=t}
-            <option value="{$t}"{if $type == $t} selected{/if}>{$name}</option>
-        {/foreach}
-        </select>{contextualhelp plugintype='core' pluginname='activity' section='activitytypeselect'}
+    <form method="post" class="form-inline form-select-filter">
+        <div class="form-group">
+            <label for="notifications_type">{str section='activity' tag='type'}:</label>
+            <select id="notifications_type" name="type">
+            {foreach from=$options item=name key=t}
+                <option value="{$t}"{if $type == $t} selected{/if}>{$name}</option>
+            {/foreach}
+            </select>{contextualhelp plugintype='core' pluginname='activity' section='activitytypeselect'}
+        </div>
     </form>
     {$deleteall|safe}
-    <form name="notificationlist" method="post" onSubmit="markread(this, 'read'); return false;">
-        <table id="activitylist" class="fullwidth table table-striped">
-            <thead>
+    <form class="form-notificationlist" name="notificationlist" method="post" onSubmit="markread(this, 'read'); return false;">
+        <div class="table-responsive">
+            <table id="activitylist" class="fullwidth table table-striped">
+                <thead>
+                    <tr>
+                        <th><span class="accessible-hidden sr-only">{str section='activity' tag='messagetype'}</span></th>
+                        <th>{str section='artefact.multirecipientnotification' tag='fromuser'}</th>
+                        <th>{str section='activity' tag='subject'}</th>
+                        <th>{str section='artefact.multirecipientnotification' tag='touser'}</th>
+                        <th>{str section='activity' tag='date'}</th>
+                        <th class="center">{str section='activity' tag='read'}</th>
+                        <th class="center">{str tag='delete'}</th>
+                    </tr>
+                </thead>
+            <tfoot>
                 <tr>
-                    <th><span class="accessible-hidden sr-only">{str section='activity' tag='messagetype'}</span></th>
-                    <th>{str section='artefact.multirecipientnotification' tag='fromuser'}</th>
-                    <th>{str section='activity' tag='subject'}</th>
-                    <th>{str section='artefact.multirecipientnotification' tag='touser'}</th>
-                    <th>{str section='activity' tag='date'}</th>
-                    <th class="center">{str section='activity' tag='read'}</th>
-                    <th class="center">{str tag='delete'}</th>
+                    <td colspan="5"></td>
+                    <td class="center">
+                        <a href="" onclick="toggleChecked('tocheckread'); return false;">
+                            {str section='activity' tag='selectall'}
+                            <span class="accessible-hidden sr-only"> {str tag='selectallread' section='artefact.multirecipientnotification'}</span>
+                        </a>
+                    </td>
+                    <td class="center">
+                        <a href="" onclick="toggleChecked('tocheckdel'); return false;">
+                            {str section='activity' tag='selectall'}
+                            <span class="accessible-hidden sr-only">{str tag='selectalldelete' section='artefact.multirecipientnotification'}</span>
+                        </a>
+                    </td>
                 </tr>
-            </thead>
-        <tfoot>
-            <tr>
-                <td colspan="5"></td>
-                <td class="center">
-                    <a href="" onclick="toggleChecked('tocheckread'); return false;">
-                        {str section='activity' tag='selectall'}
-                        <span class="accessible-hidden sr-only"> {str tag='selectallread' section='artefact.multirecipientnotification'}</span>
-                    </a>
-                </td>
-                <td class="center">
-                    <a href="" onclick="toggleChecked('tocheckdel'); return false;">
-                        {str section='activity' tag='selectall'}
-                        <span class="accessible-hidden sr-only">{str tag='selectalldelete' section='artefact.multirecipientnotification'}</span>
-                    </a>
-                </td>
-            </tr>
-        </tfoot>
-        <tbody>
-            {$activitylist['tablerows']|safe}
-        </tbody>
-        </table>
+            </tfoot>
+            <tbody>
+                {$activitylist['tablerows']|safe}
+            </tbody>
+            </table>
+        </div>
         <div class="right activity-buttons">
             <input class="submit btn btn-success" type="submit" value="{str tag='markasread' section='activity'}" />
             <input class="submit btn btn-danger" type="button" value="{str tag='delete'}" onClick="markread(document.notificationlist, 'del'); return false;" />

htdocs/theme/bootstrap/artefact/multirecipientnotification/templates/indexout.tpl

 {include file="header.tpl"}
 
 <div id="notifications">
-    <form method="post">
-        <label for="notifications_type">{str section='activity' tag='type'}:</label>
-        <select id="notifications_type" name="type">
-        {foreach from=$options item=name key=t}
-            <option value="{$t}"{if $type == $t} selected{/if}>{$name}</option>
-        {/foreach}
-        </select>{contextualhelp plugintype='core' pluginname='activity' section='activitytypeselect'}
+    <form method="post" class="form-inline form-select-filter">
+        <div class="form-group">
+            <label for="notifications_type">{str section='activity' tag='type'}:</label>
+            <select id="notifications_type" name="type">
+            {foreach from=$options item=name key=t}
+                <option value="{$t}"{if $type == $t} selected{/if}>{$name}</option>
+            {/foreach}
+            </select>{contextualhelp plugintype='core' pluginname='activity' section='activitytypeselect'}
+        </div>
     </form>
     {$deleteall|safe}
-    <form name="notificationlist" method="post" onSubmit="markread(this, 'read'); return false;">
-        <table id="activitylist" class="fullwidth table">
-            <thead>
-                <tr>
-                    <th><span class="accessible-hidden sr-only">{str section='activity' tag='messagetype'}</span></th>
-                    <th>{str section='artefact.multirecipientnotification' tag='fromuser'}</th>
-                    <th>{str section='activity' tag='subject'}</th>
-                    <th>{str section='artefact.multirecipientnotification' tag='touser'}</th>
-                    <th>{str section='activity' tag='date'}</th>
-                    <th class="center">{str tag='delete'}</th>
-                </tr>
-            </thead>
-            <tfoot>
-                <tr>
-                    <td colspan="5"></td>
-                    <td class="center">
-                        <a href="" onclick="toggleChecked('tocheckdel'); return false;">
-                            {str section='activity' tag='selectall'}
-                            <span class="accessible-hidden sr-only">{str tag='selectalldelete' section='artefact.multirecipientnotification'}</span>
-                        </a>
-                    </td>
-                </tr>
+    <form class="form-notificationlist" name="notificationlist" method="post" onSubmit="markread(this, 'read'); return false;">
+        <div class="table-responsive">
+            <table id="activitylist" class="fullwidth table">
+                <thead>
+                    <tr>
+                        <th><span class="accessible-hidden sr-only">{str section='activity' tag='messagetype'}</span></th>
+                        <th>{str section='artefact.multirecipientnotification' tag='fromuser'}</th>
+                        <th>{str section='activity' tag='subject'}</th>
+                        <th>{str section='artefact.multirecipientnotification' tag='touser'}</th>
+                        <th>{str section='activity' tag='date'}</th>
+                        <th class="center">{str tag='delete'}</th>
+                    </tr>
+                </thead>
+                <tfoot>
+                    <tr>
+                        <td colspan="5"></td>
+                        <td class="center">
+                            <a href="" onclick="toggleChecked('tocheckdel'); return false;">
+                                {str section='activity' tag='selectall'}
+                                <span class="accessible-hidden sr-only">{str tag='selectalldelete' section='artefact.multirecipientnotification'}</span>
+                            </a>