Commit 29c6d7ae authored by Pat Kira's avatar Pat Kira Committed by Aaron Wells

Style notifications pages and profile pages

Bug 1465107: Use Bootstrap CSS Framework

Change-Id: I8c11611c32f29ca461945332926d8fbe0431daef
parent c55e73aa
......@@ -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'),
),
......
......@@ -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,
......
......@@ -117,7 +117,6 @@ $elements['submit'] = array(
$prefsform = array(
'name' => 'accountprefs',
'renderer' => 'div',
'class' => 'form-group',
'method' => 'post',
'jsform' => true,
'plugintype' => 'core',
......
......@@ -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,
......
......@@ -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')
)
)
......
......@@ -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'),
),
......
......@@ -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'),
),
......
......@@ -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,
)
......
......@@ -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);
......
......@@ -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';
......
......@@ -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
}*/
\ No newline at end of file
......@@ -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>
......
......@@ -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">
......
{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>
......
......@@ -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
}*/
\ No newline at end of file
......@@ -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}">
......
{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;" />
......
{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>
</tfoot>
<tbody>
{$activitylist['tablerows']|safe}
</tbody>
</table>
<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>
</td>
</tr>
</tfoot>
<tbody>
{$activitylist['tablerows']|safe}
</tbody>
</table>
</div>
<div class="right activity-buttons">
<input class="submit btn-del" type="button" value="{str tag='delete'}" onClick="markread(document.notificationlist, 'del'); return false;" />
<input class="submit btn btn-danger" type="button" value="{str tag='delete'}" onClick="markread(document.notificationlist, 'del'); return false;" />
</div>
</form>
{$activitylist['pagination']|safe}
......
......@@ -8,7 +8,7 @@
* This file is licensed under the same terms as Mahara itself
*/
.webservicelogs-info {
/*.webservicelogs-info {
max-width: 150px;
color: red;
}
......@@ -97,4 +97,4 @@ span.response {
font-size: 1.167em;
color: #42637b;
font-weight: bold;
}
}*/
......@@ -23,4 +23,4 @@ line_comments = true
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
\ No newline at end of file
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
......@@ -37,4 +37,14 @@ jQuery(function($) {
$('.header').addClass('no-site-messages');
$('.main-nav').addClass('no-site-messages');
}
// Add markup to switch type input
$('.switch').each(function(index){
var inputId = $(this).children('input').attr('id');
$(this).append(
'<label class="switch-label" for="'+ inputId +'"><span class="switch-inner"></span><span class="switch-switch"></span></label>'
);
});
});
.fileupload {
padding: 20px;
border: 1px solid $gray-lighter;
@include clearfix;
.intro {
font-weight: bold;
}
.description {
color: $gray-light;
font-size: $font-size-base - 1;
}
}
.uploadform.userfile {
width: 50%;
float: left;
}
.files_filebrowser {
@include border-radius(4px);
width: 50%;
float: right;
padding: 30px;
background-color: $gray-lighter;
border: 2px dashed $gray-light;
.dz-message {
text-align: center;
font-size: $font-size-large;
color: $gray-light;
padding-top: 10px;
}
}
.foldernav {
border-top: 1px solid $gray-lighter;
font-size: $font-size-large;
margin-top: 30px;
padding-top: 20px;
}
.fileedittable {
margin: 30px 0;
.edit-heading {
font-size: $font-size-large;
}
}
\ No newline at end of file
......@@ -20,8 +20,7 @@
}
.main form {
margin:20px 0;
margin: 20px 0;
label,
.pseudolabel {
@extend .control-label;
......@@ -52,6 +51,19 @@ select {
}
.form-group {
input[type=text],
input[type=password],
input[type=file],
textarea,
select {
max-width: 85%;
display: inline-block;
@media (min-width: $screen-sm-min) {
width: 500px;
}
}
@media (min-width: $screen-sm-min) {
&.input-small {
width: 25%;
......@@ -63,58 +75,39 @@ select {
&.radio,
&.checkbox {
// @extend .radio-inline;
margin-left:0;
// padding: 0 15px 20px 20px;
> label {
padding-left: 0;
font-weight: bold;
}
> input {
// @extend .align-with-input;
display: inline-block;
margin-left: 0;
}
.radio {
display: inline-block;
&:nth-child(n+3) {
@extend .align-with-input;
}
.radio {
margin-left: 0;
}
label {
width: auto;
}