pages: improvements on the module selection

Signed-off-by: Alban Gruin <alban at pa1ch dot fr>

2 files changed, 18 insertions, 6 deletions

diff --git a/src/pages.ml b/src/pages.ml
index aa4b369..a1bbc1e 100644
--- a/src/pages.ml
+++ b/src/pages.ml
@@ -51,7 +51,7 @@ let main = common {|
         <form action="/filter" method="get">
           <label for="id_module">ID du module</label>
           <input type="text" name="module" id="id_module" required />
-          <input type="submit" value="Générer un ICS" />
+          <input type="submit" value="Filtrer par groupes" />
         </form>
       </section>
       <section>
@@ -108,14 +108,22 @@ let link lnk =
 let select module_id groups =
   let options =
     Seq.map (fun group -> "          <option>" ^ escape group ^ "</option>") groups
-    |> List.of_seq
-    |> String.concat "\n" in
+    |> List.of_seq in
+  let num = string_of_int (List.length options) in
+  let options = String.concat "\n" options in
   common @@ {|
+      <h3>Filtrer par groupe</h3>
+      <p>
+        Sélectionnez les groupes que vous souhaitez voir dans votre emploi
+        du temps.  N'en sélectionnez aucun si vous les voulez tous.
+      </p>
       <form method="post" action="/lnk">
-        <select name="groups" multiple>
+        <label for="groups">Liste des groupes</label>
+        <select id="groups" name="groups" multiple="multiple" size="|} ^ num ^ {|">
 |} ^ options ^ {|
         </select>
-        <input type="hidden" name="module" value="|} ^ module_id ^ {|" />
-        <input type="submit" text="Valider" />
+        <input type="hidden" name="module" value="|} ^ escape module_id ^ {|" />
+        <input type="reset" value="Effacer la sélection" />
+        <input type="submit" value="Générer un ICS" />
       </form>
 |}
diff --git a/static/css/style.css b/static/css/style.css
index 2ff6c67..82297f4 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -27,6 +27,10 @@ h1 a {
     color: #31363b;
 }
 
+select {
+    width: 100%;
+}
+
 @media print {
     body, article {
         max-width: none;