Adds back button

Vizzuality · Jul 18, 2012 · 328135a · 328135a
1 parent e0cb08b
commit 328135a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 19 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/index.html b/index.html
@@ -32,22 +32,6 @@ <h1><a href="#" data-click="welcome">Explorer</a></h1>
                   </div>
 
                   <ul class="filters">
-                    <!--<li>
-                    <a href="#" data-toggle="filter">Iati</a>
-                    <div class="filter iati">
-                      <div class="content cf">
-                        <ul class="symbols">
-                          <li><div class="icon iati"></div></li>
-                        </ul>
-                        <div class="legend">
-                          <h3><a href="http://www.openaidregister.org/organizations/104/projects.xml">DOWNLOAD (IATI)</a></h3>
-                          <p>Powered by <a href="http://www.openaidregister.org/">OpenAidRegister</a></p>
-                        </div>
-                      </div>
-                      <div class="t"></div>
-                      <div class="b"></div>
-                    </div>
-                    </li>-->
 
                     <li><a href="#" data-toggle="filter">View</a>
 
@@ -97,7 +81,9 @@ <h3 class="topic">By topic</h3>
                     </li>
                   </ul>
                 </div>
+
               </div>
+                <a href="#" class="back toggle">Back</a>
               <div class="shadow"></div>
             </div>
 

diff --git a/js/app.js b/js/app.js
@@ -520,7 +520,7 @@ $(function () {
     Aside = (function() {
       var
       $el     = $(".aside"),
-      $toggle = $(".aside a.toggle"),
+      $toggle = $(".nav .toggle, .aside a.toggle"),
       mode    = 0; // 0 = project; 1 = search
 
       (function() {
@@ -560,6 +560,12 @@ $(function () {
           $el.addClass('search');
         }
 
+        $(".nav .back").fadeIn(250);
+
+        if ($(window).width() < 1200) {
+          $(".nav .options").animate({ left:"-80px" }, 250);
+        }
+
         $el.find("ul.data li").css({opacity:0, marginLeft:150});
 
         $("#map").animate({ right: '352px' }, 250);
@@ -585,6 +591,12 @@ $(function () {
       _hide = function(callback) {
         $("#map").animate({ right: '0' }, 250);
 
+        $(".nav .back").fadeOut(250);
+
+        if ($(".nav .options").position().left > 0 ) {
+          $(".nav .options").animate({ left:"0" }, 250);
+        }
+
         $el.animate({ right:'-330px' }, 250, function() {
           $el.find("p").hide();
 

diff --git a/scss/style.scss b/scss/style.scss
@@ -413,11 +413,25 @@ h4 { font-size: 11px; font-weight:bold; }
   h1 { position:relative; top: 10px; float:left; }
   h1 a { color: $title_blue; }
 
+  .back {
+    display:none;
+
+    position:absolute;
+    right:30px;
+    top: 25px;
+    font: 19px 'News Cycle', sans-serif;
+    color: black;
+    padding: 0 0 0 10px;
+    text-transform: uppercase;
+    background: url(../img/icons/arrows.png) no-repeat left -17px;
+  }
+
   .shadow { position:absolute; left:0; bottom: -12px; background:url(../img/backgrounds/bkg_navigation_shadow.png) repeat-x; width:100%; height:12px; z-index:10;}
 
   ul.filters { // Filters' menu
     position:absolute;
     right:0;
+    top: -5px;
 
     &.disabled > li > a { color:#ccc; background:url(../img/icons/arrows.png) no-repeat right -78px; }
 
@@ -452,7 +466,7 @@ h4 { font-size: 11px; font-weight:bold; }
 .nav .input_field {
   display:none;
   position:absolute;
-  top: -5px;
+  top: -10px;
   right:0;
 
   input[type="text"] {