/* center the buttons vertically in the header */
div.topmenu { padding-top: 7px; }
-ul.logged-in { padding-top: 12px; }
-button#logout {
-/* margin-left: 8px; */
- margin-bottom: 10px;
+ul.logged-in {
+ padding-top: 12px;
+}
+button.logged-in {
+ font-size: small;
+ margin-left: 5px;
+}
+li.username {
+ margin-bottom: 10px;
+ font-size: x-small;
}
-ul.logged-in { font-size: x-small; }
-button.logged-in { font-size: small; }
{% endfor %}
</ul> {# logout.js will attach a click function on that button, which then retrieves the 'username' attribute #}
<ul class="nav navbar-nav pull-right logged-in">
- <li> {% if username %}
+ <li class='username'> {% if username %}
Logged in as {{ username }}
- <button id='logout' class='btn btn-danger logged-in' username='{{ username }}'>Logout</button> {% else %}
+ <button id='logout' class='btn btn-xs btn-danger logged-in' username='{{ username }}'>Logout</button> {% else %}
Not logged in{% endif %}
</li>
</ul>