tmdinosaurcenter
/
tainacan-theme
mirror of https://github.com/tainacan/tainacan-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added responsive form search on mobile and desktop.

This commit is contained in:
Fabiano Alencar 2018-06-14 14:52:49 -03:00
parent c9b1c1828a
commit bbc9789fbc
5 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/js/js.js
View File

@ -55,7 +55,10 @@ jQuery(document).ready(function( $ ) {
$('.showInput').on('click', function(){
$('.tainacan-form-search').removeClass('d-none');
$('.tainacan-form-search').addClass('d-flex');
$(this).addClass('d-none');
if($(window).width() > 768){
$(this).addClass('d-none');
}
$(this).attr('type', 'submit');
$('.tainacan-form-search').animate({opacity: '1'}, "slow");
/* if($.trim($('.tainacan-input-search').val()).length){
$('#btn-reset').removeClass('d-none');
@ -66,6 +69,7 @@ jQuery(document).ready(function( $ ) {
$('.tainacan-input-search').on('blur', function(){
$('.tainacan-form-search').animate({opacity: '0'}, "slow", function(){
$('.showInput').removeClass('d-none');
$('.showInput').removeAttr('type');
});
});
@ -78,7 +82,3 @@ jQuery(document).ready(function( $ ) {
observer.observe(document.getElementById('items-list-area'), config);
});
function showInput(){
this.removeClass = 'd-none';
}

17
src/assets/scss/style.scss
View File

@ -111,7 +111,24 @@ form{
&.tainacan-form-search{
flex-flow: nowrap;
opacity: 0;
@media only screen and (max-width: 576px) {
position: absolute;
top: 46px;
right: 86px;
z-index: 2;
}
@media only screen and (min-width: 600px) and (max-width: 768px) {
position: absolute;
top: 46px;
right: 120px;
z-index: 2;
}
.tainacan-input-search{
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
@media only screen and (max-width: 768px) {
width: 250px;
height: 27px;
}
border-color: #cbcbcb !important;
&:focus{
box-shadow: none;

10
src/functions.php
View File

@ -169,9 +169,9 @@ function tainacan_get_logo() {
function tainacan_get_form_search(){
if(wp_is_mobile()){
$input = 'border-0';
$reset = 'border-0';
$submit = 'border-0';
$input = 'border-0 rounded-0';
$reset = 'border-0 rounded-0';
$submit = 'border-0 rounded-0';
}else{
$input = 'border-right-0 rounded-0';
$reset = 'border-left-0 border-right-0 rounded-0';
@ -189,8 +189,8 @@ function tainacan_get_form_search(){
$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 id="btn-submit" class="mr-1 d-none d-lg-block">';
$form .= '<button type="submit" 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>';

3
src/header.php
View File

@ -18,8 +18,7 @@
<?php echo tainacan_get_logo(); ?>
<div class="btn-group ml-auto">
<?php
if(!wp_is_mobile())
echo tainacan_get_form_search();
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">

4
src/template-parts/bannerHeader.php
View File

@ -1,6 +1,6 @@
<?php
if(wp_is_mobile())
echo tainacan_get_form_search();
/* 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; ?>>