Commit 39d3e496 authored by Toni Gardiner's avatar Toni Gardiner Committed by Robert Lyon
Browse files

BUG1465107-responsive columns and BUG1465107-expand-collapse-arrows

behatnotneeded

Change-Id: I131f43b8af321f267959d4d5d4dfb57d07e803d3
parent 8c42364a
......@@ -73,7 +73,7 @@ function pieform_element_fieldset(Pieform $form, $element) {
$legendcontent .= '<span class="icon icon-'.$element['iconclass'].' prl type-icon"> </span>';
}
$legendcontent .= Pieform::hsc($element['legend']);
$legendcontent .= '<span class="icon icon-chevron-down pls collapse-indicator pull-right"> </span> ';
$legendcontent .= '<span class="icon icon-chevron-down collapse-indicator pull-right"> </span> ';
$legendcontent .= '</a>';
}
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
......@@ -157,12 +157,14 @@ jQuery(function($) {
countnode.html(data.data.newunreadcount);
}
}
if(data.data.html){
if (data.data.html) {
notificationList.html(data.data.html);
} else if(self) {
}
else if (self) {
$(self).removeClass('panel-primary js-panel-unread').addClass('panel-default');
$(self).find('.control').removeClass('control');
}
$('#selectall').attr('checked', false); // Need to uncheck bulk checkbox
}
function changeactivitytype(e) {
......
......@@ -63,13 +63,13 @@
{if $post->files}
<div class="has-attachment panel panel-default collapsible mbm" id="postfiles_{$post->id}">
<h5 class="panel-heading">
<a class="text-left pts pbm collapsed" data-toggle="collapse" href="#attach_{$post->id}" aria-expanded="false">
<a class="text-left pbm collapsed" data-toggle="collapse" href="#attach_{$post->id}" aria-expanded="false">
<span class="icon icon-lg prm icon-paperclip"></span>
<span class="text-small"> {str tag=attachedfiles section=artefact.blog} </span>
<span class="metadata">
({$post->files|count})
</span>
<span class="pts icon icon-chevron-down collapse-indicator pull-right"></span>
<span class="icon icon-chevron-down collapse-indicator pull-right"></span>
</a>
</h5>
<div class="collapse" id="attach_{$post->id}">
......
......@@ -11,7 +11,7 @@
</a>
{/if}
</div>
<div id="myblogs" class="rel ptxl mtxl">
<div id="myblogs" class="myblogs rel ptxl mtxl">
<div id="blogdescription" class="blogdescription">
{clean_html($blog->get('description'))|safe}
</div>
......
{if !$items}
<div class="panel-body">
<p class="lead text-small">{str tag=nomessages section=blocktype.inbox}</p>
</div>
<div class="panel-body">
<p class="lead text-small">{str tag=nomessages section=blocktype.inbox}</p>
</div>
{else}
<div id="inboxblock" class="list-group">
{foreach from=$items item=i}
<div class="list-group-item ">
<div class="icon-container pull-left pls prm">
{if $i->read}
<span class="icon icon-envelope type-icon"></span>
<span class="sr-only">{$i->strtype}</span>
{else}
<!-- Supposed to be unread -->
<span class="icon icon-envelope type-icon"></span>
<span class="sr-only">{$i->strtype}</span>
{/if}
</div>
{if $i->message}
<a href="{if $i->url}{$WWWROOT}{$i->url}{else}{$WWWROOT}module/multirecipientnotification/inbox.php{/if}" class="link-block collapsed inbox-showmessage{if !$i->read} unread{/if} mochi-collapse">
{if !$i->read}<span class="accessible-hidden sr-only">{str tag=unread section=activity}: </span>{/if}{$i->subject|truncate:50}
<span class="text-small icon icon-chevron-down pls collapse-indicator pull-right"></span>
</a>
<div class="panel-body inbox-message hidden messagebody-{$i->type}" id="inbox-message-{$i->table}-{$i->id}">
<p>{$i->message|safe}</p>
{if $i->url}
<a href="{$WWWROOT}{$i->url}" class="btn btn-default btn-xs pull-right">
{if $i->urltext}{$i->urltext}{else}{str tag="more..."}{/if} <span class="icon icon-arrow-right mls icon-sm"></span>
</a>
<div id="inboxblock" class="inboxblock list-group">
{foreach from=$items item=i}
<div class="has-attachment panel-default collapsible list-group-item">
{if $i->message}
<a class="collapsed link-block{if !$i->read} unread{/if}" data-toggle="collapse" href="#message_content_{$i->type}_{$i->id}" aria-expanded="false">
{if $i->type == 'usermessage'}
<span class="icon prm icon-envelope text-default"></span>
{elseif $i->type == 'institutionmessage'}
<span class="icon prm icon-university text-default"></span>
{elseif $i->type == 'feedback'}
<span class="icon prm icon-comments text-default"></span>
{elseif $i->type == 'annotationfeedback'}
<span class="icon prm icon-comments-o text-default"></span>
{else}
<span class="icon prm icon-wrench text-default"></span>
{/if}
<span class="sr-only">{$item->strtype}</span>
{$i->subject|truncate:50}
<span class="icon icon-chevron-down collapse-indicator pull-right text-small"></span>
</a>
{/if}
<div class="collapse mtm" id="message_content_{$i->type}_{$i->id}">
{if $i->message}
<p>{$i->message|safe}</p>
{if $i->url}
<a href="{$WWWROOT}{$i->url}">
{if $i->urltext}{$i->urltext}{else}{str tag="more..."}{/if} <span class="icon icon-arrow-right mls icon-sm"></span>
</a>
{/if}
{elseif $i->url}
<a href="{$WWWROOT}{$i->url}">{$i->subject}</a>
{else}
{$i->subject}
{/if}
</div>
</div>
{elseif $i->url}
<a href="{$WWWROOT}{$i->url}">{$i->subject}</a>
{else}
{$i->subject}
{/if}
{/foreach}
</div>
{/foreach}
<script type="application/javascript">
var blockid = '{$blockid}';
{literal}
jQuery(window).ready(function() {
jQuery("#" + blockid + " a.inbox-showmessage").each(function() {
var el = jQuery(this);
el.click(function(e) {
e.preventDefault();
var message = jQuery(e.target).parent().find(".inbox-message");
message.toggleClass('hidden');
var unreadText = jQuery(e.target).find(".accessible-hidden");
if (unreadText.length) {
var tableinfo = message.attr('id').split('-');
var id = tableinfo.pop();
var table = tableinfo.pop();
var pd = {'readone':id, 'table':table};
sendjsonrequest(config.wwwroot + 'module/multirecipientnotification/indexin.json.php', pd, 'GET', function(data) {
unreadText.remove();
updateUnreadCount(data);
});
}
});
});
});
{/literal}
</script>
</div>
{if $desiredtypes}
<a class="panel-footer" href="{$WWWROOT}module/multirecipientnotification/inbox.php?type={$desiredtypes}">{str tag=More section=blocktype.inbox} <span class="icon icon-arrow-circle-right mls pull-right"></span></a>
{/if}
{if $desiredtypes}
<a class="panel-footer" href="{$WWWROOT}account/activity/index.php?type={$desiredtypes}">{str tag=More section=blocktype.inbox} <span class="icon icon-arrow-circle-right mls pull-right"></span></a>
{/if}
{/if}
......@@ -63,7 +63,7 @@
, {$item->date}
</span>
</span>
<span class="icon icon-chevron-down pls collapse-indicator pull-right"></span>
<span class="icon icon-chevron-down collapse-indicator pull-right"></span>
</span>
</a>
</h4>
......
......@@ -55,7 +55,7 @@
</span>
</span>
</span>
<span class="icon icon-chevron-down pls collapse-indicator pull-right"></span>
<span class="icon icon-chevron-down collapse-indicator pull-right"></span>
</a>
</h4>
<div id="notification-{$item->id}" class="collapse">
......
......@@ -17,10 +17,15 @@
}
}
//dash
.collapse-indicator {
color: $brand-success;
color: #aaa;
font-size: 13px;
display: block;
transition-duration: 0.3s;
&.pull-right {
margin: 2px 0 0;
}
&.text-small {
font-size: 11px;
}
......@@ -29,7 +34,38 @@
}
a:hover &,
a:focus & {
color: $brand-success;
color: #555;
}
.collapsed ~ & {
transform: rotate(180deg);
transition-duration: 0.3s;
margin-top: 5px;
}
}
//dash inner
//messages: inbox, sent
//admin: site options
//journals
.inboxblock .link-block,
.form-notificationlist h4 a,
.pieform-fieldset.collapsible h4 a,
.myblogs h5 a {
&:hover .collapse-indicator,
&:focus .collapse-indicator{
color: #555;
}
.collapse-indicator {
transform: rotate(-180deg);
transition-duration: 0.3s;
color: #aaa;
margin-top: 5px;
line-height: 13px;
height: auto;
}
&.collapsed .collapse-indicator {
transform: rotate(0deg);
transition-duration: 0.3s;
margin-top: 2px;
}
}
......@@ -56,7 +92,7 @@
&:hover,
&:focus {
~ .collapse-indicator {
color: $brand-success;
color: #555;
}
}
}
......@@ -41,15 +41,28 @@
height: 37px;
width:42px;
margin: 0;
&:hover,
transition-duration: 0.3s;
&:hover,
&:focus {
.navbar-inverse & {
background-color: darken($navbar-inverse-bg, 10%);
color: lighten($navbar-inverse-bg, 35%);
}
.icon {
color: #555;
}
}
.icon {
transform: rotate(-180deg);
transition-duration: 0.3s;
color: #aaa;
}
&.collapsed {
background-color: transparent;
height: 36px;
.icon {
transform: rotate(0deg);
transition-duration: 0.3s;
}
}
}
\ No newline at end of file
......@@ -51,6 +51,7 @@ $columns: 8; //up to 8
margin-left: 2%;
}
@media (max-width: $screen-sm-min) {
max-width: 100%;
width: 100% !important; // override inline style
}
}
......@@ -58,6 +59,9 @@ $columns: 8; //up to 8
// Target all 3 col layouts with equal width
.column-layout.columns3.col-width-33 {
width: 31.3% !important; // override inline style with a more accurate width
@media (max-width: $screen-sm-min) {
width: 100% !important; // override inline style
}
}
......
......@@ -35,7 +35,7 @@
li {
margin: 0;
a {
color: rgba(#fff, 0.8);
color: $text-color;
}
}
......@@ -78,12 +78,12 @@
min-width: 200px;
max-width: 100%;
overflow: hidden;
padding: 15px 17px;
padding: 15px 0px;
li {
display: block;
a { //styles that need to override bootstrap specificity
padding: 10px 12px;
padding: 10px 29px;
font-weight: normal;
&:hover, &:focus {
text-decoration:none;
......@@ -92,7 +92,7 @@
}
}
// If this link is the current pafge or section
// If this link is the current page or section
.active > a {
font-weight: bold;
background-color: rgba(darken($navbar-inverse-link-hover-bg, 5%), 0.8);
......
......@@ -2,6 +2,11 @@
@extend .icon;
@extend .icon-lg;
@extend .icon-angle-down;
&:before {
display: block;
text-align: center;
}
}
.mce-panel.mce-tinymce {
......@@ -38,4 +43,11 @@ label.sr-only + div.mce-tinymce {
.mce-container .mce-wordcount {
text-align: right;
}
\ No newline at end of file
}
.mce-active .mce-ico.mce-i-icon.tooltoggle-icon {
transform: rotate(180deg);
&:before {
margin-top: 1px;
}
}
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -2,7 +2,7 @@
{if $title}
<h3 class="title panel-heading js-heading">
{if $retractable}
<a data-toggle="collapse" href="#blockinstance_{$id}_target" aria-expanded="true" aria-controls="blockinstance_{$id}_target" class="{if $retractedonload}collapsed {/if}outer-link"></a>
<a data-toggle="collapse" href="#blockinstance_{$id}_target" aria-expanded="true" aria-controls="blockinstance_{$id}_target" class="outer-link{if $retractedonload} collapsed{/if}"></a>
{/if}
{$title}
......@@ -23,7 +23,7 @@
{if $retractable}
<span class="icon icon-chevron-down pls collapse-indicator pull-right"></span>
<span class="icon icon-chevron-up collapse-indicator pull-right inner-link"></span>
{/if}
</h3>
......
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