Commit 91927381 authored by Pat Kira's avatar Pat Kira Committed by Aaron Wells
Browse files

Attachment panel (bootstrap)

Bug 1465107: Use Bootstrap CSS Framework

Change-Id: I9b6202468045ea1d3508e90f8cfbc9a195b1d37b
parent 94f02000
// Should we delete this? We have changed the mark up to use
// bootstrap carousel classes
function Slideshow(id, count) { function Slideshow(id, count) {
var self = this; var self = this;
this.id = '#slideshow' + id; this.id = '#slideshow' + id;
......
...@@ -384,7 +384,7 @@ EOF; ...@@ -384,7 +384,7 @@ EOF;
), ),
'managenotes' => array( 'managenotes' => array(
'type' => 'html', 'type' => 'html',
'class' => 'right hidden', 'class' => 'text-right hidden',
'value' => '<a href="' . $manageurl . '" target="_blank">' 'value' => '<a href="' . $manageurl . '" target="_blank">'
. get_string('managealltextboxcontent1', 'blocktype.internal/textbox') . ' &raquo;</a>', . get_string('managealltextboxcontent1', 'blocktype.internal/textbox') . ' &raquo;</a>',
), ),
......
...@@ -289,6 +289,7 @@ function renderpost($post, $indent, $mode) { ...@@ -289,6 +289,7 @@ function renderpost($post, $indent, $mode) {
), ),
'details' => array( 'details' => array(
'type' => 'fieldset', 'type' => 'fieldset',
'class' => 'last',
'collapsible' => true, 'collapsible' => true,
'collapsed' => true, 'collapsed' => true,
'legend' => get_string('reporteddetails', 'interaction.forum'), 'legend' => get_string('reporteddetails', 'interaction.forum'),
......
...@@ -166,11 +166,10 @@ if (ul) { ...@@ -166,11 +166,10 @@ if (ul) {
// Hide the search form // Hide the search form
connect(a, 'onclick', function(e) { connect(a, 'onclick', function(e) {
hideElement('artefactchooser-searchform'); hideElement('artefactchooser-searchform');
removeElementClass(searchA.parentNode, 'current'); removeElementClass(searchA.parentNode, 'active');
jQuery(browseA).find('.accessible-hidden').html('(' + get_string_ajax('tab', 'mahara') + ' ' + get_string_ajax('selected', 'mahara') + ')'); jQuery(browseA).find('.accessible-hidden').html('(' + get_string_ajax('tab', 'mahara') + ' ' + get_string_ajax('selected', 'mahara') + ')');
jQuery(searchA).find('.accessible-hidden').html('(' + get_string_ajax('tab', 'mahara') + ')'); jQuery(searchA).find('.accessible-hidden').html('(' + get_string_ajax('tab', 'mahara') + ')');
addElementClass(browseA.parentNode, 'current'); addElementClass(browseA.parentNode, 'active');
browseA.blur(); browseA.blur();
$('artefactchooser-searchfield').value = ''; // forget the search for now, easier than making the tabs remember it $('artefactchooser-searchfield').value = ''; // forget the search for now, easier than making the tabs remember it
if (!browseTabCurrent) { if (!browseTabCurrent) {
...@@ -186,10 +185,10 @@ if (ul) { ...@@ -186,10 +185,10 @@ if (ul) {
// Display the search form // Display the search form
connect(a, 'onclick', function(e) { connect(a, 'onclick', function(e) {
showElement('artefactchooser-searchform'); showElement('artefactchooser-searchform');
removeElementClass(browseA.parentNode, 'current'); removeElementClass(browseA.parentNode, 'active');
jQuery(searchA).find('.accessible-hidden').html('(' + get_string_ajax('tab', 'mahara') + ' ' + get_string_ajax('selected', 'mahara') + ')'); jQuery(searchA).find('.accessible-hidden').html('(' + get_string_ajax('tab', 'mahara') + ' ' + get_string_ajax('selected', 'mahara') + ')');
jQuery(browseA).find('.accessible-hidden').html('(' + get_string_ajax('tab', 'mahara') + ')'); jQuery(browseA).find('.accessible-hidden').html('(' + get_string_ajax('tab', 'mahara') + ')');
addElementClass(searchA.parentNode, 'current'); addElementClass(searchA.parentNode, 'active');
connect('artefactchooser-searchfield', 'onkeypress', function(e) { connect('artefactchooser-searchfield', 'onkeypress', function(e) {
if (e.key().code == 13) { // enter pressed - submitting form if (e.key().code == 13) { // enter pressed - submitting form
......
<div class="checkbox fullwidth"> <div class="checkbox fullwidth">
{$formcontrols|safe} {$formcontrols|safe}
<label for="{$elementname}_{$artefact->id}">{$artefact->title}{if $artefact->draft} [{str tag=draft section=artefact.blog}]{/if} <label for="{$elementname}_{$artefact->id}">{$artefact->title}{if $artefact->draft} [{str tag=draft section=artefact.blog}]{/if}
<span class="metadata">({if $artefact->blog}{$artefact->blog}{/if})</span> <span class="metadata">{if $artefact->blog}({$artefact->blog}){/if}</span>
</label> </label>
{if $artefact->description} {if $artefact->description}
<div class="text-small with-label">{$artefact->description|clean_html|safe}</div> <div class="text-small with-label">{$artefact->description|clean_html|safe}</div>
......
...@@ -60,16 +60,18 @@ ...@@ -60,16 +60,18 @@
</p> </p>
{if $post->files} {if $post->files}
<div class="panel panel-default mbm" id="postfiles_{$post->id}"> <div class="has-attachment panel panel-default collapsible mbm" id="postfiles_{$post->id}">
<a class="panel-heading collapsible collapsed" data-toggle="collapse" href="#attach_{$post->id}" aria-expanded="false"> <h5 class="panel-heading">
<span class="fa fa-lg prm fa-paperclip"></span> <a class="text-left pts pbm collapsed" data-toggle="collapse" href="#attach_{$post->id}" aria-expanded="false">
<span class="fa fa-lg prm fa-paperclip"></span>
<span class="text-small"> {str tag=attachedfiles section=artefact.blog} </span>
<span class="metadata"> <span class="text-small"> {str tag=attachedfiles section=artefact.blog} </span>
({$post->files|count}) <span class="metadata">
</span> ({$post->files|count})
<span class="fa fa-chevron-down collapse-indicator pull-right"></span> </span>
</a> <span class="pts fa fa-chevron-down collapse-indicator pull-right"></span>
</a>
</h5>
<div class="collapse" id="attach_{$post->id}"> <div class="collapse" id="attach_{$post->id}">
<ul class="list-group list-unstyled mb0"> <ul class="list-group list-unstyled mb0">
{foreach from=$post->files item=file} {foreach from=$post->files item=file}
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
{/if} {/if}
{if isset($attachments)} {if isset($attachments)}
<div class="has-attachment in-panel panel panel-default collapsible last"> <div class="has-attachment panel panel-default collapsible">
<h4 class="panel-heading"> <h4 class="panel-heading">
<a class="text-left pts pbm collapsed" aria-expanded="false" href="#blog-attach-{$postid}" data-toggle="collapse"> <a class="text-left pts pbm collapsed" aria-expanded="false" href="#blog-attach-{$postid}" data-toggle="collapse">
<span class="fa prm fa-paperclip"></span> <span class="fa prm fa-paperclip"></span>
......
{foreach from=$posts item=post} {foreach from=$posts item=post}
<div class="post"> <div class="post ptm pbm">
<h4 class="title"> <h4 class="title">
<a href="{$WWWROOT}artefact/artefact.php?artefact={$post->id}&view={$options.viewid}">{$post->title}</a> <a href="{$WWWROOT}artefact/artefact.php?artefact={$post->id}&view={$options.viewid}">{$post->title}</a>
</h4> </h4>
<div class="postdetails metadata pbs">{$post->postedby}</div> <div class="postdetails metadata">
<div>{$post->description|clean_html|safe} <span class="fa fa-calendar mrs"></span>
{$post->postedby}
</div>
{if $post->tags} {if $post->tags}
<div class="tags">{str tag=tags}: {list_tags owner=$post->owner tags=$post->tags}</div> <div class="tags metadata">
{/if}</div> <span class="fa fa-tags"></span>
<strong>{str tag=tags}:</strong>
{list_tags owner=$post->owner tags=$post->tags}
</div>
{/if}
<div class="mtl mbl">{$post->description|clean_html|safe}
</div>
{if $post->files} {if $post->files}
<div class="has-attachment panel panel-default collapsible" id="postfiles_{$post->id}">
<div class="has-attachment in-panel panel panel-default collapsible last">
<h5 class="panel-heading"> <h5 class="panel-heading">
<a class="text-left pts pbm collapsed" aria-expanded="false" href="#blog-post-attach-{$post->id}" data-toggle="collapse"> <a href="#blogpost-attach-{$post->id}" class="text-left pts pbm collapsed" aria-expanded="false" data-toggle="collapse">
<span class="fa prm fa-paperclip"></span> <span class="fa fa-paperclip prm"></span>
<span class="text-small">{str tag=attachedfiles section=artefact.blog}</span> <span class="text-small">{str tag=attachedfiles section=artefact.blog}</span>
<span class="metadata">({$post->files|count})</span> <span class="metadata">({$post->files|count})</span>
...@@ -23,8 +31,7 @@ ...@@ -23,8 +31,7 @@
</a> </a>
</h5> </h5>
<div id="blogpost-attach-{$post->id}" class="collapse">
<div id="blog-post-attach-{$post->id}" class="collapse">
<ul class="list-unstyled list-group"> <ul class="list-unstyled list-group">
{foreach from=$post->files item=file} {foreach from=$post->files item=file}
<li class="list-group-item-text list-group-item-link"> <li class="list-group-item-text list-group-item-link">
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
{if isset($attachments)} {if isset($attachments)}
<!-- to do: this could probably be a reusable template --> <!-- to do: this could probably be a reusable template -->
<div class="has-attachment in-panel panel panel-default collapsible last"> <div class="has-attachment panel panel-default collapsible">
<h4 class="panel-heading"> <h4 class="panel-heading">
<a class="text-left pts pbm collapsed" aria-expanded="false" href="#note-attach-{$blockid}" data-toggle="collapse"> <a class="text-left pts pbm collapsed" aria-expanded="false" href="#note-attach-{$blockid}" data-toggle="collapse">
<span class="fa prm fa-paperclip"></span> <span class="fa prm fa-paperclip"></span>
......
<div class="list-group-item"> <div>
{$formcontrols|safe} {$formcontrols|safe}
<label for="{$elementname}_{$artefact->id}"> <label for="{$elementname}_{$artefact->id}">
{$artefact->title|str_shorten_text:60:true} {$artefact->title|str_shorten_text:60:true}
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
</div> </div>
{if $n->files} {if $n->files}
<div id="resume_{$n->id}" class="has-attachment"> <div id="resume_{$n->id}" class="has-attachment">
<a class="collapsible collapsed in-panel panel-footer" aria-expanded="false" href="#attach_goal_{$.foreach.default.index}" data-toggle="collapse"> <a class="collapsible collapsed panel-footer" aria-expanded="false" href="#attach_goal_{$.foreach.default.index}" data-toggle="collapse">
<p class="text-left mbs"> <p class="text-left mbs">
<span class="fa fa-lg prm fa-paperclip"></span> <span class="fa fa-lg prm fa-paperclip"></span>
......
{$description|clean_html|safe} {$description|clean_html|safe}
{if isset($attachments)} {if isset($attachments)}
<div class="has-attachment in-panel panel panel-default collapsible last"> <div class="has-attachment panel panel-default collapsible">
<h4 class="panel-heading"> <h4 class="panel-heading">
<a class="text-left pts pbm collapsed" aria-expanded="false" href="#cv-attach-{$id}" data-toggle="collapse"> <a class="text-left pts pbm collapsed" aria-expanded="false" href="#cv-attach-{$id}" data-toggle="collapse">
<span class="fa prm fa-paperclip"></span> <span class="fa prm fa-paperclip"></span>
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
{/if} {/if}
{if $n->files} {if $n->files}
<div id="resume_{$n->id}" class="has-attachment"> <div id="resume_{$n->id}" class="has-attachment">
<a class="panel-footer in-panel collapsed" aria-expanded="false" href="#attach_skill_{$n->id}" data-toggle="collapse"> <a class="panel-footer collapsed" aria-expanded="false" href="#attach_skill_{$n->id}" data-toggle="collapse">
<p class="text-left mbs"> <p class="text-left mbs">
<span class="fa fa-lg prm fa-paperclip"></span> <span class="fa fa-lg prm fa-paperclip"></span>
......
<div class="googleapps-container center"><div class="googleapps"> <div class="googleapps-container text-center">
<iframe width="100%" height="{$height}" frameborder="0" src="{$url}"></iframe> <div class="googleapps">
</div></div> <iframe width="100%" height="{$height}" frameborder="0" src="{$url}"></iframe>
</div>
</div>
{include file="header.tpl"} {include file="header.tpl"}
{if $membership} {if $membership}
<div id="forumbtns" class="btn-top-right btn-group btn-group-top"> <div id="forumbtns" class="btn-top-right btn-group btn-group-top">
{if !$topic->forumsubscribed} {if !$topic->forumsubscribed}
...@@ -7,7 +6,7 @@ ...@@ -7,7 +6,7 @@
{/if} {/if}
{if $topic->canedit} {if $topic->canedit}
<a href="{$WWWROOT}interaction/forum/edittopic.php?id={$topic->id}" class="btn btn-default editforum"> <a href="{$WWWROOT}interaction/forum/edittopic.php?id={$topic->id}" class="btn btn-default editforum">
<span class="fa fa-pencil"></span> <span class="fa fa-pencil fa-lg prs"></span>
{str tag=edittopic section=interaction.forum} {str tag=edittopic section=interaction.forum}
</a> </a>
{if $moderator} {if $moderator}
...@@ -21,7 +20,6 @@ ...@@ -21,7 +20,6 @@
</div> </div>
{/if} {/if}
<h2 class="ptxl pbm"> <h2 class="ptxl pbm">
<span class="lead text-small mbs inline ptl"> <span class="lead text-small mbs inline ptl">
<a href="{$WWWROOT}interaction/forum/view.php?id={$topic->forumid}"> <a href="{$WWWROOT}interaction/forum/view.php?id={$topic->forumid}">
...@@ -31,9 +29,13 @@ ...@@ -31,9 +29,13 @@
<br /> <br />
{$topic->subject} {$topic->subject}
</h2> </h2>
<hr class="mbxl" /> <hr class="mbxl" />
<h2>
{str tag=nameplural section=interaction.forum} &gt;
<a href="{$WWWROOT}interaction/forum/view.php?id={$topic->forumid}">
{$topic->forumtitle}
</a>
</h2>
{if $topic->closed} {if $topic->closed}
<div class="message closed"> <div class="message closed">
{str tag=topicisclosed section=interaction.forum} {str tag=topicisclosed section=interaction.forum}
......
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
&.has-attachment .panel-heading, &.has-attachment .panel-heading,
.collapsible-group & .panel-heading, .collapsible-group & .panel-heading,
legend h4, legend h4,
legend h3 { legend h3 {
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
padding: 0; padding: 0;
...@@ -96,13 +96,23 @@ ...@@ -96,13 +96,23 @@
// @todo: Rethink this, it's too complex // @todo: Rethink this, it's too complex
// What is in-panel? .panel.collapsible:not(.panel-secondary) {
.panel.collapsible:not(.panel-secondary):not(.in-panel) {
border-width: 0; border-width: 0;
// For attachment collapsible
// Remove border from heading - add to link tag. &.has-attachment {
// In this case we have a nested a tag that takes up the whole of the heading space @include border-radius(3px);
// rather than applying the panel-header to the link border-width: 1px;
.panel-heading a {
border-width: 0;
&:not(.collapsed) {
border-bottom-width: 1px;
}
}
}
// Remove border from heading - add to link tag.
// In this case we have a nested a tag that takes up the whole of the heading space
// rather than applying the panel-header to the link
.panel-heading { .panel-heading {
border: 0; border: 0;
a { a {
...@@ -121,11 +131,14 @@ ...@@ -121,11 +131,14 @@
.panel-heading a { .panel-heading a {
border: 1px solid $panel-default-border; border: 1px solid $panel-default-border;
} }
.panel-heading a, .panel-heading a,
.panel-body:not(.no-footer) { .panel-body:not(.no-footer) {
border-bottom-width:0; border-bottom-width:0;
} }
// last class will add bottom border to collapsible element(s)
// Except has-attachment, it doesn't need one.
&.last .panel-heading a.collapsed { &.last .panel-heading a.collapsed {
border-bottom-width: 1px; border-bottom-width: 1px;
} }
......
{if $searchable}<ul class="artefactchooser-tabs"> {if $searchable}
<li{if !$.request.s} class="current"{/if}><a href="{$browseurl}">{str tag=Browse section=view}</a></li> <ul class="artefactchooser-tabs nav nav-tabs">
<li{if $.request.s} class="current"{/if}><a href="{$searchurl}">{str tag=Search section=view}</a></li> <li{if !$.request.s} class="current active"{/if}><a href="{$browseurl}">{str tag=Browse section=view}</a></li>
<li{if $.request.s} class="current active"{/if}><a href="{$searchurl}">{str tag=Search section=view}</a></li>
</ul>{/if} </ul>{/if}
<div id="artefactchooser-body"> <div id="artefactchooser-body">
<div class="cb artefactchooser-splitter"> <div class="cb artefactchooser-splitter">
<div id="artefactchooser-searchform" class="form-group {if !$.request.s} hidden{/if}"> {* Use a smarty var, not smarty.request *} <div id="artefactchooser-searchform" class="form-group" {if !$.request.s} class="hidden"{/if}> {* Use a smarty var, not smarty.request *}
<label for="artefactchooser-searchfield">{str tag=search section=mahara}</label> <label for="artefactchooser-searchfield">{str tag=search section=mahara}</label>
<input type="text" class="text" id="artefactchooser-searchfield" name="search" value="{$.request.search}" tabindex="42"> <input type="text" class="text" id="artefactchooser-searchfield" name="search" value="{$.request.search}" tabindex="42">
<input type="hidden" name="s" value="1"> <input type="hidden" name="s" value="1">
...@@ -18,4 +19,4 @@ ...@@ -18,4 +19,4 @@
</div> </div>
{$pagination|safe} {$pagination|safe}
</div> </div>
</div> </div>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment