From bfea7da668d402838b329aed1ab1d4bff930ef3a Mon Sep 17 00:00:00 2001
From: Rajneel Totaram <rjnlfj@yahoo.com>
Date: Mon, 17 Jul 2023 16:41:31 +1200
Subject: [PATCH] MDL-76982 mod_book: Make previous/next buttons sticky

---
 mod/book/styles.css                          | 53 ++++++++++++++++++++
 mod/book/templates/main_action_menu.mustache |  8 ++-
 mod/book/view.php                            |  3 +-
 3 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/mod/book/styles.css b/mod/book/styles.css
index eb646f4e3be..6fe1099244a 100644
--- a/mod/book/styles.css
+++ b/mod/book/styles.css
@@ -106,3 +106,56 @@
         float: none;
     }
 }
+
+.path-mod-book #mod_book-chaptersnavigation {
+    top: 80px;
+    width: inherit;
+    margin: 0 -35px;
+    position: sticky; /* Make navigation sticky. */
+}
+
+.path-mod-book #mod_book-chaptersnavigation .tertiary-navigation .navitem {
+    margin-bottom: -52px;
+}
+
+.path-mod-book .book_content {
+    margin: 0 5px;
+    padding-right: 15px;
+    padding-left: 15px;
+    position: relative; /* Chapter navigation should not float on top of content. */
+}
+
+.path-mod-book .btn-previous,
+.path-mod-book .btn-next {
+    background: #dee2e6;
+    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 0.075);
+    padding: 13px 10px;
+}
+
+.path-mod-book .btn-previous {
+    border-radius: 200px 0 0 200px;
+}
+
+.path-mod-book .btn-next {
+    border-radius: 0 200px 200px 0;
+}
+
+.path-mod-book .btn-previous .icon,
+.path-mod-book .btn-next .icon {
+    font-size: 24px;
+    width: auto;
+    height: auto;
+    margin: auto;
+}
+
+@media (max-width: 768px) {
+    .path-mod-book #mod_book-chaptersnavigation {
+        top: calc(100% - 250px);
+        margin: 0;
+    }
+
+    .path-mod-book .book_content {
+        margin-left: 35px;
+        margin-right: 35px;
+    }
+}
diff --git a/mod/book/templates/main_action_menu.mustache b/mod/book/templates/main_action_menu.mustache
index fcc206f9814..02904af3723 100644
--- a/mod/book/templates/main_action_menu.mustache
+++ b/mod/book/templates/main_action_menu.mustache
@@ -42,12 +42,16 @@
     <div class="row">
         {{#previous}}
             <div class="navitem">
-                <a class="btn btn-secondary" href="{{url}}#mod_book-chaptersnavigation">{{title}}</a>
+                <a class="btn btn-link btn-previous" href="{{url}}#mod_book-chapter" title="{{title}}">
+                    {{#pix}} i/previous, core {{/pix}}
+                </a>
             </div>
         {{/previous}}
         {{#next}}
             <div class="navitem ml-auto">
-                <a class="btn btn-secondary" href="{{url}}#mod_book-chaptersnavigation">{{title}}</a>
+                <a class="btn btn-link btn-next" href="{{url}}#mod_book-chapter" title="{{title}}">
+                    {{#pix}} i/next, core {{/pix}}
+                </a>
             </div>
         {{/next}}
     </div>
diff --git a/mod/book/view.php b/mod/book/view.php
index 68597a32fef..b91e7fc08e1 100644
--- a/mod/book/view.php
+++ b/mod/book/view.php
@@ -127,7 +127,7 @@ if (!$chapterid) {
 
     // The chapter itself.
     $hidden = $chapter->hidden ? ' dimmed_text' : null;
-    echo $OUTPUT->box_start('generalbox book_content' . $hidden);
+    echo $OUTPUT->box_start('generalbox book_content' . $hidden, 'mod_book-chapter');
 
     if (!$book->customtitles) {
         if (!$chapter->subchapter) {
@@ -150,6 +150,5 @@ if (!$chapterid) {
     if (core_tag_tag::is_enabled('mod_book', 'book_chapters')) {
         echo $OUTPUT->tag_list(core_tag_tag::get_item_tags('mod_book', 'book_chapters', $chapter->id), null, 'book-tags');
     }
-    echo $renderedmenu;
 }
 echo $OUTPUT->footer();