From 6af0d6bc701cb1bcd7be48142aec8f804ed676db Mon Sep 17 00:00:00 2001
From: Tim Cowlishaw <tim@timcowlishaw.co.uk>
Date: Mon, 30 Jan 2023 13:43:40 +0100
Subject: [PATCH] Tweak mobile layout to ensure placeholder text is visible

Thanks to Terry for the inspiration - at the smallest breakpoint we swap the label and placeholder text, to ensure the full instructions are visible!
---
 .../sass/includes/_search.scss                | 24 ++++++++++++++++++-
 .../templates/includes/basic_search_form.html |  6 +++--
 locale/en_GB/LC_MESSAGES/django.po            |  2 +-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/ds_judgements_public_ui/sass/includes/_search.scss b/ds_judgements_public_ui/sass/includes/_search.scss
index b41b9409d..975badb71 100644
--- a/ds_judgements_public_ui/sass/includes/_search.scss
+++ b/ds_judgements_public_ui/sass/includes/_search.scss
@@ -54,8 +54,18 @@
     padding-right: calc($spacer__unit * 3);
   }
 
-  &__search-term-label {
+  &__search-term-label.desktop {
+    @media (max-width: $grid__breakpoint-medium) {
+      display: none;
+    }
     @include sr-only;
+
+  }
+
+  &__search-term-label.mobile {
+    @media (min-width: $grid__breakpoint-medium) {
+      display: none;
+    }
   }
 
   &__search-term-input {
@@ -75,6 +85,18 @@
     @media (min-width: $grid__breakpoint-extra-large) {
       width: 35rem;
     }
+
+    &.mobile {
+      @media (min-width: $grid__breakpoint-medium) {
+        display: none;
+      }
+    }
+
+    &.desktop {
+      @media (max-width: $grid__breakpoint-medium) {
+        display: none;
+      }
+    }
   }
 
   input[type=checkbox] {
diff --git a/ds_judgements_public_ui/templates/includes/basic_search_form.html b/ds_judgements_public_ui/templates/includes/basic_search_form.html
index f26ca2f9b..d19e95722 100644
--- a/ds_judgements_public_ui/templates/includes/basic_search_form.html
+++ b/ds_judgements_public_ui/templates/includes/basic_search_form.html
@@ -4,8 +4,10 @@
     <h2 class="search-component__header--sr-only">{% translate "basicsearchform.title" %}</h2>
     <form action="{% url 'results' %}" role="search" aria-label="Search by keyword or neutral citation" id="analytics-basic-search">
 
-      <label for="search_term" class="search-component__search-term-label">{% translate "basicsearchform.label" %}</label>
-      <input class="search-component__search-term-input" id="search_term" name="query" type="text" value="" placeholder="{% translate "basicsearchform.placeholder" %}">
+      <label for="search_term" class="search-component__search-term-label desktop">{% translate "basicsearchform.label" %}</label>
+      <input class="search-component__search-term-input desktop" id="search_term" name="query" type="text" value="" placeholder="{% translate "basicsearchform.placeholder" %}">
+      <label for="search_term" class="search-component__search-term-label mobile">{% translate "basicsearchform.placeholder" %}</label>
+      <input class="search-component__search-term-input mobile" id="search_term" name="query" type="text" value="" placeholder="{% translate "basicsearchform.label" %}">
       {{ form.search_term }}
       <input type="submit" value="{%  translate "basicsearchform.cta" %}">
 
diff --git a/locale/en_GB/LC_MESSAGES/django.po b/locale/en_GB/LC_MESSAGES/django.po
index 11845e34c..501d5d662 100644
--- a/locale/en_GB/LC_MESSAGES/django.po
+++ b/locale/en_GB/LC_MESSAGES/django.po
@@ -33,7 +33,7 @@ msgstr "Search"
 
 #: ds_judgements_public_ui/templates/includes/basic_search_form.html:8
 msgid "basicsearchform.placeholder"
-msgstr "Enter keyword, party name or neutral citation"
+msgstr "Enter keyword, party name or neutral&nbsp;citation"
 
 #: ds_judgements_public_ui/templates/includes/basic_search_form.html:10
 msgid "basicsearchform.cta"