Adding more elements to Admin Layout.

uiframework/admin/layout.html

@@ -27,42 +27,89 @@
     <div class="navbars-container">
       <div class="navbar navbar-default navbar-static-top" role="navigation">
         <div class="container">
-          <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-              <span class="sr-only">Toggle navigation</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="#">&nbsp;</a>
-          </div>
-          <div class="collapse navbar-collapse">
+          <a class="navbar-brand" href="#"></a>
+          <ul class="nav navbar-nav">
+            <li>
+              <a href="#">
+                <span class="fa fa-home"></span>
+                Lorem
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <span class="fa fa-cogs"></span>
+                Ipsum
+              </a>
+            </li>
+            <li class="active">
+              <a href="#">
+                <span class="fa fa-users"></span>
+                Dolor
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <span class="fa fa-envelope"></span>
+                Met
+              </a>
+            </li>
+          </ul>
+
+          <div class="user-nav pull-right">
+            <p class="navbar-text">
+              <img src="../misago/admin/img/mred.png" alt="Avatar">
+              Username
+            </p>
             <ul class="nav navbar-nav">
-              <li><a href="#">Lorem</a></li>
-              <li><a href="#">Ipsum</a></li>
-              <li class="active"><a href="#">Dolor</a></li>
-              <li><a href="#">Met</a></li>
+              <li>
+              </li>
+              <li>
+                <a href="#">
+                  <span class="fa fa-power-off"></span>
+                </a>
+              </li>
             </ul>
-          </div><!--/.nav-collapse -->
+          </div>
         </div>
       </div>
       <div class="navbar navbar-inverse navbar-static-top" role="navigation">
         <div class="container">
-          <div class="collapse navbar-collapse">
-            <ul class="nav navbar-nav">
-              <li><a href="#">Lorem</a></li>
-              <li class="active"><a href="#">Ipsum</a></li>
-              <li><a href="#">Dolor</a></li>
-              <li><a href="#">Met</a></li>
-            </ul>
-        </div><!--/.nav-collapse -->
+          <ul class="nav navbar-nav">
+            <li>
+              <a href="#">
+                <span class="fa fa-plane"></span>
+                Lorem
+              </a>
+            </li>
+            <li class="active">
+              <a href="#">
+                <span class="fa fa-road"></span>
+                Ipsum
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <span class="fa fa-edit"></span>
+                Dolor
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <span class="fa fa-pencil"></span>
+                Met
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
-  </div>
-  </div>
 
     <div class="page-header">
       <div class="container">
-        <h1>Lorem ipsum dolor</h1>
+        <h1>
+          <div class="main"><span class="fa fa-road"></span> <a href="#">Lorem ipsum dolor</a></div>
+          <div class="sub"><span class="fa fa-chevron-right"></span> Sit amet elit</div>
+        </h1>
       </div>
     </div>
 

uiframework/misago/admin/css/misago/header.less

@@ -14,43 +14,25 @@
   h1 {
   	margin: 0px;
   	padding: 0px;
+  	overflow: auto;
 
   	font-size: @font-size-large * 1.5;
-  }
-}
 
+  	.main, .sub {
+  		float: left;
+  	}
 
-// Actions
-//
-//##
-.page-header {
-  &>.container {
-    .page-actions {
-      float: right;
-      margin-top: (@line-height-computed * @headings-line-height) * -1 - (@line-height-computed * 1.5) + @padding-base-vertical - 1;
-
-      .dropdown-menu {
-        left: auto;
-        right: 0px;
-
-        &:after {
-          left: auto;
-          right: 12px;
-        }
-      }
-    }
-  }
-}
+  	.main {
+  		a {
+  			color: @text-color;
+  		}
+  	}
 
