tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Navigation: Hide search clear button when value is empty 

refs #3676
This commit is contained in:
Florian Strohmaier 2019-07-25 17:29:13 +02:00 committed by Johannes Meyer
parent d4c7566aad
commit faca0962ef
2 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
application/views/scripts/layout/menu.phtml
View File

@ -7,7 +7,7 @@ $searchDashboard->setUser($this->Auth()->getUser());
if ($searchDashboard->search('dummy')->getPane('search')->hasDashlets()): ?>
<form action="<?= $this->href('search') ?>" method="get" role="search" class="search-control">
<input type="text" name="q" id="search" class="search search-input"
<input type="text" name="q" id="search" class="search search-input" required
placeholder="<?= $this->translate('Search') ?> &hellip;"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<button class="search-reset icon-cancel" type="reset"></button>

22
public/css/icinga/menu.less
View File

@ -55,6 +55,10 @@
white-space: nowrap;
}
#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item {
overflow: hidden;
}
#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item > a {
// Clip overflowing content
overflow: hidden;
@ -411,10 +415,13 @@ input[type=text].search-input {
color: @gray-light;
}
.search-input ~ .search-reset {
opacity: 0;
}
.search-input:valid ~ .search-reset {
animation-duration: .4s;
animation-name: search-reset-in;
display: block;
opacity: 1;
}
.search-input:invalid,
@ -424,17 +431,6 @@ input[type=text].search-input {
box-shadow: none;
}
@keyframes search-reset-in {
0% {
opacity: 0;
transform: translate3d(-20%, 0, 0);
}
100% {
opacity: 1;
transform: none;
}
}
// Toggle sidebar button
#toggle-sidebar {
// Reset button styles