Favour .form-hints over input placeholder attributes

Fixes #2180.

Input placeholders are a generally problematic UI convention, and we’ve
accidentally started using them in more and more parts of FMS over the
last few years.

In some cases, the placeholders simply repeated text from the input’s
existing label element. In cases like those, the placeholder attribute
could just be removed.

In other cases, we broke the placeholder text out into a .form-hint
element, between the input and its label, so that the text is easily
accessible and falls into the top-to-bottom reading flow.

Notable changes:

* Form hint on main postcode search form, instead of placeholder.
* Form hint on alert search form, instead of placeholder.
* Form hints in reporting form (problem summary and description),
  instead of placeholders.
* Removed placeholders from most login/password inputs.
* The character limit for "Inspector" report updates is no longer
  displayed in the textarea placeholder.
* Form hints now `#666` grey, and better spaced when immediately
  following a label element.

1 files changed, 26 insertions, 3 deletions

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 4af940039..4d7ff2c37 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -645,8 +645,15 @@ ul.error {
   }
 }
 
-#report-updates-data img {
+#report-updates-data {
+  img {
     float: $right;
+  }
+
+  // Avoid double margin between opening paragraph and label.
+  label {
+    margin-top: 0;
+  }
 }
 
 #report-share {
@@ -1736,6 +1743,16 @@ label .muted {
   font-weight: normal;
 }
 
+.form-hint {
+  color: #666;
+
+  // Reduce space between labels and their form-hints
+  label + &,
+  #front-main label + & {
+    margin-top: -0.5em;
+  }
+}
+
 .description_tips {
   @include clearfix;
 
@@ -1775,8 +1792,10 @@ label .muted {
   display: inline-block;
 }
 
-#problem_form > label:first-child {
-  margin-top: 0;
+#problem_form {
+  & > label:first-child {
+    margin-top: 0;
+  }
 }
 
 .extra-category-questions {
@@ -1813,6 +1832,7 @@ label .muted {
 
   #detailed_information_length {
     float: #{$right};
+    margin-top: 0.25em; // match the label next to it
     &.error {
       color: red;
     }
@@ -1927,6 +1947,9 @@ label .muted {
     label {
       margin:0;
     }
+    .form-hint {
+      margin-bottom: 0.5em;
+    }
     div {
       display:table;
       width:100%;