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>
+      <li class="mobileMenuUser">
-        Signed in as: <%= current_user.name %>
+         <%= 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 id="exploreMapsHeader"></div>
-              <div className="exploreMapsBar exploreElement">
-                <div id="headerMenuItems" className="exploreMapsMenu">
-                </div>
-              </div>
-            </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 id="exploreMapsHeader"></div>
-              <div className="exploreMapsBar exploreElement">
-                <div className="exploreMapsMenu">
-                  <div id="headerMenuItems" className="exploreMapsCenter">
-                  </div>
-                </div>
-              </div>
-            </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,48 +33,52 @@ class Header extends Component {
     const apps = section == "registered" || section == "authorized"
 
     return (
-      <div className="exploreMapsCenter">
+      <div className="exploreMapsBar exploreElement">
-        <MapLink show={signedIn && explore}
+        <div className="exploreMapsMenu">
-          href="/explore/mine"
+          <div className="exploreMapsCenter">
-          linkClass={activeClass("my")}
+            <MapLink show={signedIn && explore}
-          text="My Maps"
+              href="/explore/mine"
-        />
+              linkClass={activeClass("my")}
-        <MapLink show={signedIn && explore}
+              text="My Maps"
-          href="/explore/shared"
+            />
-          linkClass={activeClass("shared")}
+            <MapLink show={signedIn && explore}
-          text="Shared With Me"
+              href="/explore/shared"
-        />
+              linkClass={activeClass("shared")}
-        <MapLink show={explore}
+              text="Shared With Me"
-          href={signedIn ? "/" : "/explore/active"}
+            />
-          linkClass={activeClass("active")}
+            <MapLink show={explore}
-          text="Recently Active"
+              href={signedIn ? "/" : "/explore/active"}
-        />
+              linkClass={activeClass("active")}
-        <MapLink show={!signedIn && explore}
+              text="Recently Active"
-          href="/explore/featured"
+            />
-          linkClass={activeClass("featured")}
+            <MapLink show={!signedIn && explore}
-          text="Featured Maps"
+              href="/explore/featured"
-        />
+              linkClass={activeClass("featured")}
+              text="Featured Maps"
+            />
       
-        {mapper ? (
+            {mapper ? (
-          <div className='exploreMapsButton active mapperButton'>
+              <div className='exploreMapsButton active mapperButton'>
-            <img className='exploreMapperImage' width='24' height='24' src={this.props.userAvatar} />
+                <img className='exploreMapperImage' width='24' height='24' src={this.props.userAvatar} />
-            <div className='exploreMapperName'>{this.props.userName}&rsquo;s Maps</div>
+                <div className='exploreMapperName'>{this.props.userName}&rsquo;s Maps</div>
-            <div className='clearfloat'></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>
-        ) : null }
+        </div>
-  
-        <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>
     )
   }