all teh mobile things

app/assets/javascripts/application.js

@@ -40,6 +40,7 @@
 //= require ./src/Metamaps.Map
 //= require ./src/Metamaps.Account
 //= require ./src/Metamaps.Mapper
+//= require ./src/Metamaps.Mobile
 //= require ./src/Metamaps.Admin
 //= require ./src/Metamaps.Import
 //= require ./src/Metamaps.Header

app/assets/javascripts/src/Metamaps.Header.js

@@ -16,7 +16,7 @@ Metamaps.Header = {
   changeSection: function (signedIn, section, userAvatar, userName) {
     ReactDOM.render(
       React.createElement(Metamaps.ReactComponents.Header, { signedIn: signedIn, section: section, userAvatar: userAvatar, userName: userName }),
-      document.getElementById('exploreMapsHeader')
+      document.getElementById('headerMenuItems')
     );
   }
 }

app/assets/javascripts/src/Metamaps.Map.js

@@ -109,6 +109,9 @@ Metamaps.Map = {
 
       Metamaps.Realtime.startActiveMap()
       Metamaps.Loading.hide()
+      
+      // for mobile
+      $('#header_content').html(map.get('name'))
     }
 
     $.ajax({

app/assets/javascripts/src/Metamaps.Mobile.js

@@ -0,0 +1,24 @@
+/* global Metamaps, $ */
+
+Metamaps.Mobile = {
+  init: function () {
+    var self = Metamaps.Mobile
+    
+    $('#menu_icon').click(self.toggleMenu)
+    $('#mobile_menu li a').click(self.liClick)
+    $('#header_content').click(self.titleClick)
+  },
+  liClick: function () {
+    var self = Metamaps.Mobile
+    $('#header_content').html($(this).text())
+    self.toggleMenu()
+  },
+  toggleMenu: function () {
+    $('#mobile_menu').toggle()
+  },
+  titleClick: function () {
+    if (Metamaps.Active.Map) {
+      Metamaps.Map.InfoBox.open()
+    }
+  }
+}

app/assets/javascripts/src/Metamaps.Topic.js

@@ -84,6 +84,9 @@ Metamaps.Topic = {
       Metamaps.Filter.checkMetacodes()
       Metamaps.Filter.checkSynapses()
       Metamaps.Filter.checkMappers()
+      
+      // for mobile
+      $('#header_content').html(Metamaps.Active.Topic.get('name'))
     }
 
     $.ajax({

app/assets/stylesheets/application.css.erb

@@ -1578,7 +1578,7 @@ h3.filterBox {
 .mapContributors {
     position: relative;
     height: 30px;
-    margin: 9px 0px 9px 56px;
+    margin: 9px 0px 9px 44px;
     padding: 0;
     width: 64px;
 }

app/assets/stylesheets/clean.css.erb

@@ -27,6 +27,7 @@
 #yield {
   position: absolute;
   width: 100%;
+  height: 100%;
 }
 
 /*.animations {

app/assets/stylesheets/mobile.css.erb

@@ -0,0 +1,97 @@
+#mobile_header {
+  display: none;
+}
+
+/* Smartphones (portrait and landscape) ----------- */
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+  .upperLeftUI, .upperRightUI, .openCheatsheet, .mapInfoIcon, .uv-icon, .chat-box, #exploreMapsHeader {
+    display: none !important;
+  }
+  
+  #mobile_header {
+    display: block;
+  }
+  
+  .homeWrapper {
+    width: 96%;
+    padding: 0 2%;
+  }
+  .homeTitle {
+    text-align: left;
+  }
+  .homeIntro {
+    text-align: left;
+  }
+  .fullWidthWrapper.withVideo {
+    height: auto;
+  }
+  .homeVideo {
+    width: 100%;
+    height: auto;
+  }
+  .fullWidthWrapper.withPartners {
+    display: none;
+  }
+  .learnMoreCTA {
+    display: none !important;
+  }
+  
+  #yield {
+    margin-top: 50px;
+  }
+  
+  .wrapper div.mapInfoBox {
+    position: fixed;
+    top: 50px;
+    right: 0px;
+    bottom: auto;
+    width: 100%;
+    max-width: 360px;
+  }
+  
+  #wrapper .requestInvite {
+    width: 100%;
+    padding: 0;
+  }
+}
+
+#mobile_header {
+  height: 50px;
+  background: #EEE;
+  width: 100%;
+  box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
+  position: fixed;
+}
+
+#menu_icon {
+  width: 50px;
+  height: 50px;
+  border-right: 1px solid #DDD;
+  position: absolute;
+  background: #EEE url('<%= asset_path('menu-alt-256.png') %>') no-repeat center center;
+  background-size: 30px;
+}
+
+#header_content {
+  position: absolute;
+  width: 100%;
+  overflow-x: scroll;
+  padding-left: 60px;
+  font-size: 24px;
+  line-height: 50px;
+}
+
+#mobile_menu {
+ display: none;
+  background: #EEE;
+  position: fixed;
+  top: 50px;
+  border-top: 1px solid #DDD;
+  padding: 10px;
+  width: 200px;
+  box-shadow: 3px 3px 3px rgba(0,0,0,0.23), 3px 3px 3px rgba(0,0,0,0.16);
+}
+
+#mobile_menu li {
+  padding: 10px;
+}

