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

@@ -7,17 +7,24 @@
         {% 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">
         {% endif %}
+
+        {% if breadcrumb.type != "Splitter" %}
         <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 }}
             <div class="tooltip-arrow" data-popper-arrow></div>
         </div>
+        {% endif %}
+
         <!-- prettier-ignore -->
         <span class="select-none">{{ breadcrumb.label }}</span>
+
         {% if not loop.index==local_breadcrumbs|length %}
             </a>
         {% else %}
             </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 %}