Use modernizr & CSS for user menu without JS

Modernizr adds a class called 'js' to the <html> element when javascript
is available.  We, as a part of basic modernizr setup, add a class
called 'no-js' to <html> element by default.  Use this fact to show/hide
elements when javascript is not available.
This commit is contained in:
Sunil Mohan Adapa 2015-05-04 00:56:37 +05:30
parent 22a020e63b
commit 9752ab8188
2 changed files with 11 additions and 7 deletions

View File

@ -124,7 +124,7 @@
{% endif %}
</li>
{% if user.is_authenticated %}
<li id="logout_nojs">
<li id="logout-nojs">
<a href="{% url 'users:logout' %}" title="Log out">
<i class="glyphicon glyphicon-remove-circle nav-icon"></i>
Log out</a>
@ -184,12 +184,6 @@
<script type="text/javascript" src="{% static '/javascript/jquery/jquery.min.js' %}"></script>
<!-- Local link to system Bootstrap JS -->
<script type="text/javascript" src="{% static '/javascript/bootstrap/js/bootstrap.min.js' %}"></script>
<!-- Hide log out button if user dropdown is available -->
<script type="text/javascript">
(function($) {
$("#logout_nojs").hide();
})(jQuery);
</script>
{% block app_js %}<!-- placeholder for app-specific js files -->{% endblock %}
{% block page_js %}<!-- placeholder for page-specific js files -->{% endblock %}

View File

@ -32,3 +32,13 @@ body {
.running-status.inactive {
background-color: rgb(228, 66, 66);
}
/* Hide log out button if user dropdown is available */
.js #logout-nojs {
display: none;
}
/* Hide the dropdown icon when javascript is not available */
.no-js .nav .dropdown .caret {
display: none;
}