From bfc1eab9f2f7009993584107d39d80f472c6c99e Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Thu, 13 Aug 2020 11:18:41 -0300 Subject: [PATCH] Begins implementation of new search form. --- src/assets/js/search-bar-redirect.js | 24 +++++ src/assets/scss/_post.scss | 2 +- src/assets/scss/style.scss | 147 ++++++++++++--------------- src/functions.php | 11 +- src/functions/enqueues.php | 1 + src/header.php | 18 +--- src/searchform.php | 42 +++++++- src/style.css.map | 2 +- 8 files changed, 139 insertions(+), 108 deletions(-) create mode 100644 src/assets/js/search-bar-redirect.js diff --git a/src/assets/js/search-bar-redirect.js b/src/assets/js/search-bar-redirect.js new file mode 100644 index 0000000..5f61698 --- /dev/null +++ b/src/assets/js/search-bar-redirect.js @@ -0,0 +1,24 @@ +function onTainacanSearchSubmit($event) { + + if (document['tainacan-search-form']) { + + if (document['tainacan-search-form'].archive && defined ( 'TAINACAN_VERSION' )) { + switch (document['tainacan-search-form'].archive.value) { + case 'tainacan-items': + document['tainacan-search-form'].action = tainacan_plugin.theme_items_list_url + (document['tainacan-search-form'].s ? '?search=' + document['tainacan-search-form'].s.value : ''); + break; + case 'tainacan-collections': + document['tainacan-search-form'].action = tainacan_plugin.theme_collection_list_url + (document['tainacan-search-form'].s ? '?s=' + document['tainacan-search-form'].s.value : ''); + break; + case 'posts': + default: + document['tainacan-search-form'].action = '/' + (document['tainacan-search-form'].s ? '?s=' + document['tainacan-search-form'].s.value : ''); + } + } else { + document['tainacan-search-form'].action = '/' + (document['tainacan-search-form'].s ? '?s=' + document['tainacan-search-form'].s.value : ''); + } + + $event.preventDefault(); + } + return true; +} \ No newline at end of file diff --git a/src/assets/scss/_post.scss b/src/assets/scss/_post.scss index 3602406..b46eebb 100644 --- a/src/assets/scss/_post.scss +++ b/src/assets/scss/_post.scss @@ -866,7 +866,7 @@ h4, label { color: #454647; - font-size: 0.875rem; + font-size: 0.85rem; font-weight: 500; padding-right: 0.875rem; width: 100%; diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index 2baf3e9..81ab913 100644 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -263,16 +263,25 @@ nav{ } } } - .tainacan-search-form { - .form-control { - height: 27px; - font-size: 0.875rem; - font-weight: 400; - color: #898d8f; + @keyframes searchFormAppear { + from { + max-height: 0px; + max-height: 0vh; + opacity: 0; + width: 32px; + right: 0px; + } + to { + opacity: 1.0; + max-height: 400px; + max-height: 100vh; + width: 260px; + right: -4px; } } .tainacan-form-dropdown { #dropdownMenuLink { + padding-right: 0.25rem !important; &::after { content: none; } @@ -282,26 +291,64 @@ nav{ .tainacan-icon-close { display: none; } } > .dropdown-menu { - top: calc(100% + 2px); - right: 0; - width: 204px; - height: 27px; + top: 0; + right: -4px; + width: 260px; + height: auto; padding: 0; left: inherit; + overflow: hidden; + .input-group { - border: 0; + background: white; + padding: 0rem; + align-items: center; + height: 2.75rem; } .form-control { + height: 100%; border-radius: 0; font-size: 0.875rem; font-weight: 400; color: #898d8f; + padding-right: 2rem; + + &:focus { + color: #454647; + box-shadow: none; + border: 1px solid #555758 !important; + } + } + .search-controls { + background: #f2f2f2; + border-bottom: 1px solid #dee2e6; + border-left: 1px solid #dee2e6; + border-right: 1px solid #dee2e6; + padding: 0.75rem 0.875rem 0.125rem 0.875rem; + font-size: 0.75rem; + display: flex; + flex-direction: column; + label { + white-space: nowrap; + display: flex; + input { + margin-right: 0.5rem; + } + } + } + &.show { + animation: searchFormAppear 0.4s ease; } } &.show { + .input-group-append { display: none !important; } .tainacan-icon-search { display: none; } - .tainacan-icon-close { display: block !important; } + .tainacan-icon-close { + position: relative; + z-index: 999999; + display: block !important; + } } } .dropdown-item:hover { @@ -316,7 +363,9 @@ nav{ > li{ &.menu-item { - padding-left: 42px; + @media screen and (min-width: 769px){ + padding-left: 42px; + } a { font-size: 0.875rem; @@ -358,6 +407,7 @@ nav{ @media only screen and (max-width: 1024px) { padding-right: 4.1666667%; padding-right: 4.1666667vw; + padding-left: 0; } @media only screen and (max-width: 768px) { padding-right: 0; @@ -383,8 +433,8 @@ nav{ } @media only screen and (max-width: 768px) { position: absolute; - top: 42px; - right: 0; + top: 48px; + right: -24px; border: 1px solid #dbdbdb; background-color: #fff; z-index: 3; @@ -471,9 +521,7 @@ nav{ margin-right: 32px !important; } - .tainacan-icon-menu, - .tainacan-icon-close { - margin-top: -4px; + .tainacan-icon { color: #01295C !important; } @@ -493,69 +541,6 @@ nav{ border-bottom: 1px solid #ededed !important; } -.tainacan-search-form { - width: 32px; - height: 32px; - position: relative; - - .input-group { - transition: all 0.35s, border-radius 0s; - width: 32px; - height: 32px; - cursor: pointer; - background-color: #fff; - position: absolute; - top: 0; - right: 0; - overflow: hidden; - border: 1px solid transparent; - //box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; - //border-radius: 25px; - //border: 1px solid #ccc; - .form-control { - //margin-left: -25px; - border:none; - background: transparent; - box-shadow: none; - display:block; - padding: 1rem 2rem; - padding-left: 1rem; - &::-webkit-input-placeholder { - display: none; - } - &:-moz-placeholder { - /* Firefox 18- */ - display: none; - } - &:-ms-input-placeholder { - display: none; - } - } - &:hover, &.hover { - width: 350px; - //border-radius: 25px 25px 25px 25px; - border: 1px solid #ccc; - } - .form-control-feedback { - position: absolute; - top: 0; - right: 0; - display: block; - width: 30px; - height: 30px; - text-align: center; - font-size: 1.1875rem; - - &:before { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - } - } - } -} - .page-header { height: 200px; diff --git a/src/functions.php b/src/functions.php index 3a76896..dae8d73 100644 --- a/src/functions.php +++ b/src/functions.php @@ -152,7 +152,7 @@ if ( ! function_exists( 'tainacan_setup' ) ) { add_theme_support( 'custom-units' ); add_theme_support( 'editor-style' ); add_editor_style( 'editor-style.css' ); - + } } // End if(). add_action( 'after_setup_theme', 'tainacan_setup' ); @@ -191,12 +191,9 @@ add_action( 'admin_head', 'tainacan_customize_editor_css'); * @param object $query The main WordPress query. */ function tainacan_include_items_in_search_results( $query ) { - - if ( get_theme_mod( 'tainacan_search_include_items', false ) ) { - if ( $query->is_main_query() && $query->is_search() && ! is_admin() ) { - $collections_post_types = \Tainacan\Repositories\Repository::get_collections_db_identifiers(); - $query->set( 'post_type', array_merge( ['post'], $collections_post_types ) ); - } + if ( $query->is_main_query() && $query->is_search() && ! is_admin()) { + $collections_post_types = \Tainacan\Repositories\Repository::get_collections_db_identifiers(); + $query->set( 'post_type', array_merge( ['post'], $collections_post_types ) ); } } add_action( 'pre_get_posts', 'tainacan_include_items_in_search_results' ); diff --git a/src/functions/enqueues.php b/src/functions/enqueues.php index bc5d041..64f03f1 100644 --- a/src/functions/enqueues.php +++ b/src/functions/enqueues.php @@ -58,6 +58,7 @@ if ( ! function_exists( 'tainacan_enqueues' ) ) { wp_register_script( 'tainacan_tainacanJS', get_template_directory_uri() . '/assets/js/js.js', '', TAINACAN_INTERFACE_VERSION, true ); wp_enqueue_script( 'tainacan_tainacanJS' ); + wp_enqueue_script( 'tainacan_searchBarRedirect', get_template_directory_uri() . '/assets/js/search-bar-redirect.js', [] , TAINACAN_INTERFACE_VERSION, false ); wp_enqueue_script( 'tainacan_copyLink', get_template_directory_uri() . '/assets/js/copy-link.js', [] , TAINACAN_INTERFACE_VERSION, false ); wp_localize_script( 'tainacan_copyLink', 'tainacan_copyLinkVars', array( 'linkCopied' => __( 'Copied! Link sent to the transfer area.', 'tainacan-interface' ) diff --git a/src/header.php b/src/header.php index 98d06da..532bd07 100644 --- a/src/header.php +++ b/src/header.php @@ -19,9 +19,7 @@