web: console: compress datalist

This is a selection of rules to override the default datalist layout;
it removes the lines and compresses entries.  This is the result of
inspection and trial-and-error; i.e. there may be better ways to do
all of this.

The box-shadow on hover mouseover doesn't really work that well with
the compressed entries, as they are too close together to get a good
offset for it.  This replaces it with a light background; the hover
should also highlight on the left.

Change-Id: Ie3d79b11be517136a62db61c57a112885b0e10eb

2 files changed, 51 insertions, 9 deletions

diff --git a/web/src/containers/build/Console.jsx b/web/src/containers/build/Console.jsx
index 68faea1cf..d3a456075 100644
--- a/web/src/containers/build/Console.jsx
+++ b/web/src/containers/build/Console.jsx
@@ -303,7 +303,7 @@ class HostTask extends React.Component {
     const content = <TaskOutput data={this.props.host} include={INTERESTING_KEYS}/>
 
     const expandableItem = <DataListItem isExpanded={this.state.expanded}>
-                             <DataListItemRow className='zuul-console-datalistrow'>
+                             <DataListItemRow>
                                <DataListToggle
                                  onClick={() => {this.setState({expanded: !this.state.expanded})}}
                                  isExpanded={this.state.expanded}
@@ -317,7 +317,7 @@ class HostTask extends React.Component {
                            </DataListItem>
 
     const regularItem = <DataListItem>
-                          <DataListItemRow className='zuul-console-datalistrow'>
+                          <DataListItemRow>
                             <DataListItemCells dataListCells={ dataListCells } />
                           </DataListItemRow>
                         </DataListItem>
@@ -472,11 +472,19 @@ class Console extends React.Component {
 
     return (
       <React.Fragment>
-        <DataList isCompact={true} style={{ fontSize: 'var(--pf-global--FontSize--md)' }}>
-          {output.map((playbook, idx) => (
-            <PlayBook key={idx} playbook={playbook} taskPath={[idx.toString()]}
-              displayPath={displayPath} errorIds={errorIds}/>))}
-        </DataList>
+        <br />
+        <span className="zuul-console">
+          <DataList isCompact={true}
+                    style={{ fontSize: 'var(--pf-global--FontSize--md)' }}>
+            {
+              output.map((playbook, idx) => (
+                <PlayBook
+                  key={idx} playbook={playbook} taskPath={[idx.toString()]}
+                  displayPath={displayPath} errorIds={errorIds}
+                />))
+            }
+          </DataList>
+        </span>
       </React.Fragment>
     )
   }
diff --git a/web/src/index.css b/web/src/index.css
index cc533b6f9..b701255b8 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -300,9 +300,43 @@ pre.version {
 }
 
 /* Console */
-.zuul-console-datalistrow:hover
+
+.zuul-console .pf-c-data-list__expandable-content {
+    border: none;
+}
+
+.zuul-console .pf-c-data-list__expandable-content-body
+{
+    padding-top: calc(var(--pf-c-data-list__expandable-content-body--PaddingTop) * 0.25) !important;
+    padding-bottom: calc(var(--pf-c-data-list__expandable-content-body--PaddingTop) * 0.25) !important
+}
+
+.zuul-console .pf-c-data-list {
+    border: none
+}
+
+.zuul-console .pf-c-data-list__item:hover
 {
-    box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow)
+    background: var(--pf-global--BackgroundColor--light-200);
+}
+
+.zuul-console .pf-c-data-list__item:hover::before
+{
+    background: var(--pf-global--active-color--400);
+}
+
+.zuul-console .pf-c-data-list__item {
+    border: none;
+}
+
+.zuul-console .pf-c-data-list__item-content {
+    padding-bottom: 2px !important;
+    padding-top: 0px !important
+}
+
+.zuul-console .pf-c-data-list__cell {
+    padding-top: 4px !important;
+    padding-bottom: 0px !important
 }
 
 pre.zuul-log-output