Commit c2b85abf authored by Pat Kira's avatar Pat Kira Committed by Aaron Wells

Style resume pages (bootstrap)

Bug 1465107: Use Bootstrap CSS Framework
Re-style attachment list

Change-Id: Ib8d7f9c4ada175ad899ca34e3473f0a23b8bb214
parent b51ac01e
......@@ -26,6 +26,7 @@ $deleteform = pieform(array(
'pluginname' => 'account',
'elements' => array(
'submit' => array(
'class' => 'btn btn-danger',
'type' => 'submit',
'value' => get_string('deleteaccount', 'mahara', display_username($USER), full_name($USER)),
),
......
......@@ -950,25 +950,11 @@ abstract class ArtefactTypeResumeComposite extends ArtefactTypeResume implements
$js = <<<EOF
var tableRenderers = {};
function toggleCompositeForm(type) {
var elem = \$j('#' + type + 'form');
if (elem.hasClass('hidden')) {
elem.removeClass('hidden');
elem.find(':input').first().focus();
\$j('#add' + type + 'button').removeClass('btn-success');
\$j('#add' + type + 'button').addClass('btn-danger').html({$cancelstr});
}
else {
\$j('#add' + type + 'button').removeClass('btn-danger');
\$j('#add' + type + 'button').addClass('btn-success').html({$addstr});
elem.addClass('hidden');
}
}
function compositeSaveCallback(form, data) {
key = form.id.substr(3);
tableRenderers[key].doupdate();
toggleCompositeForm(key);
\$j( '#' + key + 'form').removeClass('in');
//toggleCompositeForm(key);
// Can't reset() the form here, because its values are what were just submitted,
// thanks to pieforms
forEach(form.elements, function(element) {
......@@ -1024,7 +1010,7 @@ EOF;
e.stop();
return showhideComposite(r, {$bodystring}, {$attachstring});
});
var extra = DIV({'class': 'detail'}, {$extrastring});
var extra = DIV({'class': 'detail mbs'}, {$extrastring});
return TD({'id': 'composite-' + r.artefact + '-' + r.id}, DIV({'class': 'expandable-head'}, link, extra));
},
";
......@@ -1158,16 +1144,16 @@ function formatSize(size) {
}
function listAttachments(attachments) {
if (attachments.length > 0) {
var togglelink = A({'class': 'toggle', 'href': '#'}, {$attachmentsstr});
var thead = THEAD({'class': 'expandable-head'}, TR(null, TH(null, togglelink)));
var tbody = TBODY({'class': 'expandable-body'});
var togglelink = P({$attachmentsstr});
var thead = THEAD({}, TR(null, TH(null, togglelink)));
var tbody = TBODY({});
for (var i=0; i < attachments.length; i++) {
var item = attachments[i];
var href = self.config.wwwroot + 'artefact/file/download.php?file=' + attachments[i].id;
var link = A({'href': href}, {$downloadstr});
appendChildNodes(tbody, TR(null, TD(null, item.title + ' (' + formatSize(item.size) + ') - ', STRONG(null, link))));
}
return TABLE({'class': 'cb attachments fullwidth table'}, thead, tbody);
return TABLE({'class': 'attachments table'}, thead, tbody);
}
else {
// No attachments
......
......@@ -51,37 +51,31 @@
{if $post->files}
<div id="postfiles_{$post->id}">
<div class="attachments">
<div class="attachment-heading collapsible">
<a class="attach-files collapsed" data-toggle="collapse" href="#attach_{$post->id}" aria-expanded="false">
<div class="attachment-heading">
<a class="attach-files collapsible collapsed" data-toggle="collapse" href="#attach_{$post->id}" aria-expanded="false">
<span class="badge">
{$post->files|count}
</span>
{str tag=attachedfiles section=artefact.blog}
<span class="fa fa-chevron-up link-indicator"></span>
<span class="fa fa-chevron-down link-indicator pull-right"></span>
</a>
</div>
<div class="collapse files" id="attach_{$post->id}">
<div class="attached-files collapse" id="attach_{$post->id}">
<ul class="list-group-item-text list-unstyled list-group-item-link has-icon row pbm">
{foreach from=$post->files item=file}
<div class="attached-file {cycle values='r1,r0'}">
<h3 class="title">
<a href="{$WWWROOT}artefact/file/download.php?file={$file->attachment}">{$file->title}</a>
</h3>
<div class="file-detail">
<img src="{$file->icon}" alt="">
<span class="file-size">
({$file->size|display_size})
<li class="col-sm-6">
<a href="{$WWWROOT}artefact/file/download.php?file={$file->attachment}" {if $file->description} title="{$file->description}" data-toggle="tooltip"{/if}>
<div class="file-icon mrs">
<img src="{$file->icon}" alt="">
</div>
<span class="file-title">{$file->title|truncate:40}</span>
<span class="file-size pls">
({$file->size|display_size})
</span>
</div>
{if $file->description}
<div class="file-description">
<p class="description">
{$file->description}
</p>
</div>
{/if}
</div>
</a>
</li>
{/foreach}
</ul>
</div>
</div>
</div>
......
......@@ -69,13 +69,20 @@
</div>
{if $controls}
<div class="panel-footer has-form">
<div id="bookform" class="hidden mtl mlm">
<div id="bookform" class="js-expanded-form collapse mtl mlm" data-action='reset-on-collapse'>
{$compositeforms.book|safe}
</div>
<button id="addbookbutton" class="pull-right btn btn-primary btn-sm" onclick="toggleCompositeForm('book');">
<span class="fa fa-plus mrs"></span>
{str tag='add'}
<button id="addbookbutton" data-toggle="collapse" data-target="#bookform" aria-expanded="false" aria-controls="bookform" class="pull-right btn btn-default btn-sm collapsed expand-add-button">
<span class="show-form">
{str tag='add'}
<span class="fa fa-chevron-down pls"></span>
</span>
<span class="hide-form">
{str tag='cancel'}
<span class="fa fa-chevron-up pls"></span>
</span>
</button>
{if $license}
<div class="resumelicense">
{$license|safe}
......@@ -84,6 +91,6 @@
</div>
{/if}
</div>
<script type="text/javascript">
<!-- <script type="text/javascript">
setupExpanders(jQuery('#booklist{$suffix}'));
</script>
</script> -->
......@@ -66,13 +66,19 @@
</div>
{if $controls}
<div class="panel-footer has-form">
<div id="certificationform" class="hidden mtl mlm">
<div id="certificationform" class="collapse mtl mlm" data-action='reset-on-collapse'>
{$compositeforms.certification|safe}
</div>
<button id="addcertificationbutton" class="pull-right btn btn-primary btn-sm" onclick="toggleCompositeForm('certification');">
<span class="fa fa-plus mrs"></span>
{str tag='add'}
<button id="addcertificationbutton" data-toggle="collapse" data-target="#certificationform" aria-expanded="false" aria-controls="certificationform" class="pull-right btn btn-default btn-sm collapsed expand-add-button">
<span class="show-form">
{str tag='add'}
<span class="fa fa-chevron-down pls"></span>
</span>
<span class="hide-form">
{str tag='cancel'}
<span class="fa fa-chevron-up pls"></span>
</span>
</button>
{if $license}
......@@ -83,6 +89,7 @@
</div>
{/if}
</div>
<script type="text/javascript">
<!-- <script type="text/javascript">
setupExpanders(jQuery('#certificationlist{$suffix}'));
</script>
</script> -->
......@@ -67,15 +67,20 @@
</div>
{if $controls}
<div class="panel-footer has-form">
<div id="educationhistoryform" class="hidden mtl mlm">
<div id="educationhistoryform" class="collapse mtl mlm" data-action='reset-on-collapse'>
{$compositeforms.educationhistory|safe}
</div>
<button id="addeducationhistorybutton" class="pull-right btn btn-primary btn-sm" onclick="toggleCompositeForm('educationhistory');">
<span class="fa fa-plus mrs"></span>
{str tag='add'}
<button id="addeducationhistorybutton" data-toggle="collapse" data-target="#educationhistoryform" aria-expanded="false" aria-controls="educationhistoryform" class="pull-right btn btn-default btn-sm collapsed expand-add-button">
<span class="show-form">
{str tag='add'}
<span class="fa fa-chevron-down pls"></span>
</span>
<span class="hide-form">
{str tag='cancel'}
<span class="fa fa-chevron-up pls"></span>
</span>
</button>
{if $license}
<div class="resumelicense">
{$license|safe}
......@@ -84,6 +89,6 @@
</div>
{/if}
</div>
<script type="text/javascript">
<!-- <script type="text/javascript">
setupExpanders(jQuery('#educationhistorylist{$suffix}'));
</script>
</script> -->
......@@ -67,13 +67,19 @@
</div>
{if $controls}
<div class="panel-footer has-form">
<div id="employmenthistoryform" class="hidden mtl mlm">
<div id="employmenthistoryform" class="collapse mtl mlm" data-action='reset-on-collapse'>
{$compositeforms.employmenthistory|safe}
</div>
<button id="addemploymenthistorybutton" class="pull-right btn btn-primary btn-sm" onclick="toggleCompositeForm('employmenthistory');">
<span class="fa fa-plus mrs"></span>
{str tag='add'}
<button id="addemploymenthistorybutton" data-toggle="collapse" data-target="#employmenthistoryform" aria-expanded="false" aria-controls="employmenthistoryform" class="pull-right btn btn-default btn-sm collapsed expand-add-button">
<span class="show-form">
{str tag='add'}
<span class="fa fa-chevron-down pls"></span>
</span>
<span class="hide-form">
{str tag='cancel'}
<span class="fa fa-chevron-up pls"></span>
</span>
</button>
{if $license}
......@@ -84,6 +90,7 @@
</div>
{/if}
</div>
<script type="text/javascript">
<!-- <script type="text/javascript">
setupExpanders(jQuery('#employmenthistorylist{$suffix}'));
</script>
</script> -->
<fieldset>{if !$hidetitle}<legend class="resumeh3">{str tag='mygoals' section='artefact.resume'}
{if $controls}
{contextualhelp plugintype='artefact' pluginname='resume' section='mygoals'}
{/if}
</legend>{/if}
<div class="table-responsive">
<table id="goalslist{$suffix}" class="tablerenderer fullwidth table table-striped">
<thead>
<tr>
<th>{str tag='goals' section='artefact.resume'}</th>
<th class="resumeattachments text-center">
<span class="fa fa-paperclip">
<span class="sr-only">{str tag=Attachments section=artefact.resume}</span>
</th>
<th><span class="accessible-hidden sr-only">{str tag=edit}</span></th>
</tr>
</thead>
<tbody>
{foreach from=$goals item=n}
<tr class="{cycle values='r0,r1'}">
<td class="goaltitle">
{if $n->exists}
<h3><a class="goaltitle" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" id="n{$n->id}">{str tag=$n->artefacttype section='artefact.resume'}</a></h3>
<div id="n{$n->id}_desc" class="hidden detail">{if $n->description != ''}{$n->description|clean_html|safe}{else}{str tag=nodescription section=artefact.resume}{/if}
{if $n->files}
<div id="resume_{$n->id}">
<table class="attachments fullwidth">
<col width="5%">
<col width="40%">
<col width="55%">
<tbody>
<tr><th colspan=3>{str tag=attachedfiles section=artefact.blog}</th></tr>
{foreach from=$n->files item=file}
<tr class="{cycle values='r1,r0'}">
<td><img src="{$file->icon}" alt=""></td>
<td class="valign"><a href="{$WWWROOT}artefact/file/download.php?file={$file->attachment}">{$file->title}</a></td>
<td class="valign">{$file->description}</td>
</tr>
{/foreach}
</tbody>
</table>
</div>
</div>
{/if}
{else}
<h3>{str tag=$n->artefacttype section='artefact.resume'}</h3>
<div class="goals-wrapper">
{if !$hidetitle}
<h3 class="resumeh3">
{str tag='mygoals' section='artefact.resume'}
{if $controls}
{contextualhelp plugintype='artefact' pluginname='resume' section='mygoals'}
{/if}
</td>
<td align="center">{$n->count}</td>
<td class="right buttonscell control-buttons">
{if $n->exists}
<a id="goals_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" title="{str tag=edit$n->artefacttype section=artefact.resume}" class="btn btn-default btn-xs">
<span class="fa fa-pencil"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
{else}
<a id="goals_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?type={$n->artefacttype}" title="{str tag=edit$n->artefacttype section=artefact.resume}" class="btn btn-default btn-xs">
<span class="fa fa-pencil"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
</h3>{/if}
<div id="goalslist{$suffix}" class="panel-items js-masonry" data-masonry-options='{ "itemSelector": ".panel" }'>
{foreach from=$goals item=n}
<div class="panel panel-default">
<h3 class="title panel-heading">
{str tag=$n->artefacttype section='artefact.resume'}
<div class="pull-right">
{if $n->exists}
<a id="goals_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" title="{str tag=edit$n->artefacttype section=artefact.resume}" class="btn btn-default btn-xs">
<span class="fa fa-pencil"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
{else}
<a id="goals_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?type={$n->artefacttype}" title="{str tag=edit$n->artefacttype section=artefact.resume}" class="btn btn-default btn-xs">
<span class="fa fa-pencil"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
{/if}
</div>
</h3>
<div id="n{$n->id}_desc" class="panel-body">
{if $n->description != ''}
{$n->description|clean_html|safe}
{else}
{str tag=nodescription section=artefact.resume}
{/if}
</div>
{if $n->files}
<div id="resume_{$n->id}" class="panel-footer has-attachment">
<div class="attachment-heading in-panel">
<a class="collapsible collapsed" aria-expanded="false" href="#attach_goal_{$n->id}" data-toggle="collapse">
<span class="badge">{$n->count}</span>
{str tag=attachedfiles section=artefact.blog}
<span class="fa fa-chevron-down pull-right"></span>
</a>
</div>
<div id="attach_goal_{$n->id}" class="collapse">
<ul class="list-group-item-text list-unstyled list-group-item-link has-icon">
{foreach from=$n->files item=file}
<li>
<a href="{$WWWROOT}artefact/file/download.php?file={$file->attachment}" '{if $file->description}' title="{$file->description}" data-toggle="tooltip" '{/if}' >
<div class="file-icon mrs">
<img src="{$file->icon}" alt="">
</div>
{$file->title|truncate:40}
</a>
</li>
{/foreach}
</ul>
</div>
</div>
{/if}
</div>
{/foreach}
</div>
{if $license}
<div class="resumelicense">
{$license|safe}
</div>
{/if}
</td>
</tr>
{/foreach}
</tbody>
</table>
</div>
{if $license}
<div class="resumelicense">
{$license|safe}
</div>
{/if}
</fieldset>
......@@ -66,12 +66,18 @@
</diV>
{if $controls}
<div class="panel-footer has-form">
<div id="membershipform" class="hidden mtl mlm">
<div id="membershipform" class="collapse mtl mlm" data-action='reset-on-collapse'>
{$compositeforms.membership|safe}
</div>
<button id="addmembershipbutton" class="pull-right btn btn-primary btn-sm" onclick="toggleCompositeForm('membership');">
<span class="fa fa-plus mrs"></span>
{str tag='add'}
<button id="addmembershipbutton" data-toggle="collapse" data-target="#membershipform" aria-expanded="false" aria-controls="membershipform"class="pull-right btn btn-default btn-sm collapsed expand-add-button">
<span class="show-form">
{str tag='add'}
<span class="fa fa-chevron-down pls"></span>
</span>
<span class="hide-form">
{str tag='cancel'}
<span class="fa fa-chevron-up pls"></span>
</span>
</button>
</div>
{if $license}
......@@ -81,6 +87,6 @@
{/if}
{/if}
</div>
<script type="text/javascript">
<!-- <script type="text/javascript">
setupExpanders(jQuery('#membershiplist{$suffix}'));
</script>
</script> -->
<fieldset>{if !$hidetitle}<legend class="resumeh3">{str tag='myskills' section='artefact.resume'}
{if $controls}
{contextualhelp plugintype='artefact' pluginname='resume' section='myskills'}
{/if}
</legend>{/if}
<div class="table-responsive">
<table id="skillslist{$suffix}" class="tablerenderer fullwidth table table-striped">
<thead>
<tr>
<th>{str tag='skills' section='artefact.resume'}</th>
<th class="resumeattachments text-center">
<span class="fa fa-paperclip"></span>
<span class="sr-only">{str tag=Attachments section=artefact.resume}</span>
</th>
<th><span class="accessible-hidden sr-only">{str tag=edit}</span></th>
</tr>
</thead>
<tbody>
{foreach from=$skills item=n}
<tr class="{cycle values='r0,r1'}">
<td class="skilltitle">
{if $n->exists}
<h3><a class="skilltitle" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" id="n{$n->id}">{str tag=$n->artefacttype section='artefact.resume'}</a></h3>
<div id="n{$n->id}_desc" class="hidden detail">{if $n->description != ''}{$n->description|clean_html|safe}{else}{str tag=nodescription section=artefact.resume}{/if}
{if $n->files}
<div id="resume_{$n->id}">
<table class="attachments fullwidth">
<col width="5%">
<col width="40%">
<col width="55%">
<tbody>
<tr><th colspan=3>{str tag=attachedfiles section=artefact.blog}</th></tr>
{foreach from=$n->files item=file}
<tr class="{cycle values='r1,r0'}">
<td><img src="{$file->icon}" alt=""></td>
<td class="valign"><a href="{$WWWROOT}artefact/file/download.php?file={$file->attachment}">{$file->title}</a></td>
<td class="valign">{$file->description}</td>
</tr>
{/foreach}
</tbody>
</table>
</div>
</div>
{/if}
{else}
<h3>{str tag=$n->artefacttype section='artefact.resume'}</h3>
<div class="">
{if !$hidetitle}
<h3 class="resumeh3">
{str tag='myskills' section='artefact.resume'}
{if $controls}
{contextualhelp plugintype='artefact' pluginname='resume' section='myskills'}
{/if}
</td>
<td align="center">{$n->count}</td>
<td class="right buttonscell control-buttons">
{if $n->exists}
<a id="skills_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" title="{str tag=edit$n->artefacttype section=artefact.resume}" class="btn btn-default btn-xs">
<span class="fa fa-pencil"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
{else}
<a id="skills_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?type={$n->artefacttype}" title="{str tag=edit$n->artefacttype section=artefact.resume}" class="btn btn-default btn-xs">
<span class="fa fa-pencil"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
</h3>{/if}
<div id="skillslist{$suffix}" class="panel-items js-masonry" data-masonry-options='{ "itemSelector": ".panel" }'>
{foreach from=$skills item=n}
<div class="panel panel-default">
<h3 class="title panel-heading">
{str tag=$n->artefacttype section='artefact.resume'}
<div class="pull-right">
{if $n->exists}
<a id="skills_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?id={$n->id}" title="{str tag=edit$n->artefacttype section=artefact.resume}" class="btn btn-default btn-xs">
<span class="fa fa-pencil"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
{else}
<a id="skills_edit_{$n->artefacttype}" href="{$WWWROOT}artefact/resume/editgoalsandskills.php?type={$n->artefacttype}" title="{str tag=edit$n->artefacttype section=artefact.resume}" class="btn btn-default btn-xs">
<span class="fa fa-pencil"></span>
<span class="sr-only">{str tag=edit}</span>
</a>
{/if}
</div>
</h3>
{if $n->exists}
<div id="n{$n->id}_desc" class="panel-body">
{if $n->description != ''}
{$n->description|clean_html|safe}
{else}
{str tag=nodescription section=artefact.resume}
{/if}
</div>
{if $n->files}
<div id="resume_{$n->id}" class="panel-footer has-attachment">
<div class="attachment-heading in-panel">
<a class="attach-files collapsed" aria-expanded="false" href="#attach_skill_{$n->id}" data-toggle="collapse">
<span class="badge">{$n->count}</span>
{str tag=attachedfiles section=artefact.blog}
<span class="fa fa-chevron-down pull-right"></span>
</a>
</div>
<div id="attach_skill_{$n->id}" class="collapse">
<ul class="list-group-item-text list-unstyled list-group-item-link has-icon">
{foreach from=$n->files item=file}
<li>
<a href="{$WWWROOT}artefact/file/download.php?file={$file->attachment}" '{if $file->description}' title="{$file->description}" data-toggle="tooltip" '{/if}'>
<div class="file-icon mrs">
<img src="{$file->icon}" alt="" class="mrs">
</div>
{$file->title|truncate:40}
</a>
</li>
{/foreach}
</ul>
</div>
</div>
{/if}
</div>
{/foreach}
</div>
{if $license}
<div class="resumelicense">
{$license|safe}
</div>
{/if}
</td>
</tr>
{/foreach}
</tbody>
</table>
</div>
{if $license}
<div class="resumelicense">
{$license|safe}
</div>
{/if}
</fieldset>
......@@ -33,8 +33,6 @@ jQuery(function($) {
tabnav.find('li:first-child').addClass('active');
// Remove extra padding when there are no site message
if ($('.site-messages').length === 0) {
$('.header').addClass('no-site-messages');
......@@ -61,4 +59,21 @@ jQuery(function($) {
$('#js-filebrowser').wrapInner('<div class="modal-dialog modal-lg"><div class="modal-content modal-filebrowser"></div></div>');
$('#js-filebrowser').modal('hide');
// Clear the form if when the form is collapsed
$('[data-action="reset-on-collapse"]').on('hidden.bs.collapse', function () {
var i,
forms =$(this).find('form');