From d2df110950b7795b656fc1c2d74adf570070f3d0 Mon Sep 17 00:00:00 2001
From: Brendan Heywood <brendan@catalyst-au.net>
Date: Tue, 13 Sep 2016 10:31:32 +1000
Subject: [PATCH] MDL-55941 tablelib: Improve initialbar UX

---
 lib/tablelib.php                          | 27 +++++++++++++--
 theme/bootstrapbase/less/moodle/core.less | 42 +++++++++++++++++++++--
 theme/bootstrapbase/style/moodle.css      |  1 +
 3 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/lib/tablelib.php b/lib/tablelib.php
index 47c4670b40f..59c17a190c7 100644
--- a/lib/tablelib.php
+++ b/lib/tablelib.php
@@ -938,20 +938,41 @@ class flexible_table {
      */
     protected function print_one_initials_bar($alpha, $current, $class, $title, $urlvar) {
         echo html_writer::start_tag('div', array('class' => 'initialbar ' . $class)) .
-                $title . ' : ';
+                html_writer::tag('span', $title . ': ', array('class' => 'initialbarlabel'));
         if ($current) {
-            echo html_writer::link($this->baseurl->out(false, array($urlvar => '')), get_string('all'));
+            echo html_writer::link($this->baseurl->out(false, array($urlvar => '')),
+                    get_string('all'), array('class' => 'initialbarall'));
         } else {
-            echo html_writer::tag('strong', get_string('all'));
+            echo html_writer::tag('strong', get_string('all'), array('class' => 'initialbarall'));
         }
 
+        // We want to find a letter grouping size which suits the language so
+        // find the largest group size which is less than 15 chars. By always
+        // using a max number of groups which is a factor of 2, we always get
+        // nice wrapping, and the last row is always the shortest.
+        $groupsize = count($alpha);
+        $groups = 1;
+        while ($groupsize > 15) {
+            $groups *= 2;
+            $groupsize = ceil(count($alpha) / $groups);
+        }
+
+        echo html_writer::start_tag('span', array('class' => 'initialbargroups'));
+        echo html_writer::start_tag('span', array('class' => 'initialbargroup'));
+        $c = 0;
         foreach ($alpha as $letter) {
+            if ($c++ > 0 && $c % $groupsize == 1) {
+                echo html_writer::end_tag('span') . ' ';
+                echo html_writer::start_tag('span', array('class' => 'initialbargroup'));
+            }
             if ($letter === $current) {
                 echo html_writer::tag('strong', $letter);
             } else {
                 echo html_writer::link($this->baseurl->out(false, array($urlvar => $letter)), $letter);
             }
         }
+        echo html_writer::end_tag('span');
+        echo html_writer::end_tag('span');
 
         echo html_writer::end_tag('div');
     }
diff --git a/theme/bootstrapbase/less/moodle/core.less b/theme/bootstrapbase/less/moodle/core.less
index b42930295e7..9b4156c354a 100644
--- a/theme/bootstrapbase/less/moodle/core.less
+++ b/theme/bootstrapbase/less/moodle/core.less
@@ -1267,11 +1267,49 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     text-align: center;
 }
 .initialbar {
+
+    overflow: auto;
+
+    .initialbarlabel {
+        display: inline-block;
+        width: 6em;
+        float: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .initialbargroups {
+        float: left;
+    }
+
+    .initialbargroup {
+        float: left;
+        display: inline-block;
+        white-space: nowrap;
+    }
+
     a,
     strong {
-        padding-left: 3px;
-        padding-right: 3px;
+        display: inline-block;
+        min-width: 1.4em;
+        text-align: center;
+
+        &.initialbarall {
+            float: left;
+            width: 4em;
+            margin-bottom: 2px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
     }
+
+    strong {
+        background: @linkColor;
+        color: @bodyBackground;
+    }
+
 }
 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
 .moodle-dialogue-base .moodle-dialogue-lightbox {
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 403097b5c26..b4a44b0185b 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -10290,6 +10290,7 @@ body.path-question-type .mform fieldset.hidden {
   }
 }
 /*!
+
  * Bootstrap v2.3.2
  *
  * Copyright 2013 Twitter, Inc