forked from DGNum/gestioCOF
BDS: user search on the home page
This commit is contained in:
Martin Pépin
parent
bca75dbf98
commit
5d24786e20
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"
|
app_name = "bds"
|
||||||
urlpatterns = [
|
urlpatterns = [
|
||||||
|
path("", views.Home.as_view(), name="home"),
|
||||||
path("autocomplete", views.AutocompleteView.as_view(), name="autocomplete"),
|
path("autocomplete", views.AutocompleteView.as_view(), name="autocomplete"),
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -13,5 +13,11 @@ class AutocompleteView(TemplateView):
|
||||||
raise Http404
|
raise Http404
|
||||||
q = self.request.GET["q"]
|
q = self.request.GET["q"]
|
||||||
ctx["q"] = 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
|
return ctx
|
||||||
|
|
||||||
|
|
||||||
|
class Home(TemplateView):
|
||||||
|
template_name = "bds/home.html"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue