[National Highways] Shrink main column with inspector form.

mysociety · Aug 7, 2023 · dc62bb6 · dc62bb6
1 parent 8a5112a
commit dc62bb6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/web/cobrands/highwaysengland/_colours.scss b/web/cobrands/highwaysengland/_colours.scss
@@ -46,3 +46,9 @@ $search-help-background: #fff3f3;
 $search-help-header-font-size-desktop: 1.25em;
 $search-help-margin: 0 -1em;
 $search-help-margin-desktop: 0 -1em;
+
+// NH want the inspector form to be wider
+$mappage-actions-sidebar-width: 24em;
+$mappage-actions-width: 36em;
+$mappage-sidebar-width--medium: 24em;
+$mappage-actions-width--medium: 36em;
diff --git a/web/cobrands/highwaysengland/layout.scss b/web/cobrands/highwaysengland/layout.scss
@@ -86,14 +86,8 @@ p.form-error {
     margin-top: 2em;
 }
 
-// NH want the inspector form to be a bit wider
+// NH want the inspector form to be wider
 .with-actions {
-    #map_box {
-        left: 60em;
-    }
-    #map_sidebar {
-        width: 60em;
-    }
     #side-inspect {
         width: 100%;
         input[type=text], input[type=password], input[type=email], textarea {

diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
@@ -2,12 +2,13 @@
 
 $layout_front_stats_color: $primary !default;
 $mappage-header-height: 4em !default; // eg: might want this to equal outer height of #site-header on normal pages
-$mappage-sidebar-width: 29em;
+$mappage-sidebar-width: 29em !default;
 $mappage-sidebar-padding: 1em;
 $mappage-notes-width: 15em;
-$mappage-actions-width: 25em;
-$mappage-sidebar-width--medium: 24em;
-$mappage-actions-width--medium: 20em;
+$mappage-actions-width: 25em !default;
+$mappage-actions-sidebar-width: $mappage-sidebar-width !default;
+$mappage-sidebar-width--medium: 24em !default;
+$mappage-actions-width--medium: 20em !default;
 $header-top-border-width: 0.25em !default;
 $header-top-border: $header-top-border-width solid $primary !default;
 
@@ -239,7 +240,7 @@ body.mappage.admin {
   }
 
   .with-actions & {
-    #{$left}: $mappage-sidebar-width + $mappage-actions-width;
+    #{$left}: $mappage-actions-sidebar-width + $mappage-actions-width;
 
     @media (max-width: 79em) {
       #{$left}: $mappage-sidebar-width--medium  + $mappage-actions-width--medium;
@@ -267,7 +268,7 @@ body.mappage.admin {
   }
 
   .with-actions & {
-    width: $mappage-sidebar-width + $mappage-actions-width;
+    width: $mappage-actions-sidebar-width + $mappage-actions-width;
     max-width: 100%; // Secondary column will squish on screens 768-960px
     padding: 0; // Padding will be handled by children of .two_column_sidebar
 
@@ -316,6 +317,10 @@ body.mappage.admin {
     @media (max-width: 79em) {
       width: $mappage-sidebar-width--medium;
     }
+
+    .with-actions & {
+      width: $mappage-actions-sidebar-width;
+    }
   }
 
   // Line up edge of .shadow-wrap with edge of #side-report
@@ -325,6 +330,10 @@ body.mappage.admin {
     @media (max-width: 79em) {
       width: $mappage-sidebar-width--medium;
     }
+
+    .with-actions & {
+      width: $mappage-actions-sidebar-width;
+    }
   }
 
   // No flexbox in IE9, so we settle for floating the columns instead.