MDL-63107 mod_book: rewrite styles for book chapter block

* using flexbox to position titles
* fix for title overlap on edit mode
* show correct bullets, number or indent

diff --git a/mod/book/locallib.php b/mod/book/locallib.php
index e156976..84636d8 100644 (file)
--- a/mod/book/locallib.php
+++ b/mod/book/locallib.php
@@ -219,16 +219,16 @@ function book_get_toc($chapters, $chapter, $book, $cm, $edit) {
 
     switch ($book->numbering) {
         case BOOK_NUM_NONE:
-            $toc .= html_writer::start_tag('div', array('class' => 'book_toc_none clearfix'));
+            $toc .= html_writer::start_tag('div', array('class' => 'book_toc book_toc_none clearfix'));
             break;
         case BOOK_NUM_NUMBERS:
-            $toc .= html_writer::start_tag('div', array('class' => 'book_toc_numbered clearfix'));
+            $toc .= html_writer::start_tag('div', array('class' => 'book_toc book_toc_numbered clearfix'));
             break;
         case BOOK_NUM_BULLETS:
-            $toc .= html_writer::start_tag('div', array('class' => 'book_toc_bullets clearfix'));
+            $toc .= html_writer::start_tag('div', array('class' => 'book_toc book_toc_bullets clearfix'));
             break;
         case BOOK_NUM_INDENTED:
-            $toc .= html_writer::start_tag('div', array('class' => 'book_toc_indented clearfix'));
+            $toc .= html_writer::start_tag('div', array('class' => 'book_toc book_toc_indented clearfix'));
             break;
     }
 
@@ -244,11 +244,11 @@ function book_get_toc($chapters, $chapter, $book, $cm, $edit) {
             if (!$ch->subchapter) {
 
                 if ($first) {
-                    $toc .= html_writer::start_tag('li', array('class' => 'clearfix'));
+                    $toc .= html_writer::start_tag('li');
                 } else {
                     $toc .= html_writer::end_tag('ul');
                     $toc .= html_writer::end_tag('li');
-                    $toc .= html_writer::start_tag('li', array('class' => 'clearfix'));
+                    $toc .= html_writer::start_tag('li');
                 }
 
                 if (!$ch->hidden) {
@@ -267,11 +267,11 @@ function book_get_toc($chapters, $chapter, $book, $cm, $edit) {
             } else {
 
                 if ($first) {
-                    $toc .= html_writer::start_tag('li', array('class' => 'clearfix'));
+                    $toc .= html_writer::start_tag('li');
                     $toc .= html_writer::start_tag('ul');
-                    $toc .= html_writer::start_tag('li', array('class' => 'clearfix'));
+                    $toc .= html_writer::start_tag('li');
                 } else {
-                    $toc .= html_writer::start_tag('li', array('class' => 'clearfix'));
+                    $toc .= html_writer::start_tag('li');
                 }
 
                 if (!$ch->hidden) {
@@ -291,15 +291,15 @@ function book_get_toc($chapters, $chapter, $book, $cm, $edit) {
                     $titleout = html_writer::tag('span', $title, array('class' => 'dimmed_text'));
                 }
             }
-
+            $toc .= html_writer::start_tag('div', array('class' => 'd-flex'));
             if ($ch->id == $chapter->id) {
-                $toc .= html_writer::tag('strong', $titleout);
+                $toc .= html_writer::tag('strong', $titleout, array('class' => 'text-truncate'));
             } else {
                 $toc .= html_writer::link(new moodle_url('view.php', array('id' => $cm->id, 'chapterid' => $ch->id)), $titleout,
-                    array('title' => $titleunescaped));
+                    array('title' => $titleunescaped, 'class' => 'text-truncate'));
             }
 
-            $toc .= html_writer::start_tag('div', array('class' => 'action-list'));
+            $toc .= html_writer::start_tag('div', array('class' => 'action-list d-flex ml-auto'));
             if ($i != 1) {
                 $toc .= html_writer::link(new moodle_url('move.php', array('id' => $cm->id, 'chapterid' => $ch->id, 'up' => '1', 'sesskey' => $USER->sesskey)),
                         $OUTPUT->pix_icon('t/up', get_string('movechapterup', 'mod_book', $title)),
@@ -341,6 +341,7 @@ function book_get_toc($chapters, $chapter, $book, $cm, $edit) {
             $toc .= html_writer::link(new moodle_url('edit.php', array('cmid' => $cm->id, 'pagenum' => $ch->pagenum, 'subchapter' => $ch->subchapter)),
                                             $OUTPUT->pix_icon('add', $buttontitle, 'mod_book'), array('title' => $buttontitle));
             $toc .= html_writer::end_tag('div');
+            $toc .= html_writer::end_tag('div');
 
             if (!$ch->subchapter) {
                 $toc .= html_writer::start_tag('ul');
@@ -365,11 +366,11 @@ function book_get_toc($chapters, $chapter, $book, $cm, $edit) {
                     $ns = 0;
 
                     if ($first) {
-                        $toc .= html_writer::start_tag('li', array('class' => 'clearfix'));
+                        $toc .= html_writer::start_tag('li');
                     } else {
                         $toc .= html_writer::end_tag('ul');
                         $toc .= html_writer::end_tag('li');
-                        $toc .= html_writer::start_tag('li', array('class' => 'clearfix'));
+                        $toc .= html_writer::start_tag('li');
                     }
 
                     if ($book->numbering == BOOK_NUM_NUMBERS) {
@@ -379,11 +380,11 @@ function book_get_toc($chapters, $chapter, $book, $cm, $edit) {
                     $ns++;
 
                     if ($first) {
-                        $toc .= html_writer::start_tag('li', array('class' => 'clearfix'));
+                        $toc .= html_writer::start_tag('li');
                         $toc .= html_writer::start_tag('ul');
-                        $toc .= html_writer::start_tag('li', array('class' => 'clearfix'));
+                        $toc .= html_writer::start_tag('li');
                     } else {
-                        $toc .= html_writer::start_tag('li', array('class' => 'clearfix'));
+                        $toc .= html_writer::start_tag('li');
                     }
 
                     if ($book->numbering == BOOK_NUM_NUMBERS) {

diff --git a/mod/book/styles.css b/mod/book/styles.css
index 01b98dc..eb646f4 100644 (file)
--- a/mod/book/styles.css
+++ b/mod/book/styles.css
@@ -20,59 +20,53 @@
 }
 
 /* == Fake toc block == */
-
-.path-mod-book .block_book_toc ul {
-    margin: 0 0 0 5px;
-    padding-left: 0;
-    padding-right: 0;
+.path-mod-book .book_toc .action-list img.smallicon {
+    margin: 0 3px;
 }
 
-.path-mod-book .block_book_toc li {
-    clear: both;
-    list-style: none;
-    margin-top: .5em;
+/* toc style INDENTED*/
+.path-mod-book .book_toc ul {
+    display: flex;
+    flex-direction: column;
 }
-
-.path-mod-book .block_book_toc li li {
-    list-style: none;
+.path-mod-book .book_toc li {
+    flex: 1 1 100%;
 }
-
-.path-mod-book .block_book_toc .action-list {
-    float: right;
+.path-mod-book .book_toc_indented > ul {
+    margin-left: 0;
+    padding-left: 0;
 }
 
-.path-mod-book .block_book_toc .action-list img.smallicon {
-    margin: 0 3px;
+.path-mod-book .book_toc_indented li {
+    list-style: none;
 }
 
-.path-mod-book .book_toc_none ul ul {
+/* toc style BULLETED*/
+.path-mod-book .book_toc_bullets > ul {
     margin-left: 0;
-    margin-right: 0;
+    padding-left: 1.3rem;
 }
-
-/*toc style BULLETS */
-.path-mod-book .book_toc_bullets ul ul {
-    margin-left: 20px;
+.path-mod-book .book_toc_bullets li {
+    list-style: disc;
 }
 
-.path-mod-book .book_toc_bullets li li {
-    list-style: circle;
-}
-
-.path-mod-book .book_toc_bullets li li:before {
-    display: none;
+/* toc style NUMBERED*/
+.path-mod-book .book_toc_numbered > ul {
+    margin-left: 0;
+    padding-left: 0;
 }
 
-/* toc style INDENTED*/
-.path-mod-book .book_toc_indented ul {
-    margin-left: 5px;
+.path-mod-book .book_toc_numbered li {
+    list-style: none;
 }
 
-.path-mod-book .book_toc_indented ul ul {
-    margin-left: 15px;
+/* toc style NONE*/
+.path-mod-book .book_toc_none ul {
+    margin-left: 0;
+    padding-left: 0;
 }
 
-.path-mod-book .book_toc_indented li li {
+.path-mod-book .book_toc_none li {
     list-style: none;
 }