add icon and shift list to left

kiwix · Apr 9, 2024 · f8698e5 · f8698e5
1 parent dfc6547
commit f8698e5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/www/index.html b/www/index.html
@@ -789,16 +789,16 @@ <h3 data-i18n="configure-expert-settings-title">Expert settings</h3>
                         <span id="alertMessage"></span>
                     </div>
                 </div>
-                <div id="navigationButtons" class="btn-group btn-block">
-                    <a href="#" data-i18n-tip="home" class="btn btn-lg" id="btnHomeBottom" title="Home"><i class="fas fa-home"></i></a>
-                    <a href="#" class="btn btn-lg" data-i18n-tip="home-btn-back" id="btnBack" title="Back"><i class="fas fa-arrow-left"></i></a>
-                    <div class="dropup">
-                        <a href="#" class="btn btn-default dropdown-toggle col-xs-4" role="button" id="dropup" data-toggle="dropdown" aria-haspopup="true" aria-expanded="True" style="font-size: 14px;">
-                            <b>&nbsp;ToC&nbsp;</b>
+                <div id="navigationButtons" class="btn-group btn-block" style="padding-left: 5%;">
+                    <div class="dropup" >
+                        <a href="#" class="btn btn-default dropdown-toggle col-xs-4" role="button" id="dropup" data-toggle="dropdown" aria-haspopup="true" aria-expanded="True" style="font-size: 14px; padding-top: 12px;">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="22.5" viewBox="0 0 576 512"><path fill="#74C0FC" d="M0 96C0 60.7 28.7 32 64 32H512c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM128 288a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm32-128a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM128 384a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm96-248c-13.3 0-24 10.7-24 24s10.7 24 24 24H448c13.3 0 24-10.7 24-24s-10.7-24-24-24H224zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24H448c13.3 0 24-10.7 24-24s-10.7-24-24-24H224zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24H448c13.3 0 24-10.7 24-24s-10.7-24-24-24H224z"/></svg>
                             <span class="caret"></span>
                         </a>
-                        <ul id="ToCList" class="dropdown-menu" style="overflow-y:auto;"></ul>
+                        <ul id="ToCList" class="dropdown-menu flex-container" style="overflow-y:auto; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; padding-left: 10px; position: absolute; left: 10px;"></ul>
                     </div>
+                    <a href="#" data-i18n-tip="home" class="btn btn-lg" id="btnHomeBottom" title="Home"><i class="fas fa-home"></i></a>
+                    <a href="#" class="btn btn-lg" data-i18n-tip="home-btn-back" id="btnBack" title="Back"><i class="fas fa-arrow-left"></i></a>
                     <a href="#" class="btn btn-lg" data-i18n-tip="home-btn-forward" id="btnForward" title="Forward"><i class="fas fa-arrow-right"></i></a>
                     <a href="#top" class="btn btn-lg" data-i18n-tip="home-btn-top" id="btnTop" title="Top"><i class="fas fa-arrow-up"></i></a>
                 </div>

diff --git a/www/js/app.js b/www/js/app.js
@@ -2974,19 +2974,19 @@ function setupTableOfContents () {
     params.relativeFontSize = 100;
     headings.forEach(function (heading) {
         if (/^h1$/i.test(heading.tagName)) {
-            dropupHtml += '<li style="font-size:' + params.relativeFontSize + '%;"><a href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
+            dropupHtml += '<li style="font-size:' + params.relativeFontSize + '%;"><a style="color: black;" href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
         } else if (/^h2$/i.test(heading.tagName)) {
-            dropupHtml += '<li style="font-size:' + ~~(params.relativeFontSize * 0.9) + '%;"><a href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
+            dropupHtml += '<li style="font-size:' + ~~(params.relativeFontSize * 0.9) + '%;"><a style="color: black;" href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
         } else if (/^h3$/i.test(heading.tagName)) {
-            dropupHtml += '<li style="font-size:' + ~~(params.relativeFontSize * 0.8) + '%;"><a href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
+            dropupHtml += '<li style="font-size:' + ~~(params.relativeFontSize * 0.8) + '%;"><a style="color: black;" href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
         } else if (/^h4$/i.test(heading.tagName)) {
-            dropupHtml += '<li style="font-size:' + ~~(params.relativeFontSize * 0.7) + '%;"><a href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
+            dropupHtml += '<li style="font-size:' + ~~(params.relativeFontSize * 0.7) + '%;"><a style="color: black;" href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
         }
         // Skip smaller headings (if there are any) to avoid making list too long
     });
     var ToCList = document.getElementById('ToCList');
     ToCList.style.maxHeight = ~~(window.innerHeight * 0.75) + 'px';
-    ToCList.style.marginLeft = ~~(window.innerWidth / 2) - ~~(window.innerWidth * 0.16) + 'px';
+    ToCList.style.marginLeft = '-30px'
     ToCList.innerHTML = dropupHtml;
     Array.prototype.slice.call(ToCList.getElementsByTagName('a')).forEach(function (listElement) {
         listElement.addEventListener('click', function () {