app/views/layouts/_head.html.erb

@@ -12,7 +12,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title><%=h yield(:title) %></title>
+  <title><%= yield(:title) %></title>
   <%= csrf_meta_tags %>
   <meta name="viewport" content="width=device-width, user-scalable=no">
 

app/views/layouts/_mobilemenu.html.erb

@@ -0,0 +1,51 @@
+<div id="mobile_header">
+  <div id="header_content">
+    <%= yield(:mobile_title) %>
+  </div>
+  <div id="menu_icon"></div>
+</div>
+<div id="mobile_menu">
+  <ul>
+    <% if not current_user %>
+      <li>
+        <%= link_to "Home", root_path, :data => { :bypass => 'true'} %>
+      </li>
+    <% end %>
+    <% if current_user %>
+      <!-- we should add a page where they can create a new map -->
+      <li>
+        Signed in as: <%= current_user.name %>
+      </li>
+      <li>
+        <%= link_to "My Maps", explore_mine_path %>
+      </li>
+      <li>
+        <%= link_to "Shared With Me", explore_shared_path %>
+      </li>
+    <% end %>
+    <li>
+      <%= link_to "Recently Active", explore_active_path %>
+    </li>
+    <% if not current_user %>
+      <li>
+        <%= link_to "Featured Maps", explore_featured_path %>
+      </li>
+    <% end %>
+    <% if not current_user %>
+      <li>
+        <%= link_to "Request Invite", request_path, :data => { :bypass => 'true'} %>
+      </li>
+      <li>
+        <%= link_to "Login", new_user_session_path, :data => { :bypass => 'true'} %>
+      </li>
+    <% end %>
+    <% if current_user %>
+      <li>
+        <%= link_to "Account", edit_user_url(current_user), :data => { :bypass => 'true'} %>
+      </li>
+      <li>
+        <%= link_to "Sign Out", "/logout", id: "Logout", :data => { :bypass => 'true'} %>
+      </li>
+    <% end %>
+  </ul>
+</div>

app/views/layouts/application.html.erb

@@ -45,8 +45,14 @@
             <%= render :partial => 'layouts/lowermapelements' %>
 
             <div id="exploreMaps"></div>
-            <div id="exploreMapsHeader"></div>
+            <div id="exploreMapsHeader">
+              <div className="exploreMapsBar exploreElement">
+                <div id="headerMenuItems" className="exploreMapsMenu">
+                </div>
+              </div>
+            </div>
             <div id="infovis"></div>
+            <%= render :partial => 'layouts/mobilemenu' %>
             <div id="instructions">
               <div class="addTopic">
                 Double-click to<br>add a topic!

app/views/layouts/doorkeeper.html.erb

@@ -33,7 +33,14 @@
             <% end %>
             <%= render :partial => 'layouts/lowermapelements' %>
 
-            <div id="exploreMapsHeader"></div>
+            <div id="exploreMapsHeader">
+              <div className="exploreMapsBar exploreElement">
+                <div className="exploreMapsMenu">
+                  <div id="headerMenuItems" className="exploreMapsCenter">
+                  </div>
+                </div>
+              </div>
+            </div>
             <div id="loading"></div>
         </div>
 

