Commit c6f82f81 authored by Robert Lyon's avatar Robert Lyon Committed by Gerrit Code Review
Browse files

Merge "Bug 1765558: Give accordion chevron more spacing"

parents ba75eec4 7f6c568f
...@@ -175,6 +175,12 @@ class BehatNavigation extends BehatBase { ...@@ -175,6 +175,12 @@ class BehatNavigation extends BehatBase {
// We just want to expand the node, we don't want to follow it. // We just want to expand the node, we don't want to follow it.
$node = $node->getParent(); $node = $node->getParent();
} }
// Check if the node is wrapped in an inner div
if ($node->find('css', '.collapse-inline')) {
// We just want to expand the parent node as this doesn't align top left to the outer-link a link.
$node = $node->getParent();
}
$node->click(); $node->click();
} }
......
...@@ -9,11 +9,14 @@ ...@@ -9,11 +9,14 @@
{/if} {/if}
{if $task->description || $task->tags}<a class="link-block collapsed" href="#expand-task-{$task->id}{if $block}-{$block}{/if}" data-toggle="collapse" aria-expanded="false" aria-controls="expand-task-{$task->id}{if $block}-{$block}{/if}">{/if} {if $task->description || $task->tags}<a class="link-block collapsed" href="#expand-task-{$task->id}{if $block}-{$block}{/if}" data-toggle="collapse" aria-expanded="false" aria-controls="expand-task-{$task->id}{if $block}-{$block}{/if}">{/if}
<span class="overdue-task"> <span class="overdue-task">
<span class="icon icon-times text-danger icon-lg left task{$task->id}{if $editing || $canedit} plan-task-icon{/if}" role="presentation" aria-hidden="true" data-task="{$task->id}"></span> <div class="collapse-inline">
<span class="text-danger">{$task->title}</span> - <span class="icon icon-times text-danger icon-lg left task{$task->id}{if $editing || $canedit} plan-task-icon{/if}" role="presentation" aria-hidden="true" data-task="{$task->id}"></span>
<span class="text-small text-midtone"> <span class="text-danger">{$task->title}</span> -
{str tag='completiondate' section='artefact.plans'}: {$task->completiondate} <span class="text-small text-midtone">
</span> {str tag='completiondate' section='artefact.plans'}: {$task->completiondate}
</span>
</div>
{if $task->description || $task->tags} {if $task->description || $task->tags}
<span class="icon icon-chevron-down right collapse-indicator pull-right" role="presentation" aria-hidden="true"></span> <span class="icon icon-chevron-down right collapse-indicator pull-right" role="presentation" aria-hidden="true"></span>
{/if} {/if}
...@@ -45,18 +48,19 @@ ...@@ -45,18 +48,19 @@
{/if} {/if}
{if $task->description || $task->tags}<a class="link-block collapsed" href="#expand-task-{$task->id}{if $block}-{$block}{/if}" data-toggle="collapse" aria-expanded="false" aria-controls="expand-task-{$task->id}{if $block}-{$block}{/if}">{/if} {if $task->description || $task->tags}<a class="link-block collapsed" href="#expand-task-{$task->id}{if $block}-{$block}{/if}" data-toggle="collapse" aria-expanded="false" aria-controls="expand-task-{$task->id}{if $block}-{$block}{/if}">{/if}
<span class="complete-task"> <span class="complete-task">
{if $task->completed == 1} <div class="collapse-inline">
<span class="icon icon-check-square-o icon-lg text-success left task{$task->id}{if $editing || $canedit} plan-task-icon{/if}" role="presentation" aria-hidden="true" data-task="{$task->id}"></span> {if $task->completed == 1}
<span class="sr-only">{str tag=completed section=artefact.plans}</span> <span class="icon icon-check-square-o icon-lg text-success left task{$task->id}{if $editing || $canedit} plan-task-icon{/if}" role="presentation" aria-hidden="true" data-task="{$task->id}"></span>
{else} <span class="sr-only">{str tag=completed section=artefact.plans}</span>
<span class="icon-square-o icon icon-lg text-midtone left task{$task->id}{if $editing || $canedit} plan-task-icon{/if}" role="presentation" aria-hidden="true" data-task="{$task->id}"></span> {else}
<span class="sr-only">{str tag=incomplete section=artefact.plans}</span> <span class="icon-square-o icon icon-lg text-midtone left task{$task->id}{if $editing || $canedit} plan-task-icon{/if}" role="presentation" aria-hidden="true" data-task="{$task->id}"></span>
{/if} <span class="sr-only">{str tag=incomplete section=artefact.plans}</span>
{/if}
<span class="text-default">{$task->title}</span> - <span class="text-default">{$task->title}</span> -
<span class="text-midtone text-small"> <span class="text-midtone text-small">
{str tag='completiondate' section='artefact.plans'}: {$task->completiondate} {str tag='completiondate' section='artefact.plans'}: {$task->completiondate}
</span> </span>
</div>
{if $task->description || $task->tags} {if $task->description || $task->tags}
<span class="icon icon-chevron-down right collapse-indicator pull-right" role="presentation" aria-hidden="true"></span> <span class="icon icon-chevron-down right collapse-indicator pull-right" role="presentation" aria-hidden="true"></span>
......
...@@ -90,3 +90,73 @@ a[data-toggle="collapse"] { ...@@ -90,3 +90,73 @@ a[data-toggle="collapse"] {
} }
} }
} }
// Align text and chevron across multiple layouts
.collapse-inline {
display: inline-block;
width: 90%;
}
.columns5 .collapse-inline {
width: 80%;
}
@media (min-width: $screen-sm-min) {
.columns3.col-width-15 .collapse-inline {
width: 70%;
}
}
// Align in edit mode
.editing {
.icon-chevron-down {
padding-right: 5px;
}
.columns1,
.columns2,
.columns3,
.columns4,
.columns5 {
.collapse-inline {
width: 65%;
}
}
@media (min-width: $screen-sm-min) {
.columns1 .collapse-inline {
width: 85%;
}
.columns2.col-width-33,
.columns3.col-width-33 {
.collapse-inline {
width: 50%;
}
}
}
@media (min-width: $screen-md-min) {
.columns4.col-width-25,
.columns3.col-width-25 {
.collapse-inline {
width: 50%;
}
}
}
@media (min-width: $screen-lg-min) {
.columns3.col-width-25,
{
width: 60%;
}
.columns1,
.columns2.col-width-33,
.columns3.col-width-33,
.columns4 {
.collapse-inline {
width: 70%;
}
}
.columns5 {
.collapse-inline {
width: 50%;
}
}
}
}
...@@ -5,14 +5,15 @@ ...@@ -5,14 +5,15 @@
<a data-toggle="collapse" href="#blockinstance_{$id}_target" aria-expanded="{if $retractedonload}false{else}true{/if}" aria-controls="blockinstance_{$id}_target" class="outer-link{if $retractedonload} collapsed{/if}"></a> <a data-toggle="collapse" href="#blockinstance_{$id}_target" aria-expanded="{if $retractedonload}false{else}true{/if}" aria-controls="blockinstance_{$id}_target" class="outer-link{if $retractedonload} collapsed{/if}"></a>
{/if} {/if}
{$title} <div class="collapse-inline">
{if $feedlink} {$title}
<a href="{$feedlink}" class="secondary-link inner-link"> {if $feedlink}
<span class="icon-rss icon icon-large mahara-rss-icon right" role="presentation" aria-hidden="true"></span> <a href="{$feedlink}" class="secondary-link inner-link">
<span class="sr-only">RSS</span> <span class="icon-rss icon icon-large mahara-rss-icon right" role="presentation" aria-hidden="true"></span>
</a> <span class="sr-only">RSS</span>
{/if} </a>
{/if}
</div>
{if $retractable} {if $retractable}
<span class="icon icon-chevron-up collapse-indicator pull-right" role="presentation" aria-hidden="true"></span> <span class="icon icon-chevron-up collapse-indicator pull-right" role="presentation" aria-hidden="true"></span>
......
Supports Markdown
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