From 788e43ba7a378359f551639eb25d69bc8ccd43ad Mon Sep 17 00:00:00 2001 From: Alain Takoudjou Date: Wed, 2 Sep 2020 15:35:55 +0200 Subject: [PATCH] add some interface improvement --- static/sfu.css | 158 +++++++++++++++++++++++++++++------------------- static/sfu.html | 77 +++++++++++++++++------ static/sfu.js | 31 ++++++---- 3 files changed, 170 insertions(+), 96 deletions(-) diff --git a/static/sfu.css b/static/sfu.css index cdbc853..f767ea6 100644 --- a/static/sfu.css +++ b/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; } @@ -613,58 +641,58 @@ h1 { } .sidenav { - background-color: #4d076b; - -webkit-box-shadow: 0 0 24px 0 rgba(71,77,86,.1), 0 1px 0 0 rgba(71,77,86,.08); - box-shadow: 0 0 24px 0 rgba(71,77,86,.1), 0 1px 0 0 rgba(71,77,86,.08); - display: block; - position: fixed; - -webkit-transition: all .2s ease-out; - transition: all .2s ease-out; - width: 0px; - z-index: 2999; - top: 0; - right: 0; - height: 100vh; - overflow-x: hidden; - overflow-y: hidden; - padding-top: 52px; + background-color: #4d076b; + -webkit-box-shadow: 0 0 24px 0 rgba(71,77,86,.1), 0 1px 0 0 rgba(71,77,86,.08); + box-shadow: 0 0 24px 0 rgba(71,77,86,.1), 0 1px 0 0 rgba(71,77,86,.08); + display: block; + position: fixed; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; + width: 0px; + z-index: 2999; + top: 0; + right: 0; + height: 100vh; + overflow-x: hidden; + overflow-y: hidden; + padding-top: 64px; } .sidenav a { - padding: 8px; - text-decoration: none; - font-size: 25px; - color: #dbd9d9; - display: block; - transition: 0.3s; + padding: 10px; + text-decoration: none; + font-size: 30px; + color: #dbd9d9; + display: block; + transition: 0.3s; } .sidenav a:hover { - color: #c2a4e0; + color: #c2a4e0; } .sidenav .closebtn { - cursor: pointer; - position: absolute; - top: 0; - right: 25px; - margin-left: 50px; + cursor: pointer; + position: absolute; + top: 0; + right: 25px; + margin-left: 50px; } .sidenav label{ - display: block; - margin-top: 15px; + display: block; + margin-top: 15px; } .sidenav-header { - border-bottom: 1px solid #e6e6e6; - background: #eee; + border-bottom: 1px solid #e6e6e6; + background: #eee; } .sidenav-content { - padding: 20px; - background: #fff; - height: 100%; + padding: 20px; + background: #fff; + height: 100%; } .sidenav-content h2 { @@ -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; diff --git a/static/sfu.html b/static/sfu.html index 3f2eb43..773c2fc 100644 --- a/static/sfu.html +++ b/static/sfu.html @@ -35,34 +35,56 @@ @@ -79,14 +101,29 @@ -
-
+
+
diff --git a/static/sfu.js b/static/sfu.js index 717d795..bced49a 100644 --- a/static/sfu.js +++ b/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() {