From 25d7fdfcaf61af8278e19d801d6ab146c88c28ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Marchal?= <me@theomarchal.com>
Date: Fri, 12 Feb 2021 11:13:34 +0100
Subject: [PATCH] Fix gallery / table icons position

fixes #10
---
 explorer.html   | 10 +++++-----
 styles/main.css |  8 ++++++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/explorer.html b/explorer.html
index c290416..78e5d75 100644
--- a/explorer.html
+++ b/explorer.html
@@ -41,11 +41,7 @@
         Le symbole &#8252;&#xFE0E; dans la colonne aide signifie que nous avons besoin d'aide pour obtenir une photo et que <a href="informations.html">vous pouvez contribuer</a>.<br>
         Une fois cette liste générée, la configuration sera repliée, il suffit alors de cliquer sur la &#x25B6;&#xFE0E; flèche pour la faire réapparaître.</p>
 
-        <div class="style-container">
-            <h2 class="active">Configuration&nbsp;</h2>
-            <img class="style-select frame" src="styles/icons/frame.svg">
-            <img class="style-select list" src="styles/icons/list.svg">
-        </div>
+        <h2 class="active">Configuration&nbsp;</h2>
         <form name="explorer" action="" onsubmit="onSubmit();">
             <div class="container">
                 <div class="box photos active">
@@ -189,6 +185,10 @@
             <input type="submit" value="Générer">
         </form>
         <p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p>
+        <div id="style-container">
+            <img class="style-select frame" src="styles/icons/frame.svg">
+            <img class="style-select list" src="styles/icons/list.svg">
+        </div>
         <div id="gallery"></div>
         <table>
             <thead>
diff --git a/styles/main.css b/styles/main.css
index 9d57f45..71703ea 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -390,9 +390,14 @@ article.explorer h2.active::after {
     transform:rotate(0);
 }
 
-article.explorer img.style-select {
+article.explorer #style-container {
     display:block;
     text-align:right;
+    margin-bottom:0;
+}
+
+article.explorer img.style-select {
+    display:inline;
     max-height:2rem;
     margin:0;
     margin-bottom:0.25rem;
@@ -491,7 +496,6 @@ article.explorer table {
     border-collapse:separate;
     border-spacing:0;
     width:100%;
-    margin-top:1rem;
     margin-bottom:1rem;
     overflow-x:auto;
 }