Breadcrumbs and details #331

uiframework/header.html

@@ -68,6 +68,12 @@
     <div class="page-header">
       <div class="container">
 
+        <ol class="breadcrumb">
+          <li><a href="#">Misago</a><span class="fa fa-chevron-right"></span></li>
+          <li><a href="#">Misago Project</a><span class="fa fa-chevron-right"></span></li>
+          <li><a href="#">Project News</a></li>
+        </ol>
+
         <h1>Example page header <small>Subtext for header</small></h1>
 
         <div class="page-actions">
@@ -87,8 +93,10 @@
 
         </div>
 
-        <ul class="page-details hide">
-          <li>Lorem Ipsum<li>
+        <ul class="list-inline page-details">
+          <li><span class="fa fa-tag"></span> Lorem Ipsum<li>
+          <li><a href="#"><span class="fa fa-comment"></span> Dolor</a><li>
+          <li><span class="fa fa-user"></span> Mehssiah<li>
         </ul>
 
       </div>

uiframework/misago/css/misago/header.less

@@ -3,11 +3,62 @@
 // --------------------------------------------------
 
 
+// Generic spacing and stuff
+//
+//##
+
+
+// Breadcrumb
+//
+//##
+
+
+// Actions
+//
+//##
+
+
+// Details
+//
+//##
+
+
+// Pills
+//
+//##
+
+// FUNCTIONALS
 .page-header {
   margin-top: @line-height-computed * -1;
 
   &>.container {
-    &>.page-actions {
+    .breadcrumb {
+      margin-bottom: (@line-height-computed * @headings-line-height) * -1;
+
+      color: @breadcrumb-color;
+      font-size: @font-size-small;
+
+      &>li {
+        + li:before {
+          /* Tinysh hack to remove BS3's style */
+          display: none;
+        }
+
+        a:link, a:visited {
+          color: @breadcrumb-color;
+        }
+
+        a:hover, a:active {
+          color: @breadcrumb-active-color;
+        }
+
+        span {
+          margin: 0px 4px 0px 6px;
+        }
+      }
+    }
+
+    .page-actions {
       float: right;
       margin-top: (@line-height-computed * @headings-line-height) * -1 - (@line-height-computed * 1.5) + @padding-base-vertical - 1;
 
@@ -22,8 +73,17 @@
       }
     }
 
-    &>.page-details {
+    .page-details {
+      color: @text-muted;
 
+      a:link, a:visited {
+        color: @text-muted;
+      }
+
+      a:active, a:hover {
+        color: @link-muted-hover-color;
+        text-decoration: none;
+      }
     }
   }
 }

uiframework/misago/css/misago/variables.less

@@ -26,7 +26,10 @@
 @link-hover-color:      darken(@link-color, 15%);
 
 // Text muted color
-@text-muted:            #95a5a6;
+@text-muted:            darken(@body-bg, 40%);
+
+@link-muted-color:            darken(@body-bg, 65%);
+@link-muted-hover-color:      @link-color;
 
 
 //== Navbar
@@ -162,3 +165,15 @@
 //== Page header
 @page-header-border-color:       darken(@body-bg, 7%);
 @page-pills-padding:             @padding-base-vertical @line-height-computed;
+
+
+//== Breadcrumbs
+//
+//##
+
+@breadcrumb-padding-vertical:   8px;
+@breadcrumb-padding-horizontal: 0px;
+
+@breadcrumb-bg:                 transparent;
+@breadcrumb-color:              darken(@body-bg, 40%);
+@breadcrumb-active-color:       @text-color;

uiframework/misago/css/style.css

@@ -492,7 +492,7 @@ cite {
   text-align: justify;
 }
 .text-muted {
-  color: #95a5a6;
+  color: #969696;
 }
 .text-primary {
   color: #3498db;
@@ -4105,10 +4105,10 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   color: #ffffff;
 }
 .breadcrumb {
-  padding: 8px 15px;
+  padding: 8px 0px;
   margin-bottom: 20px;
   list-style: none;
-  background-color: #f5f5f5;
+  background-color: transparent;
   border-radius: 4px;
 }
 .breadcrumb > li {
@@ -4117,10 +4117,10 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .breadcrumb > li + li:before {
   content: "/\00a0";
   padding: 0 5px;
-  color: #cccccc;
+  color: #969696;
 }
 .breadcrumb > .active {
-  color: #999999;
+  color: #2c3e50;
 }
 .pagination {
   display: inline-block;
@@ -6202,18 +6202,50 @@ button.close {
 .page-header {
   margin-top: -20px;
 }
-.page-header > .container > .page-actions {
+.page-header > .container .breadcrumb {
+  margin-bottom: -22px;
+  color: #969696;
+  font-size: 12px;
+}
+.page-header > .container .breadcrumb > li + li:before {
+  /* Tinysh hack to remove BS3's style */
+  display: none;
+}
+.page-header > .container .breadcrumb > li a:link,
+.page-header > .container .breadcrumb > li a:visited {
+  color: #969696;
+}
+.page-header > .container .breadcrumb > li a:hover,
+.page-header > .container .breadcrumb > li a:active {
+  color: #2c3e50;
+}
+.page-header > .container .breadcrumb > li span {
+  margin: 0px 4px 0px 6px;
+}
+.page-header > .container .page-actions {
   float: right;
   margin-top: -47px;
 }
-.page-header > .container > .page-actions .dropdown-menu {
+.page-header > .container .page-actions .dropdown-menu {
   left: auto;
   right: 0px;
 }
-.page-header > .container > .page-actions .dropdown-menu:after {
+.page-header > .container .page-actions .dropdown-menu:after {
   left: auto;
   right: 10px;
 }
+.page-header > .container .page-details {
+  color: #969696;
+}
+.page-header > .container .page-details a:link,
+.page-header > .container .page-details a:visited {
+  color: #969696;
+}
+.page-header > .container .page-details a:active,
+.page-header > .container .page-details a:hover {
+  color: #3498db;
+  text-decoration: none;
+}
 .page-pills {
   border-bottom: 1px solid #ebebeb;
   margin: -20px 0px 20px;