1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-11-10 02:35:58 +01:00

more improvement on design

This commit is contained in:
Alain Takoudjou 2020-09-09 20:26:19 +02:00
parent 0ab8425025
commit 640fbb8107
3 changed files with 113 additions and 55 deletions

View file

@ -187,12 +187,12 @@
} }
.full-height { .full-height {
height: 100vh; height: calc(var(--vh, 1vh) * 100);
} }
.full-width { .full-width {
width: calc(100vw - 200px); width: calc(100vw - 200px);
height: calc(100vh - 64px); height: calc(var(--vh, 1vh) * 100 - 64px);
} }
.full-width-active { .full-width-active {
@ -322,15 +322,31 @@ textarea.form-reply {
} }
.video-container { .video-container {
height: calc(100vh - 64px); height: calc(var(--vh, 1vh) * 100 - 64px);
position: relative; position: relative;
background: rgba(0, 0, 0, 0.61); background: rgba(0, 0, 0, 0.91);
/* Display only when showing video */ /* Display only when showing video */
display: block; display: block;
transition: all 1s ease-out; transition: all 1s ease-out;
opacity: 1; opacity: 1;
} }
.collapse-video {
display: none;
/*on top of video peers*/
z-index: 1002;
position: fixed;
top: 70px;
right: 10px;
}
.collapse-video .open-chat {
color: #fff;
height: 60px;
fill: #fff;
padding: 10px;
}
.no-video { .no-video {
display: none; display: none;
transition: opacity 1s ease-out; transition: opacity 1s ease-out;
@ -342,14 +358,14 @@ textarea.form-reply {
} }
.login-container { .login-container {
height: calc(100vh - 64px); height: calc(var(--vh, 1vh) * 100 - 64px);
position: relative; position: relative;
display: block; display: block;
} }
.login-box { .login-box {
position: absolute; position: absolute;
top: 90px; top: 15%;
left: 25%; left: 25%;
width: 21em; width: 21em;
padding: 2em; padding: 2em;
@ -422,7 +438,7 @@ textarea.form-reply {
margin: 0; margin: 0;
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 700;
color: #cecece; color: #ebebeb;
line-height: 2em; line-height: 2em;
} }
@ -578,7 +594,7 @@ h1 {
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(1, auto); grid-template-rows: repeat(1, auto);
row-gap: 0; row-gap: 0;
column-gap: 20px; column-gap: 10px;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -594,13 +610,15 @@ h1 {
.peer { .peer {
margin-top: auto; margin-top: auto;
margin-bottom: auto;
position: relative; position: relative;
} }
.media { .media {
width: 100%; width: 100%;
max-height: calc(100vh - 84px); max-height: calc(var(--vh, 1vh) * 100 - 84px);
padding-bottom: 20px; padding-bottom: 20px;
object-fit: contain;
} }
.media-failed { .media-failed {
@ -622,10 +640,9 @@ h1 {
z-index: 2999; z-index: 2999;
top: 0; top: 0;
right: 0; right: 0;
height: 100vh; height: calc(var(--vh, 1vh) * 100);
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
padding-top: 64px;
} }
.sidenav a { .sidenav a {
@ -635,6 +652,7 @@ h1 {
color: #dbd9d9; color: #dbd9d9;
display: block; display: block;
transition: 0.3s; transition: 0.3s;
line-height: 1.4;
} }
.sidenav a:hover { .sidenav a:hover {
@ -645,8 +663,7 @@ h1 {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 0; top: 0;
right: 25px; right: 5px;
margin-left: 50px;
} }
.sidenav label{ .sidenav label{
@ -654,9 +671,12 @@ h1 {
margin-top: 15px; margin-top: 15px;
} }
.sidenav-header { .sidenav-header h2{
border-bottom: 1px solid #e6e6e6; color: #fff;
background: #eee; padding: 10px;
margin: 0;
max-width: 70%;
line-height: 44px;
} }
.sidenav-content { .sidenav-content {
@ -671,6 +691,7 @@ h1 {
.nav-menu { .nav-menu {
margin: 0; margin: 0;
padding: 0;
} }
.nav-menu li { .nav-menu li {
@ -881,7 +902,6 @@ header .colapse {
} }
.video-container { .video-container {
height: calc(100vh - 64px);
position: fixed; position: fixed;
top: 64px; top: 64px;
right: 0; right: 0;
@ -890,7 +910,6 @@ header .colapse {
} }
.login-container { .login-container {
height: calc(100vh - 64px);
position: fixed; position: fixed;
top: 64px; top: 64px;
right: 0; right: 0;
@ -952,8 +971,16 @@ header .colapse {
display: none; display: none;
} }
#chat {
border-right: none;
}
#sharebutton { #sharebutton {
display: none; display: none;
} }
.dropdown-content {
margin-top: 14px;
}
} }

View file

@ -105,6 +105,14 @@
<div id="resizer"></div> <div id="resizer"></div>
<div class="coln-right" id="right"> <div class="coln-right" id="right">
<span class="show-video blink" id="switch-video"><i class="fa fa-exchange" aria-hidden="true"></i></span> <span class="show-video blink" id="switch-video"><i class="fa fa-exchange" aria-hidden="true"></i></span>
<div class="collapse-video" id="collapse-video">
<svg viewBox="-21 -47 682.66669 682" xmlns="http://www.w3.org/2000/svg" class="open-chat">
<path d="m552.011719-1.332031h-464.023438c-48.515625 0-87.988281 39.464843-87.988281 87.988281v283.972656c0 48.414063 39.300781 87.816406 87.675781 87.988282v128.863281l185.191407-128.863281h279.144531c48.515625 0 87.988281-39.472657 87.988281-87.988282v-283.972656c0-48.523438-39.472656-87.988281-87.988281-87.988281zm50.488281 371.960937c0 27.835938-22.648438 50.488282-50.488281 50.488282h-290.910157l-135.925781 94.585937v-94.585937h-37.1875c-27.839843 0-50.488281-22.652344-50.488281-50.488282v-283.972656c0-27.84375 22.648438-50.488281 50.488281-50.488281h464.023438c27.839843 0 50.488281 22.644531 50.488281 50.488281zm0 0"/>
<path d="m171.292969 131.171875h297.414062v37.5h-297.414062zm0 0"/>
<path d="m171.292969 211.171875h297.414062v37.5h-297.414062zm0 0"/>
<path d="m171.292969 291.171875h297.414062v37.5h-297.414062zm0 0"/>
</svg>
</div>
<div class="video-container no-video" id="video-container"> <div class="video-container no-video" id="video-container">
<div id="peers"></div> <div id="peers"></div>
</div> </div>
@ -131,10 +139,10 @@
<div id="sidebarnav" class="sidenav"> <div id="sidebarnav" class="sidenav">
<div class="sidenav-header"> <div class="sidenav-header">
<h2>Settings</h2>
<a class="closebtn" id="clodeside"><i class="fa fa-times" aria-hidden="true"></i></a> <a class="closebtn" id="clodeside"><i class="fa fa-times" aria-hidden="true"></i></a>
</div> </div>
<div class="sidenav-content" id="optionsdiv"> <div class="sidenav-content" id="optionsdiv">
<h2>Configurations</h2>
<div id="mediaoptions"> <div id="mediaoptions">
<label for="videoselect">Camera:</label> <label for="videoselect">Camera:</label>
<select id="videoselect" class="select select-inline"> <select id="videoselect" class="select select-inline">

View file

@ -46,8 +46,11 @@ function getUsername() {
} }
function showVideo() { function showVideo() {
let width = window.innerWidth;
let video_container = document.getElementById('video-container'); let video_container = document.getElementById('video-container');
video_container.classList.remove('no-video'); video_container.classList.remove('no-video');
if (width <= 768)
document.getElementById('collapse-video').style.display = "block";
} }
function hideVideo(force) { function hideVideo(force) {
@ -60,7 +63,12 @@ function hideVideo(force) {
} }
let video_container = document.getElementById('video-container'); let video_container = document.getElementById('video-container');
video_container.classList.add('no-video'); video_container.classList.add('no-video');
}
function closeVideoControls() {
// hide all video buttons used to switch video on mobile layout
document.getElementById('switch-video').style.display = ""; document.getElementById('switch-video').style.display = "";
document.getElementById('collapse-video').style.display = "";
} }
/** /**
@ -95,6 +103,8 @@ function setConnected(connected) {
connectionbox.classList.remove('invisible'); connectionbox.classList.remove('invisible');
clearUsername(); clearUsername();
displayError("Disconnected!", "error"); displayError("Disconnected!", "error");
hideVideo();
closeVideoControls();
} }
} }
@ -136,6 +146,16 @@ function gotDownStream(c) {
} }
} }
// Store current browser viewport height in css variable
function setViewportHeight() {
document.documentElement.style.setProperty('--vh', `${window.innerHeight/100}px`);
};
setViewportHeight();
// On resize and orientation change, we update viewport height
addEventListener('resize', setViewportHeight);
addEventListener('orientationchange', setViewportHeight);
document.getElementById('presentbutton').onclick = function(e) { document.getElementById('presentbutton').onclick = function(e) {
e.preventDefault(); e.preventDefault();
addLocalMedia(); addLocalMedia();
@ -647,20 +667,21 @@ function resizePeers() {
if (!count) if (!count)
// No video, nothing to resize. // No video, nothing to resize.
return; return;
let rows = "";
let size = 100 / columns; let size = 100 / columns;
let container = document.getElementById("video-container")
// Peers div has total padding of 30px, we remove 30 on offsetHeight // Peers div has total padding of 30px, we remove 30 on offsetHeight
let max_video_height = Math.trunc((peers.offsetHeight - 30) / columns); let max_video_height = Math.trunc((peers.offsetHeight - 30) / columns);
for(let i = 0; i < columns; i++){
rows += size + "% ";
}
peers.style['grid-template-columns'] = `repeat(${columns}, 1fr)`;
peers.style['grid-template-rows'] = rows;
let media_list = document.getElementsByClassName("media"); let media_list = document.getElementsByClassName("media");
[].forEach.call(media_list, function (element) { [].forEach.call(media_list, function (element) {
element.style['max-height'] = max_video_height + "px"; element.style['max-height'] = max_video_height + "px";
}); });
if (count <= 2 && container.offsetHeight > container.offsetWidth) {
peers.style['grid-template-columns'] = "repeat(1, 1fr)";
} else {
peers.style['grid-template-columns'] = `repeat(${columns}, 1fr)`;
}
} }
/** @type{Object.<string,string>} */ /** @type{Object.<string,string>} */
@ -1079,6 +1100,34 @@ document.getElementById('user').onclick = function(e) {
document.getElementById("userDropdown").classList.toggle("show"); document.getElementById("userDropdown").classList.toggle("show");
}; };
document.getElementById('clodeside').onclick = function(e) {
e.preventDefault();
closeNav();
};
document.getElementById('collapse-video').onclick = function(e) {
e.preventDefault();
let width = window.innerWidth;
if (width <= 768) {
let user_box = document.getElementById('userDropdown');
if (user_box.classList.contains("show")) {
return;
}
// fixed div for small screen
this.style.display = "";
hideVideo(true);
document.getElementById('switch-video').style.display = "block";
}
};
document.getElementById('switch-video').onclick = function(e) {
e.preventDefault();
showVideo();
this.style.display = "";
document.getElementById('collapse-video').style.display = "block";
};
window.onclick = function(event) { window.onclick = function(event) {
let user_box = document.getElementById('userDropdown'); let user_box = document.getElementById('userDropdown');
if (user_box.classList.contains("show") && event.target.id != "user") { if (user_box.classList.contains("show") && event.target.id != "user") {
@ -1093,32 +1142,6 @@ window.onclick = function(event) {
} }
}; };
document.getElementById('clodeside').onclick = function(e) {
e.preventDefault();
closeNav();
};
document.getElementById('video-container').onclick = function(e) {
e.preventDefault();
let width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if (width <= 768) {
let user_box = document.getElementById('userDropdown');
if (user_box.classList.contains("show")) {
return;
}
// fixed div for small screen
hideVideo(true);
document.getElementById('switch-video').style.display = "block";
}
};
document.getElementById('switch-video').onclick = function(e) {
e.preventDefault();
showVideo();
this.style.display = "";
};
function serverConnect() { function serverConnect() {
serverConnection = new ServerConnection(); serverConnection = new ServerConnection();
serverConnection.onconnected = gotConnected; serverConnection.onconnected = gotConnected;