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 @@ - <%=h yield(:title) %> + <%= yield(:title) %> <%= csrf_meta_tags %> diff --git a/app/views/layouts/_mobilemenu.html.erb b/app/views/layouts/_mobilemenu.html.erb new file mode 100644 index 00000000..cba31af0 --- /dev/null +++ b/app/views/layouts/_mobilemenu.html.erb @@ -0,0 +1,51 @@ +
+
+ <%= yield(:mobile_title) %> +
+ +
+
+ +
\ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index c36b412b..8c86eb22 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -45,8 +45,14 @@ <%= render :partial => 'layouts/lowermapelements' %>
-
+
+
+
+
+
+
+ <%= render :partial => 'layouts/mobilemenu' %>
Double-click to
add a topic! diff --git a/app/views/layouts/doorkeeper.html.erb b/app/views/layouts/doorkeeper.html.erb index 378ada04..16feb69d 100644 --- a/app/views/layouts/doorkeeper.html.erb +++ b/app/views/layouts/doorkeeper.html.erb @@ -33,7 +33,14 @@ <% end %> <%= render :partial => 'layouts/lowermapelements' %> -
+
+
+
+
+
+
+
+
diff --git a/app/views/main/home.html.erb b/app/views/main/home.html.erb index 3b083dab..3fc06f4f 100644 --- a/app/views/main/home.html.erb +++ b/app/views/main/home.html.erb @@ -6,6 +6,7 @@ %> <% content_for :title, "Home | Metamaps" %> +<% content_for :mobile_title, "Home" %>
Make Sense with Metamaps
diff --git a/app/views/main/requestinvite.html.erb b/app/views/main/requestinvite.html.erb index 2b147db0..88a4977c 100644 --- a/app/views/main/requestinvite.html.erb +++ b/app/views/main/requestinvite.html.erb @@ -4,7 +4,8 @@ # Shows a form where people can request an invite #%> -<% content_for :title, "Request Invite | Metamaps" %> +<% content_for :title, "Request Invite | Metamaps" %> +<% content_for :mobile_title, "Request Invite" %>
diff --git a/app/views/maps/activemaps.html.erb b/app/views/maps/activemaps.html.erb index cfcbce27..a70cdcae 100644 --- a/app/views/maps/activemaps.html.erb +++ b/app/views/maps/activemaps.html.erb @@ -8,6 +8,7 @@ Metamaps.Maps.Active = <%= @maps.to_json.html_safe %>; Metamaps.currentPage = "active"; <% content_for :title, "Explore Active Maps | Metamaps" %> + <% content_for :mobile_title, "Recently Active" %> Metamaps.currentSection = "explore"; Metamaps.GlobalUI.Search.open(); diff --git a/app/views/maps/featuredmaps.html.erb b/app/views/maps/featuredmaps.html.erb index 2c438b49..cfe4a627 100644 --- a/app/views/maps/featuredmaps.html.erb +++ b/app/views/maps/featuredmaps.html.erb @@ -8,6 +8,7 @@ Metamaps.Maps.Featured = <%= @maps.to_json.html_safe %>; Metamaps.currentPage = "featured"; <% content_for :title, "Explore Featured Maps | Metamaps" %> + <% content_for :mobile_title, "Featured Maps" %> Metamaps.currentSection = "explore"; Metamaps.GlobalUI.Search.open(); diff --git a/app/views/maps/mymaps.html.erb b/app/views/maps/mymaps.html.erb index 60c69f68..17f715f9 100644 --- a/app/views/maps/mymaps.html.erb +++ b/app/views/maps/mymaps.html.erb @@ -8,6 +8,7 @@ Metamaps.Maps.Mine = <%= @maps.to_json.html_safe %>; Metamaps.currentPage = "mine"; <% content_for :title, "Explore My Maps | Metamaps" %> + <% content_for :mobile_title, "My Maps" %> Metamaps.currentSection = "explore"; Metamaps.GlobalUI.Search.open(); diff --git a/app/views/maps/sharedmaps.html.erb b/app/views/maps/sharedmaps.html.erb index 99c41828..fd02c810 100644 --- a/app/views/maps/sharedmaps.html.erb +++ b/app/views/maps/sharedmaps.html.erb @@ -8,6 +8,7 @@ Metamaps.Maps.Shared = <%= @maps.to_json.html_safe %>; Metamaps.currentPage = "shared"; <% content_for :title, "Explore Shared Maps | Metamaps" %> + <% content_for :mobile_title, "Shared With Me" %> Metamaps.currentSection = "explore"; Metamaps.GlobalUI.Search.open(); diff --git a/app/views/maps/show.html.erb b/app/views/maps/show.html.erb index 9a74b337..70c1189e 100644 --- a/app/views/maps/show.html.erb +++ b/app/views/maps/show.html.erb @@ -5,6 +5,7 @@ #%> <% content_for :title, @map.name + " | Metamaps" %> +<% content_for :mobile_title, @map.name %>