added pagination support to event log
Change-Id: I18a21ba71679407bd512f1895ba91717c8ca5990
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/styles/elements/accordion.scss b/app/common/styles/elements/accordion.scss
new file mode 100644
index 0000000..75d3c5e
--- /dev/null
+++ b/app/common/styles/elements/accordion.scss
@@ -0,0 +1,58 @@
+
+// Accordion
+
+#header__actions-bar {
+ padding-top: 1em;
+ padding-right: 1em;
+ background: $medgrey;
+ margin-left: 0;
+
+ .event__actions {
+ margin-top: 1em;
+ margin-right: 10px;
+ @include mediaQuery(medium) {
+ margin-top: 0;
+ }
+ @include mediaQuery(large) {
+ margin-right: -20px;
+ }
+ }
+
+}
+
+.accord-trigger {
+ transform: rotate(90deg);
+ font-size: 1.5em;
+ color: lighten($darkgrey, 10%);
+ padding: .3em;
+ display: block;
+ margin: 0 auto;
+ transition: all .2s ease;
+ &:after {
+ content: '\276F'
+ }
+ &.active {
+ transform: rotate(-90deg);
+ color: $darkbg__accent;
+ }
+ &:focus {
+ outline: 0;
+ color: $darkbg__accent;
+ }
+}
+
+// Single event log card
+.accord-row {
+ position: relative;
+ border-top: 1px solid $lightgrey;
+ padding: 1em 1em 1em 0em;
+ background: $lightblue;
+ overflow: hidden;
+ &.active,
+ &.selected {
+ background: $white;
+ }
+ &:hover {
+ background: $white;
+ }
+}
\ No newline at end of file
diff --git a/app/common/styles/elements/content-search.scss b/app/common/styles/elements/content-search.scss
new file mode 100644
index 0000000..800dd98
--- /dev/null
+++ b/app/common/styles/elements/content-search.scss
@@ -0,0 +1,57 @@
+
+// content search
+
+.content__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;
+ }
+ #content__search-input {
+ 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
\ No newline at end of file
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index 6277a91..11c4968 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -3,4 +3,7 @@
@import "status";
@import "alerts";
@import "tags";
-@import "inline-confirm";
\ No newline at end of file
+@import "inline-confirm";
+@import "accordion";
+@import "content-search";
+@import "paginate";
\ No newline at end of file
diff --git a/app/common/styles/elements/inline-confirm.scss b/app/common/styles/elements/inline-confirm.scss
index cb4c7e3..f2da19e 100644
--- a/app/common/styles/elements/inline-confirm.scss
+++ b/app/common/styles/elements/inline-confirm.scss
@@ -3,6 +3,7 @@
.inline__confirm {
position: absolute;
top: 0;
+ right: 0;
transform: translateY(-103%);
width: 100%;
height: 100%;
@@ -12,6 +13,7 @@
color: $white;
padding: 2em 2em 1.55em 2em;
overflow: hidden;
+ @include fastTransition-all;
&.active {
transform: translateY(0);
@include fastTransition-all;
@@ -20,6 +22,10 @@
// Power confirmation buttons
.inline__confirm-buttons {
+ position: absolute;
+ top: 50%;
+ right: 1em;
+ transform: translateY(-50%);
.btn-primary {
background: transparent;
border: 2px solid $white;
@@ -32,7 +38,7 @@
border: 2px solid $primebtn__bg;
}
}
- @include mediaQuery(large) {
+ @include mediaQuery(medium) {
float: right;
}
}
@@ -40,6 +46,7 @@
// confirmation message
.inline__confirm-message {
display: inline-block;
+ max-width: 50%;
}
// Power confirmation message icon
diff --git a/app/common/styles/elements/paginate.scss b/app/common/styles/elements/paginate.scss
new file mode 100644
index 0000000..2df88cc
--- /dev/null
+++ b/app/common/styles/elements/paginate.scss
@@ -0,0 +1,149 @@
+.pagination,
+.pagination li a {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.pagination li { background-color: transparent; list-style-type: none; }
+
+.pagination a {
+ font-weight: 300;
+ padding-top: 1px;
+ text-decoration:none;
+ border: 1px solid $medgrey;
+ border-left-width: 0;
+ min-width:44px;
+ min-height:44px;
+ color: $darkbg__primary;
+}
+
+.pagination li:not([class*="current"]) a:hover {
+ background-color: $primebtn__bg;
+ color: $white;
+}
+
+.pagination li:not([class*="current"]) a:focus,
+.pagination li:not([class*="current"]) a:active {;
+ //box-shadow: 0px 0px 10px 1px rgba(0,0,0,.25);
+ border-left-width:1px;
+}
+
+.pagination li:first-of-type a {
+ border-left-width: 1px;
+}
+
+.pagination li:first-of-type span,
+.pagination li:last-of-type span,
+.pagination li:nth-of-type(2) span,
+.pagination li:nth-last-of-type(2) span {
+ /* screen readers only */
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+}
+
+.pagination li:first-child a::before,
+.pagination li:last-child a::after,
+.pagination li:nth-of-type(2) a::before,
+.pagination li:nth-last-of-type(2) a::after {
+ display: inline-block;
+ text-rendering: auto;
+ font-size: 1.3em;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-transform: translate(0, 0);
+ transform: translate(0, 0);
+}
+
+.pagination li:first-child a::before,
+.pagination li:last-child a::after { content: "\027A0"; }
+
+.pagination li:nth-of-type(2) a::before,
+.pagination li:nth-last-of-type(2) a::after { content: "\0279E"; }
+
+.pagination li:first-child a::before,
+.pagination li:nth-of-type(2) a::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
+
+.pagination li.current a {
+ padding-top:.25em;
+ color: $white;
+ background-color: $lightbg__primary;
+ cursor: default;
+ pointer-events: none;
+ font-weight: 700;
+}
+
+@media only screen and ( max-width: 64.063em ) {
+ .pagination li:first-child,
+ .pagination li:last-child {
+ /* screen readers only */
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+ }
+
+ .pagination li:nth-of-type(2) a { border-left-width: 1px; }
+
+}
+
+@media only screen and ( max-width: 40.063em ) {
+ .pagination li {
+ /* screen readers only */
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+ }
+
+ .pagination li.current,
+ .pagination li:first-of-type,
+ .pagination li:last-of-type,
+ .pagination li:nth-of-type(2),
+ .pagination li:nth-last-of-type(2){
+ position: initial;
+ top: initial;
+ left: initial;
+ }
+
+ .pagination li:nth-of-type(2) a { border-left-width: 0; }
+
+}
+
+@media only screen and ( max-width: 30.063em ) {
+
+ h1 { font-size: 1.35em !important; }
+
+ .pagination li:first-child,
+ .pagination li:last-child {
+ /* screen readers only */
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+ }
+
+ .pagination li:nth-of-type(2) a { border-left-width: 1px; }
+
+}
+
+@media only screen and ( max-width: 15.063em ) { /* For watches? */
+
+ .pagination li { width: 50%;}
+
+ .pagination li.current {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ width: 100%;
+ border-left-width: 1px;
+
+ }
+
+}
\ No newline at end of file