From 9406afe1f51b0e18e73d33b2abda05b600d7a88a Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Tue, 11 Oct 2016 22:39:22 -0400
Subject: [PATCH] styling for various layouts/pages

---
 _layouts/article.html  | 16 +++++++--
 _layouts/category.html | 40 ++++++++++++++++-----
 _layouts/default.html  | 26 ++++++++++++--
 css/styles.scss        | 80 ++++++++++++++++++++++++++++++++++++++----
 index.html             | 16 ++++-----
 search/index.html      | 41 ++++++++++++++++++----
 6 files changed, 185 insertions(+), 34 deletions(-)

diff --git a/_layouts/article.html b/_layouts/article.html
index c9fd12c6..bae7f65a 100644
--- a/_layouts/article.html
+++ b/_layouts/article.html
@@ -2,6 +2,18 @@
 layout: default
 ---
 
-<div class="container">
-    {{content}}
+<div class="container container-content">
+    <ol class="breadcrumb">
+        <li><a href="/">Help Center</a></li>
+        <li><a href="/{{page.category | slugify}}/">{{page.category}}</a></li>
+        <li class="active">{{page.title}}</li>
+    </ol>
+    <div class="panel panel-default panel-article">
+        <div class="panel-heading">
+            <h3 class="panel-title"><i class="fa fa-file-text-o"></i> {{page.title}}</h3>
+        </div>
+        <div class="panel-body">
+            {{content}}
+        </div>
+    </div>
 </div>
diff --git a/_layouts/category.html b/_layouts/category.html
index a9b36081..488e5627 100644
--- a/_layouts/category.html
+++ b/_layouts/category.html
@@ -2,13 +2,35 @@
 layout: default
 ---
 
-<div class="container">
-    <h3>{{page.title}}</h3>
-    <ol>
-        {% for article in site.articles %}
-        {% if article.category == page.title %}
-        <li><a href="{{article.url}}">{{article.title}}</a></li>
-        {% endif %}
-        {% endfor %}
-    </ol>
+<div class="search-header">
+    <div class="container">
+        <form action="/search/" method="get">
+            <div class="input-group">
+                <input type="search" class="form-control input-lg" placeholder="Type your problem here..." name="q">
+                <span class="input-group-btn">
+                    <button class="btn btn-lg btn-default" type="submit">Search</button>
+                </span>
+            </div>
+        </form>
+    </div>
+</div>
+<div class="container">
+    <ol class="breadcrumb">
+        <li><a href="/">Help Center</a></li>
+        <li class="active">{{page.title}}</li>
+    </ol>
+    <div class="panel panel-default panel-articles">
+        <div class="panel-heading">
+            <h3 class="panel-title"><i class="fa fa-folder-open"></i> {{page.title}}</h3>
+        </div>
+        <div class="panel-body">
+            <ol>
+                {% for article in site.articles %}
+                {% if article.category == page.title %}
+                <li><a href="{{article.url}}">{{article.title}}</a></li>
+                {% endif %}
+                {% endfor %}
+            </ol>
+        </div>
+    </div>
 </div>
diff --git a/_layouts/default.html b/_layouts/default.html
index 598488d8..53233ab1 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -51,8 +51,30 @@
     {{content}}
 
     <footer class="text-center">
