Change banner to function and add js to display show and hide form.
This commit is contained in:
parent
db75bd1580
commit
bb70a3b022
|
@ -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';
|
||||
}
|
||||
|
|
|
@ -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
|
||||
*
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue