Implement responsive design from #77

zooniverse · Feb 3, 2015 · b7604b9 · b7604b9
1 parent 10c9799
commit b7604b9
Show file tree

Hide file tree

Showing 21 changed files with 397 additions and 106 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@ node_modules
 public/mockdata.json
 .DS_Store
 *.csv
-public/tiles
+public/tiles
+npm-debug.log
diff --git a/app/controllers/navigation.coffee b/app/controllers/navigation.coffee
@@ -2,7 +2,27 @@ template = require 'views/navigation'
 
 class Navigation
   constructor: ->
-    @el = $('<nav></nav>')
-    @el. append template
+    @el = $('<div id="navigation"></nav>')
+    @el.append template
+
+    @nav = @el.find('nav')
+    @navButton = @el.find('.nav-button')
+
+    @navButton.on 'click', @onNavButtonClick
+
+    addEventListener('hashchange', @onHashchange, false)
+    @onHashchange()
+
+  onHashchange: (e) =>
+    @el.find("a[href='#{location.hash}']")
+      .parent().addClass('active')
+      .siblings().removeClass('active')
+
+    @nav.slideUp('fast')
+    @navButton.removeClass('open')
+
+  onNavButtonClick: (e) =>
+    @navButton.toggleClass('open')
+    @nav.slideToggle('fast')
 
 module.exports = Navigation
diff --git a/app/views/image_changer.eco b/app/views/image_changer.eco
@@ -1,11 +1,11 @@
 <div class="images">
-  <% for src, i in @sources: %>
+  <% for src, i in @sources when src: %>
     <figure><img src="<%= src %>" /></figure>
   <% end %>
 </div>
 
 <div class="toggles">
-  <% for src, i in @sources: %>
+  <% for src, i in @sources when src: %>
     <button name="toggle" value="<%= i %>"><%= i + 1 %></button>
   <% end %>
 </div>
diff --git a/app/views/navigation.eco b/app/views/navigation.eco
@@ -1,11 +1,21 @@
 <% translate = require 't7e' %>
 
-<ul>
-  <li><%- translate 'a', 'navigation.home', href: '#/home' %></li>
-  <li><%- translate 'a', 'navigation.about', href: '#/about' %></li>
-  <li><%- translate 'a', 'navigation.classify', href: '#/classify' %></li>
-  <li><%- translate 'a', 'navigation.profile', href: '#/profile' %></li>
-  <li><%- translate 'a', 'navigation.discuss', href: 'http://talk.snapshotserengeti.org/' %></li>
-  <li><%- translate 'a', 'navigation.blog', href: 'http://blog.snapshotserengeti.org/' %></li>
-  <li><%- translate 'a', 'navigation.authors', href: '#/authors' %></li>
-</ul>
+<h1>
+  <a href="/">
+    <img class="mobile-wordmark" src="images/wordmark-stacked.svg" alt="Snapshot Serengeti" />
+    <img class="desktop-wordmark" src="images/wordmark.png" alt="Snapshot Serengeti" />
+  </a>
+  <button class="nav-button"></button>
+</h1>
+
+<nav>
+  <ul>
+    <li><%- translate 'a', 'navigation.home', href: '#/home' %></li>
+    <li><%- translate 'a', 'navigation.about', href: '#/about' %></li>
+    <li><%- translate 'a', 'navigation.classify', href: '#/classify' %></li>
+    <li><%- translate 'a', 'navigation.profile', href: '#/profile' %></li>
+    <li><%- translate 'a', 'navigation.discuss', href: 'http://talk.snapshotserengeti.org/' %></li>
+    <li><%- translate 'a', 'navigation.blog', href: 'http://blog.snapshotserengeti.org/' %></li>
+    <li><%- translate 'a', 'navigation.authors', href: '#/authors' %></li>
+  </ul>
+</nav>
diff --git a/css/about_page.styl b/css/about_page.styl
@@ -165,3 +165,30 @@
     }
   }
 }
+
+@media screen and (max-width: 1200px) {
+  .about-page {
+    padding: 0 10px 0 100px;
+    .column {
+      &.content {
+        width: 100%;
+      }
+      &.sidebar {
+        width: 100%;
+      }
+    }
+    > section .column {
+      width: 100%;
+      + .column {
+        padding-left: 0px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .about-page .member.organization .description {
+    margin-left: 0px;
+  }
+}
+
diff --git a/css/animal_details.styl b/css/animal_details.styl
@@ -436,3 +436,16 @@
     text-align: center;
   }
 }
+
+@media screen and (max-width: 1000px) {
+  .animal-details {
+    font-size: 12px;
+
+    .options .group.count label > .label {
+      margin-bottom: 2px;
+    }
+    .image-changer .images figure {
+      height: auto;
+    }
+  }
+}
diff --git a/css/animal_selector.styl b/css/animal_selector.styl
@@ -12,7 +12,7 @@
   position: relative;
   -webkit-tap-highlight-color: transparent;
   transition: opacity 0.5s ease-in-out;
-  width: 405px;
+  max-width: 405px;
 
   .general-filters {
     background: rgba($black, 0.33);
@@ -137,8 +137,7 @@
       box-sizing: border-box;
       float: left;
       margin-left: 7px;
-      width: 71px;
-
+      width: 70px;
       [data-language="pl_pl"] &,
       [data-language="fi_fi"] & {
         font-size: 13px;
@@ -158,7 +157,6 @@
         overflow: hidden;
         padding: 0;
         position: relative;
-        text-overflow: ellipsis;
         white-space: nowrap;
         width: 100%;
       }
@@ -175,6 +173,7 @@
         position: absolute;
         width: 100%;
         z-index: 1;
+        overflow: scroll;
 
         &.hidden {
           display: none;
@@ -288,6 +287,7 @@
     background: rgba($black, 0.33);
     border-radius: 3px;
     box-shadow: 0 2px 3px rgba($black, 0.5) inset;
+    overflow: auto;
 
     .items {
       clearfix();
@@ -628,3 +628,29 @@
     pointer-events: none;
   }
 }
+
+@media screen and (max-width: 1000px) {
+  .animal-selector {
+    float: none;
+    margin: 45px auto;
+    max-width: 580px;           // match animal selector
+
+    .selection-area .items {
+      &[data-items="lots"] [data-animal] {
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        whitespace: no-wrap;
+      }
+    }
+
+    .characteristic-filters .filter-menu {
+      width: 100%;
+      margin-left: 0;
+    }
+
+    .aux button[name='start-tutorial'] {
+      display: none;
+    }
+  }
+}
diff --git a/css/classifier.styl b/css/classifier.styl
@@ -1,5 +1,11 @@
 .classifier {
   clearfix();
   margin: 0 auto;
-  width: 1000px;
+  max-width: 1000px;
 }
+
+@media screen and (max-width: 1000px) {
+  .classifier {
+    padding: 5px;
+  }
+}
diff --git a/css/content_page.styl b/css/content_page.styl
@@ -7,5 +7,5 @@
   margin: 0 auto;
   padding: 33px 50px;
   position: relative;
-  width: 1000px;
+  max-width: 1000px;
 }
diff --git a/css/home_page.styl b/css/home_page.styl
@@ -2,15 +2,15 @@
   clearfix();
   color: $white;
   font-size: 14px;
-  margin: 0 auto;
+  margin: 30px auto;
   text-shadow: 0 1px 1px $black;
-  width: 1000px;
+  max-width: 1000px;
 
   .recents {
     float: left;
     position: relative
     text-align: center;
-    width: 600px;
+    max-width: 600px;
 
     .images {
       margin-bottom: 1em;
@@ -28,7 +28,7 @@
         position: absolute;
         top: 0;
         transition: transform 0.5s ease-out;
-        width: 600px;
+        max-width: 600px;
 
         &.active {
           z-index: 1;
@@ -54,7 +54,7 @@
 
         img {
           display: block;
-          max-width: 100%;
+          width: 100%;
         }
       }
     }
@@ -138,4 +138,26 @@
   }
 }
 
+@media screen and (max-width: 1200px) {
+  .home-page {
+    .recents {
+      float: none;
+      margin: 0 auto;
+      .image-changer {
+        box-sizing: border-box;
+        padding: 30px;
+      }
+    }
+    .introduction {
+      width: 100%;
+      float: none;
+      margin: 0 auto;
+      max-width: 600px;
+      padding: 0 10px;
+      box-sizing: border-box;
+    }
+  }
+}
+
+
 @import "./home_page_banners"
diff --git a/css/index.styl b/css/index.styl
@@ -25,3 +25,4 @@
 @import 'profile';
 @import 'explore';
 @import 'map';
+@import 'navigation'
diff --git a/css/language_picker.styl b/css/language_picker.styl
@@ -1,6 +1,7 @@
 .language-picker
-  float: right
-  margin: 10px
+  position: absolute
+  left: 50%
+  margin-left: -445px // mimick positioning of zooniverse/show-top-bar
 
   select
     appearance: none
@@ -12,4 +13,9 @@
 
     option
       color: $white
-      background: $black
+      background: $black
+
+@media screen and (max-width: 1050px)
+  .language-picker
+    margin-left: 0
+    left: 75px