add some interface improvement

static/sfu.css

@@ -10,7 +10,8 @@
 }
 .topnav {
     padding-left: 0;
-    height: 3.313rem;
+    /*height: 3.313rem;*/
+    height: 4rem;
     z-index: 1039;
 }
 .navbar .form-control, .topnav {
@@ -197,7 +198,7 @@
 
 .full-width {
   width: calc(100vw - 200px);
-  height: calc(100vh - 53px);
+  height: calc(100vh - 64px);
 }
 
 .full-width-active {
@@ -209,7 +210,7 @@
 }
 
 .users-header {
-  height: 53px;
+  height: 4rem;
   padding: 10px;
   background: #610a86;
   /*border-bottom: 1px solid #e6e6e6;*/
@@ -290,20 +291,6 @@ textarea.form-reply {
   width: inherit;
 }
 
-.message-sender {
-    float: right;
-    width: auto !important;
-    background: #dcf8c6;
-    border-radius: 10px 10px 0 10px;
-    padding: 4px 10px 7px !important;
-    font-size: 12px;
-    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-    display: inline-block;
-    word-wrap: break-word;
-    margin-left: 20% !important;
-    max-width: 80%;
-}
-
 .message {
     width: auto !important;
     padding: 4px 10px 7px !important;
@@ -317,6 +304,13 @@ textarea.form-reply {
     max-width: 80%;
 }
 
+.message-sender {
+    float: right;
+    background: #ececec;
+    border-radius: 10px 10px 0 10px;
+    margin-left: 20% !important;
+}
+
 .message-row:after, .message-row:before {
     display: table;
     content: " ";
@@ -344,7 +338,7 @@ textarea.form-reply {
 
 .video-container {
   /*height: 100%;*/
-  height: calc(100vh - 53px);
+  height: calc(100vh - 64px);
   position: relative;
   background: rgba(0, 0, 0, 0.61);
   /* Display only when showing video */
@@ -363,6 +357,25 @@ textarea.form-reply {
   display: block !important;
 }
 
+.login-container {
+  height: calc(100vh - 64px);
+  position: relative;
+  display: block;
+}
+
+.login-box {
+    position: absolute;
+    top: 90px;
+    left: 25%;
+    width: 21em;
+    padding: 2em;
+}
+
+.login-box h2 {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
 .label-fallback {
     opacity: 0.5;
 }
@@ -390,15 +403,34 @@ textarea.form-reply {
   text-align: center;
   margin: 0 10px;
   position: relative;
+  line-height: 1.1;
 }
 
-.nav-cancel {
-  color: #d03e3e
+.nav-link span {
+  display: block;
+}
+
+.nav-link label {
+  display: block;
+  cursor: pointer;
+  color: #fff;
+  font-size: 55%;
 }
 
 .nav-link:hover {
   color: #c2a4e0;
 }
+.nav-link label:hover {
+  color: #c2a4e0;
+}
+
+.nav-cancel, .muted, .nav-cancel label, .muted label {
+  color: #d03e3e
+}
+
+.nav-cancel:hover, .muted:hover, .nav-cancel label:hover, .muted label:hover {
+  color: #d03e3e
+}
 
 .nav-button {
   cursor: pointer;
@@ -485,10 +517,6 @@ h1 {
     margin-right: 0.4em;
 }
 
-.muted {
-    color: red;
-}
-
 #sharebutton, #unsharebutton {
     white-space: nowrap;
 }
@@ -523,7 +551,7 @@ h1 {
     background-size: cover;
     overflow-y: scroll;
     border: none;
-    border-right: 1px solid #e6e6e6;
+    border-right: 4px solid #e6e6e6;
     height: 100% !important;
     min-width: 300px;
 }
@@ -567,7 +595,7 @@ h1 {
 
 #resizer {
     width: 8px;
-    margin-left: -8px;
+    margin-left: -4px;
     z-index: 1000;
 }
 
@@ -627,13 +655,13 @@ h1 {
     height: 100vh;
     overflow-x: hidden;
     overflow-y: hidden;
-  padding-top: 52px;
+    padding-top: 64px;
 }
 
 .sidenav a {
-  padding: 8px;
+    padding: 10px;
     text-decoration: none;
-  font-size: 25px;
+    font-size: 30px;
     color: #dbd9d9;
     display: block;
     transition: 0.3s;
@@ -735,7 +763,7 @@ h1 {
   background-color: #fff;
   max-width: 300px;
   min-width: 200px;
-  margin-top: 8px;
+  margin-top: 11px;
   overflow: auto;
   right: 7px;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
@@ -874,6 +902,10 @@ header .colapse {
 @media only screen and (max-device-width: 768px) {
     .nav-link {
       margin: 0;
+      line-height: 1.5;
+    }
+    .nav-link label {
+      display: none;
     }
     .nav-text {
       display: none;
@@ -884,9 +916,9 @@ header .colapse {
     }
     
     .video-container {
-      height: calc(100vh - 53px);
+      height: calc(100vh - 64px);
       position: fixed;
-      top: 53px;
+      top: 64px;
       right: 0;
       left: 0;
       margin-bottom: 60px;

static/sfu.html

@@ -35,34 +35,56 @@
               </div>
       
               <ul class="nav-menu">
-                <li><button id="presentbutton" class="invisible btn btn-success"><i class="fa fa-video-camera" aria-hidden="true"></i><span class="nav-text"> Present</span></button></li>
-                <li><button id="unpresentbutton" class="invisible btn btn-cancel"><i class="fa fa-stop" aria-hidden="true"></i><span class="nav-text"> Stop presenting</span></button></li>
-                <li><button id="mutebutton" class="invisible btn btn-default">Mute</button></li>
-                <li><span id="sharebutton" class="invisible nav-link nav-button"><i class="fa fa-share-square-o" aria-hidden="true"></i></span></li>
-                <li><span id="unsharebutton" class="invisible nav-link nav-button nav-cancel"><i class="fa fa-window-close-o" aria-hidden="true"></i></span></li>
-                <li><span class="nav-button nav-link" id="user"><i class="fa fa-user dropbtn" aria-hidden="true"></i></span>
+                <li>
+                  <button id="presentbutton" class="invisible btn btn-success">
+                    <i class="fa fa-video-camera" aria-hidden="true"></i><span class="nav-text"> Present</span>
+                  </button>
+                </li>
+                <li>
+                  <button id="unpresentbutton" class="invisible btn btn-cancel">
+                    <i class="fa fa-stop" aria-hidden="true"></i><span class="nav-text"> Stop presenting</span>
+                  </button>
+                </li>
+                <li>
+                  <div id="mutebutton" class="nav-link nav-button">
+                    <span><i class="fa fa-microphone-slash" aria-hidden="true"></i></span>
+                    <label>Mute</label>
+                  </div>
+                </li>
+                <li>
+                  <div id="sharebutton" class="invisible nav-link nav-button">
+                    <span><i class="fa fa-share-square-o" aria-hidden="true"></i></span>
+                    <label>Share Screen</label>
+                  </div>
+                </li>
+                <li>
+                  <div id="unsharebutton" class="invisible nav-link nav-button nav-cancel">
+                    <span><i class="fa fa-window-close-o" aria-hidden="true"></i></span>
+                    <label>Share Screen</label>
+                  </div>
+                </li>
+                <li>
+                  <div class="nav-button nav-link" id="user">
+                    <span><i class="fa fa-user dropbtn" aria-hidden="true"></i></span>
+                    <label>User</label>
+                  </div>
                   <div id="userDropdown" class="dropdown-content">
                     <div id="statdiv">
                       <span id="statspan"></span>
                       <span id="userspan"></span>
-                      <form id="userform" class="userform">
-                        <label for="username">Username:</label>
-                        <input id="username" type="text" name="username"
-                               autocomplete="username" class="form-control"/>
-                        <label for="password">Password:</label>
-                        <input id="password" type="password" name="password"
-                               autocomplete="current-password" class="form-control"/>
                       <div class="clear"></div>
-                        <input id="connectbutton" type="submit" class="invisible btn btn-blue" value="Connect" disabled/>
-                      </form>
-                      <div class="clear"></div>
-                      <input id="disconnectbutton" class="invisible btn btn-warn"
+                      <input id="disconnectbutton" class="btn btn-warn"
                              type="submit" value="Disconnect"/>
                       <span id="errspan"></span>
                     </div>
                 </div>
                 </li>
-                <li><span class="nav-button nav-link" id="openside"><i class="fa fa-cog" aria-hidden="true"></i></span></li>
+                <li>
+                  <div class="nav-button nav-link" id="openside">
+                    <span><i class="fa fa-cog" aria-hidden="true"></i></span>
+                    <label>Parameters</label>
+                  </div>
+                </li>
               </ul>
             </nav>
           </header>
@@ -79,14 +101,29 @@
                   </div>
                 </div>
               </div>
-              <div id="resizer">
-                </div>
             </div>
+            <div id="resizer"></div>
             <div class="coln-right">
               <span class="show-video blink" id="switch-video"><i class="fa fa-exchange" aria-hidden="true"></i></span>
               <div class="video-container no-video" id="video-container">
                 <div id="peers"></div>
               </div>
+              <div class="login-container invisible" id="login-container">
+                <div class="login-box">
+                  <h2>Login to SFU</h2>
+                  <form id="userform" class="userform">
+                    <label for="username">Username:</label>
+                    <input id="username" type="text" name="username"
+                           autocomplete="username" class="form-control"/>
+                    <label for="password">Password:</label>
+                    <input id="password" type="password" name="password"
+                           autocomplete="current-password" class="form-control"/>
+                    <div class="clear"></div>
+                    <input id="connectbutton" type="submit" class="btn btn-blue" value="Connect" disabled/>
+                  </form>
+                  <div class="clear"></div>
+                </div>
+              </div>
             </div>
           </div>
         </div>

static/sfu.js

@@ -69,19 +69,16 @@ function hideVideo(force) {
   */
 function setConnected(connected) {
     let statspan = document.getElementById('statspan');
-    let userform = document.getElementById('userform');
-    let disconnectbutton = document.getElementById('disconnectbutton');
-    let connectbutton = document.getElementById('connectbutton');
+    let userbox = document.getElementById('user');
+    let connectionbox = document.getElementById('login-container');
     if(connected) {
         resetUsers();
         clearChat();
         statspan.textContent = 'Connected';
         statspan.classList.remove('disconnected');
         statspan.classList.add('connected');
-        userform.classList.add('invisible');
-        userform.classList.remove('userform');
-        disconnectbutton.classList.remove('invisible');
-        connectbutton.classList.add('invisible');
+        userbox.classList.remove('invisible');
+        connectionbox.classList.add('invisible');
         displayUsername();
     } else {
         resetUsers();
@@ -93,10 +90,8 @@ function setConnected(connected) {
         statspan.textContent = 'Disconnected';
         statspan.classList.remove('connected');
         statspan.classList.add('disconnected');
-        userform.classList.add('userform');
-        userform.classList.remove('invisible');
-        disconnectbutton.classList.add('invisible');
-        connectbutton.classList.remove('invisible');
+        userbox.classList.add('invisible');
+        connectionbox.classList.remove('invisible');
         clearUsername();
         displayError("Disconnected!", "error");
     }
@@ -195,7 +190,7 @@ function setLocalMute(mute) {
     localMute = mute;
     muteLocalTracks(localMute);
     let button = document.getElementById('mutebutton');
-    button.textContent = localMute ? 'Unmute' : 'Mute';
+    //button.textContent = localMute ? 'Unmute' : 'Mute';
     if(localMute)
         button.classList.add('muted');
     else
@@ -649,7 +644,8 @@ function resizePeers() {
         Object.keys(serverConnection.down).length;
     let peers = document.getElementById('peers');
     let columns = Math.ceil(Math.sqrt(count));
-    if (columns > 1) {
+    peers.style['grid-template-columns'] = `repeat(${columns}, 1fr)`;
+    if (false) {
         if (peers.offsetWidth < peers.offsetHeight) {
             // we change view orientation
             peers.style['grid-template-rows'] = `repeat(${columns}, auto)`;
@@ -793,11 +789,15 @@ function formatLines(lines) {
 let lastMessage = {};
 
 function addToChatbox(peerId, nick, kind, message){
+    let userpass = getUserPass();
     let row = document.createElement('div');
     row.classList.add('message-row');
     let container = document.createElement('div');
     container.classList.add('message');
     row.appendChild(container);
+    if (userpass.username === nick) {
+      container.classList.add('message-sender');
+    }
     if(kind !== 'me') {
         let p = formatLines(message.split('\n'));
         if (lastMessage.nick !== nick || lastMessage.peerId !== peerId) {
@@ -1031,6 +1031,11 @@ document.getElementById('userform').onsubmit = function(e) {
 
 document.getElementById('disconnectbutton').onclick = function(e) {
     serverConnection.close();
+    let user_box = document.getElementById('userDropdown');
+    if (user_box.classList.contains("show")) {
+      user_box.classList.toggle("show");
+    }
+    
 };
 
 function openNav() {