enable text overflow for title on mob (#606)

This commit is contained in:
Connor Turland 2016-08-14 12:50:44 -04:00 committed by GitHub
parent 15ca43d49f
commit 5b5fc86a3b
4 changed files with 14 additions and 4 deletions

View file

@ -103,6 +103,7 @@ Metamaps.Listeners = {
if (Metamaps.Visualize && Metamaps.Visualize.mGraph) Metamaps.Visualize.mGraph.canvas.resize($(window).width(), $(window).height()) 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.Active.Topic) && Metamaps.Famous && Metamaps.Famous.maps.surf) Metamaps.Famous.maps.reposition()
if (Metamaps.Active.Map && Metamaps.Realtime.inConversation) Metamaps.Realtime.positionVideos() if (Metamaps.Active.Map && Metamaps.Realtime.inConversation) Metamaps.Realtime.positionVideos()
Metamaps.Mobile.resizeTitle()
}) })
}, },
centerAndReveal: function(nodes, opts) { centerAndReveal: function(nodes, opts) {

View file

@ -15,6 +15,11 @@ Metamaps.Mobile = {
$('#menu_icon').click(self.toggleMenu) $('#menu_icon').click(self.toggleMenu)
$('#mobile_menu li a').click(self.liClick) $('#mobile_menu li a').click(self.liClick)
$('#header_content').click(self.titleClick) $('#header_content').click(self.titleClick)
self.resizeTitle()
},
resizeTitle: function () {
// the 70 relates to padding
$('#header_content').width($(document).width() - 70)
}, },
liClick: function () { liClick: function () {
var self = Metamaps.Mobile var self = Metamaps.Mobile

View file

@ -118,8 +118,10 @@
#header_content { #header_content {
position: absolute; position: absolute;
width: 100%; width: 100%;
overflow-x: scroll; overflow: hidden;
padding-left: 60px; text-overflow: ellipsis;
white-space: nowrap;
padding: 0 10px 0 60px;
font-size: 24px; font-size: 24px;
line-height: 50px; line-height: 50px;
} }

View file

@ -46,8 +46,7 @@
<div id="exploreMaps"></div> <div id="exploreMaps"></div>
<div id="exploreMapsHeader"></div> <div id="exploreMapsHeader"></div>
<div id="infovis"></div>
<%= render :partial => 'layouts/mobilemenu' %>
<div id="instructions"> <div id="instructions">
<div class="addTopic"> <div class="addTopic">
Double-click to<br>add a topic! Double-click to<br>add a topic!
@ -60,6 +59,9 @@
</div> </div>
</div> </div>
<div id="infovis"></div>
<%= render :partial => 'layouts/mobilemenu' %>
<p id="toast" class="toast"> <p id="toast" class="toast">
<% if devise_error_messages? %> <% if devise_error_messages? %>
<%= devise_error_messages! %> <%= devise_error_messages! %>