OSB-31: table size

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.css

@@ -34,9 +34,22 @@ tr:hover {
   min-width: 12rem !important;
   cursor: pointer; }
 
-.line-header-dropdownbutton {
-  display: inline;
-  float: right; }
+.tab-navbar {
+  min-height: 2em !important; }
+
+.clickable-nav-link, .clickable-tab-active, .clickable-tab-unactive {
+  border-style: none; }
+
+.clickable-tab-active {
+  color: white !important;
+  background-color: #a7689d; }
+
+.clickable-tab {
+  cursor: pointer;
+  color: #490f44; }
+
+.clickable-tab:hover {
+  color: #a7689d; }
 
 @keyframes animation-open {
   from {
@@ -44,6 +57,20 @@ tr:hover {
   to {
     transform: rotate(180deg); } }
 
+@keyframes animation-close {
+  from {
+    transform: rotate(180deg); }
+  to {
+    transform: rotate(0deg); } }
+
+.line-header-dropdownbutton {
+  display: inline;
+  float: right;
+  animation: animation-close;
+  animation-duration: 100ms;
+  animation-iteration-count: 1;
+  animation-timing-function: linear; }
+
 .line-header-dropdownbutton-up {
   transform: rotate(180deg);
   animation: animation-open;

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js

@@ -382,7 +382,7 @@ class ComponentClass extends Component {
         const rows = this.renderTestLines(this.props.data)
 
         const jsx = (
-            <ReactTableContainer width="90%" height="90vh">
+            <ReactTableContainer width="98%" maxHeight="80vh">
                 <table className="table-sm table-hover">
                  {this.renderHeader()}
                  <tbody>
@@ -427,13 +427,17 @@ class StationTestViewC extends Component {
         }
     }
 
+    isActiveClass = (componentType) => {
 
+        const className = this.state.activeTab === componentType ? 'active' : 'unactive'
+        return className
+    }
     render() {
         const stationType = LOFARDefinitions.stationTypeFromName(this.props.selectedStation);
 
         const navBar = Object.keys(this.props.data).map((componentType, key) =>
-            (<NavItem key={key} className="nav-pills">
-                <NavLink className={classnames({active: this.state.activeTab === componentType})}
+            (<NavItem key={key} className="clickable-tab">
+                <NavLink className={'clickable-tab-' + this.isActiveClass(componentType)}
                          onClick={() => this.toggle(componentType)}>{componentType}</NavLink>
             </NavItem>)
         );
@@ -444,7 +448,7 @@ class StationTestViewC extends Component {
 
         return (
             <div>
-                <Nav tabs>
+                <Nav tabs className="component-type-selector">
                     {navBar}
                 </Nav>
                 <TabContent activeTab={this.state.activeTab}>

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.scss

@@ -41,9 +41,36 @@ tr:hover {
   cursor: pointer;
 }
 
-.line-header-dropdownbutton {
-  display: inline;
-  float: right;
+.tab-navbar {
+  min-height: 2em !important;
+}
+
+.clickable-nav-link{
+  border-style: none;
+}
+
+.clickable-tab-active{
+  @extend .clickable-nav-link;
+  color: white !important;
+  background-color: $primary-light;
+}
+
+.clickable-tab-unactive{
+  @extend .clickable-nav-link;
+
+}
+
+
+.component-type-selector {
+}
+
+.clickable-tab {
+  cursor: pointer;
+  color: $primary-dark;
+}
+
+.clickable-tab:hover {
+  color: $primary-light;
 }
 
 @keyframes animation-open {
@@ -53,6 +80,24 @@ tr:hover {
     transform: rotate(180deg);
   }
 }
+
+@keyframes animation-close {
+  from {
+    transform: rotate(180deg);
+  } to {
+    transform: rotate(0deg);
+  }
+}
+
+.line-header-dropdownbutton {
+  display: inline;
+  float: right;
+  animation: animation-close;
+  animation-duration: 100ms;
+  animation-iteration-count: 1;
+  animation-timing-function: linear;
+}
+
 .line-header-dropdownbutton-up {
   transform: rotate(180deg);
   animation: animation-open;