feat: update

src/app/ControlPage/cleftbar/cleftbar.component.css

@@ -68,6 +68,6 @@ label {
   font-size: 9pt;
   border-top-width: 1px;
   left: 0;
-  padding: 1px 20px 30px 20px;
+  padding: 1px 20px 0 20px;
   position: absolute;
 }

src/app/ControlPage/cleftbar/cleftbar.component.ts

@@ -96,7 +96,7 @@ export class CleftbarComponent implements OnInit {
   }
 
   Connect(host) {
-    console.log(host);
+    // console.log(host);
     let userid: string;
     if (host.system_users_granted.length > 1) {
       let options = '';

src/app/ControlPage/control/controlnav/controlnav.component.css

-
-#tabs {
+.tabs {
   height: 30px;
-  width: 100%
+  overflow-y: hidden;
+  overflow-x: auto;
 }
 
-#tabs ul li.disconnected {
+.tabs ul li.disconnected {
   background-color: darkgray;
 }
 
-#tabs ul li.hidden {
+.tabs ul li.hidden {
   display: none;
 }
 
-#tabs ul {
+.tabs ul {
   list-style-type: none;
   height: 30px;
   background-color: #3a3333;
-  overflow-y: hidden;
-  overflow-x: auto;
-  width: 100%;
-  display: inline-flex;
-  position: absolute;
+  display: block;
+  min-width: 100%;
   padding-left: 0;
 }
 
-#tabs ul li {
+.tabs ul li {
   display: inline-table;
   width: 150px;
   height: 30px;
   position: relative;
   box-sizing: content-box;
+  float: left;;
 }
 
-#tabs ul li.active {
+.tabs ul li.active {
   box-sizing: border-box;
   border-bottom: 3px solid #7f3f98 !important;
 }
 
-#tabs ul li span {
+.tabs ul li span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -51,7 +49,7 @@
   height: 21px;
 }
 
-#tabs ul li a.close {
+.tabs ul li a.close {
   font-family: 'Roboto', sans-serif;
   font-size: 13px;
   position: absolute;
@@ -63,17 +61,17 @@
   display: inline-block;
 }
 
-#tabs ul li.active a {
+.tabs ul li.active a {
   color: white;
 }
 
-#tabs ul li.active span {
+.tabs ul li.active span {
   padding: 5px 20px 4px 15px;
   color: white;
   height: 18px;
 }
 
-#tabs ul li input {
+.tabs ul li input {
   font-family: 'Roboto', sans-serif;
   font-size: 13px;
   width: 115px;

src/app/ControlPage/control/controlnav/controlnav.component.html

-<div id="tabs">
-  <ul>
+<div class="tabs">
+  <ul [ngStyle]="{'width':150*NavList.List.length+'px'}">
     <li *ngFor="let m of NavList.List;let i = index"
         [ngClass]="{'active':i==NavList.Active,'disconnected':!m.connected, 'hidden': m.closed != false}"
         id="termnav-{{i}}" (click)="setActive(i)">

src/app/ControlPage/control/controlnav/controlnav.component.ts

@@ -34,7 +34,7 @@ export class ControlnavComponent implements OnInit {
     } else {
       NavList.Active = index;
     }
-    ControlnavComponent.setActive(NavList.Active)
+    ControlnavComponent.setActive(NavList.Active);
   }
 
   static setActive(index) {

src/app/ControlPage/control/ssh/ssh.component.ts

@@ -47,7 +47,7 @@ export class SshComponent implements OnInit {
   }
 
   TerminalConnect(host, userid) {
-    console.log(host, userid);
+    // console.log(host, userid);
     const socket = io.connect('/ssh');
     let cols = '80';
     let rows = '24';

src/app/ControlPage/controlpage.component.css

@@ -7,6 +7,7 @@ div, term-leftbar, term-body {
 div {
   background-color: black;
   margin: 0;
+  padding-top:30px;
 }
 
 app-cleftbar {

src/app/app.component.html

 <app-element-nav *ngIf="DataStore.NavShow"></app-element-nav>
-<nav *ngIf="DataStore.NavShow"></nav>
 <router-outlet></router-outlet>
 <!--<app-element-interactive></app-element-interactive>-->