See #906 - adds more intuitive settings toggling.

Why:

* Simply reuses gear icon for hiding settings form.

diff --git a/docs/css/home.css b/docs/css/home.css
index 5acff71..4e943ba 100644 (file)
--- a/docs/css/home.css
+++ b/docs/css/home.css
@@ -114,28 +114,41 @@ noscript {
   margin-left: 0.5rem;
 }
 
-.settings:not(.settings--collapsed) {
-  border-top: 3px solid hsl(0, 0%, 90%);
-  margin-top: 2rem;
-  padding: 1rem 0 0;
+.settings {
+  border-top: 3px solid transparent;
+  cursor: pointer;
+  position: relative;
 }
 
-.settings--collapsed {
-  cursor: pointer;
-  height: 1rem;
+.settings:not(.settings--collapsed) {
+  border-top-color: hsl(0, 0%, 90%);
+  margin-top: 2.5rem;
+  padding-top: 0.5rem;
 }
 
-.settings--collapsed:before {
-  background: url(../img/gear.svg) center center no-repeat;
-  bottom: 1rem;
+.settings:before {
+  background: url(../img/gear-highlighted.svg) center center no-repeat;
   content: " ";
   display: block;
   height: 1.5rem;
-  right: 1rem;
+  right: 0;
   position: absolute;
+  top: -1rem;
   width: 1.5rem;
 }
 
+.settings:not(.settings--collapsed):before {
+  top: -2.5rem;
+}
+
+.settings--collapsed {
+  height: 0;
+}
+
+.settings--collapsed:before {
+  background-image: url(../img/gear.svg);
+}
+
 .settings--collapsed > .settings__group {
   display: none;
 }

diff --git a/docs/img/gear-highlighted.svg b/docs/img/gear-highlighted.svg
new file mode 100644 (file)
index 0000000..bfd7cf6
--- /dev/null
+++ b/docs/img/gear-highlighted.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g >
+<path fill="hsl(198, 76%, 52%)" d="M23,14v-4h-3.262c-0.189-0.732-0.477-1.422-0.852-2.058l2.306-2.306l-2.828-2.828l-2.306,2.306
+C15.422,4.739,14.732,4.451,14,4.262V1h-4v3.262C9.268,4.451,8.578,4.739,7.942,5.114L5.636,2.808L2.808,5.636l2.306,2.306
+C4.739,8.578,4.451,9.268,4.262,10H1v4h3.262c0.189,0.732,0.477,1.422,0.852,2.058l-2.306,2.306l2.828,2.828l2.306-2.306
+c0.635,0.375,1.326,0.663,2.058,0.852V23h4v-3.262c0.732-0.189,1.422-0.477,2.058-0.852l2.306,2.306l2.828-2.828l-2.306-2.306
+c0.375-0.635,0.663-1.326,0.852-2.058H23z M12,15c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z"/>
+</g></svg>

diff --git a/docs/js/settings.js b/docs/js/settings.js
index ef46dfe..cb9b6f8 100644 (file)
--- a/docs/js/settings.js
+++ b/docs/js/settings.js
@@ -4,13 +4,9 @@
 
   function show(settingsForm) {
     return function (event) {
-      if (event.target.classList.contains('js-settings-reset')) {
-        return
-      }
-
-      if (settingsForm.classList.contains('settings--collapsed')) {
+      if (event.target.classList.contains('js-settings')) {
         event.preventDefault()
-        settingsForm.classList.remove('settings--collapsed')
+        settingsForm.classList.toggle('settings--collapsed')
       }
     }
   }