make breadcrumbs and section header fixed

app/static/css/quill.snow.css

@@ -10,7 +10,6 @@
   font-size: 13px;
   /* height: 100%; */
   margin: 0px;
-  position: relative;
 }
 .ql-container.ql-disabled .ql-tooltip {
   visibility: hidden;
@@ -563,7 +562,6 @@
   font-size: 14px;
   font-weight: 500;
   height: 24px;
-  position: relative;
   vertical-align: middle;
 }
 .ql-snow .ql-picker-label {
@@ -572,7 +570,6 @@
   height: 100%;
   padding-left: 8px;
   padding-right: 2px;
-  position: relative;
   width: 100%;
 }
 .ql-snow .ql-picker-label::before {

app/templates/base.html

@@ -86,7 +86,7 @@
     <!-- prettier-ignore -->
     <script src="{{ url_for('static', filename='js/flowbite.min.js') }}" defer></script>
 
-    <div class="p-0 mt-16 h-full md:ml-64">
+    <div class="p-0 mt-16 h-auto md:ml-64">
       <!-- Main Content -->
       {% block content %}{% endblock %}
     </div>

app/templates/book/breadcrumbs_navigation.html

@@ -1,5 +1,5 @@
 <!-- prettier-ignore -->
-<nav class="flex mt-5 mb-3" aria-label="Breadcrumb">
+<nav class="fixed flex p-4 pl-1 mt-1.5 z-49 w-full md:w-4/5 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700" aria-label="Breadcrumb">
   <ol class="inline-flex items-center space-x-1 md:space-x-3 ml-5 overflow-x-scroll md:overflow-auto p-0">
     {% for breadcrumb in breadcrumbs %}
     <li class="inline-flex items-center">

app/templates/book/collection_view.html

@@ -17,12 +17,13 @@
 
 
 {% block content %}
-<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5 md:mr-64">
-  <h1 class="font-extrabold text-lg dark:text-white ml-4 mt-10">
-    {{book.label}}
-  </h1>
+<div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
   <!-- prettier-ignore -->
-  <div class="mb-1 border-b border-gray-200 dark:border-gray-700">
+  <div class="fixed z-49 w-4/5 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+    <!-- prettier-ignore -->
+    <h1 class="font-extrabold text-lg dark:text-white ml-4 mt-5"> {{book.label}} </h1>
+    <!-- prettier-ignore -->
+    <div class="mb-1">
     <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
       <li class="mr-2" role="presentation">
         <button class="flex items-center space-x-2 p-4 border-b-2 rounded-t-lg" id="files-tab" data-tabs-target="#files" type="button" role="tab" aria-controls="files" aria-selected="false">
@@ -37,8 +38,9 @@
         </button>
       </li>
     </ul>
-</div>
-  <div id="myTabContent">
+  </div>
+  </div>
+  <div id="myTabContent" class="overflow-y-auto mt-24">
     <!-- prettier-ignore -->
     <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="files" role="tabpanel" aria-labelledby="files-tab">
       <dl class="w-md md:w-full text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">

app/templates/book/interpretation_view.html

@@ -13,13 +13,14 @@
 {% endblock %}
 
 {% block content %}
-<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5 md:mr-64">
-  {% include 'book/breadcrumbs_navigation.html'%}
-  <h1 class="text-l font-extrabold dark:text-white ml-4">
-    Interpretations page
-  </h1>
+{% include 'book/breadcrumbs_navigation.html'%}
+<div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
   <!-- prettier-ignore -->
-  <div class="mb-1 border-b border-gray-200 dark:border-gray-700">
+  <div class="fixed z-45 w-full md:w-4/5 top-28 pt-3 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+    <!-- prettier-ignore -->
+    <h1 class="text-l font-extrabold dark:text-white ml-4"> Interpretations page </h1>
+    <!-- prettier-ignore -->
+    <div class="mb-1 border-b border-gray-200 dark:border-gray-700">
     <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
       <li class="mr-2" role="presentation">
         <!-- prettier-ignore -->
@@ -36,7 +37,8 @@
       </li>
     </ul>
   </div>
-  <div id="myTabContent">
+  </div>
+  <div id="myTabContent" class="mt-40">
     <div
       class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
       id="section-text"
@@ -69,7 +71,7 @@
       {% else %}
         action="{{ url_for('book.interpretation_create', book_id=book.id, collection_id=collection.id,section_id=section.id) }}"
       {% endif %}
-      method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+      method="post" class="bg-white rounded-lg shadow dark:bg-gray-700">
       {{ form_hidden_tag() }}
       <input type="hidden" name="section_id" id="section_id" value="{{section.id}}" />
       <input type="hidden" name="label" id="label" value="{{section.label}}" />

app/templates/book/qa_view.html

@@ -15,11 +15,14 @@
 {% endblock %}
 
 {% block content %}
-<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5 md:mr-64">
-  {% include 'book/breadcrumbs_navigation.html'%}
-  <h1 class="text-l font-extrabold dark:text-white ml-4">
-    {{ interpretation.label }}
-  </h1>
+{% include 'book/breadcrumbs_navigation.html'%}
+<div class="overflow-x-auto shadow-md mt-5 md:mr-64">
+  <div class="ql-snow mt-20">
+    <h1 class="text-l font-extrabold dark:text-white ml-4">
+      {{ interpretation.label }}
+    </h1>
+    <div class="quill-editor dark:text-white">{{interpretation.text|safe}}</div>
+  </div>
 </div>
 <!-- prettier-ignore -->
 {% endblock %}

app/templates/book/section_view.html

@@ -20,10 +20,11 @@
 {% endblock %}
 
 {% block content %}
-<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5 md:mr-64">
-  {% include 'book/breadcrumbs_navigation.html'%}
+{% include 'book/breadcrumbs_navigation.html'%}
+<div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
+<div class="fixed z-45 w-full md:w-4/5 top-28 pt-3 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
   <h1 class="text-l font-extrabold dark:text-white ml-4">Sections page</h1>
-  <div class="mb-1 border-b border-gray-200 dark:border-gray-700">
+  <div class="mb-1">
     <!-- prettier-ignore -->
     <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
       <li class="mr-2" role="presentation">
@@ -43,8 +44,8 @@
       </li>
     </ul>
   </div>
-
-  <div id="myTabContent">
+</div>
+  <div id="myTabContent" class="mt-36">
     <!-- prettier-ignore -->
     <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="files" role="tabpanel" aria-labelledby="files-tab">
       <dl class="w-md md:w-full text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">

app/templates/book/sub_collection_view.html

@@ -20,15 +20,15 @@
 {% endblock %}
 
 {% block content %}
-<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5 md:mr-64">
-  {% include 'book/breadcrumbs_navigation.html'%}
-  <h1 class="text-l font-extrabold dark:text-white ml-4">
-    Sub collections page
-  </h1>
-
-  <div class="mb-1 border-b border-gray-200 dark:border-gray-700">
+{% include 'book/breadcrumbs_navigation.html'%}
+<div class="overflow-x-auto shadow-md sm:rounded-lg mt-5 md:mr-64">
+  <!-- prettier-ignore -->
+  <div class="fixed z-45 w-full md:w-4/5 top-28 pt-3 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
     <!-- prettier-ignore -->
-    <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
+    <h1 class="text-l font-extrabold dark:text-white ml-4"> Sub collections page </h1>
+    <div class="mb-1">
+      <!-- prettier-ignore -->
+      <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
       <li class="mr-2" role="presentation">
         <!-- prettier-ignore -->
         <button class="flex items-center space-x-2 p-4 border-b-2 rounded-t-lg" id="files-tab" data-tabs-target="#files" type="button" role="tab" aria-controls="files" aria-selected="false">
@@ -44,9 +44,10 @@
         </button>
       </li>
     </ul>
+    </div>
   </div>
 
-  <div id="myTabContent">
+  <div id="myTabContent" class="mt-40">
     <!-- prettier-ignore -->
     <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="files" role="tabpanel" aria-labelledby="files-tab">
       <!-- prettier-ignore -->