From: John Firebaugh Date: Fri, 8 Nov 2013 01:04:44 +0000 (-0800) Subject: Redo mobile styles X-Git-Tag: live~4625^2~141 X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/cdfe2ac21ec01344b4b10d566582e7cc2b2eb7cb Redo mobile styles --- diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 83c17b6ec..f1a13132c 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -131,7 +131,8 @@ $(document).ready(function () { var auth_token = $("meta[name=csrf-token]").attr("content"); $("form input[name=authenticity_token]").val(auth_token); - $("#menu-icon").on("click", function() { + $("#menu-icon").on("click", function(e) { + e.preventDefault(); $("header").toggleClass("closed"); }); diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 5cc3a25b8..2ed869905 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -234,11 +234,16 @@ $(document).ready(function () { var page = {}; page.pushstate = page.popstate = function(path) { - $("#sidebar").addClass("minimized"); + $("#content").addClass("overlay-sidebar"); map.invalidateSize(); $('#sidebar_content').load(path); }; + page.unload = function() { + $("#content").removeClass("overlay-sidebar"); + map.invalidateSize(); + }; + return page; }; @@ -246,16 +251,12 @@ $(document).ready(function () { var page = {}; page.pushstate = page.popstate = function(path, type, id) { - $("#sidebar").removeClass("minimized"); - map.invalidateSize(); $('#sidebar_content').load(path, function() { page.load(path, type, id); }); }; page.load = function(path, type, id) { - $("#sidebar").removeClass("minimized"); - if (OSM.STATUS === 'api_offline' || OSM.STATUS === 'database_offline') return; if (type === 'note') { @@ -302,17 +303,4 @@ $(document).ready(function () { map.getCenter().lat.toFixed(precision) + "," + map.getCenter().lng.toFixed(precision))); }); - - function removeSidebar() { - if ($(window).width() < 721) { - $('#sidebar').addClass("minimized"); - } - } - - $(window).resize(function() { - removeSidebar(); - }); - - removeSidebar(); - }); diff --git a/app/assets/javascripts/index/export.js b/app/assets/javascripts/index/export.js index 199f226f5..413caea3f 100644 --- a/app/assets/javascripts/index/export.js +++ b/app/assets/javascripts/index/export.js @@ -51,13 +51,10 @@ OSM.Export = function(map) { page.pushstate = page.popstate = function(path) { $("#export_tab").addClass("current"); - $("#sidebar").removeClass("minimized"); - map.invalidateSize(); $("#sidebar_content").load(path, page.load); }; page.load = function() { - $("#sidebar").removeClass("minimized"); map .addLayer(locationFilter) .on("moveend", update); diff --git a/app/assets/javascripts/index/history.js b/app/assets/javascripts/index/history.js index d27a06943..be62d3734 100644 --- a/app/assets/javascripts/index/history.js +++ b/app/assets/javascripts/index/history.js @@ -99,12 +99,10 @@ OSM.History = function(map) { page.pushstate = page.popstate = function(path) { $("#history_tab").addClass("current"); - map.invalidateSize(); $("#sidebar_content").load(path, page.load); }; page.load = function() { - $("#sidebar").removeClass("minimized"); map .on("moveend", loadData) .addLayer(group); diff --git a/app/assets/javascripts/index/search.js b/app/assets/javascripts/index/search.js index 434135df5..c97b6991d 100644 --- a/app/assets/javascripts/index/search.js +++ b/app/assets/javascripts/index/search.js @@ -49,12 +49,10 @@ OSM.Search = function(map) { page.pushstate = page.popstate = function(path) { var params = querystring.parse(path.substring(path.indexOf('?') + 1)); $("#query").val(params.query); - map.invalidateSize(); $("#sidebar_content").load(path, page.load); }; page.load = function() { - $("#sidebar").removeClass("minimized"); $(".search_results_entry").each(function() { var entry = $(this); $.ajax({ diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 313c53562..e7b723d41 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -661,7 +661,7 @@ nav.secondary { transition: margin 300ms linear; } - #sidebar.minimized { + .overlay-sidebar #sidebar { position: absolute; z-index: 1000; height: auto; diff --git a/app/assets/stylesheets/small.css.scss b/app/assets/stylesheets/small.css.scss index d6fb6f758..2a8508171 100644 --- a/app/assets/stylesheets/small.css.scss +++ b/app/assets/stylesheets/small.css.scss @@ -1,21 +1,18 @@ /* Styles specific to a small screen, such as iPhone, Android, etc... */ input[type="submit"], -input[type="text"] { -webkit-appearance: none; } - -/* Default rules for the body of every page */ +input[type="text"] { + -webkit-appearance: none; +} .column-1 { width: 100%; } -/* Rules for the whole left sidebar, including the logo */ - #menu-icon { display: inline-block !important; } - nav.primary, nav.secondary { float: none !important; @@ -25,32 +22,32 @@ nav.secondary { } header { - min-height: 54px; height: auto; background: #fff; - border-bottom: 1px solid #ddd; - clear: both; - position: fixed; - width: 100%; - top: 0; - h1 { padding-bottom: 15px; } - &.closed { - nav.primary, - nav.secondary { - display: none; - } + + h1 { + padding-bottom: 15px; + } + + &.closed nav { + display: none; } } -.mobile-hide { display: none !important; } +#edit_tab, +#export_tab { + display: none; +} nav.primary { padding: 0; + ul, li { border: none; border-radius: 0; width: 100%; } + ul { border-top: 1px solid #eee; li { @@ -67,6 +64,8 @@ nav.primary { } nav.secondary { + border-bottom: 1px solid #eee; + .user-menu { display: block; width: 100%; @@ -84,42 +83,29 @@ nav.secondary { #compact-secondary-nav { display: none; } + .compact-hide { display: inline-block; } -#content { margin-top: 58px; } - .map-layout { - #sidebar { - width: 100%; - position: fixed; - top: 58px; - height: 240px; + #sidebar, #map { + position: relative; overflow-x: hidden; - z-index: 1; - background: #fff; - p.large-text { - font-size: 1.2em; - line-height: 1.4em; + width: 100%; + height: 50%; + } + + .overlay-sidebar { + #sidebar { + width: 300px; } - &.minimized { - background: none; + + #map { + height: 100%; } } - #content { - position: fixed; - top: 0; - display: block; - height: 100%; - margin-top: 0; - padding-top: 58px; - } - #map { - width: 100%; - // height: 100%; - // position: fixed; - } + #map-ui { z-index: 9999; width: 100%; diff --git a/app/views/layouts/_content.html.erb b/app/views/layouts/_content.html.erb index 632a5c839..a4d93cc0e 100644 --- a/app/views/layouts/_content.html.erb +++ b/app/views/layouts/_content.html.erb @@ -1,4 +1,4 @@ -
+
<% if content_for? :content %> <%= yield :content %> <% else %> diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index 60a68a488..b0631b431 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -8,7 +8,7 @@