diff --git a/app/assets/images/menu-alt-256.png b/app/assets/images/menu-alt-256.png new file mode 100644 index 00000000..e8d9912b Binary files /dev/null and b/app/assets/images/menu-alt-256.png differ diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index cb22ab95..7b3f0713 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -40,6 +40,7 @@ //= require ./src/Metamaps.Map //= require ./src/Metamaps.Account //= require ./src/Metamaps.Mapper +//= require ./src/Metamaps.Mobile //= require ./src/Metamaps.Admin //= require ./src/Metamaps.Import //= require ./src/Metamaps.Header diff --git a/app/assets/javascripts/src/Metamaps.Header.js b/app/assets/javascripts/src/Metamaps.Header.js index 3693163b..e23ce07b 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('exploreMapsHeader') + document.getElementById('headerMenuItems') ); } } diff --git a/app/assets/javascripts/src/Metamaps.Map.js b/app/assets/javascripts/src/Metamaps.Map.js index ec3b946f..fc06ed68 100644 --- a/app/assets/javascripts/src/Metamaps.Map.js +++ b/app/assets/javascripts/src/Metamaps.Map.js @@ -109,6 +109,9 @@ Metamaps.Map = { Metamaps.Realtime.startActiveMap() Metamaps.Loading.hide() + + // for mobile + $('#header_content').html(map.get('name')) } $.ajax({ diff --git a/app/assets/javascripts/src/Metamaps.Mobile.js b/app/assets/javascripts/src/Metamaps.Mobile.js new file mode 100644 index 00000000..21eb4902 --- /dev/null +++ b/app/assets/javascripts/src/Metamaps.Mobile.js @@ -0,0 +1,24 @@ +/* global Metamaps, $ */ + +Metamaps.Mobile = { + init: function () { + var self = Metamaps.Mobile + + $('#menu_icon').click(self.toggleMenu) + $('#mobile_menu li a').click(self.liClick) + $('#header_content').click(self.titleClick) + }, + liClick: function () { + var self = Metamaps.Mobile + $('#header_content').html($(this).text()) + self.toggleMenu() + }, + toggleMenu: function () { + $('#mobile_menu').toggle() + }, + titleClick: function () { + if (Metamaps.Active.Map) { + Metamaps.Map.InfoBox.open() + } + } +} \ No newline at end of file diff --git a/app/assets/javascripts/src/Metamaps.Topic.js b/app/assets/javascripts/src/Metamaps.Topic.js index f0f68a92..da2e6be3 100644 --- a/app/assets/javascripts/src/Metamaps.Topic.js +++ b/app/assets/javascripts/src/Metamaps.Topic.js @@ -84,6 +84,9 @@ Metamaps.Topic = { Metamaps.Filter.checkMetacodes() Metamaps.Filter.checkSynapses() Metamaps.Filter.checkMappers() + + // for mobile + $('#header_content').html(Metamaps.Active.Topic.get('name')) } $.ajax({ diff --git a/app/assets/stylesheets/application.css.erb b/app/assets/stylesheets/application.css.erb index d1f866bc..bf5079bb 100644 --- a/app/assets/stylesheets/application.css.erb +++ b/app/assets/stylesheets/application.css.erb @@ -1578,7 +1578,7 @@ h3.filterBox { .mapContributors { position: relative; height: 30px; - margin: 9px 0px 9px 56px; + margin: 9px 0px 9px 44px; padding: 0; width: 64px; } diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb index 5d2fe78f..4fc87f06 100644 --- a/app/assets/stylesheets/clean.css.erb +++ b/app/assets/stylesheets/clean.css.erb @@ -27,6 +27,7 @@ #yield { position: absolute; width: 100%; + height: 100%; } /*.animations { diff --git a/app/assets/stylesheets/mobile.css.erb b/app/assets/stylesheets/mobile.css.erb new file mode 100644 index 00000000..72a7b14c --- /dev/null +++ b/app/assets/stylesheets/mobile.css.erb @@ -0,0 +1,97 @@ +#mobile_header { + display: none; +} + +/* Smartphones (portrait and landscape) ----------- */ +@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { + .upperLeftUI, .upperRightUI, .openCheatsheet, .mapInfoIcon, .uv-icon, .chat-box, #exploreMapsHeader { + display: none !important; + } + + #mobile_header { + display: block; + } + + .homeWrapper { + width: 96%; + padding: 0 2%; + } + .homeTitle { + text-align: left; + } + .homeIntro { + text-align: left; + } + .fullWidthWrapper.withVideo { + height: auto; + } + .homeVideo { + width: 100%; + height: auto; + } + .fullWidthWrapper.withPartners { + display: none; + } + .learnMoreCTA { + display: none !important; + } + + #yield { + margin-top: 50px; + } + + .wrapper div.mapInfoBox { + position: fixed; + top: 50px; + right: 0px; + bottom: auto; + width: 100%; + max-width: 360px; + } + + #wrapper .requestInvite { + width: 100%; + padding: 0; + } +} + +#mobile_header { + height: 50px; + background: #EEE; + width: 100%; + box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16); + position: fixed; +} + +#menu_icon { + width: 50px; + height: 50px; + border-right: 1px solid #DDD; + position: absolute; + background: #EEE url('<%= asset_path('menu-alt-256.png') %>') no-repeat center center; + background-size: 30px; +} + +#header_content { + position: absolute; + width: 100%; + overflow-x: scroll; + padding-left: 60px; + font-size: 24px; + line-height: 50px; +} + +#mobile_menu { + display: none; + background: #EEE; + position: fixed; + top: 50px; + border-top: 1px solid #DDD; + padding: 10px; + width: 200px; + box-shadow: 3px 3px 3px rgba(0,0,0,0.23), 3px 3px 3px rgba(0,0,0,0.16); +} + +#mobile_menu li { + padding: 10px; +} \ No newline at end of file diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb index 3f0d506d..23a24c4a 100644 --- a/app/views/layouts/_head.html.erb +++ b/app/views/layouts/_head.html.erb @@ -12,7 +12,7 @@
-