add profile image and fix exploreMaps bar

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('headerMenuItems')
+      document.getElementById('exploreMapsHeader')
     );
   }
 }

app/assets/stylesheets/mobile.css.erb

@@ -16,6 +16,9 @@
     width: 96%;
     padding: 0 2%;
   }
+  .homeWrapper.homeText {
+    margin-top: 80px;
+  }
   .homeTitle {
     text-align: left;
   }
@@ -37,7 +40,20 @@
   }
   
   #yield {
-    margin-top: 50px;
+    height: 100%;
+  }
+  
+  .new_session, .new_user, .edit_user, .login, .forgotPassword {
+    position: relative;
+    top: auto;
+    left: auto;
+    width: 78%;
+    padding: 16px 10%;
+    margin: 50px auto 0 auto;
+  }
+  
+  .centerGreyForm input[type="text"], .centerGreyForm input[type="email"], .centerGreyForm input[type="password"] {
+    width: 100%;
   }
   
   .wrapper div.mapInfoBox {
@@ -94,4 +110,15 @@
 
 #mobile_menu li {
   padding: 10px;
+  list-style: none;
+}
+
+li.mobileMenuUser {
+  border-bottom: 1px solid #BBB;
+}
+
+.mobileMenuUser img {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
 }

app/views/layouts/_mobilemenu.html.erb

@@ -13,8 +13,9 @@
     <% end %>
     <% if current_user %>
       <!-- we should add a page where they can create a new map -->
-      <li>
-        Signed in as: <%= current_user.name %>
+      <li class="mobileMenuUser">
+         <%= image_tag current_user.image.url(:sixtyfour), :size => "32x32" %>
+         <span><%= current_user.name %></span>
       </li>
       <li>
         <%= link_to "My Maps", explore_mine_path %>

app/views/layouts/application.html.erb

@@ -45,12 +45,7 @@
             <%= render :partial => 'layouts/lowermapelements' %>
 
             <div id="exploreMaps"></div>
-            <div id="exploreMapsHeader">
-              <div className="exploreMapsBar exploreElement">
-                <div id="headerMenuItems" className="exploreMapsMenu">
-                </div>
-              </div>
-            </div>
+            <div id="exploreMapsHeader"></div>
             <div id="infovis"></div>
             <%= render :partial => 'layouts/mobilemenu' %>
             <div id="instructions">

app/views/layouts/doorkeeper.html.erb

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

app/views/topics/show.html.erb

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

app/views/users/edit.html.erb

@@ -52,5 +52,6 @@
 </div>
   <div id="accountPageLoading"></div>
   <%= form.submit "Update", class: "update", onclick: "Metamaps.Account.showLoading()" %>
+  <div class="clearfloat"></div>
 <% end %>
 </div>

frontend/src/components/Header.js

@@ -33,6 +33,8 @@ 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"
@@ -76,6 +78,8 @@ class Header extends Component {
               text="Authorized Apps"
             />
           </div>
+        </div>
+      </div>
     )
   }
 }