diff options
Diffstat (limited to 'templates/base.html')
| -rw-r--r-- | templates/base.html | 31 |
1 files changed, 27 insertions, 4 deletions
diff --git a/templates/base.html b/templates/base.html index a27a8c6..66e0d83 100644 --- a/templates/base.html +++ b/templates/base.html @@ -4,14 +4,12 @@ {% block head %} <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="{{ url_for('static', filename='ihatecss.css') }}"> - <link rel="stylesheet" href="{{ url_for('static', filename='jquery-ui.min.css') }}"> + <link rel="stylesheet" href="{{ url_for('static', filename='auto-complete.css') }}"> <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico')}}" type="image/x-icon"> <link rel="icon" href="{{ url_for('static', filename='favicon.ico')}}" type="image/x-icon"> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-144659956-1"></script> - <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> - <script src="{{ url_for('static', filename='typeahead.bundle.min.js') }}"></script> - <script src="{{ url_for('static', filename='jquery-ui.min.js') }}"></script> + <script src="{{ url_for('static', filename='auto-complete.min.js') }}"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} @@ -23,6 +21,19 @@ {% endblock %} </head> <body> + <nav class="navbar navbar-dark bg-info mb-3"> + <div class="container"> + <a class="navbar-brand" href="/">similar.beer</a> + <form class="form-inline" action="/search" method="post" autocomplete="off"> + <div class="autocomplete" style="width:300px;"> + <input id="myInput" class="form-control mr-sm-2 typeahead" type="search" name="q" placeholder="Search Beers" aria-label="Search"> + </div> + <button class="btn btn-secondary my-2 my-sm-0" type="submit">Go</button> + </form> + <a href="/random" class="btn btn-secondary my-2 my-sm-0">Random Beer!</a> + </div> + </nav> + <div class="container"> {% block content %}{% endblock %} </div> @@ -36,5 +47,17 @@ </div> {% endblock %} </div> + <script> + (function() { + new autoComplete({ + selector: 'input[name="q"]', + source: function(q, response) { + fetch(`/all_beers.json?q=${encodeURIComponent(q)}`) + .then(res => res.json()) + .then(response); + } + }); + })() + </script> </body> </html> |