devs/PCv5
devs
/
PCv5
7
10
Fork 4
Code Issues 25 Pull Requests Releases Wiki Activity

search: nicer layout on search page

This commit is contained in:
Eragon 2023-09-05 21:46:57 +02:00
parent da037f677e
commit 21b73eef19
Signed by: Eragon
GPG Key ID: 087126EBFC725006
3 changed files with 46 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/static/css/search.css
View File

@ -1,38 +1,41 @@
section.form.search form {
.search-page > form {
display: grid;
grid-template-areas: 'search search submit''date sort scope''none none scope';
grid-template-areas: 'search search submit''date sort scope''results results scope';
grid-template-rows: 40% 40% 20%;
grid-template-rows: 5em 5em 100%;
}
section.form.search form div.query {
.search-page > form div.query {
grid-area: search;
}
section.form.search form div.submit {
.search-page > form div.submit {
grid-area: submit;
display: flex;
align-items: center;
width: 40%;
margin-left: 1em;
}
section.form.search form div.date {
.search-page > form div.date {
grid-area: date;
}
section.form.search form div.date input#date {
.search-page > form div.date input#date {
width: 80%;
}
section.form.search form div.sort {
.search-page > form div.sort {
grid-area: sort;
margin-left: 2em;
}
section.form.search form div.scope {
.search-page > form div.scope {
grid-area: scope;
width: 80%;
margin-left: 1em;
}
section.form.search form div.scope select {
.search-page > form div.scope select {
width: 100%;
height: 31rem;
overflow: auto;
}
section.search-results {
.search-page > form div.search-results {
grid-area: results;
width: 100%;
min-height: 50vh;
}

17
app/static/less/search.less
View File

@ -1,9 +1,9 @@
section.form.search form {
.search-page > form {
display: grid;
grid-template-areas:
'search search submit'
'date sort scope'
'none none scope';
'results results scope';
grid-template-rows: 40% 40% 20%;
grid-template-rows: 5em 5em 100%;
@ -38,11 +38,14 @@ section.form.search form {
& select {
width: 100%;
height: 31rem;
overflow: auto;
}
}
}
section.search-results {
width: 100%;
min-height: 50vh;
& div.search-results {
grid-area: results;
width: 100%;
min-height: 50vh;
}
}

46
app/templates/search.html
View File

@ -4,7 +4,7 @@
{% set tabtitle = "Recherche avancée" %}
{% block content %}
<section class="form search">
<section class="search-page">
<h1>Recherche avancée</h1>
<form action="{{ url_for('search') }}" method="get">
@ -13,6 +13,7 @@
{{ form.q.label }}
{{ form.q(value=request.args.get('q')) }}
</div>
<div class="submit">{{ form.submit(class_="bg-ok") }}</div>
<div class="date">
{{ form.date.label }}
{{ form.date(value=request.args.get('date')) }}
@ -25,29 +26,28 @@
{{ form.scope.label }}
{{ form.scope(value=request.args.get('scope')) }}
</div>
<div class="submit">{{ form.submit(class_="bg-ok") }}</div>
{{form.errors}}
<div class="search-results">
{{ widget_pagination.paginate(results, 'search', None, {
'q': request.args.get('q'),
'date': request.args.get('date'),
'sortBy': request.args.get('sortBy')}) }}
{% for i in results.items %}
<div>
{{ i.id }} {{ i.title }}<br>
{% if i.forum %}
<a href="{{ url_for('forum_topic', f=i.forum, page=(i , 'fin')) }}">{{ i.title }}</a>
{% elif i.thread %}
<a href="{{ url_for('redirect_post', postid=i.id) }}">{{ i.thread.owner_topic[0].title }}</a>
{% endif %}
{{ i.headline }}<br>
</div>
{% endfor %}
{{ widget_pagination.paginate(results, 'search', None, {
'q': request.args.get('q'),
'date': request.args.get('date'),
'sortBy': request.args.get('sortBy')}) }}
</div>
</form>
</section>
<section class="search-results">
{{ widget_pagination.paginate(results, 'search', None, {
'q': request.args.get('q'),
'date': request.args.get('date'),
'sortBy': request.args.get('sortBy')}) }}
{% for i in results.items %}
<div>
{{ i.id }} {{ i.title }}<br>
{% if i.forum %}
<a href="{{ url_for('forum_topic', f=i.forum, page=(i , 'fin')) }}">{{ i.title }}</a>
{% elif i.thread %}
<a href="{{ url_for('redirect_post', postid=i.id) }}">{{ i.thread.owner_topic[0].title }}</a>
{% endif %}
{{ i.headline }}<br>
</div>
{% endfor %}
{{ widget_pagination.paginate(results, 'search', None, {
'q': request.args.get('q'),
'date': request.args.get('date'),
'sortBy': request.args.get('sortBy')}) }}
</section>
{% endblock %}