Implementando a barra compacta e o campo de busca com apenas um input text
This commit is contained in:
Alvino Rodrigues
parent
37e45d374f
commit
f6b74b00d2
|
|
@ -120,6 +120,50 @@ jQuery(document).ready(function( $ ) {
|
|||
jQuery('.button-high-contrast').on('click',function() {
|
||||
jQuery('body').toggleClass('contraste');
|
||||
});
|
||||
|
||||
/*
|
||||
* BOTÃO DE EXIBIÇÃO DO FORMULÁRIO DE BUSCA
|
||||
*/
|
||||
jQuery('.tainacan-search-button').on('click',function() {
|
||||
var _elementoPai = jQuery(this).parents('.input-group');
|
||||
|
||||
if (!_elementoPai.hasClass('hover')) {
|
||||
_elementoPai.addClass('hover');
|
||||
|
||||
return false;
|
||||
} else {
|
||||
if (jQuery('#tainacan-search-header').val() == '') {
|
||||
_elementoPai.removeClass('hover');
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
jQuery('#tainacan-search-header').on({
|
||||
'focus': function() {
|
||||
jQuery(this).parents('.input-group').addClass('hover');
|
||||
},
|
||||
'blur': function() {
|
||||
jQuery(this).parents('.input-group').removeClass('hover');
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* AO CLICAR EM QUALQUER LUGAR DA PÁGINA, O CAMPO DE BUSCA ABERTO É FECHADO
|
||||
*/
|
||||
var _formBusca = jQuery('.tainacan-search-form'),
|
||||
_formBuscaFilho = _formBusca.find('.input-group');
|
||||
|
||||
_formBusca.on('click',function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
jQuery('body').on('click',function() {
|
||||
if (_formBuscaFilho.hasClass('hover')) {
|
||||
_formBuscaFilho.removeClass('hover');
|
||||
}
|
||||
});
|
||||
});
|
||||
jQuery(document).ready(function(e) {
|
||||
var t = e(".dotmore");
|
||||
|
|
|
|||
|
|
@ -104,9 +104,8 @@ nav{
|
|||
top: calc(100% + 2px);
|
||||
right: 0;
|
||||
width: 204px;
|
||||
height: 27px;
|
||||
padding: 0;
|
||||
left: inherit;
|
||||
left: inherit; display: block;
|
||||
.input-group {
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -246,20 +245,73 @@ nav{
|
|||
}
|
||||
}
|
||||
.form-control-feedback {
|
||||
width: 34px;
|
||||
height: 30px;
|
||||
font-size: 1.1875rem !important;
|
||||
color: #3596e0;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 1px;
|
||||
left: 5px;
|
||||
display: block;
|
||||
width: 34px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #3596e0;
|
||||
cursor: pointer;
|
||||
left: initial;
|
||||
font-size: 1.1875rem;
|
||||
border: none;
|
||||
background: none;
|
||||
z-index: 9;
|
||||
transform: translate(0,-50%);
|
||||
|
||||
span:before {
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.navbar { z-index: 2; }
|
||||
.tainacan-search-form .input-group {
|
||||
.form-control {
|
||||
width: 200px;
|
||||
height: 38px;
|
||||
padding: 1rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
border-radius: .25rem;
|
||||
border: 1px solid transparent;
|
||||
background-clip: padding-box;
|
||||
background-color: #fff;
|
||||
z-index: -2;
|
||||
transition: transform 0.35s, opacity 0.35s, border 0.35s, z-index 0s 0.35s;
|
||||
|
||||
&:focus {
|
||||
width: 200px;
|
||||
padding: 1rem;
|
||||
opacity: 1;
|
||||
border: 1px solid rgba(0,0,0,0.15);
|
||||
z-index: 2;
|
||||
transform: translate(0,50px);
|
||||
transition: transform 0.35s, opacity 0.35s, border 0.35s;
|
||||
}
|
||||
}
|
||||
&:hover, &.hover {
|
||||
.form-control {
|
||||
width: 200px;
|
||||
padding: 1rem;
|
||||
border: 1px solid rgba(0,0,0,0.15);
|
||||
}
|
||||
}
|
||||
&.hover .form-control {
|
||||
width: 200px;
|
||||
padding: 1rem;
|
||||
opacity: 1;
|
||||
border: 1px solid rgba(0,0,0,0.15);
|
||||
z-index: 2;
|
||||
transform: translate(0,50px);
|
||||
transition: transform 0.35s, opacity 0.35s, border 0.35s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -562,7 +614,7 @@ nav{
|
|||
position: relative;
|
||||
border-bottom: 1px solid #01295C;
|
||||
background-color: #fff;
|
||||
z-index: 2;
|
||||
z-index: 4;
|
||||
}
|
||||
.accessibility-bar__container {
|
||||
width: 100%;
|
||||
|
|
@ -684,6 +736,35 @@ nav{
|
|||
.accessibility-options { margin-top: 20px; }
|
||||
}
|
||||
|
||||
/* MODO COMPACTO DA BARRA DE ACESSIBILIDADE */
|
||||
|
||||
.accessibility-bar.compact-mode {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
transform: translate(0,-100px);
|
||||
}
|
||||
.accessibility-bar.compact-mode .accessibility-options { display: none; }
|
||||
.accessibility-bar.compact-mode .accessibility-shortcuts a {
|
||||
padding: 5px 10px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
background-color: #fff;
|
||||
z-index: -2;
|
||||
transform: translate(-50%,100px);
|
||||
}
|
||||
.accessibility-bar.compact-mode .accessibility-shortcuts a:focus {
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.accessibility-bar.compact-mode .accessibility-shortcuts a:focus { transform: translate(-50%,160px); }
|
||||
}
|
||||
|
||||
/*
|
||||
- ALTO CONTRASTE
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</head>
|
||||
<body <?php body_class(); ?>>
|
||||
<!-- MENU DE ACESSIBILIDADE -->
|
||||
<div class="accessibility-bar">
|
||||
<div class="accessibility-bar compact-mode">
|
||||
<div class="accessibility-bar__container">
|
||||
<ul class="accessibility-shortcuts" role="menubar">
|
||||
<li role="menuitem"><a href="#content" accesskey="c"><span>c</span> Ir para o conteúdo</a></li>
|
||||
|
|
@ -56,25 +56,13 @@
|
|||
<div class="container-fluid max-large px-0 margin-one-column" id="topNavbar">
|
||||
<?php echo tainacan_get_logo(); ?>
|
||||
<div class="btn-group ml-auto">
|
||||
<form class="form-horizontal my-2 my-md-0 tainacan-search-form d-none d-md-block" [formGroup]="searchForm" role="form" (keyup.enter)="onSubmit()">
|
||||
<div class="input-group">
|
||||
<label for="tainacan-search-header" class="sr-only">Digite o que procura</label>
|
||||
<input type="text" name="s" placeholder="<?php _e('Search', 'tainacan-theme'); ?>" class="form-control" formControlName="searchText" size="50" id="tainacan-search-header">
|
||||
<span class="text-midnight-blue input-group-btn mdi mdi-magnify form-control-feedback"></span>
|
||||
</div>
|
||||
</form>
|
||||
<div class="dropdown tainacan-form-dropdown d-md-none">
|
||||
<a class="btn btn-link text-midnight-blue px-1 dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="mdi mdi-magnify"></i><span>Pesquisar</span></a>
|
||||
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
|
||||
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
|
||||
<div class="input-group border">
|
||||
<label for="tainacan-search-header-mobile" class="sr-only">Digite o que procura</label>
|
||||
<input class="form-control py-2 border-0" type="search" name="s" placeholder="<?php _e('Search', 'tainacan-theme'); ?>" id="tainacan-search-header-mobile">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<form class="form-horizontal my-2 my-md-0 tainacan-search-form" [formGroup]="searchForm" role="form" (keyup.enter)="onSubmit()">
|
||||
<div class="input-group">
|
||||
<label for="tainacan-search-header" class="sr-only">Digite o que procura</label>
|
||||
<input type="text" name="s" placeholder="<?php _e('Search', 'tainacan-theme'); ?>" class="form-control" formControlName="searchText" size="50" id="tainacan-search-header">
|
||||
<button type="submit" class="form-control-feedback tainacan-search-button"><span class="text-midnight-blue input-group-btn mdi mdi-magnify"></span></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
</header>
|
||||
<?php if (tainacan_has_document()): ?>
|
||||
<h1 class="title-content-items"><?php _e('Document', 'tainacan-theme'); ?></h1>
|
||||
<h3 class="title-content-items"><?php _e('Document', 'tainacan-theme'); ?></h3>
|
||||
<section class="tainacan-content single-item-collection margin-two-column">
|
||||
<div class="single-item-collection--document">
|
||||
<?php tainacan_the_document(); ?>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
|
||||
<div class="mt-3 tainacan-single-post">
|
||||
<article role="article">
|
||||
<h1 class="title-content-items"><?php _e('Attachments', 'tainacan-theme'); ?></h1>
|
||||
<h3 class="title-content-items"><?php _e('Attachments', 'tainacan-theme'); ?></h3>
|
||||
<section class="tainacan-content single-item-collection margin-two-column">
|
||||
<div class="single-item-collection--attachments">
|
||||
<?php foreach ( $attachment as $attachment ) { ?>
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
|
||||
<div class="mt-3 tainacan-single-post">
|
||||
<article role="article">
|
||||
<!-- <h1 class="title-content-items"><?php _e('Information', 'tainacan-theme'); ?></h1> -->
|
||||
<!-- <h3 class="title-content-items"><?php _e('Information', 'tainacan-theme'); ?></h3> -->
|
||||
<section class="tainacan-content single-item-collection margin-two-column">
|
||||
<div class="single-item-collection--information justify-content-center">
|
||||
<div class="row">
|
||||
|
|
|
|||
Loading…
Reference in New Issue