Mobile search UX update

docker-compose.yml

@@ -136,6 +136,10 @@ networks:
         name: "${PROJECT}-back"
 
 volumes:
-        wordpress: { }
-        wp-content: { }
+        mariadb:
+            name: "${PROJECT}-mariadb"
+        wordpress:
+            name: "${PROJECT}-wordpress"
+        wp-content:
+            name: "${PROJECT}-wp-content"
 

wp-content/themes/biuro/footer.php

@@ -152,7 +152,7 @@
 
 ?>
 
-    <script src="/wp-content/themes/biuro/js/main-efbd8610.min.js" async defer></script>
+    <script src="/wp-content/themes/biuro/js/main-a24027de.min.js" async defer></script>
 
     <script src="/wp-content/themes/biuro/js/vendor/modernizr-custom.js" async defer></script>
 

wp-content/themes/biuro/js/main.js

@@ -340,6 +340,8 @@ if (document.querySelector('.js-copy-to-clipboard') || document.querySelector('.
     });
 }
 
+inititatePopup();
+
 if (document.querySelector('.js-collapse-row--toggle')) {
     document.querySelector('.js-collapse-row--toggle').addEventListener('click', (e) => {
         e.currentTarget.parentNode.classList.toggle('c-form--row--collapsed');
@@ -352,4 +354,18 @@ if (recaptcha) {
     inititateRecaptcha(recaptcha);
 }
 
-inititatePopup();
+(global => {
+    const form = document.getElementById('search');
+
+    if (!form) {
+        return;
+    }
+
+    document.querySelectorAll('.js-search--focus').forEach((node) => {
+        node.addEventListener('focus', () => {
+            if (window.innerWidth < 960 && form.getBoundingClientRect().top > 80) {
+                window.scroll(0, 142);
+            }
+        });
+    });
+})(window);

wp-content/themes/biuro/searchform.php

@@ -28,6 +28,8 @@ endif;
 
 $langs = pll_the_languages(array('raw'=>1));
 $langID = $langs[pll_current_language('slug')]['id'];
+
+$isFrontPage = is_front_page();
 ?>
 <form id="search" class="c-search" action="<?php echo home_url(); ?>" method="get">
 
@@ -44,7 +46,7 @@ $langID = $langs[pll_current_language('slug')]['id'];
             endforeach;
 ?>
         </datalist>
-        <input list="search-cities" id="search-city" data-id="<?php echo $langID; ?>" aria-label="<?php _e('Locations', 'biuro'); ?>" name="city" value="<?php echo (isset($searchQuery['city'])) ? trim(urldecode($searchQuery['city'])) : ''; ?>" placeholder="<?php _e('Locations', 'biuro'); ?>" class="c-search--input c-search--location" />
+        <input list="search-cities" id="search-city" data-id="<?php echo $langID; ?>" aria-label="<?php _e('Locations', 'biuro'); ?>" name="city" value="<?php echo (isset($searchQuery['city'])) ? trim(urldecode($searchQuery['city'])) : ''; ?>" placeholder="<?php _e('Locations', 'biuro'); ?>" class="c-search--input c-search--location <?php if ($isFrontPage): echo 'js-search--focus'; endif; ?>" />
         <span class="js-clear--search-city c-search--ico-clear <?php if (!isset($searchQuery['city'])): ?>u-hidden<?php endif; ?>">
             <svg width="10px" height="10px" viewBox="0 0 13 13">
                 <path fill="none" stroke="#B8BCC1" stroke-width="2" stroke-linecap="square" d="M6.5,6.5L0.843,0.843L6.5,6.5 l-5.657,5.657L6.5,6.5z M6.5,6.5l5.657,5.657L6.5,6.5l5.657-5.657L6.5,6.5z"/>
@@ -74,7 +76,7 @@ $langID = $langs[pll_current_language('slug')]['id'];
             endforeach;
 ?>
         </datalist>
-        <input list="search-queries" id="search-query" data-id="<?php echo $langID; ?>" aria-label="<?php _e('Keyword', 'biuro'); ?>" name="s" value="<?php echo (isset($searchQuery['s'])) ? trim(urldecode($searchQuery['s'])) : ''; ?>" placeholder="<?php _e('Keyword', 'biuro'); ?>" class="c-search--input c-search--keyword" />
+        <input list="search-queries" id="search-query" data-id="<?php echo $langID; ?>" aria-label="<?php _e('Keyword', 'biuro'); ?>" name="s" value="<?php echo (isset($searchQuery['s'])) ? trim(urldecode($searchQuery['s'])) : ''; ?>" placeholder="<?php _e('Keyword', 'biuro'); ?>" class="c-search--input c-search--keyword <?php if ($isFrontPage): echo 'js-search--focus'; endif; ?>" />
         <span class="js-clear--search-query c-search--ico-clear <?php if (!isset($searchQuery['s'])): ?>u-hidden<?php endif; ?>">
             <svg width="10px" height="10px" viewBox="0 0 13 13">
                 <path fill="none" stroke="#B8BCC1" stroke-width="2" stroke-linecap="square" d="M6.5,6.5L0.843,0.843L6.5,6.5 l-5.657,5.657L6.5,6.5z M6.5,6.5l5.657,5.657L6.5,6.5l5.657-5.657L6.5,6.5z"/>