From 5b5fc86a3bb53a82021a3ed9c6654f4b7ea95208 Mon Sep 17 00:00:00 2001
From: Connor Turland <connorturland@gmail.com>
Date: Sun, 14 Aug 2016 12:50:44 -0400
Subject: [PATCH] enable text overflow for title on mob (#606)

---
 app/assets/javascripts/src/Metamaps.Listeners.js | 1 +
 app/assets/javascripts/src/Metamaps.Mobile.js    | 5 +++++
 app/assets/stylesheets/mobile.css.erb            | 6 ++++--
 app/views/layouts/application.html.erb           | 6 ++++--
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/src/Metamaps.Listeners.js b/app/assets/javascripts/src/Metamaps.Listeners.js
index 822cf657..948893cb 100644
--- a/app/assets/javascripts/src/Metamaps.Listeners.js
+++ b/app/assets/javascripts/src/Metamaps.Listeners.js
@@ -103,6 +103,7 @@ Metamaps.Listeners = {
       if (Metamaps.Visualize && Metamaps.Visualize.mGraph) Metamaps.Visualize.mGraph.canvas.resize($(window).width(), $(window).height())
       if ((Metamaps.Active.Map || Metamaps.Active.Topic) && Metamaps.Famous && Metamaps.Famous.maps.surf) Metamaps.Famous.maps.reposition()
       if (Metamaps.Active.Map && Metamaps.Realtime.inConversation) Metamaps.Realtime.positionVideos()
+      Metamaps.Mobile.resizeTitle()
     })
   },
   centerAndReveal: function(nodes, opts) {
diff --git a/app/assets/javascripts/src/Metamaps.Mobile.js b/app/assets/javascripts/src/Metamaps.Mobile.js
index 1a47f614..1a55f081 100644
--- a/app/assets/javascripts/src/Metamaps.Mobile.js
+++ b/app/assets/javascripts/src/Metamaps.Mobile.js
@@ -15,6 +15,11 @@ Metamaps.Mobile = {
     $('#menu_icon').click(self.toggleMenu)
     $('#mobile_menu li a').click(self.liClick)
     $('#header_content').click(self.titleClick)
+    self.resizeTitle()
+  },
+  resizeTitle: function () {
+    // the 70 relates to padding
+    $('#header_content').width($(document).width() - 70)
   },
   liClick: function () {
     var self = Metamaps.Mobile
diff --git a/app/assets/stylesheets/mobile.css.erb b/app/assets/stylesheets/mobile.css.erb
index 324acdec..c46ef3ff 100644
--- a/app/assets/stylesheets/mobile.css.erb
+++ b/app/assets/stylesheets/mobile.css.erb
@@ -118,8 +118,10 @@
 #header_content {
   position: absolute;
   width: 100%;
-  overflow-x: scroll;
-  padding-left: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 10px 0 60px;
   font-size: 24px;
   line-height: 50px;
 }
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 300526d8..4463bb8e 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -46,8 +46,7 @@
 
             <div id="exploreMaps"></div>
             <div id="exploreMapsHeader"></div>
-            <div id="infovis"></div>
-            <%= render :partial => 'layouts/mobilemenu' %>
+            
             <div id="instructions">
               <div class="addTopic">
                 Double-click to<br>add a topic!
@@ -60,6 +59,9 @@
               </div>
             </div>
             
+            <div id="infovis"></div>
+            <%= render :partial => 'layouts/mobilemenu' %>
+            
             <p id="toast" class="toast">
               <% if devise_error_messages? %>
                 <%= devise_error_messages! %>