Merge "Bug 1765558: Give accordion chevron more spacing"

htdocs/testing/frameworks/behat/classes/BehatNavigation.php

@@ -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();
     }
 

htdocs/theme/raw/plugintype/artefact/plans/templates/taskrows.tpl

@@ -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>

htdocs/theme/raw/sass/components/_indicator.scss

@@ -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%;
+            }
+        }
+    }
+}

htdocs/theme/raw/templates/view/blocktypecontainerviewing.tpl

@@ -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>