Fix issues with RTL display/hardcoded directions.

8 files changed, 73 insertions, 96 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 848a70df1..9ee873306 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -44,6 +44,7 @@
         - Use inspection states in response template admin.
         - Fixed CSS padding/overflow bug during sidebar "drawer" animations. #2132
         - Response template containing double quote now works.
+        - A few small display issues with RTL text display.
     - Admin improvements:
         - Inspectors can set non_public status of reports. #1992
         - Default start date is shown on the dashboard.
diff --git a/web/cobrands/sass/_admin.scss b/web/cobrands/sass/_admin.scss
index 58d2ded5f..0a9789161 100644
--- a/web/cobrands/sass/_admin.scss
+++ b/web/cobrands/sass/_admin.scss
@@ -116,8 +116,8 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
 }
 
 .admin-open311-section {
-    padding-left: 1em;
-    border-left: 1px solid #ccc;
+    padding-#{$left}: 1em;
+    border-#{$left}: 1px solid #ccc;
 }
 
 .admin-hint {
@@ -165,11 +165,11 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
 .admin-index-search {
     width: 27em;
     form {
-        clear: left;
+        clear: #{$left};
     }
     select {
         max-width: 65%;
-        float: left;
+        float: #{$left};
     }
 }
 
@@ -207,10 +207,10 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
     .js-metadata-item-remove {
         position: absolute;
         top: 0.25em;
-        right: 0.25em;
+        #{$right}: 0.25em;
     }
 }
 
 .danger-zone {
-    text-align: right;
+    text-align: #{$right};
 }
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index f38cc8434..989271ab1 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -305,7 +305,7 @@ select.form-control {
 
 .required-text {
   position: absolute;
-  right: 0;
+  #{$right}: 0;
   top: 0;
 }
 
@@ -640,11 +640,7 @@ ul.error {
     }
 
     &.chevron:after {
-      @if ($right == 'right') {
-        background-position: -16px 0;
-      } @else {
-        background-position: 0 0;
-      }
+      background-position: flip(-16px 0, 0 0);
     }
   }
 }
@@ -655,13 +651,13 @@ ul.error {
 
 #report-share {
     .btn {
-        padding-left: 1.5em;
-        padding-right: 1.5em;
+        padding-#{$left}: 1.5em;
+        padding-#{$right}: 1.5em;
         display: inline-block;
     }
 
     .btn + .btn {
-        margin-left: 1em;
+        margin-#{$left}: 1em;
     }
 }
 
