tag search
This commit is contained in:
parent
693188666c
commit
fb1cbb1c4e
@ -21,6 +21,7 @@
|
|||||||
{% block foot %}
|
{% block foot %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
<script type="text/javascript" src="/js/components/menu-toggle.js" async defer></script>
|
<script type="text/javascript" src="/js/components/menu-toggle.js" async defer></script>
|
||||||
|
<script type="text/javascript" src="/js/components/search.js" async defer></script>
|
||||||
<script type="text/javascript" src="/vendor/js/bootstrap.min.js" async defer></script>
|
<script type="text/javascript" src="/vendor/js/bootstrap.min.js" async defer></script>
|
||||||
<script>
|
<script>
|
||||||
if ('serviceWorker' in navigator) {
|
if ('serviceWorker' in navigator) {
|
||||||
|
@ -7,10 +7,13 @@
|
|||||||
<div class="[ wrapper ]">
|
<div class="[ wrapper ]">
|
||||||
<h1 class="[ member-list__heading ]">{{ teamListHeading }}</h1>
|
<h1 class="[ member-list__heading ]">{{ teamListHeading }}</h1>
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
<h2 class="[ gap-top-700 ]">{{ tagSearchHeading }}</h2>
|
<div class="search-bar">
|
||||||
<ul class="tag-list mt-3">
|
<label for="site-search">Filtrer par mots-clés :</label>
|
||||||
|
<input type="search" id="searchInput" name="q" aria-label="Filtrer par mots-clés" oninput="doSearch()">
|
||||||
|
</div>
|
||||||
|
<ul class="tag-list mt-3" id="tagList">
|
||||||
{% for skill in collections.skillsList %}
|
{% for skill in collections.skillsList %}
|
||||||
<li class="tag-item"><a href="/equipe/{{ skill }}">{{ skill }}</a></li>
|
<li class="tag-item visually-hidden"><a href="/equipe/{{ skill }}">{{ skill }}</a></li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -18,5 +21,5 @@
|
|||||||
{% include "partials/components/map.njk" %}
|
{% include "partials/components/map.njk" %}
|
||||||
{% include "partials/components/contact-form.njk" %}
|
{% include "partials/components/contact-form.njk" %}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
14
src/js/components/search.js
Normal file
14
src/js/components/search.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
function doSearch() {
|
||||||
|
const searchStr = document.getElementById('searchInput').value;
|
||||||
|
const tagList = document.getElementById('tagList').getElementsByClassName('tag-item');
|
||||||
|
|
||||||
|
for (const tag of tagList) {
|
||||||
|
const value = tag.querySelector('a').innerHTML;
|
||||||
|
|
||||||
|
if (searchStr.length && value.toLowerCase().match(searchStr.toLowerCase())) {
|
||||||
|
tag.classList.remove('visually-hidden');
|
||||||
|
} else {
|
||||||
|
tag.classList.add('visually-hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
16
src/scss/components/_search-bar.scss
Normal file
16
src/scss/components/_search-bar.scss
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// justify-content: flex-end;
|
||||||
|
margin-top: 3rem;
|
||||||
|
|
||||||
|
label {
|
||||||
|
// flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=search] {
|
||||||
|
width: auto;
|
||||||
|
margin: 0 0 0 1rem;
|
||||||
|
background-color: var(--color-light-gray);
|
||||||
|
}
|
||||||
|
}
|
@ -76,5 +76,6 @@ img {
|
|||||||
@import 'components/partner';
|
@import 'components/partner';
|
||||||
@import 'components/skip-link';
|
@import 'components/skip-link';
|
||||||
@import 'components/video-player';
|
@import 'components/video-player';
|
||||||
|
@import 'components/search-bar';
|
||||||
@import 'components/tags';
|
@import 'components/tags';
|
||||||
@import 'utilities/responsive';
|
@import 'utilities/responsive';
|
||||||
|
Loading…
Reference in New Issue
Block a user