-/* Small displays */
-@media (max-width: @screen-sm-min) {
-  .page-header {
-    &>.container {
-      .page-actions {
-        clear: both;
-        float: none;
-        margin-top: @line-height-computed;
-      }
-    }
+  	.sub {
+  		margin-left: @line-height-computed / 2;
+
+  		color: lighten(@text-color, 25%);
+  	}
   }
 }
+

uiframework/misago/admin/css/misago/navbar.less

@@ -1,5 +1,5 @@
 //
-// Forum Navbar
+// Admin Navbar
 // --------------------------------------------------
 
 .navbars-container {
@@ -11,14 +11,34 @@
 
     .navbar-brand {
       background: url('../img/mred.png');
-      background-color: #fff;
       background-size: cover;
       background-repeat: no-repeat;
-      border-radius: 3px;
+      border-radius: 4px;
       width: @navbar-height - 12;
       height: @navbar-height - 12;
       margin-top: 6px;
     }
+
+    .fa, .glyphicon {
+      position: relative;
+      bottom: (@font-size-base - @font-size-large) / 2;
+
+      font-size: @font-size-large;
+    }
+
+    .user-nav {
+      .navbar-text {
+        color: darken(#fff, 10%);
+      }
+
+      img {
+        border-radius: @border-radius-base;
+        height: 26px;
+        margin: -6px 0px;
+        position: relative;
+        bottom: 1px;
+      }
+    }
   }
 }
 
@@ -27,8 +47,9 @@
 @media (min-width: @screen-sm-min) {
   .navbars-container {
     .navbar-brand {
-      margin-left: @line-height-computed / 2;
-      margin-right: @line-height-computed / 2;
+      position: relative;
+      left: @line-height-computed;
+      margin-right: @line-height-computed * 1.5;
     }
 
     /* Bolden active links */

uiframework/misago/admin/css/style.css

@@ -6164,14 +6164,29 @@ body {
 }
 .navbars-container .navbar .navbar-brand {
   background: url('../img/mred.png');
-  background-color: #fff;
   background-size: cover;
   background-repeat: no-repeat;
-  border-radius: 3px;
+  border-radius: 4px;
   width: 38px;
   height: 38px;
   margin-top: 6px;
 }
+.navbars-container .navbar .fa,
+.navbars-container .navbar .glyphicon {
+  position: relative;
+  bottom: -2px;
+  font-size: 18px;
+}
+.navbars-container .navbar .user-nav .navbar-text {
+  color: #e6e6e6;
+}
+.navbars-container .navbar .user-nav img {
+  border-radius: 4px;
+  height: 26px;
+  margin: -6px 0px;
+  position: relative;
+  bottom: 1px;
+}
 /* Big displays */
 @media (min-width: 768px) {
   .navbars-container {
@@ -6179,8 +6194,9 @@ body {
     /* Put fancy blue bar under active link */
   }
   .navbars-container .navbar-brand {
-    margin-left: 10px;
-    margin-right: 10px;
+    position: relative;
+    left: 20px;
+    margin-right: 30px;
   }
   .navbars-container .navbar li.active a {
     font-weight: bold;
@@ -6208,27 +6224,19 @@ body {
 .page-header h1 {
   margin: 0px;
   padding: 0px;
+  overflow: auto;
   font-size: 27px;
 }
-.page-header > .container .page-actions {
-  float: right;
-  margin-top: -47px;
-}
-.page-header > .container .page-actions .dropdown-menu {
-  left: auto;
-  right: 0px;
+.page-header h1 .main,
+.page-header h1 .sub {
+  float: left;
 }
-.page-header > .container .page-actions .dropdown-menu:after {
-  left: auto;
-  right: 12px;
+.page-header h1 .main a {
+  color: #444444;
 }
-/* Small displays */
-@media (max-width: 768px) {
-  .page-header > .container .page-actions {
-    clear: both;
-    float: none;
-    margin-top: 20px;
-  }
+.page-header h1 .sub {
+  margin-left: 10px;
+  color: #848484;
 }
 .main-footer {
   margin-top: 30px;