@@ -733,7 +729,7 @@ input.final-submit {
     @include button-reset(#3b5998, darken(#3b5998, 10%), #3b5998, #fff, darken(#3b5998, 5%), darken(#3b5998, 10%), #3b5998, #fff);
 
     img {
-        margin-right: 0.5em;
+        margin-#{$right}: 0.5em;
         vertical-align: -0.2em;
         height: 1.3em;
         width: auto;
@@ -744,7 +740,7 @@ input.final-submit {
     @include button-reset(#55acee, darken(#55acee, 10%), #55acee, #fff, darken(#55acee, 5%), darken(#55acee, 10%), #55acee, #fff);
 
     img {
-        margin-right: 0.5em;
+        margin-#{$right}: 0.5em;
         vertical-align: -0.2em;
         height: 1.3em;
         width: auto;
@@ -773,21 +769,13 @@ input.final-submit {
 
 .btn--back {
     &:before {
-        @if ($right == 'right') {
-            background-position: 0 0;
-        } @else  {
-            background-position: -16px 0;
-        }
+        background-position: flip(0 0, -16px 0);
     }
 }
 
 .btn--forward {
     &:before {
-        @if ($right == 'right') {
-            background-position: -16px 0;
-        } @else  {
-            background-position: 0 0;
-        }
+        background-position: flip(-16px 0, 0 0);
     }
 }
 
@@ -1044,16 +1032,16 @@ input.final-submit {
     .item-list__item__shortlist-up,
     .item-list__item__shortlist-down {
         width: 36px; // down from 48px
-        left: 3.5em; // up from 1em
+        #{$left}: 3.5em; // up from 1em
     }
 }
 
 %list-item-action-button {
   position: absolute;
-  left: 1em; // match the padding on the `a` element
+  #{$left}: 1em; // match the padding on the `a` element
   top: 50%;
   margin-top: -24px; // vertically center
-  margin-left: -12px; // horizontally center
+  margin-#{$left}: -12px; // horizontally center
 
   display: block;
   width: 48px;
@@ -1189,7 +1177,7 @@ input.final-submit {
   background: #888;
   color: #fff;
   border-radius: 0.3em;
-  margin-right: 0.1em;
+  margin-#{$right}: 0.1em;
 }
 
 .item-list__item--empty {
@@ -1291,11 +1279,7 @@ input.final-submit {
     background-size: 112px 16px;
     background-repeat: no-repeat;
     @include svg-background-image('/cobrands/fixmystreet/images/report-tools');
-    @if ($right == 'right') {
-      background-position: 0 0;
-    } @else {
-      background-position: -16px 0;
-    }
+    background-position: flip(0 0, -16px 0);
   }
 }
 
@@ -1552,7 +1536,7 @@ html.js #map .noscript {
 
     // Turn #try_again into a black button, centred above the viewport.
     #try_again {
-        left: 25%; // along with width of 50%, centres it
+        #{$left}: 25%; // along with width of 50%, centres it
         margin-bottom: 6em;
         background: rgba(0, 0, 0, 0.8);
         @include border-radius(0.5em);
@@ -1700,8 +1684,8 @@ img.pin {
   #map_box {
     position: absolute;
     top: 0;
-    left: 0;
-    right: 0;
+    #{$left}: 0;
+    #{$right}: 0;
     bottom: 0;
     height: auto; // override `.mobile #map_box` height:10em
     margin: 0;
@@ -1738,7 +1722,7 @@ img.pin {
   // Offset from top same as fms_pan_zoom, from left so as not
   // to appear on top of zoom buttons (0.5em, 36px, 0.5em)
   top: 0.5em;
-  left: 3.25em;
+  #{$left}: 3.25em;
   .map-reporting & {
     // Same as fms_pan_zoom above, leaving space for the top bar when reporting
     top: 2.75em;
@@ -1828,7 +1812,7 @@ label .muted {
   background-color: #E9F2FF;
 
   #detailed_information_length {
-    float: right;
+    float: #{$right};
     &.error {
       color: red;
     }
@@ -1991,9 +1975,9 @@ label .muted {
     }
   }
   a#geolocate_link.loading {
-      background: #1a1a1a url("/cobrands/fixmystreet/images/spinner-black.gif") 100% 50% no-repeat;
-      border-right: solid 0.5em #1a1a1a;
-      padding-right: 1.5em;
+      background: #1a1a1a url("/cobrands/fixmystreet/images/spinner-black.gif") flip(100%,0) 50% no-repeat;
+      border-#{$right}: solid 0.5em #1a1a1a;
+      padding-#{$right}: 1.5em;
   }
 }
 .no-js #geolocate_link {
@@ -2001,8 +1985,8 @@ label .muted {
 }
 
 a#geolocate_link.loading, .btn--geolocate.loading {
-    background: url("/cobrands/fixmystreet/images/spinner-white.gif") 100% 50% no-repeat;
-    padding-right: 1.5em;
+    background: url("/cobrands/fixmystreet/images/spinner-white.gif") flip(100%,0) 50% no-repeat;
+    padding-#{$right}: 1.5em;
 }
 
 #front-howto {
@@ -2053,7 +2037,7 @@ a#geolocate_link.loading, .btn--geolocate.loading {
     }
     img[width="16"] {
         margin-top: 4px;
-        margin-left: 0.5em;
+        margin-#{$left}: 0.5em;
         float: $right;
     }
 }
@@ -2073,7 +2057,7 @@ a#geolocate_link.loading, .btn--geolocate.loading {
     overflow: hidden;
 
     a {
-        margin-right: 0.5em;
+        margin-#{$right}: 0.5em;
         text-decoration: none; // avoid underline showing between images
     }
 }
@@ -2095,7 +2079,7 @@ a#geolocate_link.loading, .btn--geolocate.loading {
 
 #rss_local_alt {
     // Match .label-containing-checkbox
-    padding-left: 24px;
+    padding-#{$left}: 24px;
 
     // Close up space between this and #rss_local
     margin-top: -1em;
@@ -2182,15 +2166,15 @@ a#geolocate_link.loading, .btn--geolocate.loading {
   border-top: 1px solid #ddd;
   margin: 0;
   padding: 0.8em 0 0.5em 0;
-  clear: left; // clear the floated image above
+  clear: #{$left}; // clear the floated image above
 
   a {
-    float: right;
+    float: #{$right};
   }
 }
 
 .questionnaire-errors {
-  margin-left: 0;
+  margin-#{$left}: 0;
 }
 
 .segmented-control {
@@ -2200,8 +2184,8 @@ a#geolocate_link.loading, .btn--geolocate.loading {
   & > * {
     display: block;
     text-align: center;
-    border-right-width: 0; // avoid double border between items
-    float: left; // float fallback for browsers that don't support flexbox
+    border-#{$right}-width: 0; // avoid double border between items
+    float: #{$left}; // float fallback for browsers that don't support flexbox
     position: relative; // Make sure this is shown on legacy flexbox webkit
     @include flex(1 0 auto, 1);
   }
@@ -2216,12 +2200,12 @@ a#geolocate_link.loading, .btn--geolocate.loading {
   }
 
   & > :first-child {
-    border-radius: 4px 0 0 4px;
+    border-radius: flip(4px 0 0 4px, 0 4px 4px 0);
   }
 
   & > :last-child {
-    border-radius: 0 4px 4px 0;
-    border-right-width: 1px; // reinstate border on last item
+    border-radius: flip(0 4px 4px 0, 4px 0 0 4px);
+    border-#{$right}-width: 1px; // reinstate border on last item
   }
 
   & > :first-child:last-child {
@@ -2244,17 +2228,17 @@ a#geolocate_link.loading, .btn--geolocate.loading {
     border-color: darken($primary, 5%);
     background-image: none; // remove gradient
     box-shadow: inset 0 0.1em 0.2em rgba(0,0,0,0.2);
-    border-right-width: 1px; // add a realistic coloured border to all sides
+    border-#{$right}-width: 1px; // add a realistic coloured border to all sides
   }
 
   input:checked + label + input + label {
-    border-left-width: 0; // in favour of the realistic coloured border on the selected label
+    border-#{$left}-width: 0; // in favour of the realistic coloured border on the selected label
   }
 
   // The first label is no longer the first child, so we need to
   // fish it out specially with a next sibling selector.
   input:first-child + label {
-    border-radius: 0.25em 0 0 0.25em;
+    border-radius: flip(0.25em 0 0 0.25em, 0 0.25em 0.25em 0);
   }
 }
 
diff --git a/web/cobrands/sass/_dashboard.scss b/web/cobrands/sass/_dashboard.scss
index 3cf59992b..6827a8225 100644
--- a/web/cobrands/sass/_dashboard.scss
+++ b/web/cobrands/sass/_dashboard.scss
@@ -85,7 +85,7 @@
     @include box-sizing(border-box);
 
     @media (min-width: 48em) {
-        padding-#{$right}: 20%;
+        padding-right: 20%; // Same way round, regardless of text direction
     }
 
     .label {
diff --git a/web/cobrands/sass/_dropzone.scss b/web/cobrands/sass/_dropzone.scss
index 432f7f6b4..0d440c85b 100644
--- a/web/cobrands/sass/_dropzone.scss
+++ b/web/cobrands/sass/_dropzone.scss
@@ -6,6 +6,11 @@ $dropzone-background-color: #fff;
 $dropzone-background-color--awakened: mix($dropzone-link-color, $dropzone-background-color, 10%);
 $dropzone-background-color--full: mix($dropzone-border-color--full, $dropzone-background-color, 10%);
 
+// To prevent a horizontal scrollbar in RTL
+.dz-hidden-input {
+  right: 0;
+}
+
 .dropzone {
   @extend .form-control;
   @include clearfix;
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index b374d8d3e..8fbfb34ef 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -87,8 +87,8 @@ h1 {
   } @else {
     top: 0;
   }
-  left: 0;
-  right: 0;
+  #{$left}: 0;
+  #{$right}: 0;
 }
 
 .nav-menu {
@@ -171,8 +171,8 @@ body.mappage {
     position: absolute;
     z-index: auto;
     top: 0;
-    left: 0;
-    right: 0;
+    #{$left}: 0;
+    #{$right}: 0;
     height: $mappage-header-height;
   }
 
@@ -330,7 +330,7 @@ body.mappage.admin {
     @include clearfix();
 
     & > * {
-      float: left;
+      float: #{$left};
       width: 50%;
     }
 
@@ -607,7 +607,7 @@ body.authpage {
     display: block;
     position: absolute;
     top: $fms_pan_zoom_top + $fms_pan_zoom_zoomout_top + $fms_pan_zoom_zoomout_height + $gap;
-    right: $fms_pan_zoom_right + $fms_pan_zoom_zoomout_right;
+    #{$right}: $fms_pan_zoom_right + $fms_pan_zoom_zoomout_right;
     border-radius: 5px;
     color: #fff;
     width: 36px;
@@ -618,7 +618,7 @@ body.authpage {
     background: #222;
     background-size: 36px 36px;
     background-repeat: no-repeat;
-    background-position: 100% 0;
+    background-position: flip(100% 0, 0 0);
     @include svg-background-image('/cobrands/fixmystreet/images/hide-pins-link');
 
     &:hover {
@@ -626,7 +626,7 @@ body.authpage {
       color: #fff;
       width: auto;
       height: auto;
-      padding: 6px 40px 6px 10px;
+      padding: flip(6px 40px 6px 10px, 6px 10px 6px 40px);
       overflow: visible;
     }
   }
@@ -663,25 +663,12 @@ body.authpage {
 
   // Expanded arrow points towards edge of window.
   // Closed arrow points away from edge of window.
-  @if ($right == 'right') {
-
-    &:after {
-      background-position: -6px 0;
-    }
-
-    &.closed:after {
-      background-position: 0 0;
-    }
-
-  } @else {
-
-    &:after {
-      background-position: 0 0;
-    }
+  &:after {
+    background-position: flip(-6px 0, 0 0);
+  }
 
-    &.closed:after {
-      background-position: -6px 0;
-    }
+  &.closed:after {
+    background-position: flip(0 0, -6px 0);
   }
 }
 
@@ -742,7 +729,7 @@ body.authpage {
   width: 64px;
   background-color: rgba(0, 0, 0, 0.7);
   // Reset the base left, as zoom buttons now elsewhere
-  left: 0.5em;
+  #{$left}: 0.5em;
 }
 
 .big-green-banner {
@@ -931,7 +918,7 @@ textarea.form-error {
     }
   }
   a#geolocate_link.loading {
-      border-right: none;
+      border-#{$right}: none;
   }
 }
 
diff --git a/web/cobrands/sass/_multiselect.scss b/web/cobrands/sass/_multiselect.scss
index ba90c0d89..9704d841d 100644
--- a/web/cobrands/sass/_multiselect.scss
+++ b/web/cobrands/sass/_multiselect.scss
@@ -5,10 +5,10 @@
 
 .multi-select-menu {
     position: absolute;
-    left: 0;
+    #{$left}: 0;
     top: 0.8em;
     z-index: 2; // stack above mysoc-footer
-    float: left; // shrink to width of child elements
+    float: #{$left}; // shrink to width of child elements
     min-width: 100%; // always at least as wide as its .multi-select-button sibling
     background: #fff;
     margin: 1em 0;
@@ -20,7 +20,7 @@
 .multi-select-menuitem {
     display: block;
     font-size: 0.875em;
-    padding: 0.6em 1em 0.6em 30px;
+    padding: flip(0.6em 1em 0.6em 30px, 0.6em 30px 0.6em 1em);
     margin: 0;
     white-space: nowrap;
 
@@ -31,7 +31,7 @@
     input {
         position: absolute;
         margin-top: 0.25em;
-        margin-left: -20px;
+        margin-#{$left}: -20px;
     }
 }
 
@@ -42,7 +42,7 @@
 .multi-select-button {
     display: inline-block;
     font-size: 0.875em;
-    padding: 0.2em 1.5em 0.2em 0.6em;
+    padding: flip(0.2em 1.5em 0.2em 0.6em, 0.2em 0.6em 0.2em 1.5em);
     max-width: 20em;
     white-space: nowrap;
     overflow: hidden;
@@ -65,7 +65,7 @@
         border-color: #999 transparent transparent transparent;
 
         position: absolute;
-        right: 0.5em;
+        #{$right}: 0.5em;
         top: 50%;
         margin: -0.2em 0 0 0;
     }
diff --git a/web/cobrands/sass/_report_list.scss b/web/cobrands/sass/_report_list.scss
index 87af99c0f..46c719b12 100644
--- a/web/cobrands/sass/_report_list.scss
+++ b/web/cobrands/sass/_report_list.scss
@@ -49,7 +49,7 @@
 
   .multi-select-button {
     max-width: 10em;
-    padding: 0 1.5em 0 0.6em;
+    padding: flip(0 1.5em 0 0.6em, 0 0.6em 0 1.5em);
     line-height: 1.8em;
     vertical-align: top;
   }