include search form in navbar dropdown

This commit is contained in:
Changaco 2016-03-01 16:32:23 +01:00
parent acad701b64
commit 22e6998479
8 changed files with 42 additions and 16 deletions

View File

@ -36,6 +36,13 @@ Liberapay.init = function() {
});
$('.navbar .dropdown-hover').removeClass('dropdown-hover');
$('.dropdown-toggle-form').click(function() {
var $this = $(this);
setTimeout(function() {
$this.siblings('.dropdown-menu').find('input').eq(0).focus();
}, 10);
});
};
Liberapay.error = function(jqXHR, textStatus, errorThrown) {

View File

@ -54,6 +54,9 @@
& > .level2 > a {
padding-left: 30px;
}
.form-group {
margin: 0 10px;
}
}
.dropdown-hover .dropdown-menu {
border-top-left-radius: 0;

View File

@ -20,6 +20,7 @@
</script>
</head>
% from 'templates/nav.html' import icon_span, nav, nav_about, nav_explore with context
% from 'templates/search.html' import search_form with context
<body>
<div id="wrapper">
@ -37,6 +38,9 @@
}),
('/search', _('Search'), {
'icon': 'glyphicon glyphicon-search',
'form': True,
'role': 'search',
'subnav': search_form(),
}),
('/about/', _('About'), {
'icon': 'glyphicon glyphicon-question-sign',

View File

@ -11,14 +11,18 @@
% set icon = icon_span(icon) if icon else ''
<li{% if slug.strip('/') == current %} class="active"{% endif %}>
% if options['subnav']
% set button_extra_cls = 'dropdown-toggle-form' if options['form'] else ''
<div class="dropdown dropdown-hover">
<button class="dropdown-toggle navbar-btn" type="button"
<button class="dropdown-toggle navbar-btn {{ button_extra_cls }}"
data-toggle="dropdown" aria-expanded="true">
{{ icon }}
<span>{{ item[1] }}</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">{{ options['subnav'] }}</ul>
% if options['role']
<div class="dropdown-menu" role="{{ options['role'] }}">{{ options['subnav'] }}</div>
% else
<ul class="dropdown-menu" role="menu">{{ options['subnav'] }}</ul>
% endif
</div>
% else
<a href="{{ base }}{{ slug }}">{{ icon }} {{ item[1] }}</a>

View File

@ -1,11 +0,0 @@
<form action="/search" method="get">
<div class="form-group">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="{{ _('Search Liberapay') }}"
value="{{ query or '' }}" {{ 'autofocus' if request.path.raw.startswith('/search') else '' }} />
<div class="input-group-btn">
<button class="btn btn-default">{{ _("Go") }}</button>
</div>
</div>
</div>
</form>

16
templates/search.html Normal file
View File

@ -0,0 +1,16 @@
% macro search_form(autofocus=False)
<form action="/search" class="search" method="get">
<div class="form-group">
<div class="input-group">
<input type="text" name="q" class="form-control"
style="width: 250px;"
placeholder="{{ _('Search Liberapay') }}"
value="{{ query or '' }}"
{{ 'autofocus' if autofocus else '' }} />
<div class="input-group-btn">
<button class="btn btn-default">{{ _("Go") }}</button>
</div>
</div>
</div>
</form>
% endmacro

View File

@ -14,12 +14,14 @@ top_communities = query_cache.all("""
title = _("Explore")
[-----------------------------]
% from 'templates/search.html' import search_form with context
% extends "templates/explore.html"
% block content
<p>{{ _("Whose work do you appreciate? See if they're on Liberapay:") }}</p>
% include "templates/search-box.html"
{{ search_form() }}
<p>{{ _("You can also pledge to people who haven't joined Liberapay yet:") }}</p>
% include "templates/jump.html"

View File

@ -72,6 +72,7 @@ if query:
[---] text/html
% extends "templates/base.html"
% from 'templates/avatar-url.html' import avatar_url, avatar_img with context
% from 'templates/search.html' import search_form with context
% block content
% set usernames = results.get('usernames')
@ -84,7 +85,7 @@ if query:
) }}</p>
% endif
% include "templates/search-box.html"
{{ search_form(autofocus=True) }}
<div class="row">
% if usernames