event-logs: redesign search and filtering function
Proposed changes were based on user feedback from design team.
Change-Id: Idab1418e1b4d11770095c865eb03769f278a03bc
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index d104c08..affd094 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -34,6 +34,12 @@
// Dropdowns
$dropdown__focus-bg: #e6e9ee;
+// Status colors
+$error-color: #e62425;
+$status-ok: #34bc6e;
+$status-ok-light: #bcefce;
+$status-warn: #ffb000;
+
// Alerts
$alert__error: rgb(230, 35, 37);
$alert__warning: rgb(255, 127, 0);
@@ -63,9 +69,4 @@
$nav__top-level-color: #1a273b;
$nav__second-level-color: #e6e9ed;
-// Status colors
-$error-color: #e62425;
-$status-ok: #34bc6e;
-$status-ok-light: #bcefce;
-$status-warn: #ffb000;
diff --git a/app/common/styles/components/form-elements.scss b/app/common/styles/components/form-elements.scss
index f4be1b1..e101385 100644
--- a/app/common/styles/components/form-elements.scss
+++ b/app/common/styles/components/form-elements.scss
@@ -1,14 +1,15 @@
// Drop downs
.dropdown__button {
position: relative;
- padding: 1em;
+ padding: .5em .8em;
margin-top: -10px;
+ border: 1px solid $lightgrey;
&.active,
&:hover {
background: $dropdown__focus-bg;
}
&:after {
- content: '\276F';
+ content: '\25B8';
display: inline-block;
margin-left: 5px;
font-size: .8em;
@@ -20,7 +21,6 @@
.dropdown__wrapper {
position: relative;
display: inline-block;
- float: left;
}
.dropdown__list {
diff --git a/app/common/styles/elements/content-search.scss b/app/common/styles/elements/content-search.scss
index 800dd98..fe67af2 100644
--- a/app/common/styles/elements/content-search.scss
+++ b/app/common/styles/elements/content-search.scss
@@ -5,18 +5,16 @@
width: 100%;
max-width: 99%;
display: inline-block;
+ float: left;
position: relative;
margin-right: 1em;
margin-top: .5em;
- @media (min-width: 1333px) {
- max-width: 60%;
- margin-top: 0;
- }
+ margin-bottom: 1em;
#content__search-input {
margin: 0;
- border: 0;
- border-bottom: 2px solid $lightgrey;
+ border: 1px solid $lightgrey;
padding-left: 40px;
+ padding-right: 5px;
&:focus {
box-shadow: none;
}
@@ -33,15 +31,18 @@
opacity: .6;
}
- #event__search-submit {
+ #content__search-submit {
position: absolute;
+ display: inline-block;
+ width: 100px;
top: .5em;
- right: 0;
- padding: 8px;
+ right: 5px;
+ padding: 1em 2em;
min-height: 20px;
- max-width: 70px;
text-align: center;
margin: 0;
+ font-weight: 700;
+ font-size: .8em;
}
.tag-filter-label {
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index 909236d..d0208ac 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -3,7 +3,6 @@
@import "toggle-filter";
@import "status";
@import "alerts";
-@import "tags";
@import "inline-confirm";
@import "accordion";
@import "content-search";
diff --git a/app/common/styles/elements/toggle-filter.scss b/app/common/styles/elements/toggle-filter.scss
index 4eae9e8..d50f125 100644
--- a/app/common/styles/elements/toggle-filter.scss
+++ b/app/common/styles/elements/toggle-filter.scss
@@ -1,5 +1,6 @@
// toggle buttons for filtering
.toggle-filter {
+ margin-top: 12px;
.filter-label {
color: darken($lightgrey, 10%);
text-transform: uppercase;