-        &copy; Copyright  2015 - {{'now' | date: "%Y"}}<br />
-        8bit Solutions LLC
+        <div class="container">
+            <ul class="list-inline social-buttons">
+                <li>
+                    <a href="https://www.facebook.com/bitwarden/" onclick="gaEvent('Social Facebook')"
+                       title="Like us on Facebook" target="_blank" class="btn-social btn-outline">
+                        <i class="fa fa-fw fa-facebook"></i>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://plus.google.com/114869903467947368993" onclick="gaEvent('Social Google+')"
+                       title="Follow us on Google Plus" target="_blank" class="btn-social btn-outline">
+                        <i class="fa fa-fw fa-google-plus"></i>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://twitter.com/bitwarden_app" onclick="gaEvent('Social Twitter')"
+                       title="Follow us on Twitter" target="_blank" class="btn-social btn-outline">
+                        <i class="fa fa-fw fa-twitter"></i>
+                    </a>
+                </li>
+            </ul>
+            &copy; Copyright  2015 - {{ 'now' | date: "%Y" }}<br />
+            8bit Solutions LLC
+        </div>
     </footer>
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
diff --git a/css/styles.scss b/css/styles.scss
index 7400402f..6ca66453 100644
--- a/css/styles.scss
+++ b/css/styles.scss
@@ -22,10 +22,15 @@ html {
 }
 
 body {
-    margin-bottom: 60px;
+    margin-bottom: 160px;
     padding-top: 51px;
     font-family: $font-family-sans-serif;
     font-size: 15px;
+    background-color: #fafafa;
+    
+    @media(min-width:768px) {
+        margin-bottom: 101px;
+    }
 }
 
 h1, h2, h3, h4, h5 {
@@ -55,15 +60,17 @@ a {
 
     .navbar-brand {
         font-family: $headings-font-family;
-
-        .navbar-nav > li > a {
-            color: white;
-        }
     }
 
     .navbar-brand, .navbar-nav > li > a {
         color: white;
     }
+
+    .navbar-nav > li > a {
+        &:hover, &:focus {
+            text-decoration: underline;
+        }
+    }
 }
 
 .search-header {
@@ -77,8 +84,67 @@ footer {
     position: absolute;
     bottom: 0;
     width: 100%;
-    height: 60px;
+    height: 160px;
     background-color: $brand-dark-accent;
     color: white;
-    padding: 8px 0;
+    padding: 30px 0;
+
+    @media(min-width:768px) {
+        height: 101px;
+
+        .container {
+            position: relative;
+
+            .social-buttons {
+                position: absolute;
+                right: 0;
+                top: -7px;
+            }
+        }
+    }
+}
+
+.container-content {
+    margin-top: 20px;
+}
+
+.btn-social {
+    display: inline-block;
+    height: 50px;
+    width: 50px;
+    border: 2px solid white;
+    border-radius: 100%;
+    text-align: center;
+    font-size: 20px;
+    line-height: 45px;
+}
+
+.btn-outline {
+    color: white;
+    font-size: 20px;
+    border: solid 2px white;
+    background: transparent;
+    transition: all 0.3s ease-in-out;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+        color: $brand-primary;
+        background: white;
+        border: solid 2px white;
+    }
+}
+
+
+.panel-articles {
+    ul, ol {
+        margin-bottom: 0;
+        margin-left: 0;
+        padding-left: 20px;
+    }
+}
+
+.breadcrumb {
+    border: 1px solid #ddd;
 }
diff --git a/index.html b/index.html
index baba8028..31306850 100644
--- a/index.html
+++ b/index.html
@@ -20,9 +20,9 @@ title: Help, FAQ, and Support
         <div class="col-md-8">
             {% for category in site.categories %}
             {% if category.featured == true %}
-            <div class="panel panel-default">
+            <div class="panel panel-default panel-articles">
                 <div class="panel-heading">
-                    <h3 class="panel-title"><i class="fa fa-newspaper-o"></i> {{category.title}}</h3>
+                    <h3 class="panel-title"><i class="fa fa-folder-open"></i> {{category.title}}</h3>
                 </div>
                 <div class="panel-body">
                     <ul>
@@ -38,11 +38,11 @@ title: Help, FAQ, and Support
             {% endfor %}
         </div>
         <div class="col-md-4">
-            <div class="panel panel-default">
+            <div class="panel panel-default panel-articles">
                 <div class="panel-heading">
-                    <h3 class="panel-title"><i class="fa fa-newspaper-o"></i> Categories</h3>
+                    <h3 class="panel-title"><i class="fa fa-list-alt"></i> Categories</h3>
                 </div>
-                <div class="panel-body">
+                <div class="panel-body small">
                     <ul>
                         {% for category in site.categories %}
                         <li><a href="{{category.url}}">{{category.title}}</a></li>
@@ -50,11 +50,11 @@ title: Help, FAQ, and Support
                     </ul>
                 </div>
             </div>
-            <div class="panel panel-default">
+            <div class="panel panel-default panel-articles">
                 <div class="panel-heading">
-                    <h3 class="panel-title"><i class="fa fa-newspaper-o"></i> Popular</h3>
+                    <h3 class="panel-title"><i class="fa fa-star"></i> Popular</h3>
                 </div>
-                <div class="panel-body">
+                <div class="panel-body small">
                     <ul>
                         {% for article in site.articles %}
                         {% if article.popular == true %}
diff --git a/search/index.html b/search/index.html
index 42ccfcf0..052f403d 100644
--- a/search/index.html
+++ b/search/index.html
@@ -3,9 +3,34 @@ layout: default
 title: Search Results
 ---
 
-<div class="container">
-    <ul id="search-results"></ul>
+<div class="search-header">
+    <div class="container">
+        <form action="/search/" method="get">
+            <div class="input-group">
+                <input type="search" id="search-box" class="form-control input-lg"
+                       placeholder="Type your problem here..." name="q">
+                <span class="input-group-btn">
+                    <button class="btn btn-lg btn-default" type="submit">Search</button>
+                </span>
+            </div>
+        </form>
+    </div>
 </div>
+<div class="container">
+    <ol class="breadcrumb">
+        <li><a href="/">Help Center</a></li>
+        <li class="active">{{page.title}}</li>
+    </ol>
+    <div class="panel panel-default panel-articles">
+        <div class="panel-heading">
+            <h3 class="panel-title"><i class="fa fa-search"></i> {{page.title}} for "<span id="search-term"></span>"</h3>
+        </div>
+        <div class="panel-body">
+            <ul id="search-results"></ul>
+        </div>
+    </div>
+</div>
+
 
 <script src="/scripts/lunr.min.js"></script>
 <script>
@@ -30,14 +55,14 @@ title: Search Results
 
                 for (var i = 0; i < results.length; i++) {  // Iterate over the results
                     var item = store[results[i].ref];
-                    appendString += '<li><a href="' + item.url + '"><h3>' + item.title + '</h3></a>';
-                    appendString += '<p>' + item.content.substring(0, 150) + '...</p></li>';
+                    appendString += '<li><a href="' + item.url + '">' + item.title + '</a>';
+                    appendString += '<p class="text-muted small">' + item.content.substring(0, 300) + '...</p></li>';
                 }
 
                 searchResults.innerHTML = appendString;
             }
             else {
-                searchResults.innerHTML = '<li>No results found</li>';
+                searchResults.innerHTML = '<li>No results found. Try another search term.</li>';
             }
         }
 
@@ -57,7 +82,8 @@ title: Search Results
         var searchTerm = getQueryVariable('q');
 
         if (searchTerm) {
-            //document.getElementById('search-box').setAttribute("value", searchTerm);
+            document.getElementById('search-box').setAttribute("value", searchTerm);
+            document.getElementById('search-term').innerText = searchTerm;
 
             // Initalize lunr with the fields it will be searching on. I've given title
             // a boost of 10 to indicate matches on this field are more important.
@@ -80,5 +106,8 @@ title: Search Results
                 displaySearchResults(results, window.store); // We'll write this in the next section
             }
         }
+        else {
+            displaySearchResults([], window.store);
+        }
     })();
 </script>