From dc60c3f3ed7604140a0bdb8e11a1a694b772f900 Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Fri, 12 Aug 2016 05:03:28 +0000
Subject: [PATCH] add profile image and fix exploreMaps bar

---
 app/assets/javascripts/src/Metamaps.Header.js |  2 +-
 app/assets/stylesheets/mobile.css.erb         | 29 ++++++-
 app/views/layouts/_mobilemenu.html.erb        |  5 +-
 app/views/layouts/application.html.erb        |  7 +-
 app/views/layouts/doorkeeper.html.erb         |  9 +-
 app/views/topics/show.html.erb                |  3 +-
 app/views/users/edit.html.erb                 |  1 +
 frontend/src/components/Header.js             | 86 ++++++++++---------
 8 files changed, 82 insertions(+), 60 deletions(-)

diff --git a/app/assets/javascripts/src/Metamaps.Header.js b/app/assets/javascripts/src/Metamaps.Header.js
index e23ce07b..3693163b 100644
--- 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('headerMenuItems')
+      document.getElementById('exploreMapsHeader')
     );
   }
 }
diff --git a/app/assets/stylesheets/mobile.css.erb b/app/assets/stylesheets/mobile.css.erb
index 72a7b14c..b017592d 100644
--- a/app/assets/stylesheets/mobile.css.erb
+++ b/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;
 }
\ No newline at end of file
diff --git a/app/views/layouts/_mobilemenu.html.erb b/app/views/layouts/_mobilemenu.html.erb
index cba31af0..f51694e8 100644
--- a/app/views/layouts/_mobilemenu.html.erb
+++ b/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 %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 8c86eb22..300526d8 100644
--- a/app/views/layouts/application.html.erb
+++ b/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">
diff --git a/app/views/layouts/doorkeeper.html.erb b/app/views/layouts/doorkeeper.html.erb
index 16feb69d..378ada04 100644
--- a/app/views/layouts/doorkeeper.html.erb
+++ b/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>
 
diff --git a/app/views/topics/show.html.erb b/app/views/topics/show.html.erb
index c97a43b2..1e79cb57 100644
--- a/app/views/topics/show.html.erb
+++ b/app/views/topics/show.html.erb
@@ -14,7 +14,8 @@
 #
 #%>
 
-<% content_for :title, @topic.name + " | Metamaps" %>  
+<% content_for :title, @topic.name + " | Metamaps" %> 
+<% content_for :mobile_title, @topic.name %> 
 <script>
     Metamaps.currentSection = "topic";
     Metamaps.currentPage = <%= @topic.id.to_s %>;
diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
index e269d3b9..92890a92 100644
--- a/app/views/users/edit.html.erb
+++ b/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>
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index 5c0d492a..5efbd34d 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -33,48 +33,52 @@ class Header extends Component {
     const apps = section == "registered" || section == "authorized"
 
     return (
-      <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 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>
-        ) : 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>
     )
   }