Commit f500d2cb authored by Konrad Mohrfeldt's avatar Konrad Mohrfeldt

properly integrate new search into menu and page. refs #216

parent 780c0535
{% extends 'core/_menu.html' %}
{% block menu_items %}
<li>
{% include 'stadt/_search.html' %}
</li>
<li>
{% include 'core/menu/_menu_groups.html' %}
</li>
......@@ -18,4 +15,11 @@
<li>
{% include 'gestalten/_menu.html' %}
</li>
<!--
the first menu opened on mobile depends on dom order,
so search comes last but is ordered last
-->
<li style="order: -1">
{% include 'stadt/_search.html' %}
</li>
{% endblock %}
<form class="form-inline" action="{% url 'search' %}">
<input type="search" name="q" class="form-control" placeholder="Suche" value="{{ request.GET.q }}"></input>
<button class="btn btn-default">
<input type="checkbox" id="menu-search" class="dropdown-state" data-search-state data-menu-group="main">
<label for="menu-search" class="nav-menu-item nav-menu-item-square nav-state-toggle"
aria-label="Zeige Suche an" tabindex="0"
data-component="openable" data-openable-target="#menu-search-dropdown">
<span class="nav-tab-icon">
<i class="sg sg-search"></i>
</button>
</form>
</span>
<span>
<i class="sg sg-search"></i>
</span>
</label>
<div class="dock dock-screen dock-fullwidth dock-light dock-menu" id="menu-search-dropdown" data-dropdown>
<div class="dock-inner">
<span class="dock-decoration"></span>
<div class="dock-content">
<div class="dock-content-inner">
<div class="container">
<form class="form-search" action="{% url 'search' %}">
<label class="form-search-wrap">
<span class="sr-only">Suche</span>
<input type="search" name="q" class="form-control form-control-search"
placeholder="Deine Suchbegriffe…" data-search-input>
</label>
<button class="btn btn-primary">
<span class="btn-label">Suchen</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
......@@ -6,6 +6,17 @@
{% endblock %}
{% block content %}
<form class="form-search" action="{% url 'search' %}">
<label class="form-search-wrap">
<span class="sr-only">Suche</span>
<input type="search" name="q" class="form-control" placeholder="Suche"
value="{{ request.GET.q }}" autofocus>
</label>
<button class="btn btn-primary">
Suchen
</button>
</form>
<div class="content-list">
{% if object_list %}
<ol class="content-preview-list">
......@@ -17,7 +28,14 @@
</ol>
{% pagination 'Weitere Beiträge' %}
{% else %}
<p>Nichts gefunden.</p>
<div class="alert alert-flex alert-default">
<div class="alert-image">
<i class="fa fa-3x fa-meh-o"></i>
</div>
<div>
<p>Leider haben wir keine passenden Beiträge für deine Suchanfrage gefunden.</p>
</div>
</div>
{% endif %}
</div>
{% endblock %}
......@@ -14,6 +14,44 @@
}
}
.form-search {
display: flex;
align-items: center;
&:not(:only-child) {
margin-bottom: 4rem;
}
> :first-child {
width: 100%;
flex: 1;
min-width: 0;
margin: 0 1rem 0 0;
}
.form-control {
border-width: 0 0 1px 0;
font-size: 2rem;
}
.btn {
border-radius: 500px;
padding-left: 2.5rem;
padding-right: 2.5rem;
min-width: 160px;
.on-handhelds({
min-width: 0;
})
}
// a little hack for auto-generated search fields
// that create a dedicated label for the input field
label[for] {
&:extend(.sr-only);
}
}
.input-group-addon {
border-width: 2@input-border-width;
}
......
......@@ -77,6 +77,11 @@
}
}
.nav-menu-item-square {
width: @nav-height;
justify-content: center;
}
.nav-menu-item-active {
box-shadow: @gray-light -.5rem 0 0 0 inset;
}
......
......@@ -5,7 +5,25 @@ import { fromPairs, mapValues, includes } from 'lodash'
const menuGroupAttr = attr('data-menu-group')
const body = $('body')
function createSearch (el) {
const searchState = $('[data-search-state]', el)
const searchInput = $('[data-search-input]', el)
const stateListener = on(searchState, 'change', () => {
if (searchState.checked) {
searchInput.focus()
}
})
return {
destroy () {
stateListener.destroy()
}
}
}
export default el => {
const search = createSearch(el)
const switchState = $('[data-menu-switch]', el)
const firstSubMenu = menuGroupAttr.$(el)
const states = fromPairs(menuGroupAttr.$$(el).map(i => [i.id, i]))
......@@ -31,6 +49,7 @@ export default el => {
remove () {
keydownListener.destroy()
switchListener.destroy()
search.destroy()
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment