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.

diff --git a/app/assets/stylesheets/small.css.scss b/app/assets/stylesheets/small.css.scss
index 4b561349d8bb3de54dfd7c5fda5dbc20565f6367..4dee3f1bfc2ed3b5d528ad491688ae676f98311c 100644 (file)
--- 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 aa64e1d2b2344606e53a60a068dd2c03b621a7af..9ee05a7c83d04f713e24378c8ca524f2c29cc11d 100644 (file)
--- 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() {