From 21b73eef1988bf34f0320eaeaa95104e74c8d8b4 Mon Sep 17 00:00:00 2001
From: Eragon <eragon@eragon.re>
Date: Tue, 5 Sep 2023 21:46:57 +0200
Subject: [PATCH] search: nicer layout on search page

---
 app/static/css/search.css   | 23 +++++++++++--------
 app/static/less/search.less | 17 ++++++++------
 app/templates/search.html   | 46 ++++++++++++++++++-------------------
 3 files changed, 46 insertions(+), 40 deletions(-)

diff --git a/app/static/css/search.css b/app/static/css/search.css
index 4b1aba9..4238f9e 100644
--- a/app/static/css/search.css
+++ b/app/static/css/search.css
@@ -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;
 }
\ No newline at end of file
diff --git a/app/static/less/search.less b/app/static/less/search.less
index 7bc7cde..2205df6 100644
--- a/app/static/less/search.less
+++ b/app/static/less/search.less
@@ -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;
+	}
 }
diff --git a/app/templates/search.html b/app/templates/search.html
index 0d26d77..dfeff73 100644
--- a/app/templates/search.html
+++ b/app/templates/search.html
@@ -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 %}