From c3b1e524917d28ba04165afdbc728baebae160da Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Tue, 16 Oct 2018 01:00:17 +0200
Subject: [PATCH] New breadcrumb style.

---
 assets/less/classes/forum/header.less | 32 +++++++++++++++++++++++++++
 assets/less/main.less                 |  1 +
 templates/forum/forum.twig            |  4 ++--
 templates/forum/macros.twig           | 26 ++++++++++++++++++++++
 templates/forum/topic.twig            | 11 +++------
 yarn.lock                             | 12 +++++-----
 6 files changed, 70 insertions(+), 16 deletions(-)
 create mode 100644 assets/less/classes/forum/header.less

diff --git a/assets/less/classes/forum/header.less b/assets/less/classes/forum/header.less
new file mode 100644
index 00000000..f9699480
--- /dev/null
+++ b/assets/less/classes/forum/header.less
@@ -0,0 +1,32 @@
+.forum__header {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: 10px 15px;
+
+    &__title {
+        font-size: 2em;
+        line-height: 1.5em;
+    }
+
+    &__breadcrumbs {
+        display: flex;
+        font-size: 1.1em;
+        line-height: 1.5em;
+    }
+
+    &__breadcrumb {
+        color: var(--accent-colour);
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+
+        &__separator {
+            color: var(--accent-colour);
+            margin: 0 8px;
+            font-size: .9em;
+        }
+    }
+}
diff --git a/assets/less/main.less b/assets/less/main.less
index 3ca47107..71aac0a1 100644
--- a/assets/less/main.less
+++ b/assets/less/main.less
@@ -156,6 +156,7 @@ body {
 @import "classes/forum/topic";
 @import "classes/forum/topics";
 @import "classes/forum/status";
+@import "classes/forum/header";
 
 // User stuff
 @import "classes/usercard";
diff --git a/templates/forum/forum.twig b/templates/forum/forum.twig
index 7c4046a7..92c750b1 100644
--- a/templates/forum/forum.twig
+++ b/templates/forum/forum.twig
@@ -1,6 +1,6 @@
 {% extends 'forum/master.twig' %}
 {% from 'macros.twig' import navigation, pagination %}
-{% from 'forum/macros.twig' import forum_category_listing, forum_topic_listing, forum_category_buttons %}
+{% from 'forum/macros.twig' import forum_category_listing, forum_topic_listing, forum_category_buttons, forum_header %}
 
 {% set title = forum_info.forum_name %}
 {% set canonical_url = '/forum/forum.php'|url_construct({
@@ -9,7 +9,7 @@
 }) %}
 
 {% block content %}
-    {{ navigation(forum_breadcrumbs, forum_breadcrumbs|last, true, null, 'left') }}
+    {{ forum_header(forum_info.forum_name, forum_breadcrumbs, true) }}
 
     {% if forum_info.forum_subforums|length > 0 or forum_info.forum_type == 1 %}
         {{ forum_category_listing(forum_info.forum_subforums, 'Forums') }}
diff --git a/templates/forum/macros.twig b/templates/forum/macros.twig
index ddd42a8b..a63547e5 100644
--- a/templates/forum/macros.twig
+++ b/templates/forum/macros.twig
@@ -18,6 +18,32 @@
     </div>
 {% endmacro %}
 
+{% macro forum_header(title, breadcrumbs, omit_last_breadcrumb) %}
+    <div class="container container--new forum__header">
+        {% if breadcrumbs is iterable and breadcrumbs|length > 0 %}
+            <div class="forum__header__breadcrumbs">
+                {% for name, url in breadcrumbs %}
+                    {% if url != breadcrumbs|first %}
+                        <div class="forum__header__breadcrumb__separator">
+                            <i class="fas fa-chevron-right"></i>
+                        </div>
+                    {% endif %}
+
+                    {% if not (omit_last_breadcrumb|default(false) and url == breadcrumbs|last) %}
+                        <a href="{{ url }}" class="forum__header__breadcrumb">{{ name }}</a>
+                    {% endif %}
+                {% endfor %}
+            </div>
+        {% endif %}
+
+        {% if title|length > 0 %}
+            <div class="forum__header__title">
+                {{ title }}
+            </div>
+        {% endif %}
+    </div>
+{% endmacro %}
+
 {% macro forum_category_buttons(forum, perms) %}
     <div class="forum__actions forum__actions__content">
         {% if perms|perms_check(constant('MSZ_FORUM_PERM_CREATE_TOPIC')) %}
diff --git a/templates/forum/topic.twig b/templates/forum/topic.twig
index 9ae113de..0a4318a7 100644
--- a/templates/forum/topic.twig
+++ b/templates/forum/topic.twig
@@ -6,7 +6,8 @@
         forum_post_listing,
         forum_topic_buttons,
         forum_topic_locked,
-        forum_posting_form
+        forum_posting_form,
+        forum_header
 %}
 
 {% set title = topic_info.topic_title %}
@@ -26,13 +27,7 @@
 ) %}
 
 {% block content %}
-    {{ navigation(topic_breadcrumbs, topic_breadcrumbs|last, true, null, 'left') }}
-
-    <div class="container">
-        <div class="container__title">
-            {{ topic_info.topic_title }}
-        </div>
-    </div>
+    {{ forum_header(topic_info.topic_title, topic_breadcrumbs) }}
 
     {{ forum_topic_locked(topic_info.topic_locked, topic_info.topic_archived) }}
 
diff --git a/yarn.lock b/yarn.lock
index 8ec18f56..fbc68707 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3,16 +3,16 @@
 
 
 "@fortawesome/fontawesome-free@^5.3.1":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.3.1.tgz#5466b8f31c1f493a96754c1426c25796d0633dd9"
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.4.1.tgz#6194786c1a705ab84253e06429834466670e3c3f"
 
 "@types/jquery@^2.0.40":
-  version "2.0.49"
-  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-2.0.49.tgz#95bd7064caebf65bde10429dff491a1aea05b67d"
+  version "2.0.51"
+  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-2.0.51.tgz#d0c728663de8905457a26c8891ac08ad2b3539c9"
 
 highlightjs@^9.10.0:
-  version "9.10.0"
-  resolved "https://registry.yarnpkg.com/highlightjs/-/highlightjs-9.10.0.tgz#fca9b78ddaa3b1abca89d6c3ee105ad270a80190"
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/highlightjs/-/highlightjs-9.12.0.tgz#9b84eb42a7aa8488eb69ac79fec44cf495bf72a1"
 
 timeago.js@^3.0.2:
   version "3.0.2"