Breadcrumbs

frontend/src/style/misago/breadcrumbs.less

@@ -13,10 +13,12 @@
   margin-bottom: @line-height-computed / 2;
   padding: 0;
   list-style: none;
+  white-space: nowrap;
 }
 
 .breadcrumbs-item a {
   display: flex;
+  flex-wrap: nowrap;
   align-items: center;
   text-decoration: none;
 
@@ -42,3 +44,39 @@
 .breadcrumbs-item .material-icon {
   margin-right: 4px;
 }
+
+// Fix breadcrumbs displayed in toolbar
+.toolbar-item .breadcrumbs {
+  width: 100%;
+  white-space: nowrap;
+  margin: 0;
+}
+
+.toolbar-item .breadcrumbs-item {
+  margin-bottom: 0;
+}
+
+// Make breadcrumbs responsive
+.breadcrumbs-compact {
+  display: none;
+}
+
+@media screen and (max-width: @screen-xs-max) {
+  .breadcrumbs {
+    display: none;
+  }
+
+  .breadcrumbs-compact {
+    display: flex;
+  }
+
+  .breadcrumbs-item {
+    flex: 0 1 auto;
+    overflow: hidden;
+  }
+
+  .breadcrumbs-item:last-child {
+    flex-shrink: 0;
+    margin-right: 0;
+  }
+}

frontend/src/style/misago/toolbar.less

@@ -7,6 +7,10 @@
   margin: 0 floor(@grid-gutter-width * -0.25);
 }
 
+.toolbar-over-footer {
+  margin-bottom: @line-height-computed * -2.5;
+}
+
 .toolbar-section {
   justify-items: center;
   display: flex;

misago/templates/misago/categories/index.html

@@ -79,14 +79,19 @@
   {% else %}
     {% include "misago/categories/header.html" %}
   {% endif %}
+
   <div class="container page-container">
+
     {% pluginoutlet CATEGORIES_LIST_START %}
     {% if categories_list %}
       {% include "misago/categories/categories_list_body.html" with items=categories_list %}
     {% else %}
       {% include "misago/categories/empty_message.html" %}
     {% endif %}
     {% pluginoutlet CATEGORIES_LIST_END %}
+
+    {% include "misago/gototop_toolbar.html" %}
+
   </div>
 </div>
 {% endblock content %}

misago/templates/misago/category/breadcrumbs.html

@@ -0,0 +1,26 @@
+<ul class="breadcrumbs hidden-xs">
+  <li class="breadcrumbs-item">
+    <a href="/">
+      <span class="material-icon">chevron_right</span>
+      <span class="breadcrumbs-item-name">{{ main_menu_index.label }}</span>
+    </a>
+  </li>
+  {% for item in breadcrumbs %}
+    <li class="breadcrumbs-item">
+      <a href="{{ item.url }}">
+        <span class="material-icon"{% if item.color %} style="color: {{ item.color }};"{% endif %}>label</span>
+        <span class="breadcrumbs-item-name">{{ item.name }}</span>
+      </a>
+    </li>
+  {% endfor %}
+</ul>
+<ul class="breadcrumbs breadcrumbs-compact">
+  {% for item in breadcrumbs %}
+    <li class="breadcrumbs-item">
+      <a href="{{ item.url }}">
+        <span class="material-icon"{% if item.color %} style="color: {{ item.color }};"{% endif %}>label</span>
+        <span class="breadcrumbs-item-name">{{ item.short_name|default:item.name }}</span>
+      </a>
+    </li>
+  {% endfor %}
+</ul>

misago/templates/misago/category/header.html

@@ -10,10 +10,18 @@
         <div class="page-header-banner page-header-banner-category">
           <div class="page-header-banner-bg-image">
             <div class="page-header-banner-bg-overlay">
+              {% include "misago/category/breadcrumbs.html" %}
               <h1>{{ category.name }}</h1>
             </div>
           </div>
         </div>
+        {% if category.description %}
+          <div class="page-header-details">
+            <div class="page-header-message">
+              {{ category.description|force_escape|urlize|linebreaks|safe }}
+            </div>
+          </div>
+        {% endif %}
       </div>
     </div>
   </div>

misago/templates/misago/category/index.html

@@ -51,6 +51,23 @@
       {% endif %}
     {% endif %}
 
+    <div class="toolbar toolbar-over-footer">
+      <div class="toolbar-section hidden-xs">
+        <div class="toolbar-item">
+          {% include "misago/category/breadcrumbs.html" %}
+        </div>
+      </div>
+      <div class="toolbar-spacer"></div>
+      <div class="toolbar-section">
+        <div class="toolbar-item">
+          <a href="#" class="btn btn-muted btn-block">
+            <span class="material-icon">arrow_upward</span>
+            {% trans "Go to top" context "go up button" %}
+          </a>
+        </div>
+      </div>
+    </div>
+
   </div>
 </div>
 {% endblock content %}

misago/templates/misago/gototop_toolbar.html

@@ -0,0 +1,12 @@
+{% load i18n %}
+<div class="toolbar toolbar-over-footer">
+  <div class="toolbar-spacer"></div>
+  <div class="toolbar-section">
+    <div class="toolbar-item">
+      <a href="#" class="btn btn-muted btn-block">
+        <span class="material-icon">arrow_upward</span>
+        {% trans "Go to top" context "go up button" %}
+      </a>
+    </div>
+  </div>
+</div>

misago/templates/misago/private_threads/index.html

@@ -5,7 +5,11 @@
 {% block content %}
 <div class="page page-private-threads">
   {% include "misago/private_threads/header.html" %}
+
   <div class="container page-container">
+
+    {% include "misago/gototop_toolbar.html" %}
+
   </div>
 </div>
 {% endblock content %}

misago/templates/misago/threads/index.html

@@ -51,6 +51,8 @@
       {% endif %}
     {% endif %}
 
+    {% include "misago/gototop_toolbar.html" %}
+
   </div>
 </div>
 {% endblock content %}

misago/threads/views/list.py

@@ -84,10 +84,13 @@ def get_context(self, request: HttpRequest, kwargs: dict):
         else:
             threads = None
 
+        path = request.categories.get_category_path(category.id, include_self=False)
+
         return {
             "request": request,
             "category": category,
             "threads": threads,
+            "breadcrumbs": path,
         }
 
     def get_category(self, request: HttpRequest, kwargs: dict):