search feature implemented

CityOfNewYork · Apr 6, 2023 · 3ac32e1 · 3ac32e1
1 parent edc4410
commit 3ac32e1
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 112 deletions.
diff --git a/...es/workingnyc/assets/js/global-343e80d.js → ...es/workingnyc/assets/js/global-bb50449.js b/...es/workingnyc/assets/js/global-343e80d.js → ...es/workingnyc/assets/js/global-bb50449.js
@@ -1628,14 +1628,14 @@
     label: 'Dark Theme',
     classname: 'default',
     icon: 'lucide-moon',
-    version: '2.0.2'
+    version: '2.0.2.1'
   };
 
   let themeDark = {
     label: 'Light Theme',
     classname: 'dark',
     icon: 'lucide-sun',
-    version: '2.0.2'
+    version: '2.0.2.1'
   };
 
   // This block ensures compatibility with the previous site theme configuration

diff --git a/...c/assets/js/template-home-page-46bc182.js → ...c/assets/js/template-home-page-bd322ba.js b/...c/assets/js/template-home-page-46bc182.js → ...c/assets/js/template-home-page-bd322ba.js
@@ -1820,7 +1820,7 @@
 	 */
 	validators.transitional = function transitional(validator, version, message) {
 	  function formatMessage(opt, desc) {
-	    return '[Axios v' + '2.0.2' + '] Transitional option \'' + opt + '\'' + desc + (message ? '. ' + message : '');
+	    return '[Axios v' + '2.0.2.1' + '] Transitional option \'' + opt + '\'' + desc + (message ? '. ' + message : '');
 	  }
 
 	  // eslint-disable-next-line func-names

diff --git a/...yc/assets/styles/site-default-c7233cf.css → ...yc/assets/styles/site-default-08f73ad.css b/...yc/assets/styles/site-default-c7233cf.css → ...yc/assets/styles/site-default-08f73ad.css
diff --git a/wp-content/themes/workingnyc/views/objects/menu.twig b/wp-content/themes/workingnyc/views/objects/menu.twig
@@ -1,43 +1,38 @@
-<aside class="o-menu o-menu-fixed hidden" id="aria-c-menu" aria-hidden="true">
-  <div class="o-menu__wrap">
-    <button class="o-menu__nav-item" aria-controls="aria-c-menu" data-js="menu" data-js-menu="close" tabindex="-1">
-      <svg aria-hidden="true" class="icon-ui" tabindex="-1">
-        <use href="#lucide-x"></use>
-      </svg>
-
-      <span>{{ __('Close', 'WNYC') }}</span>
-    </button>
-
-    <hr />
-
-    <button class="o-menu__nav-item" data-js="themes" tabindex="-1">
-      <svg class="icon-ui" tabindex="-1">
-        <use data-js-themes="icon" href="#lucide-moon"></use>
-      </svg>
-
-      <span class="sr-only">Toggle&nbsp;</span><span data-js-themes="label">{{ __('Theme', 'WNYC') }}</span>
-    </button>
-
-    <button class="o-menu__nav-item" aria-controls="aria-c-search-menu" aria-expanded="false" data-dialog="open" data-js="search">
-      <svg class="icon-ui" tabindex="-1">
-        <title>{{__('Search', 'WNYC')}}</title>
-        <use href="#lucide-search"></use>
-      </svg>
-      <span>{{__('Search', 'WNYC') }}</span>
-    </button>
-
-    <div class="o-search hidden" aria-hidden="false" class="active" id="aria-c-search-menu">
-      {% include 'partials/search-form.twig' %}
+<aside class="o-menu o-menu-fixed hidden block" id="aria-c-menu" aria-hidden="true">
+  <button class="float-right" aria-controls="aria-c-menu" data-js="menu" data-js-menu="close" tabindex="-1">
+    <svg aria-hidden="true" class="icon-ui" tabindex="-1">
+      <use href="#lucide-x"></use>
+    </svg>
+  </button>
+  <div class="flex items-center h-full">
+    <div class="o-menu__wrap">
+      <a class="o-menu__nav-item" href="{{ site.url }}/?s=" tabindex="-1">
+        <svg class="icon-ui" tabindex="-1">
+          <title>{{__('Search', 'WNYC')}}</title>
+          <use href="#lucide-search"></use>
+        </svg>
+        <span>{{__('Search', 'WNYC') }}</span>
+      </a>
+
+      <hr />
+
+      <button class="o-menu__nav-item" data-js="themes" tabindex="-1">
+        <svg class="icon-ui" tabindex="-1">
+          <use data-js-themes="icon" href="#lucide-moon"></use>
+        </svg>
+
+        <span class="sr-only">Toggle&nbsp;</span><span data-js-themes="label">{{ __('Theme', 'WNYC') }}</span>
+      </button>
+
+      <hr />
+
+      <nav class="o-menu__nav" aria-label="{{ __('Menu', 'WNYC') }}">
+        <a class="o-menu__nav-item" href="{{ site.url }}" tabindex="-1">{{ __('Home', 'WNYC') }}</a>
+
+        {% for menu_item in header_menu.get_items %}
+        <a class="o-menu__nav-item" href="{{ menu_item.link }}" tabindex="-1">{{ menu_item.title }}</a>
+        {% endfor %}
+      </nav>
     </div>
-
-    <hr />
-
-    <nav class="o-menu__nav" aria-label="{{ __('Menu', 'WNYC') }}">
-      <a class="o-menu__nav-item" href="{{ site.url }}" tabindex="-1">{{ __('Home', 'WNYC') }}</a>
-
-      {% for menu_item in header_menu.get_items %}
-      <a class="o-menu__nav-item" href="{{ menu_item.link }}" tabindex="-1">{{ menu_item.title }}</a>
-      {% endfor %}
-    </nav>
   </div>
 </aside>
diff --git a/wp-content/themes/workingnyc/views/objects/navigation.twig b/wp-content/themes/workingnyc/views/objects/navigation.twig
@@ -15,13 +15,6 @@
   <a class="o-navigation__item" href="{{ menu_item.link }}">{{ menu_item.title }}</a>
   {% endfor %}
 
-  {# <button aria-controls="aria-c-search" aria-expanded="false" class="o-navigation__menu-item btn-link desktop:m-0" data-js="search">
-    <svg class="o-navigation__menu-icon icon-ui">
-      <use href="#icon-search"></use>
-    </svg>
-    <span class="o-navigation__menu-label">{{__('Search', 'WNYC')}}</span>
-  </button> #}
-
   <button class="o-navigation__item" data-js="themes">
     <svg class="o-navigation__menu-icon icon-ui">
       <use data-js-themes="icon" href="#lucide-moon"></use>

diff --git a/wp-content/themes/workingnyc/views/partials/search-form.twig b/wp-content/themes/workingnyc/views/partials/search-form.twig
@@ -1,4 +1,11 @@
-<form class="o-search__form w-full" style="max-width: var(--nyco-dimension-content-width)" action="/">
-    <label class="label pb-1">{{__('Search for work or services', 'WNYC')}}</label>
-    {% include 'partials/search-input.twig' %}
+<form class="o-search__form w-full" action="/">
+    <div class="input o-search__input rounded">
+        <input class="rounded border-0" data-js="search__input" tabindex="-1" inputmode="search" name="s" placeholder="Search" value="{{ s }}"></input>
+        <button type="submit" tabindex="-1" class="o-search__submit">
+            <svg class="icon-ui">
+                <title>{{__('Submit', 'WNYC')}}</title>
+            <use href="#lucide-search"></use>
+        </svg>
+        </button>
+    </div>
 </form>
diff --git a/wp-content/themes/workingnyc/views/partials/search-input.twig b/wp-content/themes/workingnyc/views/partials/search-input.twig
diff --git a/wp-content/themes/workingnyc/views/partials/search-overlay.twig b/wp-content/themes/workingnyc/views/partials/search-overlay.twig
@@ -7,7 +7,10 @@
   </button>
   <div class="py-2 tablet:py-8">
     <div class="justify-center flex">
-      {% include 'partials/search-form.twig' %}
+      <div class="block w-full" style="max-width: var(--nyco-dimension-content-width)">
+        <label class="label pb-1">{{__('Search for work or services', 'WNYC')}}</label>
+        {% include 'partials/search-form.twig' %}
+      </div>
     </div>
   </div>
 </div>
diff --git a/wp-content/themes/workingnyc/views/search.twig b/wp-content/themes/workingnyc/views/search.twig
@@ -2,59 +2,69 @@
 
 {% block content %}
   <div class="bg-scale-4">
-      <header class="o-header block" style="padding: calc(var(--nyco-grid) * 12)">
-        <div class="c-utility p-0 min-h-0">
-          <a class="link-icon mie-auto" href="{{ site.url }}">
-            <svg aria-hidden="true" class="icon-ui rtl:flip">
-              <use href="#lucide-chevron-left"></use>
-            </svg>
-
-            <span>{{ __('Home', 'WNYC') }}</span>
-          </a>
-        </div>
-        {% if term != '' %}
-          <div class="o-header__title" style="margin-top: calc(var(--nyco-typography-margin-bottom) * 1.5);">
-            <h1 id="page-heading" class="o-header__heading">{{__('Search results', 'WNYC')}}</h1>
+      <header class="o-header block px-4 tablet:px-6">
+        <div class="tablet:px-6" style="max-width: var(--nyco-dimension-content-width)"> {# TODO: figure out how to import px-12 from tailwind #}
+          <div class="c-utility p-0 min-h-0" style="margin-bottom: calc(var(--nyco-typography-margin-bottom) * 1.5);">
+            <a class="link-icon mie-auto" href="{{ site.url }}">
+              <svg aria-hidden="true" class="icon-ui rtl:flip">
+                <use href="#lucide-chevron-left"></use>
+              </svg>
+              <span>{{ __('Home', 'WNYC') }}</span>
+            </a>
+          </div>
+          <div class="o-header__title mt-0" style="">
+            <h1 id="page-heading" class="o-header__heading">{{ term == '' ? __('Search', 'WNYC') : __('Search results', 'WNYC')}}</h1>
+          </div>
+          {% include 'partials/search-form.twig' %}
           </div>
-        {% endif %}
-        {% include 'partials/search-input.twig' %}
       </header>
   </div>
 
-  {% if term != '' %}
-    <section class="desktop:px-6">
-      <div class="wrap desktop:px-6">
+  <section class="px-4 tablet:px-6">
+    {% if term != '' %}
+      {% if posts|length > 0 %}
         {% block list_sidebar %}
         {% endblock %}
-      </div>
-      <div class="desktop:px-6">
-        {% block before_list %}
-        <h2 class="text-p font-p inline-block my-4">
-          {{ __('Showing {{ TOTAL_VISIBLE }} results for "{{ TERM }}".')|replace({'{{ TOTAL_VISIBLE }}': posts|length, '{{ TERM }}': term}) }}
-        </h2>
-        {% endblock %}
-        <div class="grid gap-3 desktop:grid-cols-2 mb-3">
-          {% block post_list %}
-            {% for post in posts %}
-              {% if post.post_type == 'jobs' %}
-                {% include 'jobs/job.twig' with {
-                  this: {
-                    post: post
-                  }
-                } %}
-              {% elseif post.post_type == 'programs' %}
-                {% include 'programs/program.twig' with {
-                  this: {
-                    post: post
-                  }
-                } %}
-              {% endif %}
-            {% endfor %}
+        <div class="tablet:px-6">
+          {% block before_list %}
+          <h2 class="text-p font-p inline-block my-4">
+            {{ __('Showing {{ TOTAL_VISIBLE }} results for "{{ TERM }}".')|replace({'{{ TOTAL_VISIBLE }}': posts|length, '{{ TERM }}': term}, 'WNYC') }}
+          </h2>
           {% endblock %}
-        </div>
-        {% block after_list %}
-        {% endblock %}
-      </div> 
-    </section> 
-  {% endif %}
+          <div class="grid gap-3 desktop:grid-cols-2 mb-3">
+            {% block post_list %}
+              {% for post in posts %}
+                {% if post.post_type == 'jobs' %}
+                  {% include 'jobs/job.twig' with {
+                    this: {
+                      post: post
+                    }
+                  } %}
+                {% elseif post.post_type == 'programs' %}
+                  {% include 'programs/program.twig' with {
+                    this: {
+                      post: post
+                    }
+                  } %}
+                {% endif %}
+              {% endfor %}
+            {% endblock %}
+          </div>
+          {% block after_list %}
+          {% endblock %}
+        </div> 
+      {% else %}
+      <div class="my-3 tablet:my-4 tablet:px-6">
+        <h4>{{__('No results for "{{ TERM }}"'|replace({'{{ TERM }}': term}), 'WNYC')}}</h4>
+        <h5 style="margin-top: var(--nyco-typography-margin-bottom);">{{__('Search help', 'WNYC')}}</h5>
+        <list>
+          <li class="m-0">{{__('Check your search for typos', 'WNYC')}}</li>
+          <li class="m-0">{{__('Use generic search terms', 'WNYC')}}</li>
+          <li class="m-0">{{__('Browse our <a href="{{ PROGRAMS_URL }}">programs</a> and <a href="{{ JOBS_URL }}">jobs</a>'|replace({'{{ PROGRAMS_URL }}': site.url ~ '/programs', '{{ JOBS_URL }}': site.url ~ '/jobs'}), 'WNYC')}}</li>
+        </list>
+        <h5 style="margin-top: var(--nyco-typography-margin-bottom);">{{__('If you still can\'t find what you\'re looking for, <a href="{{ FEEDBACK_URL }}">send feedback</a> to improve our site.'|replace({'{{ FEEDBACK_URL }}': 'https://airtable.com/shrfQGpXvo9mmmHpJ'}), 'WNYC')}}</h5>
+      </div>
+      {% endif %}
+    {% endif %}
+  </section> 
 {% endblock %}