Add error messaging for error log date filtering and Safari support
- Updated filters to use semantic markup (fieldset)
- Added check for input date type support and updated
expected date format to the legend
- Added error message if date format is invalid
- Updated layout to support error message
Tested the changes in the following browsers:
- Safari
- IE 11
- Chrome
- Edge
- Firefox
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: If0b874644b80640dc5bfd8211459c012807ea492
diff --git a/app/server-health/styles/log.scss b/app/server-health/styles/log.scss
index 301dc2c..bb5fc69 100644
--- a/app/server-health/styles/log.scss
+++ b/app/server-health/styles/log.scss
@@ -36,6 +36,7 @@
}
}
+// Event Filter
#event-filter {
.filter-label {
color: $text-02;
@@ -47,7 +48,6 @@
.event__severity-filter {
margin-right: 2em;
margin-bottom: 1em;
- font-size: 0.9em;
.btn {
width: 100px;
float: left;
@@ -63,10 +63,6 @@
input {
width: 170px;
}
- label {
- height: 0;
- text-indent: -9999px;
- }
}
.event__status-filter {
float: left;
@@ -81,6 +77,30 @@
}
}
+.event-filter__content {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ margin-top: 1em;
+
+ > fieldset {
+ flex: 0 0 auto;
+ }
+
+ .error {
+ margin-bottom: 0;
+ }
+}
+
+.event__date-filter-content {
+ display: flex;
+ align-items: flex-start;
+}
+
+.event__date-filter-divider {
+ margin: .25rem .5rem 0 .5rem;
+}
+
.event-log__filters {
position: relative;
padding-bottom: 0.5em;