[fix] move logout button into dropdown

- restructure the positioning of the logout button to achieve a more conventional look
collinmutembei · Mar 29, 2016 · 5288080 · 5288080
1 parent 8993204
commit 5288080
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 9 deletions.
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
@@ -9,12 +9,21 @@
             <a href="#"><img src="{% static 'images/phedit.gif' %}" alt="logo" class="brand-logo"/></a>
         </div>
         <div class="col-xs-6 col-md-6">
-            {% if user.is_authenticated and user.socialaccount_set.all.0.get_avatar_url %}
-                <img class="img-circle pull-right " src="{{ user.socialaccount_set.all.0.get_avatar_url }}" />
-            {% else %}
-                <img class="img-circle pull-right " src="{% static 'images/profile.png' %}" />
-            {% endif %}
-            <a href="/accounts/logout/" class="logout-btn btn btn-sm pull-right">Logout</a>
+            <li class="dropdown pull-right">
+                <a href="#" data-toggle="dropdown" class="dropdown-toggle">
+                    {% if user.is_authenticated and user.socialaccount_set.all.0.get_avatar_url %}
+                        <img class="img-circle" src="{{ user.socialaccount_set.all.0.get_avatar_url }}" />
+                        <b class="caret"></b>
+                    {% else %}
+                        <img class="img-circle pull-right " src="{% static 'images/profile.png' %}" />
+                    {% endif %}
+                </a>
+                <ul class="dropdown-menu">
+                    <li><a href="#" class="dec small">Gallery</a></li>
+                    <li class="divider"></li>
+                    <li><a href="/accounts/logout/" class="dec small">Logout</a></li>
+                </ul>
+            </li>
         </div>
     </div>
 </div>

diff --git a/app/templates/static/styles/index.css b/app/templates/static/styles/index.css
@@ -110,7 +110,23 @@ body {
     height: 40px;
     border: 2px solid #292c2f;
     background-color: transparent;
-    margin: 16px 0px 0px 0px;
+    margin: 16px 5px 0px 0px;
+}
+
+.dropdown-menu {
+    min-width: 0px !important;
+}
+
+.caret {
+    margin-top: 15px;
+}
+
+li {
+    list-style: none
+}
+
+a {
+    text-decoration: none;
 }
 
 a:hover {
@@ -585,12 +601,12 @@ input[type=checkbox] {
     margin-right: 2px;
 }
 
-.logout-btn {
+/*.logout-btn {
     border: 1px solid #292c2f;;
     margin-right: 10px;
     margin-top: 22px;
     color: #000;
-}
+}*/
 
 .clearcanvas .btn {
     height: 36px;