interactive works

app/static/css/styles.css

@@ -958,6 +958,30 @@ input:checked + .toggle-bg {
   --tw-backdrop-sepia:  ;
 }
 
+/* Firefox */
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: inherit gray ;
+}
+
+/* Chrome, Edge, and Safari */
+
+*::-webkit-scrollbar {
+  width: 5px;
+}
+
+*::-webkit-scrollbar-track {
+  background: inherit;
+  border-radius: 1px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: gray;
+  border-radius: 14px;
+  border: 1px solid inherit;
+}
+
 .container {
   width: 100%;
 }
@@ -1211,6 +1235,11 @@ input:checked + .toggle-bg {
   margin-right: auto;
 }
 
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -1221,9 +1250,9 @@ input:checked + .toggle-bg {
   margin-bottom: auto;
 }
 
-.my-3 {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
+.my-52 {
+  margin-top: 13rem;
+  margin-bottom: 13rem;
 }
 
 .-mb-px {
@@ -1358,14 +1387,6 @@ input:checked + .toggle-bg {
   margin-top: auto;
 }
 
-.mt-\[135\] {
-  margin-top: 135;
-}
-
-.box-border {
-  box-sizing: border-box;
-}
-
 .block {
   display: block;
 }
@@ -1846,18 +1867,10 @@ input:checked + .toggle-bg {
   align-self: center;
 }
 
-.overflow-auto {
-  overflow: auto;
-}
-
 .overflow-hidden {
   overflow: hidden;
 }
 
-.overflow-scroll {
-  overflow: scroll;
-}
-
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -2320,10 +2333,6 @@ input:checked + .toggle-bg {
   padding-top: 1.5rem;
 }
 
-.pt-\[135\] {
-  padding-top: 135;
-}
-
 .text-left {
   text-align: left;
 }
@@ -2467,6 +2476,10 @@ input:checked + .toggle-bg {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.underline {
+  text-decoration-line: underline;
+}
+
 .line-through {
   text-decoration-line: line-through;
 }
@@ -3259,4 +3272,5 @@ input:checked + .toggle-bg {
 
 :is(.dark .dark\:\[\&\>\*\]\:\!stroke-white>*) {
   stroke: #ffffff !important;
-}
+}
+

app/templates/book/collection_view.html

@@ -156,13 +156,13 @@
               <!-- here comes for loop for all section in this sub_collection-->
               {% for section in sub_collection.active_sections %}
               <div class="mb-10">
-              <a href="#section-{{section.label}}" id="section-heading-{{loop.index}}" class="text-gray-500 dark:text-gray-400">
+              <button type="button" href="#section-{{section.label}}" id="section-heading-{{loop.index}}" class="text-gray-500 dark:text-gray-400">
                 <form id="rename-section-label-form-{{loop.index}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" data-section-id="{{section.id}}" method="post">
                   {{ form_hidden_tag() }}
                 <input class=" bg-inherit border-none " value="{{section.label}}" type="text" name="label" id="edit-section-label-{{loop.index}}" placeholder="Section label" required readonly/>
                 <button name="submit" type="submit"></button>
               </form>
-              </a>
+              </button>
               <svg id="dropdownSectionContextButton{{loop.index}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
               <div data="section-context-menu-{{loop.index}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
                 {% if current_user.is_authenticated %}
@@ -199,13 +199,13 @@
         <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
               <!-- here comes for loop for all section in this collection-->
               {% for section in collection.active_sections %}
-              <a href="#section-{{section.label}}" id="section-heading-{{loop.index}}" class="text-gray-500 dark:text-gray-400">
+              <button type="button" href="#section-{{section.label}}" id="section-heading-{{loop.index}}" class="text-gray-500 dark:text-gray-400">
                 <form id="rename-section-label-form-{{loop.index}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" data-sub-collection-id="_" data-section-id="{{section.id}}" method="post">
                   {{ form_hidden_tag() }}
                 <input class=" bg-inherit border-none " value="{{section.label}}" type="text" name="label" id="edit-section-label-{{loop.index}}" placeholder="Section label" required readonly/>
                 <button name="submit" type="submit"></button>
               </form>
-              </a>
+              </button>
               <svg id="dropdownSectionContextButton{{loop.index}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
               <div data="section-context-menu-{{loop.index}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
                 {% if current_user.is_authenticated %}
@@ -261,7 +261,7 @@
     </div>
     <p class=" text-sm mb-3">{% if book.about==None %}About text{% else %}{{book.about}}{% endif %}</p>
     {% for collection in book.versions[-1].children_collections if not collection.is_root and not collection.is_deleted %}
-    <p class="my-3">#{{collection.label}}</p>
+    <p class="my-3 underline">#{{collection.label}}</p>
     {% if not collection.is_leaf and not collection.children %}
     <p class="my-3">Collection is empty</p> 
     {% endif %}

app/views/book/collection.py

@@ -191,8 +191,6 @@ def collection_edit(
         collection.save()
 
         flash("Success!", "success")
-        if sub_collection_id:
-            redirect_url = url_for(redirect_url)
         return redirect(redirect_url)
     else:
         log(log.ERROR, "Collection edit errors: [%s]", form.errors)

src/main.ts

@@ -19,6 +19,7 @@ import {renameCollection} from './renameCollection';
 import {renameSubCollection} from './renameSubCollection';
 import {initQuillReadOnly} from './initQuillReadOnly';
 import {initGoBack} from './tabGoBackBtn';
+import {scroll} from './scroll';
 
 initQuillReadOnly();
 initBooks();
@@ -41,3 +42,4 @@ renameCollection();
 deleteSubCollection();
 renameSubCollection();
 initGoBack();
+scroll();

src/scroll.ts

@@ -0,0 +1,15 @@
+export function scroll() {
+  const btns = document.querySelectorAll('[href^="#section-"]');
+  if (btns) {
+    btns.forEach((btn, index) => {
+      btn.addEventListener('click', () => {
+        let link = btn.getAttribute('href');
+        link = link.replace('#', '');
+        const neededSection = document.querySelector(`[id^="${link}"]`);
+        if (neededSection) {
+          neededSection.scrollIntoView(true);
+        }
+      });
+    });
+  }
+}

src/styles.css

@@ -1,4 +1,26 @@
 @tailwind base;
+/* Firefox */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: inherit gray ;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+    width: 5px;
+}
+
+*::-webkit-scrollbar-track {
+    background: inherit;
+    border-radius: 1px;
+}
+
+*::-webkit-scrollbar-thumb {
+    background-color: gray;
+    border-radius: 14px;
+    border: 1px solid inherit;
+}
+
 @tailwind components;
 @tailwind utilities;
 
@@ -14,4 +36,5 @@
 }
 .mt-135{
     margin-top:135px;
-}
+}
+