Fix navbar on mobile

This commit is contained in:
Mark Veidemanis 2022-07-21 13:47:31 +01:00
parent 25e0879a10
commit 8ebaaaaa05
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
2 changed files with 48 additions and 41 deletions

View File

@ -6,7 +6,10 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">s <meta http-equiv="X-UA-Compatible" content="IE=edge">s
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pathogen - {{ request.path_info }}</title> <title>Pathogen - {{ request.path_info }}</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="{% static 'style.css' %}" /> <link rel="stylesheet" href="{% static 'style.css' %}" />
{# <script src="https://js.stripe.com/v3/"></script> #} {# <script src="https://js.stripe.com/v3/"></script> #}
</head> </head>
@ -17,14 +20,15 @@
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<a class="navbar-brand" href="{% url 'home' %}">Pathogen</a> <a class="navbar-brand" href="{% url 'home' %}">Pathogen</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#base-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
</div> </div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse"> <div class="collapse navbar-collapse" id="base-nav">
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %} {% if user.is_authenticated %}
<li><a href="{% url 'profile' %}">Profile</a></li> <li><a href="{% url 'profile' %}">Profile</a></li>
{% endif %} {% endif %}
@ -40,6 +44,7 @@
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
</div>
</nav> </nav>
</div> </div>
<div class="hero-body"> <div class="hero-body">

View File

@ -5,7 +5,7 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-lg-4 col-md-4 col-xs-12">
<form method="POST"> <form method="POST">
{% csrf_token %} {% csrf_token %}
<div class="input-group search-bar"> <div class="input-group search-bar">
@ -21,9 +21,10 @@
</div> </div>
{% if results is not None %} {% if results is not None %}
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12 col-md-12 col-xs-12">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">Results for {{ query }}</div> <div class="panel-heading">Results for {{ query }}</div>
<div class="table-responsive">
<table class="table table-bordered table-light"> <table class="table table-bordered table-light">
<thead> <thead>
<tr> <tr>
@ -46,6 +47,7 @@
</tr> </tr>
{% endfor %} {% endfor %}
</table> </table>
</div>
</div> </div>
</div> </div>