breadcrumbs splitter

app/models/section.py

@@ -6,6 +6,7 @@ from app.controllers import create_breadcrumbs
 from .interpretation import Interpretation
 from .comment import Comment
 from .interpretation_vote import InterpretationVote
+from app import schema as s
 
 
 class Section(BaseModel):
@@ -49,6 +50,12 @@ class Section(BaseModel):
         breadcrumbs_path = create_breadcrumbs(
             book_id=self.book_id, collection_id=self.collection.id
         )
+        if len(breadcrumbs_path) > 5:
+            breadcrumbs_path = (
+                breadcrumbs_path[:3]
+                + [s.BreadCrumb(type=s.BreadCrumbType.Splitter, url="", label="...")]
+                + breadcrumbs_path[-2:]
+            )
         return breadcrumbs_path
 
     @property

app/schema/breadcrumbs.py

@@ -11,6 +11,7 @@ class BreadCrumbType(enum.StrEnum):
     Collection = "Collection"
     Section = "Section"
     Interpretation = "Interpretation"
+    Splitter = "Splitter"
 
 
 class BreadCrumb(BaseModel):

app/templates/book/local_breadcrumbs_navigation.html

@@ -1,26 +1,33 @@
 <!-- prettier-ignore -->
 <ol class="inline-flex items-center overflow-x-scroll md:overflow-auto p-0">
 {% for breadcrumb in local_breadcrumbs if breadcrumb.type != "MyBookList" and breadcrumb.type != "AuthorBookList" %}
-<li class="inline-flex items-center align-middle justify-center">
+    <li class="inline-flex items-center align-middle justify-center">
-    {% if not loop.index==local_breadcrumbs|length-1 %}
+        {% if not loop.index==local_breadcrumbs|length-1 %}
-    <a href="{{ breadcrumb.url }}" class="inline-flex text-xs font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white" data-tooltip-target="breadcrumb-{{loop.index}}-tooltip" data-tooltip-placement="bottom">
+            <a href="{{ breadcrumb.url }}" class="inline-flex text-xs font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white" data-tooltip-target="breadcrumb-{{loop.index}}-tooltip" data-tooltip-placement="bottom">
-    {% else %}
+        {% else %}
-    <span class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white" data-tooltip-target="breadcrumb-{{loop.index}}-tooltip" data-tooltip-placement="bottom">
+            <span class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white" data-tooltip-target="breadcrumb-{{loop.index}}-tooltip" data-tooltip-placement="bottom">
-    {% endif %}
+        {% endif %}
-    <div id="breadcrumb-{{loop.index}}-tooltip" role="tooltip" class="delay-100 absolute z-[100] invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-700 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+
-    {{ breadcrumb.label }}
+        {% if breadcrumb.type != "Splitter" %}
-    <div class="tooltip-arrow" data-popper-arrow></div>
+        <div id="breadcrumb-{{loop.index}}-tooltip" role="tooltip" class="delay-100 absolute z-[100] invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-700 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-    </div>
+            {{ breadcrumb.label }}
-    <!-- prettier-ignore -->
+            <div class="tooltip-arrow" data-popper-arrow></div>
-    <span class="select-none">{{ breadcrumb.label }}</span>
+        </div>
-    {% if not loop.index==local_breadcrumbs|length %}
+        {% endif %}
-    </a>
+
-    {% else %}
+        <!-- prettier-ignore -->
-    </span>
+        <span class="select-none">{{ breadcrumb.label }}</span>
-    {% endif %}
+
-    {% if not loop.index==local_breadcrumbs|length-1 %}
+        {% if not loop.index==local_breadcrumbs|length %}
-    <svg aria-hidden="true" class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path> </svg>
+            </a>
-    {% endif %}
+        {% else %}
-</li>
+            </span>
+        {% endif %}
+
+
+        {% if not loop.index==local_breadcrumbs|length-1 %}
+        <svg aria-hidden="true" class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path> </svg>
+        {% endif %}
+    </li>
 {% endfor %}
 </ol>