Merge pull request #535 from nationalarchives/fix/346-placeholder-tex…

…t-mobile-view Tweak mobile layout to ensure placeholder text is visible
nationalarchives · Jan 31, 2023 · 800edfd · 800edfd
2 parents 36a5948 + 6af0d6b
commit 800edfd
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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"