Animating Settings view

Author: arnau

index.html

@@ -13,6 +13,9 @@
 
   <section role="region" id="list-view">
     <header>
+      <menu type="toolbar">
+        <button id="settings-btn"><span class="icon icon-settings">settings</span></button>
+      </menu>
       <h1>demo Store</h1>
     </header>
     <article id="appList" data-type="list">
@@ -37,14 +40,16 @@ <h1>demo Store</h1>
     </article>
   </section>
 
-  <section role="region" id="settings-view">
+  <section role="region" id="settings-view" class="move-down skin-organic">
     <header>
+    <button id="close-btn"><span class="icon icon-close">close</span></button>
       <h1>Settings</h1>
     </header>
     <article>
       <!-- Content -->
     </article>
   </section>
 
+  <script src="js/app.js"></script>
 </body>
 </html>

js/app.js

@@ -0,0 +1,12 @@
+//Show / Hide Settings view
+var btnSettings = document.querySelector("#settings-btn");
+var viewSettings = document.querySelector("#settings-view");
+btnSettings.addEventListener ('click', function () {
+    viewSettings.classList.remove('move-down');
+    viewSettings.classList.add('move-up');
+});
+var btnCloseSettings = document.querySelector("#close-btn");
+btnCloseSettings.addEventListener ('click', function () {
+    viewSettings.classList.remove('move-up');
+    viewSettings.classList.add('move-down');
+});

style/app.css

@@ -20,10 +20,23 @@ section[role="region"] {
   background: #fff;
 }
 
-#settings-view{
+#settings-view {
+  z-index: 10;
+}
+
+.move-down {
   transform: translateY(100%);
+	transition: all 0.2s;
 }
 
+.move-up {
+	transform: translateY(0);
+	transition: all 0.2s;
+}
+
+section[role="region"] > header:first-child .icon.icon-settings {
+  background-image: url(images/settings.png);
+}
 
 [data-type="list"] li > a aside img {
   height: 4rem;