BDS: user search on the home page
This commit is contained in:
parent
2cff19cee1
commit
de2a013a16
6 changed files with 137 additions and 1 deletions
70
bds/static/bds/css/bds.css
Normal file
70
bds/static/bds/css/bds.css
Normal file
|
@ -0,0 +1,70 @@
|
|||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #ddcecc;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* header */
|
||||
|
||||
nav {
|
||||
background: #3d2464;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 0.4em 0;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#search_autocomplete {
|
||||
width: 480px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 10px 10px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
text-decoration: underline;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.yourlabs-autocomplete ul {
|
||||
width: 500px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.yourlabs-autocomplete ul li {
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
width: 500px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.yourlabs-autocomplete ul li.hilight {
|
||||
background: #e8554e;
|
||||
}
|
||||
|
||||
.autocomplete-item {
|
||||
display: block;
|
||||
width: 480px;
|
||||
height: 100%;
|
||||
padding: 2px 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.autocomplete-header {
|
||||
background: #b497e1;
|
||||
}
|
||||
|
||||
.autocomplete-value, .autocomplete-new, .autocomplete-more {
|
||||
background: white;
|
||||
}
|
23
bds/templates/bds/base.html
Normal file
23
bds/templates/bds/base.html
Normal file
|
@ -0,0 +1,23 @@
|
|||
{% load staticfiles %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{{ site.name }}</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
{# CSS #}
|
||||
<link rel="stylesheet" href="{% static "bds/css/bds.css" %}">
|
||||
|
||||
{# Javascript #}
|
||||
<script src="{% static 'vendor/jquery/jquery-3.3.1.min.js' %}"></script>
|
||||
<script src="{% static "vendor/jquery/jquery.autocomplete-light.min.js" %}"></script>
|
||||
</head>
|
||||
<body>
|
||||
{% include "bds/nav.html" %}
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
7
bds/templates/bds/home.html
Normal file
7
bds/templates/bds/home.html
Normal file
|
@ -0,0 +1,7 @@
|
|||
{% extends "bds/base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div style="margin: auto; text-align: center; padding-top: 2em;">
|
||||
Bienvenue sur le site du BDS!
|
||||
</div>
|
||||
{% endblock %}
|
29
bds/templates/bds/nav.html
Normal file
29
bds/templates/bds/nav.html
Normal file
|
@ -0,0 +1,29 @@
|
|||
{% load i18n %}
|
||||
|
||||
<nav id="search-bar">
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
id="search_autocomplete"
|
||||
spellcheck="false"
|
||||
placeholder="{% trans "Chercher une personne" %}" />
|
||||
<div class="yourlabs-autocomplete"></div>
|
||||
</nav>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('input#search_autocomplete').yourlabsAutocomplete({
|
||||
url: '{% url 'bds:autocomplete' %}',
|
||||
minimumCharacters: 3,
|
||||
id: 'search_autocomplete',
|
||||
choiceSelector: 'li:has(a)',
|
||||
box: $(".yourlabs-autocomplete"),
|
||||
});
|
||||
$('input#search_autocomplete').bind(
|
||||
'selectChoice',
|
||||
function(e, choice, autocomplete) {
|
||||
window.location = choice.find('a:first').attr('href');
|
||||
}
|
||||
);
|
||||
});
|
||||
</script>
|
|
@ -4,5 +4,6 @@ from bds import views
|
|||
|
||||
app_name = "bds"
|
||||
urlpatterns = [
|
||||
path("", views.Home.as_view(), name="home"),
|
||||
path("autocomplete", views.AutocompleteView.as_view(), name="autocomplete"),
|
||||
]
|
||||
|
|
|
@ -13,5 +13,11 @@ class AutocompleteView(TemplateView):
|
|||
raise Http404
|
||||
q = self.request.GET["q"]
|
||||
ctx["q"] = q
|
||||
ctx.update(bds_search.search(q.split()))
|
||||
results = bds_search.search(q.split())
|
||||
ctx.update(results)
|
||||
ctx["total"] = sum((len(r) for r in results.values()))
|
||||
return ctx
|
||||
|
||||
|
||||
class Home(TemplateView):
|
||||
template_name = "bds/home.html"
|
||||
|
|
Loading…
Reference in a new issue