fix(responsive): update for responsive use

update the list view and toolbar components for responsive usage. syncs with PR fabric8-ui/fabric8-ui#1575
fabric8-ui · Jun 22, 2017 · 8b6f638 · 8b6f638
1 parent e16fdd1
commit 8b6f638
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/src/app/listview/listview.component.scss b/src/app/listview/listview.component.scss
@@ -10,21 +10,31 @@
 /* Group heading above list view */
 .list-group-heading {
   position: absolute;
-  top: -40px;
   font-size: $font-size-base;
   font-weight: initial;
   @media (max-width: 992px) { display: none; }
 }
-.list-view-pf .list-group-item {
-  margin-left: -2px;
-  margin-right: -2px;
-}
-.list-view-pf .list-group-item {
-  &.list-group-item-heading-row {
-    border-top: none;
-    pointer-events: none;
-    &:hover { background-color: $color-pf-white; }
-    i { pointer-events: auto; }
+.list-view-pf {
+  &-body {
+    @media (max-width: 992px) { display: inline-flex; }
+  }
+  .list-group-item {
+    margin-left: -2px;
+    margin-right: -2px;
+    &:hover {
+      background-color: transparent;
+      .list-view-pf-body {
+        .list-group-item {
+          background-color: transparent;
+        }
+      }
+    }
+    &.list-group-item-heading-row {
+      border-top: none;
+      pointer-events: none;
+      &:hover { background-color: $color-pf-white; }
+      i { pointer-events: auto; }
+    }
   }
 }
 .list-view-pf-dnd-drag-items-container { display: flex; }

diff --git a/src/app/toolbar/toolbar.component.scss b/src/app/toolbar/toolbar.component.scss
@@ -1,5 +1,8 @@
 @import '../../assets/stylesheets/_base';
 .toolbar-pf-actions {
+  @media (max-width: 992px) {
+    display: inline-flex;
+  }
   .btn { min-width: unset; }
   .toolbar-pf-view-selector {
     a { cursor: pointer; }