Permalink
Browse files

Animating Settings view

  • Loading branch information...
1 parent 3b8e189 commit ab71c01dd1b9d372d00d9c1d0019f5329230278b arnau committed Feb 12, 2013
Showing with 32 additions and 2 deletions.
  1. +6 −1 index.html
  2. +12 −0 js/app.js
  3. +14 −1 style/app.css
  4. BIN style/images/settings.png
View
@@ -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 @@
</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>
View
@@ -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');
+});
View
@@ -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;
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ab71c01

Please sign in to comment.