all teh mobile things

2016-08-12 04:04:18 +00:00 · 2016-08-12 04:04:18 +00:00 · b4c75649ba
parent 449c2084bb
commit b4c75649ba
27 changed files with 253 additions and 51 deletions
--- a/app/assets/images/menu-alt-256.png
+++ b/app/assets/images/menu-alt-256.png
--- a/app/assets/javascripts/application.js
+++ b/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
--- a/app/assets/javascripts/src/Metamaps.Header.js
+++ b/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')
    );
  }
 }
--- a/app/assets/javascripts/src/Metamaps.Map.js
+++ b/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({
--- a/app/assets/javascripts/src/Metamaps.Mobile.js
+++ b/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()
+    }
+  }
+}
--- a/app/assets/javascripts/src/Metamaps.Topic.js
+++ b/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({
--- a/app/assets/stylesheets/application.css.erb
+++ b/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;
 }
--- a/app/assets/stylesheets/clean.css.erb
+++ b/app/assets/stylesheets/clean.css.erb
@ -27,6 +27,7 @@
 #yield {
  position: absolute;
  width: 100%;
+  height: 100%;
 }

 /*.animations {
--- a/app/assets/stylesheets/mobile.css.erb
+++ b/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;
+}
--- a/app/views/layouts/_head.html.erb
+++ b/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">

--- a/app/views/layouts/_mobilemenu.html.erb
+++ b/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>
--- a/app/views/layouts/application.html.erb
+++ b/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!
--- a/app/views/layouts/doorkeeper.html.erb
+++ b/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>

--- a/app/views/main/home.html.erb
+++ b/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>
--- a/app/views/main/requestinvite.html.erb
+++ b/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>
--- a/app/views/maps/activemaps.html.erb
+++ b/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();
--- a/app/views/maps/featuredmaps.html.erb
+++ b/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();
--- a/app/views/maps/mymaps.html.erb
+++ b/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();
--- a/app/views/maps/sharedmaps.html.erb
+++ b/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();
--- a/app/views/maps/show.html.erb
+++ b/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 %>;
--- a/app/views/maps/usermaps.html.erb
+++ b/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();
--- a/app/views/users/edit.html.erb
+++ b/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>
--- a/app/views/users/passwords/edit.html.erb
+++ b/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| %>
--- a/app/views/users/passwords/new.html.erb
+++ b/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| %>
--- a/app/views/users/registrations/new.html.erb
+++ b/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| %>
--- a/app/views/users/sessions/new.html.erb
+++ b/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| %>
--- a/frontend/src/components/Header.js
+++ b/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="exploreMapsMenu">
-          <div className="exploreMapsCenter">
-            <MapLink show={signedIn && explore}
-              href="/explore/mine"
-              linkClass={activeClass("my")}
-              text="My Maps"
-            />
-            <MapLink show={signedIn && explore}
-              href="/explore/shared"
-              linkClass={activeClass("shared")}
-              text="Shared With Me"
-            />
-            <MapLink show={explore}
-              href={signedIn ? "/" : "/explore/active"}
-              linkClass={activeClass("active")}
-              text="Recently Active"
-            />
-            <MapLink show={!signedIn && explore}
-              href="/explore/featured"
-              linkClass={activeClass("featured")}
-              text="Featured Maps"
-            />
-
-            {mapper ? (
-              <div className='exploreMapsButton active mapperButton'>
-                <img className='exploreMapperImage' width='24' height='24' src={this.props.userAvatar} />
-                <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 className="exploreMapsCenter">
+        <MapLink show={signedIn && explore}
+          href="/explore/mine"
+          linkClass={activeClass("my")}
+          text="My Maps"
+        />
+        <MapLink show={signedIn && explore}
+          href="/explore/shared"
+          linkClass={activeClass("shared")}
+          text="Shared With Me"
+        />
+        <MapLink show={explore}
+          href={signedIn ? "/" : "/explore/active"}
+          linkClass={activeClass("active")}
+          text="Recently Active"
+        />
+        <MapLink show={!signedIn && explore}
+          href="/explore/featured"
+          linkClass={activeClass("featured")}
+          text="Featured Maps"
+        />
+  
+        {mapper ? (
+          <div className='exploreMapsButton active mapperButton'>
+            <img className='exploreMapperImage' width='24' height='24' src={this.props.userAvatar} />
+            <div className='exploreMapperName'>{this.props.userName}&rsquo;s Maps</div>
+            <div className='clearfloat'></div>
          </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>
    )
  }