Selected view in Explorer is now visible

fixes #6

explorer.html

@@ -136,8 +136,8 @@
         </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 list active" src="styles/icons/list.svg" alt="liste">
             <img class="style-select frame" src="styles/icons/frame.svg" alt="galerie">
-            <img class="style-select list" src="styles/icons/list.svg" alt="liste">
         </div>
         <div id="gallery">
             <div id="pagination"></div>

scripts/explorer.js

@@ -527,6 +527,8 @@ jQuery(document).ready(function($)
         {
             $("table").hide();
             $("#gallery").show();
+            $(".style-select.frame").addClass('active');
+            $(".style-select.list").removeClass('active');
             window.localStorage.setItem('explorer-view', 'gallery');
         }
 
@@ -534,6 +536,8 @@ jQuery(document).ready(function($)
         {
             $("#gallery").hide();
             $("table").show();
+            $(".style-select.frame").removeClass('active');
+            $(".style-select.list").addClass('active');
             window.localStorage.setItem('explorer-view', 'table');
         }
 
@@ -545,11 +549,11 @@ jQuery(document).ready(function($)
         {
             if (res)
             {
-            explorerView = window.localStorage.getItem('explorer-view');
-            if (explorerView == "gallery")
-                setGallery();
-            else if (explorerView == "table")
-                setTable();
+                explorerView = window.localStorage.getItem('explorer-view');
+                if (explorerView == "gallery")
+                    setGallery();
+                else if (explorerView == "table")
+                    setTable();
             }
         }
 

scripts/explorer_menu.js

@@ -340,12 +340,16 @@ function userActionHandle(availableOptions)
     {
         $("table").hide();
         $("#gallery").show();
+        $(".style-select.frame").addClass('active');
+        $(".style-select.list").removeClass('active');
         window.localStorage.setItem('explorer-view', 'gallery');
     });
     $(".style-select.list").click(function()
     {
         $("#gallery").hide();
         $("table").show();
+        $(".style-select.frame").removeClass('active');
+        $(".style-select.list").addClass('active');
         window.localStorage.setItem('explorer-view', 'table');
     });
 }

styles/main.css

@@ -511,9 +511,15 @@ article.explorer img.style-select {
     margin-bottom:0.25rem;
     margin-right:0.4rem;
     margin-left:0.4rem;
+    padding-bottom:6px;
     cursor:pointer;
 }
 
+article.explorer img.style-select.active {
+    border-bottom:2px solid black;
+    padding-bottom:4px;
+}
+
 article.explorer h3 {
     margin-bottom:0.3rem;
 }