From 080d347d8fb55534bcd0ac8dafd61479d0401dc8 Mon Sep 17 00:00:00 2001 From: Dan Karran Date: Sat, 26 Nov 2011 17:24:19 +0000 Subject: [PATCH] Mobile layout improvements Make the map fill the available space on smaller screens, and style the search results sidebar a bit better when ?query= is added to the URL to trigger the search. --- app/assets/stylesheets/small.css.scss | 27 +++++++++++++++++++++++++++ app/views/site/_resize.html.erb | 6 ++++-- 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/small.css.scss b/app/assets/stylesheets/small.css.scss index 4b561349d..4dee3f1bf 100644 --- a/app/assets/stylesheets/small.css.scss +++ b/app/assets/stylesheets/small.css.scss @@ -87,6 +87,10 @@ h1 { /* Rules for OpenLayers maps */ +#map { + border: 0; +} + .olControlPanZoomBar { display: none; } @@ -101,6 +105,29 @@ h1 { margin-right: 0px; } +#content.site_index { + left: 0px; + right: 0px; + top: 38px; + bottom: 0px; + padding-bottom: 0px; +} + +/* Rules for search sidebar when shown */ + +#sidebar { + border: 0px; + border-right: 1px solid #ccccdd; +} + +.sidebar_title, #sidebar_content { + font-size: 10px !important; +} + +p.search_results_entry { + padding: 2px 0px; +} + /* Rules for the signup form */ #signupForm input[type="text"], #signupForm input[type="password"] { diff --git a/app/views/site/_resize.html.erb b/app/views/site/_resize.html.erb index aa64e1d2b..9ee05a7c8 100644 --- a/app/views/site/_resize.html.erb +++ b/app/views/site/_resize.html.erb @@ -18,7 +18,7 @@ function resizeMap() { var sidebar_width = 0 + $("#sidebar:visible").width(); - if (sidebar_width > 0) { + if (sidebar_width > 0 && window.width > 641) { sidebar_width = sidebar_width + 5 } @@ -28,7 +28,9 @@ $("#map").css("right", (sidebar_width) + "px"); <% end -%> $("#map").width($("#content").width() - sidebar_width); - $("#map").height($("#content").height() - 2); + if (window.width > 641) { + $("#map").height($("#content").height() - 2); + } } function handleResize() { -- 2.39.5