search: search page template

app/forms/search.py

@@ -9,6 +9,7 @@ from app.models.forum import Forum
 class SearchForm(FlaskForm):
     q = StringField('Rechercher', validators=[InputRequired()])
 
+
 class AdvancedSearchForm(SearchForm):
     def generate_choices():
         choices = {'Forum': [
@@ -39,11 +40,16 @@ class AdvancedSearchForm(SearchForm):
             choices['Forum'].append('Administration')
         # Forum reserved to members of CreativeCalc
         f = Forum.query.filter_by(url='/creativecalc').first()
-        if (current_user.is_athenticated and current_user.can_access_forum(f)):
+        if (current_user.is_authenticated and current_user.can_access_forum(f)):
             choices['Forum'].append('CreativeCalc')
         return choices
 
-    sortBy = SelectField('Trier', choices={'date': ['croissant', 'décroissant'],'alphabétique': ['croissant', 'décroissant']}, validators=[Optional()])
+    sortBy = SelectField('Trier',
+                         choices={'date': ['Date croissante',
+                                           'Date décroissante'],
+                                  'alphabétique': ['Alphabétique croissant',
+                                                    'Alphabétique décroissant']},
+                         validators=[Optional()])
     date = DateField('Date de publication', validators=[Optional()])
     scope = SelectMultipleField('', choices=generate_choices, validators=[Optional()])
     submit = SubmitField('Affiner la recherche')

app/static/css/search.css

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

app/static/less/search.less

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

app/templates/search.html

@@ -3,19 +3,34 @@
 {% set tabtitle = "Recherche avancée" %}
 
 {% block content %}
-<section class="form">
+<section class="form search">
 	<h1>Recherche avancée</h1>
 
 	<form action="" method="get">
-		<div>
+		<div class="query">
 			{{ form.q.label }}
 			{{ form.q(value=request.args.get('q')) }}
 		</div>
-		<div>
+		<div class="date">
 			{{ form.date.label }}
-			{{ form.date }}
+			{{ form.date(value=request.args.get('date')) }}
 		</div>
-		<div>{{ form.submit(class_="bg-ok") }}</div>
+		<div class="sort">
+			{{ form.sortBy.label }}
+			{{ form.sortBy(value=request.args.get('sortBy')) }}
+		</div>
+		<div class="scope">
+			{{ form.scope.label }}
+			{{ form.scope(value=request.args.get('scope')) }}
+		</div>
+		<div class="submit">{{ form.submit(class_="bg-ok") }}</div>
 	</form>
 </section>
+<section class="search-results">
+	{% for i in results %}
+		<div>
+			{{ i }}
+		</div>
+	{% endfor %}
+</section>
 {% endblock %}

app/utils/render.py

@@ -19,6 +19,7 @@ def render(*args, styles=[], scripts=[], modules=[], **kwargs):
         'css/debugger.css',
         'css/programs.css',
         'css/editor.css',
+        'css/search.css',
     ]
     scripts_ = [
         'scripts/trigger_menu.js',