Fix Boostrap menu collapse on mobile screens. Show user messages at the top of the page

This commit is contained in:
Michael Hall 2018-01-22 17:01:38 -05:00
parent 257d3108e1
commit de445c0728

View file

@ -21,7 +21,7 @@
{% endif %}
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
<!-- Bootstrap style overrides -->
<style>
@ -60,26 +60,34 @@ form {
</ul>
<ul class="navbar-nav">
{% if request.user.is_authenticated %}
<li class="nav-item"><a class="nav-link">Welcome {{ request.user.username }}</a></li>
{% else %}
<li class="nav-item"><a class="nav-link" href="/">Signup or Login</a></li>
{% endif %}
{% if request.user.is_authenticated %}
<li class="nav-item"><a class="nav-link">Welcome {{ request.user.username }}</a></li>
{% else %}
<li class="nav-item"><a class="nav-link" href="/">Signup or Login</a></li>
{% endif %}
</ul>
</div>
</nav>
<main role="main" class="container">
{% if messages %}
<div class="alerts">
{% for message in messages %}
<div class="alert{% if message.tags %} {{ message.tags }}{% endif %}">{{ message }}</div>
{% endfor %}
</div>
{% endif %}
{% block content %}{% endblock %}
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="https://unpkg.com/popper.js@1.12.9/dist/umd/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
{% block javascript %}{% endblock %}
</html>