From 8bf422407fab73108912828bf139b1ff9859a83b Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Mon, 25 Jan 2016 22:06:10 +0000
Subject: [PATCH] Fixed breadcrumbs, and generate page title and html title on
 markdown content

---
 static/src/js/app.js            |  3 ++-
 static/src/js/globals.js        |  3 +++
 static/src/less/style.less      | 37 ++++++++++++++++++++-------------
 static/src/less/variables.less  |  2 +-
 templates/content_base.html     | 10 ++-------
 templates/markdown_content.html |  6 +++++-
 6 files changed, 36 insertions(+), 25 deletions(-)
 create mode 100644 static/src/js/globals.js

diff --git a/static/src/js/app.js b/static/src/js/app.js
index a48d17d..9b89d3a 100644
--- a/static/src/js/app.js
+++ b/static/src/js/app.js
@@ -1,6 +1,7 @@
 /* global $ */
 
 import './events.js';
+import './globals.js';
 
 import 'whatwg-fetch';
 
@@ -20,6 +21,6 @@ if ($('navbar').length > 0) {
   React.render(<NavBar />, $('navbar')[0]);
 }
 
-if ($('#breadcrumbs') > 0) {
+if ($('#breadcrumbs').length > 0) {
   React.render(<Breadcrumbs />, $('#breadcrumbs')[0]);
 }
diff --git a/static/src/js/globals.js b/static/src/js/globals.js
new file mode 100644
index 0000000..6b8a964
--- /dev/null
+++ b/static/src/js/globals.js
@@ -0,0 +1,3 @@
+window.updateTitle = function (value) {
+  document.title = value + ' | TheOrangeOne';
+};
diff --git a/static/src/less/style.less b/static/src/less/style.less
index 394ec7f..3fa9e4f 100644
--- a/static/src/less/style.less
+++ b/static/src/less/style.less
@@ -154,21 +154,30 @@ footer {
   }
   h1 {
     margin: 15px 0;
+    display: inline-block;
   }
-  .breadcrumb-container {
-    text-align: right;
-    .breadcrumb {
-      li::before {
-        content: "/";
-        padding: 0 3px;
-      }
-      background: transparent;
-      margin-bottom: 3px;
-      font-size: 17px;
-      a {
-        color: white;
-        &:hover {
-          color: #ff7f00;
+  .container {
+    position: relative;
+    #breadcrumbs {
+      text-align: right;
+      position: absolute;
+      bottom: 5px;
+      right: 0;
+      .breadcrumb {
+        background: transparent;
+        margin-bottom: 3px;
+        font-size: 17px;
+        padding: 0;
+        li::before {
+          content: "/";
+          padding: 0 3px;
+        }
+        a {
+          .transition(color 0.4s);
+          color: white;
+          &:hover {
+            color: #ff7f00;
+          }
         }
       }
     }
diff --git a/static/src/less/variables.less b/static/src/less/variables.less
index 7ec8801..8155f87 100644
--- a/static/src/less/variables.less
+++ b/static/src/less/variables.less
@@ -18,7 +18,7 @@
 @font-family-serif: 'Roboto';
 @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
 @font-family-base: @font-family-sans-serif;
-@font-size-base: 15px;
+@font-size-base: 17px;
 @font-size-large: ceil((@font-size-base * 1.25));
 @font-size-small: ceil((@font-size-base * 0.85));
 @font-size-h1: floor((@font-size-base * 2.6));
diff --git a/templates/content_base.html b/templates/content_base.html
index 6fbca6e..667a20b 100644
--- a/templates/content_base.html
+++ b/templates/content_base.html
@@ -7,14 +7,8 @@
 {% block baseContent %}
   <div class="jumbotron header">
     <div class="container">
-      <div class="row">
-        <div class="col-sm-8">
-          <h1>{% block pageTitle %}{% endblock %}</h1>
-        </div>
-        <div class="col-sm-4 breadcrumb-container">
-          <div id="breadcrumbs"></div>
-        </div>
-      </div>
+      <h1>{% block pageTitle %}{% endblock %}</h1>
+      <div id="breadcrumbs"></div>
     </div>
     <navbar></navbar>
   </div>
diff --git a/templates/markdown_content.html b/templates/markdown_content.html
index 64bbada..f62f33b 100644
--- a/templates/markdown_content.html
+++ b/templates/markdown_content.html
@@ -8,6 +8,10 @@
   </div>
 
   <script>
-    $('.header h1').text($('.markdown-content h1').text());
+    $(window).load(function () {
+      const TITLE = $('.markdown-content h1').text();
+      $('.header h1').text(TITLE);
+      window.updateTitle(TITLE);
+    });
   </script>
 {% endblock %}