Adjust site search appearance on search page per @gissoo

Princeton-CDH · Aug 12, 2021 · 0fbd67c · 0fbd67c
1 parent 850531b
commit 0fbd67c
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 33 deletions.
diff --git a/cdhweb/pages/templates/cdhpages/search.html b/cdhweb/pages/templates/cdhpages/search.html
@@ -1,15 +1,20 @@
 {% extends 'base.html' %}
-{% load humanize cdh_tags wagtailcore_tags %}
+{% load static humanize cdh_tags wagtailcore_tags %}
 {# Site search page #}
 
 {% block bodyclass %}search{% endblock bodyclass %}
 
 {% block main %}
 <h1 class="sr-only">{{ page_title }}</h1>
 <form class="search" action="{% url 'search' %}" method="get">
+    <a href="/" class="home-page">
+        <img alt="home" src="{% static "img/CDH_logo.svg" %}" />
+    </a>
     {{ form.q }}
-    {{ form.filter }}
-    <input type="submit" value="Search">
+    <label class="submit">
+        <img alt="submit" src="{% static "img/cdh-icons/search.svg" %}" />
+        <input type="submit" class="sr-only">
+    </label>
 </form>
 <div class="results">
     {% if page_obj %}

diff --git a/sitemedia/scss/base/_forms.scss b/sitemedia/scss/base/_forms.scss
@@ -96,42 +96,58 @@ select {
 
 // search page form
 form.search {
-  position: relative;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 1px 18px rgba(0, 0, 0, 0.12);
+  background: $base-background-color;
+  height: $small-header-nav-height;
+
+  @media (min-width: $medium-min-width) {
+    height: $header-nav-height;
+  }
+
+  a.home-page,
+  label.submit {
+    flex: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    padding: 14px;
+
+    img {
+      height: 100%;
+    }
+  }
+
+  label.submit {
+    margin: 0;
+    cursor: pointer;
+  }
 
   input[type="search"] {
+    flex: auto;
+    height: 100%;
     font-size: 16px;
-    line-height: 20px;
     border: none;
-    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 1px 18px rgba(0, 0, 0, 0.12);
-    padding: 16px;  
+    padding: 0 16px;
+    margin: 0;
+    max-width: $small-content-width;
+    box-shadow: none;
 
-    @media (min-width: $large-min-width) {
+    @media (min-width: $medium-min-width) {
+      max-width: $medium-content-width;
       font-size: 20px;
-      line-height: 24px;
-      padding: 16px 16px 16px 100px;  
     }
-  }
-
-  input[type="submit"] {
-    @include cdh-icon("search");
-    background-color: transparent;
-    font-size: 0;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 24px;
-    height: 24px;
-    top: 14px;
-    right: 16px;
 
     @media (min-width: $large-min-width) {
-      width: 30px;
-      height: 30px;
-      right: 116px;
+      max-width: $large-content-width;
     }
   }
 }
diff --git a/sitemedia/scss/base/_navigation.scss b/sitemedia/scss/base/_navigation.scss
@@ -46,12 +46,16 @@ header.nav {
 
     }
 
-    // hide via pitbar or permanently when on search page
-    &.hidden,
-    body.search & {
+    // hide via pitbar
+    &.hidden {
         margin-top: -90px;
     }
 
+    // hide and remove from a11y tree on search page
+    body.search & {
+        display: none;   
+    }
+
      a {
         color: #000000;
         text-decoration: none;

diff --git a/sitemedia/scss/site.scss b/sitemedia/scss/site.scss
@@ -1780,4 +1780,9 @@ body.richtextpage {
 #ed11y-panel {
 	bottom: 6.5em !important;
 	right: 3em !important; /* line up with wagtail user bar */
+}
+
+/* search page */
+body.search {
+	padding: 0;
 }