Remove online and show role of authenticated user instead

panel/static/css/style_panel.css

@@ -82,10 +82,41 @@ form.top-actions {
     background: #eaeaea;
 }
 
-.user-panel p {
+.user-panel1 p {
+    display: inline-block;
     white-space: normal;
+    color: white;
+    font-weight: bold;
+    font-size: 12pt;
+    margin-bottom: 0;
+}
+
+.user-panel1 img {
+    width: 45px;
+    margin: 10px;
 }
 
-.user-panel .pull-left.image {
+.user-panel1 .info {
+    width: calc(100% - 70px);
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+
+.user-panel1 .pull-left.image {
     padding-top: 3px;
+}
+
+.user-panel1 .info, .user-panel1 .image {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.user-panel1 .subtitle {
+    display: block;
+    margin-top: 5px;
+    margin-left: 10px;
+}
+
+.user-panel1 .subtitle i {
+    padding-right: 3px;
 }
\ No newline at end of file

templates/panel/base.html

@@ -198,15 +198,18 @@
     <section class="sidebar">
 
         <!-- Sidebar user panel (optional) -->
-        <div class="user-panel">
-            <div class="pull-left image">
+        <div class="user-panel1">
+            <div class="image">
                 <img src="{{ avatar }}" class="img-circle"
                      alt="User Image">
             </div>
-            <div class="pull-left info">
+            <div class="info">
                 <p>{{ user_name }}</p>
-                <!-- Status -->
-                <a href="#"><i class="fa fa-circle text-success"></i> {% trans "Online" %}</a>
+                {% if staff %}
+                    <br/><span class="subtitle"><a href="#"><i class="fa fa-circle text-red"></i> {% trans "Staff" %}</a></span>
+                {% else %}
+                    <br/><span class="subtitle"><a href="#"><i class="fa fa-circle text-green"></i> {% trans "Editor" %}</a></span>
+                {% endif %}
             </div>
         </div>