Some map resizings depending upon viewport size.

3 files changed, 86 insertions, 10 deletions

diff --git a/templates/web/default/report/display.html b/templates/web/default/report/display.html
index 9ce6be8ad..aeff140fe 100644
--- a/templates/web/default/report/display.html
+++ b/templates/web/default/report/display.html
@@ -13,7 +13,7 @@
 </div>
 <div id="side">
 
-[% IF banner %]
+[% IF banner.id %]
 <p class="banner" id="[% banner.id %]">
     [% banner.text %]
 </p>
@@ -149,6 +149,8 @@
         <input type="password" name="password_sign_in" id="password_sign_in" value="" size="25">
         </p>
 
+        <div class="fieldset">
+
         <p>
         <input type="checkbox" id="remember_me" name="remember_me" value='1'[% ' checked' IF remember_me %]>
         <label class="n" for="remember_me">
@@ -160,6 +162,8 @@
         <input type="submit" name="submit_sign_in" value="[% loc('Post') %]">
         </p>
 
+        </div>
+
     </div>
     <div id="form_sign_in_no">
 
@@ -173,7 +177,6 @@
                 <label for="password_register">[% loc('Enter a new password:') %]</label>
                 <input type="password" name="password_register" id="password_register" value="" size="25">
             </div>
-        </div>
 
         <p style="clear:both"><small>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</small></p>
 
@@ -181,6 +184,8 @@
         <input type="submit" name="submit_register" value="[% loc('Post') %]">
         </p>
 
+        </div>
+
     </div>
 
 </div>
diff --git a/web/css/_main.scss b/web/css/_main.scss
index d74d70ceb..8b018677d 100644
--- a/web/css/_main.scss
+++ b/web/css/_main.scss
@@ -29,7 +29,7 @@ h2 {
 
 select, input, textarea {
     font-size: 99%;
-    max-width: 99%;
+    max-width: 95%;
 }
 
 #mysociety {
diff --git a/web/css/core.scss b/web/css/core.scss
index 17bf4e6c2..21d75d04d 100644
--- a/web/css/core.scss
+++ b/web/css/core.scss
@@ -163,7 +163,7 @@ $map_width: 500px;
 
     fieldset, .fieldset {
         border: none;
-        padding: 0.5em;
+        margin: 0.5em;
         div {
             margin-top: 2px;
             clear: left;
@@ -241,12 +241,6 @@ $map_width: 500px;
 
     /* Drag is only present in noscript form */
     #drag {
-        position: absolute;
-        width: $map_width;
-        height: $map_width;
-        right: 0;
-        top: 0;
-
         input, img {
             position: absolute;
             border: none;
@@ -622,6 +616,83 @@ $map_width: 500px;
             margin-bottom: 1em;
         }
 
+        fieldset, .fieldset {
+            margin: 1em;
+        }
+
+        label {
+            margin-top: 1em;
+            display: block;
+            float: none;
+            text-align: left;
+            padding-right: 0;
+            width: auto;
+        }
+        .fieldset div.checkbox, #problem_submit {
+            padding-left: 0;
+        }
+        .fieldset div.checkbox label, label.n {
+            display: inline;
+        }
+    }
+}
+
+@media all and (max-width: 750px) {
+    $map_width: 365px;
+    #mysociety {
+        #map_box {
+            padding-left: 10px;
+            width: $map_width + 2px;
+            height: $map_width + 2px;
+        }
+        #map {
+            width: $map_width;
+            height: $map_width;
+        }
+        .banner {
+            margin-right: $map_width + 20px;
+        }
+    }
+    .no-js #mysociety {
+        #text_map { }
+        #text_map_arrow { }
+        #side, #side-form { }
+    }
+}
+
+@media all and (max-width: 580px) {
+    $map_width: 235px;
+    #mysociety {
+        #map_box {
+            width: $map_width + 2px;
+            height: $map_width + 2px;
+        }
+        #map {
+            width: $map_width;
+            height: $map_width;
+        }
+        .banner {
+            margin-right: $map_width + 20px;
+        }
+    }
+}
+
+@media all and (max-width: 320px) {
+    #mysociety {
+        #map_box {
+            padding-left: 0;
+            float: none;
+            width: 100%;
+        }
+        #map {
+            width: 99%;
+        }
+
+        .banner {
+            margin-right: 0;
+            margin-top: 1em;
+        }
+
     }
 }