Added small arrow to usernav dropdown. #110

static/cranefly/css/cranefly.css

@@ -883,9 +883,10 @@ footer .container .credits p{margin-bottom:0px;color:#555555;font-size:90%;}foot
 .navbar-header .navbar-inner .navbar-blocks li a:hover .label,.navbar-header .navbar-inner .navbar-blocks li a:active .label,.navbar-header .navbar-inner .navbar-blocks li .btn-link:hover .label,.navbar-header .navbar-inner .navbar-blocks li .btn-link:active .label{background-color:#eeeeee;color:#333333;}
 .navbar-header .navbar-inner .navbar-blocks li.user-profile a:link,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:visited,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:hover,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:active{background:none;border:none;margin-right:8px;margin-top:5px;font-weight:bold;text-shadow:none;}.navbar-header .navbar-inner .navbar-blocks li.user-profile a:link img,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:visited img,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:hover img,.navbar-header .navbar-inner .navbar-blocks li.user-profile a:active img{border-radius:3px;margin-right:6px;width:32px;height:32px;position:relative;bottom:1px;}
 .navbar-header .navbar-inner .navbar-compact{display:none;}.navbar-header .navbar-inner .navbar-compact li.user-profile>a:link,.navbar-header .navbar-inner .navbar-compact li.user-profile>a:visited{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin-top:0px;padding:14px;padding-top:10px;padding-bottom:8px;}.navbar-header .navbar-inner .navbar-compact li.user-profile>a:link img,.navbar-header .navbar-inner .navbar-compact li.user-profile>a:visited img{margin-right:0px;margin-left:6px;}
-.navbar-header .navbar-inner .navbar-compact li.user-profile>a:hover,.navbar-header .navbar-inner .navbar-compact li.user-profile>a:active{background-color:#fbfbfb;}
-.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:link,.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:visited,.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:hover,.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:focus{background-color:#fbfbfb;}
-.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu{border:none;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;border-top:4px solid #cf402e;-webkit-box-shadow:0px 3px 4px #999999;-moz-box-shadow:0px 3px 4px #999999;box-shadow:0px 3px 4px #999999;margin:0px;margin-top:-3px;margin-right:8px;padding:0px;width:270px;}.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu:before{display:none;}
+.navbar-header .navbar-inner .navbar-compact li.user-profile>a:link .caret-border,.navbar-header .navbar-inner .navbar-compact li.user-profile>a:visited .caret-border{background-color:#fbfbfb;border:1px solid #dfdfdf;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;margin-left:8px;padding:0px 4px;}.navbar-header .navbar-inner .navbar-compact li.user-profile>a:link .caret-border .caret,.navbar-header .navbar-inner .navbar-compact li.user-profile>a:visited .caret-border .caret{margin:0px;padding:0px;position:relative;top:13px;}
+.navbar-header .navbar-inner .navbar-compact li.user-profile>a:hover,.navbar-header .navbar-inner .navbar-compact li.user-profile>a:active{background-color:#fbfbfb;}.navbar-header .navbar-inner .navbar-compact li.user-profile>a:hover .caret-border,.navbar-header .navbar-inner .navbar-compact li.user-profile>a:active .caret-border{border-color:#999999;}
+.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:link,.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:visited,.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:hover,.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:focus{background-color:#fbfbfb;}.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:link .caret-border,.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:visited .caret-border,.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:hover .caret-border,.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:focus .caret-border{background:#cf402e;border-color:#cf402e;}.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:link .caret-border .caret,.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:visited .caret-border .caret,.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:hover .caret-border .caret,.navbar-header .navbar-inner .navbar-compact li.user-profile.open .dropdown-toggle:focus .caret-border .caret{border-top-color:#ffffff;}
+.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu{border:none;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;border-top:4px solid #cf402e;-webkit-box-shadow:0px 3px 4px #999999;-moz-box-shadow:0px 3px 4px #999999;box-shadow:0px 3px 4px #999999;margin:0px;margin-top:-8px;margin-right:1px;padding:0px;width:270px;}.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu:before{display:none;}
 .navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu:after{border-bottom:6px solid #cf402e;margin-top:-3px;margin-right:11px;}
 .navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li{margin:0px;padding:0px;}.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li .label{float:right;margin:0px;margin-top:-18px;}
 .navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li a,.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li .btn-link{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;clear:none;display:block;float:none;margin:0px;padding:6px 12px;color:#333333;font-weight:normal;text-align:left;}.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li a i,.navbar-header .navbar-inner .navbar-compact li.user-profile .dropdown-menu>li .btn-link i{opacity:1;filter:alpha(opacity=100);}

static/cranefly/css/cranefly/navbar.less

@@ -156,16 +156,45 @@
                 margin-right: 0px;
                 margin-left: 6px;
               }
+
+              .caret-border {
+                background-color: @bodyBackground;
+                border: 1px solid @navbarBorder;
+                .border-radius(2px);
+                margin-left: 8px;
+                padding: 0px 4px;
+
+                .caret {
+                  margin: 0px;
+                  padding: 0px;
+                  position: relative;
+                  top: 13px;
+                }
+              }
             }
 
             &:hover, &:active {
               background-color: @bodyBackground;
+
+              .caret-border {
+                border-color: @grayLight;
+              }
             }
           }
 
           &.open .dropdown-toggle {
             &:link, &:visited, &:hover, &:focus {
               background-color: @bodyBackground;
+
+
+              .caret-border {
+                background: @red;
+                border-color: @red;
+
+                .caret {
+                  border-top-color: @white;
+                }
+              }
             }
           }
 
@@ -175,8 +204,8 @@
             border-top: 4px solid @red;
             .box-shadow(0px 3px 4px @grayLight);
             margin: 0px;
-            margin-top: -3px;
-            margin-right: 8px;
+            margin-top: -8px;
+            margin-right: 1px;
             padding: 0px;
             width: 270px;
 

templates/cranefly/layout.html

@@ -63,7 +63,7 @@
           {% endif %}
           {{ hook_user_menu_important_append|safe }}
           <li class="user-profile dropdown">
-            <a href="{% url 'user' user=user.id, username=user.username_slug %}" class="dropdown-toggle" data-toggle="dropdown"><div>{{ user.username }} <img src="{{ user.get_avatar(28) }}" alt=""></div></a>
+            <a href="{% url 'user' user=user.id, username=user.username_slug %}" class="dropdown-toggle" data-toggle="dropdown"><div>{{ user.username }} <img src="{{ user.get_avatar(28) }}" alt=""><span class="caret-border"><b class="caret"></b></span></div></a>
             <ul class="dropdown-menu">
               <li><a href="{% url 'user' user=user.id, username=user.username_slug %}"><i class="icon-user"></i> {% trans %}Your profile{% endtrans %}</a></li>
               <li><a href="{% url 'usercp' %}"><i class="icon-cog"></i> {% trans %}Change options{% endtrans %}</a></li>