From 2be3fc82bacce610b786fe7d4cf8db47e2466077 Mon Sep 17 00:00:00 2001 From: Simran Narang Date: Mon, 30 Aug 2021 15:14:15 +0530 Subject: [PATCH] Terminal controls shifted to the right of the demo The terminals have been shifted using a fixed tab bar on the right side of the demo. --- demo/index.html | 99 +++++++++++++++++++++++++++++++------------------ demo/style.css | 49 ++++++++++++++++++++++++ 2 files changed, 112 insertions(+), 36 deletions(-) diff --git a/demo/index.html b/demo/index.html index 910397c3..621a1883 100644 --- a/demo/index.html +++ b/demo/index.html @@ -15,42 +15,69 @@

xterm.js: A terminal for the web

-
-
-

Options

-

These options can be set in the Terminal constructor or by using the Terminal.setOption function.

-
-
-
-

Addons

-

Addons can be loaded and unloaded on a particular terminal to extend its functionality.

-
-

Addons Control

-

SearchAddon

-

- - - - - -

-

SerializeAddon

-

- - - 


-      

-    

-    

-      
Style

-      

-        
-        
+    

+      

+        

+      

+      

+        

+          
+          
+          
+        

+        

+          
Options

+          
These options can be set in the Terminal constructor or by using the Terminal.setOption function.

+          

+        

+        

+          
Addons

+          
Addons can be loaded and unloaded on a particular terminal to extend its functionality.

+          

+          
Addons Control

+          
SearchAddon

+          

+            
+            
+            
+            
+            
+          

+          
SerializeAddon

+          

+            
+            
+            

+          

+        

+        

+          
Style

+          

+            
+            
+          

+        

       

     

-    

-    
-    
-    
-  
+      

+      
+      
+      
+      
+    
 
diff --git a/demo/style.css b/demo/style.css
index 9c5fd0bd..29c4cbb1 100644
--- a/demo/style.css
+++ b/demo/style.css
@@ -41,3 +41,52 @@ pre {
     word-wrap: break-word;
     white-space: pre-wrap;
 }
+
+
+#container {
+    display: flex;
+    height: 75vh;
+}
+#grid {
+    flex: 1;
+    /* max-height: 80vh;
+    overflow-y: auto; */
+    width: 100%;
+}
+.tab {
+    overflow: hidden;
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+}
+
+/* Style the buttons inside the tab */
+.tab button {
+    background-color: inherit;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+    font-size: 17px;
+}
+
+/* Change background color of buttons on hover */
+.tab button:hover {
+    background-color: #ddd;
+}
+
+/* Create an active/current tablink class */
+.tab button.active {
+    background-color: #ccc;
+  }
+
+/* Style the tab content */
+.tabContent {
+    display: none;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-top: none;
+    max-height: 67.7vh;
+    overflow-y: auto;
+}