Update Player CSS for PatternFly 4

src/console.css

@@ -1,60 +0,0 @@
-@import "~xterm/lib/xterm.css";
-@import "term.css";
-
-/* Our terminal or logs */
-.console-ct {
-    font-family: Menlo, Monaco, Consolas, monospace;
-    margin-top: 0;
-    margin-bottom: 0;
-    font-size: 10px;
-    text-align: center;
-    line-height: normal;
-}
-
-@media (min-width: 568px) {
-    .console-ct {
-        font-size: 12px;
-    }
-}
-
-.console-ct > pre {
-    padding: 10px;
-    text-align: left;
-    display: block;
-    font-family: inherit;
-    font-size: inherit;
-    width: 48em;
-    height: 310px;
-    overflow-y: scroll;
-    white-space: pre-wrap;
-    margin: 0 auto;
-}
-
-.console-ct > .terminal {
-    color: #F0F0F0;
-    text-align: left;
-    outline: medium none;
-    background-color: black;
-    border: 1px solid black;
-    padding: 10px;
-}
-
-.terminal .terminal-cursor {
-    border: 1px solid #f0f0f0;
-}
-
-.terminal:focus .terminal-cursor {
-    border: none;
-    animation: blink 1s step-end infinite;
-}
-
-@keyframes blink {
-    from {
-        color: #000;
-        background: #f0f0f0;
-    }
-    50% {
-        color: #f0f0f0;
-        background: #000;
-    }
-}

src/player.css

@@ -0,0 +1,76 @@
+@import "~xterm/lib/xterm.css";
+
+.player-wrap {
+    min-width: 672px;
+    height: auto;
+    overflow: hidden;
+}
+
+.player-wrap .panel-body, .player-wrap .console-ct > .terminal {
+    padding: 0;
+}
+
+.dragnpan {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+#logs-view {
+    height: 300px;
+    overflow-y: scroll;
+    margin-bottom: 0;
+}
+
+#recording-wrap {
+    height: 100%;
+}
+
+.logs-view-log-time {
+    display: inline-block;
+    width: 150px;
+    vertical-align: middle;
+}
+
+#input-textarea {
+    width: 100%;
+    heigth: 100%;
+    font-family: monospace;
+    resize: none;
+}
+
+#input-player-wrap {
+    margin-top: 5px;
+}
+
+.panel-footer {
+    padding: 5px 15px;
+}
+
+.search-result {
+    margin-left: 5px;
+    float: left;
+}
+
+.search-results {
+    float: left;
+    min-height: 25px;
+}
+
+.search-component {
+    float: left;
+    width: 33%;
+}
+
+.search-wrap {
+    min-height: 25px;
+    display:block;
+    clear:both;
+}
+
+.session_time {
+    margin-right:5px;
+}

src/player.jsx

@@ -18,7 +18,7 @@
 */
 "use strict";
 import React from 'react';
-import './console.css';
+import './player.css';
 import { Terminal as Term } from 'xterm';
 let cockpit = require("cockpit");
 let _ = cockpit.gettext;
@@ -734,7 +734,6 @@ export class Player extends React.Component {
             paused:             true,
             /* Speed exponent */
             speedExp:           0,
-            container_width:    630,
             scale_initial:      1,
             scale_lock:         false,
             term_top_style:     "50%",
@@ -744,14 +743,14 @@ export class Player extends React.Component {
             term_zoom_max:      false,
             term_zoom_min:      false,
             drag_pan:           false,
-            containerWidth: 630,
+            containerWidth: 800,
             currentTsPost:  0,
             scale:          1,
             input:          "",
             mark:           0,
         };
 
-        this.containerHeight = 290;
+        this.containerHeight = 400;
 
         /* Auto-loading buffer of recording's packets */
         this.error_service = new ErrorService();
@@ -1232,7 +1231,7 @@ export class Player extends React.Component {
             <React.Fragment>
                 <div className="row">
                     <div id="recording-wrap">
-                        <div className="col-md-6 player-wrap">
+                        <div className="col-md-7 player-wrap">
                             <div ref="wrapper" className="panel panel-default">
                                 <div className="panel-heading">
                                     <span>{this.state.title}</span>
@@ -1305,7 +1304,7 @@ export class Player extends React.Component {
                             </div>
                         </div>
                     </div>
-                    <div className="col-md-6">
+                    <div className="col-md-5">
                         <div className="panel panel-default">
                             <div className="panel-heading">
                                 <span>{_("Recording")}</span>

src/recordings.css

@@ -1,6 +1,5 @@
 @import "/page.css";
 
-@import "./console.css";
 @import "./journal.css";
 @import "./plot.css";
 @import "./table.css";
@@ -348,81 +347,6 @@ table.listing-ct > thead th:last-child, tr.listing-ct-item td:last-child {
     background-color: #ffffff;
 }
 
-.player-wrap {
-    min-width: 672px;
-    height: auto;
-    overflow: hidden;
-}
-
-.player-wrap .panel-body, .player-wrap .console-ct > .terminal {
-    padding: 0;
-}
-
-.dragnpan {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
 .highlighted {
     background-color: #ededed !important;
 }
-
-#logs-view {
-    height: 300px;
-    overflow-y: scroll;
-    margin-bottom: 0;
-}
-
-#recording-wrap {
-    height: 100%;
-}
-
-.logs-view-log-time {
-    display: inline-block;
-    width: 150px;
-    vertical-align: middle;
-}
-
-#input-textarea {
-    width: 100%;
-    heigth: 100%;
-    font-family: monospace;
-    resize: none;
-}
-
-#input-player-wrap {
-    margin-top: 5px;
-}
-
-.panel-footer {
-    padding: 5px 15px;
-}
-
-.search-result {
-    margin-left: 5px;
-    float: left;
-}
-
-.search-results {
-    float: left;
-    min-height: 25px;
-}
-
-.search-component {
-    float: left;
-    width: 33%;
-}
-
-.search-wrap {
-    min-height: 25px;
-    display:block;
-    clear:both;
-}
-
-.session_time {
-    margin-right:5px;
-}

webpack.config.js

@@ -37,7 +37,7 @@ var info = {
         "index.html",
         "config.html",
         "player.jsx",
-        "console.css",
+        "player.css",
         "recordings.jsx",
         "recordings.css",
         "table.css",