app/views/main/home.html.erb

@@ -6,6 +6,7 @@
 %>  
  
 <% content_for :title, "Home | Metamaps" %> 
+<% content_for :mobile_title, "Home" %> 
 <div id="yield">
   <div class="homeWrapper homeText">
     <div class="homeTitle">Make Sense with Metamaps</div>

app/views/main/requestinvite.html.erb

@@ -4,7 +4,8 @@
   # Shows a form where people can request an invite
   #%>
 
-<% content_for :title, "Request Invite | Metamaps" %>   
+<% content_for :title, "Request Invite | Metamaps" %>
+<% content_for :mobile_title, "Request Invite" %>
   
 <div id="yield">
 <iframe class="requestInvite" src="https://docs.google.com/forms/d/1lWoKPFHErsDfV5l7-SvcHxwX3vDi9nNNVW0rFMgJwgg/viewform?embedded=true" width="700" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

app/views/maps/activemaps.html.erb

@@ -8,6 +8,7 @@
   Metamaps.Maps.Active = <%= @maps.to_json.html_safe %>;
   Metamaps.currentPage = "active";
   <% content_for :title, "Explore Active Maps | Metamaps" %>
+  <% content_for :mobile_title, "Recently Active" %>
 
   Metamaps.currentSection = "explore";
   Metamaps.GlobalUI.Search.open();

app/views/maps/featuredmaps.html.erb

@@ -8,6 +8,7 @@
   Metamaps.Maps.Featured = <%= @maps.to_json.html_safe %>;
   Metamaps.currentPage = "featured";
   <% content_for :title, "Explore Featured Maps | Metamaps" %>
+  <% content_for :mobile_title, "Featured Maps" %>
 
   Metamaps.currentSection = "explore";
   Metamaps.GlobalUI.Search.open();

app/views/maps/mymaps.html.erb

@@ -8,6 +8,7 @@
   Metamaps.Maps.Mine = <%= @maps.to_json.html_safe %>;
   Metamaps.currentPage = "mine";
   <% content_for :title, "Explore My Maps | Metamaps" %>
+  <% content_for :mobile_title, "My Maps" %>
 
   Metamaps.currentSection = "explore";
   Metamaps.GlobalUI.Search.open();

app/views/maps/sharedmaps.html.erb

@@ -8,6 +8,7 @@
   Metamaps.Maps.Shared = <%= @maps.to_json.html_safe %>;
   Metamaps.currentPage = "shared";
   <% content_for :title, "Explore Shared Maps | Metamaps" %>
+  <% content_for :mobile_title, "Shared With Me" %>
 
   Metamaps.currentSection = "explore";
   Metamaps.GlobalUI.Search.open();

app/views/maps/show.html.erb

@@ -5,6 +5,7 @@
 #%>
 
 <% content_for :title, @map.name + " | Metamaps" %>
+<% content_for :mobile_title, @map.name %>
 <script>
 	Metamaps.currentSection = "map";
 	Metamaps.currentPage = <%= @map.id.to_s %>;

app/views/maps/usermaps.html.erb

@@ -11,6 +11,7 @@
   };
   Metamaps.currentPage = "mapper";
   <% content_for :title, @user.name + " | Metamaps" %>
+  <% content_for :mobile_title, @user.name %>
 
   Metamaps.currentSection = "explore";
   Metamaps.GlobalUI.Search.open();

app/views/users/edit.html.erb

@@ -5,6 +5,7 @@
   #%>
   
 <% content_for :title, @user.name + "'s Settings | Metamaps" %> 
+<% content_for :mobile_title, "Account Settings" %>
 <div id="yield">
 <%= form_for @user, url: user_url, :html =>{ :multipart => true, :class => "edit_user centerGreyForm"} do |form| %>
   <h3>Edit Account</h3>

app/views/users/passwords/edit.html.erb

@@ -1,4 +1,5 @@
 <% content_for :title, "Change Password | Metamaps" %>
+<% content_for :mobile_title, "Change Password" %>
 
 <div id="yield">
 <%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :put, :class => "forgotPassword centerGreyForm forgotPasswordReset" }) do |f| %>

app/views/users/passwords/new.html.erb

