added pagination support to event log
Change-Id: I18a21ba71679407bd512f1895ba91717c8ca5990
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/overview/styles/log.scss b/app/overview/styles/log.scss
index 1c7b0b8..7c30762 100644
--- a/app/overview/styles/log.scss
+++ b/app/overview/styles/log.scss
@@ -22,7 +22,7 @@
}
}
.row {
- padding: 0;
+ //padding: 0;
margin-left: 0;
}
@@ -43,63 +43,6 @@
}
-// Event log search
-
-.event-log__search {
- width: 100%;
- max-width: 99%;
- display: inline-block;
- position: relative;
- margin-right: 1em;
- margin-top: .5em;
- @media (min-width: 1333px) {
- max-width: 60%;
- margin-top: 0;
- }
- #event__search {
- margin: 0;
- border: 0;
- border-bottom: 2px solid $lightgrey;
- padding-left: 40px;
- &:focus {
- box-shadow: none;
- }
- }
- label {
- position: absolute;
- text-indent: -9999px;
- height:20px;
- width: 20px;
- left: 10px;
- top: 25px;
- transform: translateY(-50%);
- background: url("../assets/images/icon-search.svg") center center no-repeat;
- opacity: .6;
- }
-
- #event__search-submit {
- position: absolute;
- top: .5em;
- right: 0;
- padding: 8px;
- min-height: 20px;
- max-width: 70px;
- text-align: center;
- margin: 0;
- }
-
- .tag-filter-label {
- text-transform: uppercase;
- color: $darkgrey;
- font-size: .7em;
- font-weight: 700;
- min-height: 20px;
- line-height:1.3;
- margin-top: .5em;
- text-align: right;
- }
-}//end event-log__search
-
.event-log__filters {
position: relative;
padding-bottom: .5em;
@@ -119,21 +62,23 @@
position: relative;
overflow: hidden;
- #event__actions-bar {
- padding-top: 1em;
- padding-right: 1em;
- background: $medgrey;
+ .inline__confirm {
+ height: auto;
margin-left: 0;
+ left: 0;
+ padding: 1em 2em 1em 2em
+ }
- .event__actions {
- margin-top: 1em;
- margin-right: 10px;
- @include mediaQuery(medium) {
- margin-top: 0;
- }
- @include mediaQuery(large) {
- margin-right: -20px;
- }
+ .inline__confirm-message {
+ margin-top: 5px;
+ margin-bottom: -10px;
+ }
+ .inline__confirm-buttons .btn-primary {
+ padding: .5em 2em;
+ min-height: 25px;
+ margin-top: .5em;
+ @include mediaQuery(medium) {
+ margin-top: 0;
}
}
@@ -187,9 +132,11 @@
// Single event log card
.event-log__single-event {
+ position: relative;
border-top: 1px solid $lightgrey;
- padding: 1em 1em 0 0em;
+ padding: 1em 1em 1em 0em;
background: $lightblue;
+ overflow: hidden;
&.active,
&.selected {
background: $white;
@@ -264,17 +211,17 @@
// Event metadata row
.event__metadata-row {
- height: 0;
+ max-height: 0;
overflow: hidden;
- -webkit-transition: 0.5s linear all;
- transition: 0.2s linear all;
+ -webkit-transition: 0.5s linear max-height;
+ transition: 0.5s linear max-height;
&.active {
- height: 400px;
+ max-height: 1000px; //max-height used to allow flexible height of content and still allow transition
@include mediaQuery(small) {
- height: 320px;
+ max-height: 1000px;
}
@include mediaQuery(medium) {
- height: 280px;
+ max-height: 1000px;
}
}
}
@@ -313,6 +260,9 @@
.event__related-item {
margin-right: 1em;
padding-top: .3em;
+ display: inline-block;
+ float: left;
+ clear: both;
}
.event__actions {
margin-left: -1em;