Change banner to function and add js to display show and hide form.

This commit is contained in:
Fabiano 2018-06-14 12:58:33 -03:00
parent db75bd1580
commit bb70a3b022
4 changed files with 59 additions and 14 deletions

View File

@ -52,6 +52,23 @@ jQuery(document).ready(function( $ ) {
});
});
$('.showInput').on('click', function(){
$('.tainacan-form-search').removeClass('d-none');
$('.tainacan-form-search').addClass('d-flex');
$(this).addClass('d-none');
$('.tainacan-form-search').animate({opacity: '1'}, "slow");
/* if($.trim($('.tainacan-input-search').val()).length){
$('#btn-reset').removeClass('d-none');
}else{
$('#btn-reset').addClass('d-none');
} */
});
$('.tainacan-input-search').on('blur', function(){
$('.tainacan-form-search').animate({opacity: '0'}, "slow", function(){
$('.showInput').removeClass('d-none');
});
});
var config = {
attributes: true,
childList: true,
@ -62,4 +79,6 @@ jQuery(document).ready(function( $ ) {
});
function showInput(){
this.removeClass = 'd-none';
}

View File

@ -167,6 +167,36 @@ function tainacan_get_logo() {
}
}
function tainacan_get_form_search(){
if(wp_is_mobile()){
$input = 'border-0';
$reset = 'border-0';
$submit = 'border-0';
}else{
$input = 'border-right-0 rounded-0';
$reset = 'border-left-0 border-right-0 rounded-0';
$submit = 'border border-left-0 rounded-0';
}
$form = '';
$form .= '<form class="tainacan-form-search d-none align-items-center">';
$form .= '<div id="test-form-search" class="d-flex justify-content-between">';
$form .= '<div id="input-search" class="w-100 pl-1">';
$form .= '<input class="form-control tainacan-input-search py-0 pr-0 '.$input.'" type="search" placeholder="Pesquisar no repositório" style="height:31px">';
$form .= '</div>';
if(wp_is_mobile()){
$form .= '<div id="btn-reset" class="d-none">';
$form .= '<button type="reset" class="btn border bg-white tainacan-button-search '.$reset.'"><i class="mdi mdi-close"></i></button>';
$form .= '</div>';
}
$form .= '<div id="btn-submit" class="mr-1">';
$form .= '<button id="btn-submit-search" class="btn text-heavy-metal bg-white pl-0 pr-1 tainacan-button-search py-0 '.$submit.'"><i class="mdi mdi-magnify"></i></button>';
$form .= '</div>';
$form .= '</div>';
$form .= '</form>';
return $form;
}
/**
* Change logo class function
*

View File

@ -17,6 +17,11 @@
<div class="container-fluid max-large px-0">
<?php echo tainacan_get_logo(); ?>
<div class="btn-group ml-auto">
<?php
if(!wp_is_mobile())
echo tainacan_get_form_search();
?>
<button class="btn btn-link text-heavy-metal px-1 showInput"><i class="mdi mdi-magnify"></i></button>
<button type="button" class="btn btn-link text-heavy-metal dropdown-toggle dropdown-toggle-split px-1 d-flex align-items-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-account-outline"></i><div class="d-none d-md-inline-flex px-1">User</div><span class="sr-only text-jelly-bean">Toggle Dropdown</span>
</button>

View File

@ -1,16 +1,7 @@
<form class="tainacan-form-search d-sm-none">
<div class="d-flex justify-content-between">
<div class="w-100 pt-1 mt-2 pl-1">
<input class="form-control h-75 tainacan-input-search py-0 border-0" type="search" placeholder="Pesquisar">
</div>
<div class="pt-1 mt-2 ml-1">
<button type="reset" class="btn h-75 pt-0 pr-0 border-0 bg-white tainacan-button-search" onclick=""><i class="mdi mdi-close"></i></button>
</div>
<div class="pt-1 mt-2 mx-1">
<button type="submit" class="btn h-75 pt-0 border-0 text-heavy-metal bg-white tainacan-button-search" onclick=""><i class="mdi mdi-magnify"></i></button>
</div>
</div>
</form>
<?php
if(wp_is_mobile())
echo tainacan_get_form_search();
?>
<div <?php if ( get_header_image() ) : ?>class="page-header header-filter clear-filter page-height" style="background-image: url('<?php header_image(); ?>')"<?php else: ?>class="page-header header-filter clear-filter" style="background-image: url('<?php echo get_template_directory_uri() ?>/assets/images/capa.png')"<?php endif; ?>>
<div class="container-fluid p-0 mb-5">