@@ -1,4 +1,5 @@
 <% content_for :title, "Password Reset | Metamaps" %>
+<% content_for :mobile_title, "Password Reset" %>
 
 <div id="yield">
 <%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :post, :class => "forgotPassword centerGreyForm" }) do |f| %>

app/views/users/registrations/new.html.erb

@@ -1,4 +1,5 @@
 <% content_for :title, "Sign Up | Metamaps" %>
+<% content_for :mobile_title, "Join" %>
 
 <div id="yield">
 <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :post, :class => "new_user centerGreyForm" }) do |f| %>

app/views/users/sessions/new.html.erb

@@ -1,4 +1,5 @@
 <% content_for :title, "Sign In | Metamaps" %>
+<% content_for :mobile_title, "Login" %>
 
 <div id="yield">
 <%= form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => { :method => :post, :class => "centerGreyForm login" }) do |f| %>

frontend/src/components/Header.js

@@ -33,52 +33,48 @@ class Header extends Component {
     const apps = section == "registered" || section == "authorized"
 
     return (
-      <div className="exploreMapsBar exploreElement">
+      <div className="exploreMapsCenter">
-        <div className="exploreMapsMenu">
+        <MapLink show={signedIn && explore}
-          <div className="exploreMapsCenter">
+          href="/explore/mine"
-            <MapLink show={signedIn && explore}
+          linkClass={activeClass("my")}
-              href="/explore/mine"
+          text="My Maps"
-              linkClass={activeClass("my")}
+        />
-              text="My Maps"
+        <MapLink show={signedIn && explore}
-            />
+          href="/explore/shared"
-            <MapLink show={signedIn && explore}
+          linkClass={activeClass("shared")}
-              href="/explore/shared"
+          text="Shared With Me"
-              linkClass={activeClass("shared")}
+        />
-              text="Shared With Me"
+        <MapLink show={explore}
-            />
+          href={signedIn ? "/" : "/explore/active"}
-            <MapLink show={explore}
+          linkClass={activeClass("active")}
-              href={signedIn ? "/" : "/explore/active"}
+          text="Recently Active"
-              linkClass={activeClass("active")}
+        />
-              text="Recently Active"
+        <MapLink show={!signedIn && explore}
-            />
+          href="/explore/featured"
-            <MapLink show={!signedIn && explore}
+          linkClass={activeClass("featured")}
-              href="/explore/featured"
+          text="Featured Maps"
-              linkClass={activeClass("featured")}
+        />
-              text="Featured Maps"
+  
-            />
+        {mapper ? (
-
+          <div className='exploreMapsButton active mapperButton'>
-            {mapper ? (
+            <img className='exploreMapperImage' width='24' height='24' src={this.props.userAvatar} />
-              <div className='exploreMapsButton active mapperButton'>
+            <div className='exploreMapperName'>{this.props.userName}&rsquo;s Maps</div>
-                <img className='exploreMapperImage' width='24' height='24' src={this.props.userAvatar} />
+            <div className='clearfloat'></div>
-                <div className='exploreMapperName'>{this.props.userName}&rsquo;s Maps</div>
-                <div className='clearfloat'></div>
-              </div>
-            ) : null }
-
-            <MapLink show={apps}
-              href="/oauth/applications"
-              linkClass={"activeMaps exploreMapsButton"  + (section == "registered" ? " active" : "")}
-              data-bypass="true"
-              text="Registered Apps"
-            />
-            <MapLink show={apps}
-              href="/oauth/applications"
-              linkClass={"activeMaps exploreMapsButton"  + (section == "authorized" ? " active" : "")}
-              data-bypass="true"
-              text="Authorized Apps"
-            />
           </div>
-        </div>
+        ) : null }
+  
+        <MapLink show={apps}
+          href="/oauth/applications"
+          linkClass={"activeMaps exploreMapsButton"  + (section == "registered" ? " active" : "")}
+          data-bypass="true"
+          text="Registered Apps"
+        />
+        <MapLink show={apps}
+          href="/oauth/applications"
+          linkClass={"activeMaps exploreMapsButton"  + (section == "authorized" ? " active" : "")}
+          data-bypass="true"
+          text="Authorized Apps"
+        />
       </div>
     )
   }