From 384327af714fa7d7a3e0707c47d1681b65e752ed Mon Sep 17 00:00:00 2001
From: Soumya97 <vadlamannati1997@gmail.com>
Date: Wed, 8 Mar 2017 12:56:11 +0530
Subject: [PATCH] Implement new topbar according to new card based UI

---
 plinth/templates/base.html           | 28 +++++++++++++++++-----------
 static/themes/default/css/plinth.css | 11 ++++++++++-
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/plinth/templates/base.html b/plinth/templates/base.html
index 718482b00..96fb0fa9f 100644
--- a/plinth/templates/base.html
+++ b/plinth/templates/base.html
@@ -91,12 +91,21 @@
              title="{{ box_name }}">
             <img src="{% static 'theme/img/freedombox-logo-32px.png' %}"
                  alt="{{ box_name }}" />
+                 {% if user.is_authenticated %}
+                <span class="navbar-logo-text">{% trans "Home" %}</span> 
+                {% endif %}
           </a>
           {% if user.is_authenticated %}
             <a href="{% url 'apps:index' %}" class="navbar-brand"
                title="{% trans "Applications" %}">
               <span class="glyphicon glyphicon-th"></span>
+              <span class="navbar-logo-text">{% trans "Apps" %}</span>
             </a>
+           <a href="{% url 'system:index' %}" 
+           title="{% trans "System Configuration" %}" class="navbar-brand">
+              <span class="glyphicon-cog glyphicon nav-icon"></span>
+              <span class="navbar-logo-text">{% trans "Configuration" %}</span>
+          </a>
           {% endif %}
         {% endblock %}
       </div>
@@ -110,18 +119,14 @@
             </li>
 
             {% if user.is_authenticated %}
-              <li>
-                <a href="{% url 'system:index' %}" title="{% trans "System Configuration" %}">
-                  <span class="glyphicon-cog glyphicon nav-icon"></span>
-                </a>
-              </li>
+
 
               <li class="dropdown">
                 <a href="{% url 'users:edit' user.username %}"
                    class="dropdown-toggle" data-toggle="dropdown"
                    role="button" aria-expanded="false">
                   <i class="glyphicon glyphicon-user nav-icon"></i>
-                  {{ user.username }}
+                  <span class="navbar-logo-text">{{ user.username }}</span>
                   <span class="caret"></span></a>
                 <ul class="dropdown-menu" role="menu">
                   <li><a href="{% url 'users:edit' user.username %}"
@@ -129,17 +134,18 @@
                   <li><a href="{% url 'users:change_password' user.username %}"
                          title="{% trans "Change password" %}">
                     {% trans "Change password" %}</a></li>
-                  <li class="divider"></li>
-                  <li><a href="{% url 'users:logout' %}"
-                         title="{% trans "Log out" %}">
-                      {% trans "Log out" %}</a></li>
                 </ul>
               </li>
+              <li>
+              <a href="{% url 'users:logout' %}" title="{% trans "Log out" %}">
+                <span class="glyphicon-off glyphicon nav-icon"></span>
+              </a>
+            </li>
             {% else %}
               <li>
                   <a href="{% url 'users:login' %}" title="{% trans "Log in" %}">
                     <i class="glyphicon glyphicon-user nav-icon"></i>
-                    {% trans "Log in" %}</a>
+                    <span class="navbar-logo-text">{% trans "Log in" %}</span></a>
               </li>
             {% endif %}
 
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index 1d7e5ae9c..cb5b684ed 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -12,7 +12,16 @@ body {
     margin-top: -14px;
     padding: 8px;
 }
-
+.navbar-brand > .glyphicon{
+    top:3px;
+}
+.navbar-brand{
+    padding-right: 30px;
+}
+.navbar-logo-text{
+    font-size: small;
+    padding-left: 2px;
+}
 .nav-tabs {
     margin-bottom: 20px;
 }