IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-24 07:17:08 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: minor search style improvements

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-06-08 13:56:51 +02:00
parent 50b09f4f10
commit 95c8a76aa6
3 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/components/navbar/navbar.html
View File

@ -8,7 +8,7 @@
<i class="fa fa-chevron-left"></i> <i class="fa fa-chevron-left"></i>
</a> </a>
<a class="navbar-page-btn" ng-click="ctrl.showSearch()"> <a class="navbar-page-btn navbar-page-btn--search" ng-click="ctrl.showSearch()">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</a> </a>

4
public/sass/components/_navbar.scss
View File

@ -137,6 +137,10 @@
max-width: 27px; max-width: 27px;
max-height: 27px; max-height: 27px;
} }
&--search {
padding: 1rem 1.5rem 0.75rem 1.5rem;
}
} }
.navbar-page-btn-wrapper { .navbar-page-btn-wrapper {

22
public/sass/components/_search.scss
View File

@ -13,8 +13,9 @@
left: 0; left: 0;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0;
z-index: ($zindex-modal-backdrop + 10); z-index: ($zindex-modal-backdrop + 10);
position: absolute; position: fixed;
.label-tag { .label-tag {
margin-left: 6px; margin-left: 6px;
@ -46,6 +47,7 @@
.search-field-spacer { .search-field-spacer {
flex-grow: 1; flex-grow: 1;
} }
.search-switches { .search-switches {
flex-grow: 1; flex-grow: 1;
padding: 1rem 1rem 0.75rem 1rem; padding: 1rem 1rem 0.75rem 1rem;
@ -54,7 +56,7 @@
.search-field-icon { .search-field-icon {
font-size: $font-size-lg; font-size: $font-size-lg;
padding: 1rem 1rem 0.75rem 1rem; padding: 1rem 1rem 0.75rem 1.5rem;
} }
.search-dropdown { .search-dropdown {
@ -63,6 +65,7 @@
max-width: 1100px; max-width: 1100px;
visibility: none; visibility: none;
opacity: 0; opacity: 0;
height: 100%;
&--fade-in { &--fade-in {
visibility: visible; visibility: visible;
@ -72,7 +75,7 @@
} }
.search-results-container { .search-results-container {
height: 450px; height: 90%;
overflow: auto; overflow: auto;
display: block; display: block;
line-height: 28px; line-height: 28px;
@ -143,8 +146,10 @@
.search-button-row { .search-button-row {
padding: $spacer*2; padding: $spacer*2;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: flex-start; align-items: flex-start;
justify-content: space-around;
height: 30%;
button, a { button, a {
margin-bottom: $spacer; margin-bottom: $spacer;
@ -164,10 +169,17 @@
} }
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(lg) {
.search-dropdown { .search-dropdown {
flex-direction: row; flex-direction: row;
} }
.search-button-row {
flex-direction: column;
justify-content: flex-start;
}
}
@include media-breakpoint-up(md) {
.search-container { .search-container {
left: 78px; left: 78px;
} }