Commit 7f6c568f authored by Sarah Kirby's avatar Sarah Kirby Committed by Robert Lyon
Browse files

Bug 1765558: Give accordion chevron more spacing

behatnotneeded

Change-Id: If8d390b3316c55ed5ee6da608fc9e975ae3b3c29
parent 2a1f23df
......@@ -175,6 +175,12 @@ class BehatNavigation extends BehatBase {
// We just want to expand the node, we don't want to follow it.
$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();
}
......
......@@ -9,11 +9,14 @@
{/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="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-danger">{$task->title}</span> -
<span class="text-small text-midtone">
{str tag='completiondate' section='artefact.plans'}: {$task->completiondate}
</span>
<div class="collapse-inline">
<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-danger">{$task->title}</span> -
<span class="text-small text-midtone">
{str tag='completiondate' section='artefact.plans'}: {$task->completiondate}
</span>
</div>
{if $task->description || $task->tags}
<span class="icon icon-chevron-down right collapse-indicator pull-right" role="presentation" aria-hidden="true"></span>
{/if}
......@@ -45,18 +48,19 @@
{/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">
{if $task->completed == 1}
<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>
<span class="sr-only">{str tag=completed section=artefact.plans}</span>
{else}
<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>
<span class="sr-only">{str tag=incomplete section=artefact.plans}</span>
{/if}
<span class="text-default">{$task->title}</span> -
<span class="text-midtone text-small">
{str tag='completiondate' section='artefact.plans'}: {$task->completiondate}
</span>
<div class="collapse-inline">
{if $task->completed == 1}
<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>
<span class="sr-only">{str tag=completed section=artefact.plans}</span>
{else}
<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>
<span class="sr-only">{str tag=incomplete section=artefact.plans}</span>
{/if}
<span class="text-default">{$task->title}</span> -
<span class="text-midtone text-small">
{str tag='completiondate' section='artefact.plans'}: {$task->completiondate}
</span>
</div>
{if $task->description || $task->tags}
<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"] {
}
}
}
// 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 @@
<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}
{$title}
{if $feedlink}
<a href="{$feedlink}" class="secondary-link inner-link">
<span class="icon-rss icon icon-large mahara-rss-icon right" role="presentation" aria-hidden="true"></span>
<span class="sr-only">RSS</span>
</a>
{/if}
<div class="collapse-inline">
{$title}
{if $feedlink}
<a href="{$feedlink}" class="secondary-link inner-link">
<span class="icon-rss icon icon-large mahara-rss-icon right" role="presentation" aria-hidden="true"></span>
<span class="sr-only">RSS</span>
</a>
{/if}
</div>
{if $retractable}
<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