mirror of
https://github.com/jech/galene.git
synced 2024-12-22 23:35:46 +01:00
more improvement on design
This commit is contained in:
Alain Takoudjou
parent
0ab8425025
commit
640fbb8107
3 changed files with 113 additions and 55 deletions
|
|
@ -187,12 +187,12 @@
|
|||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: calc(100vw - 200px);
|
||||
height: calc(100vh - 64px);
|
||||
height: calc(var(--vh, 1vh) * 100 - 64px);
|
||||
}
|
||||
|
||||
.full-width-active {
|
||||
|
|
@ -322,15 +322,31 @@ textarea.form-reply {
|
|||
}
|
||||
|
||||
.video-container {
|
||||
height: calc(100vh - 64px);
|
||||
height: calc(var(--vh, 1vh) * 100 - 64px);
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.61);
|
||||
background: rgba(0, 0, 0, 0.91);
|
||||
/* Display only when showing video */
|
||||
display: block;
|
||||
transition: all 1s ease-out;
|
||||
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 {
|
||||
display: none;
|
||||
transition: opacity 1s ease-out;
|
||||
|
|
@ -342,14 +358,14 @@ textarea.form-reply {
|
|||
}
|
||||
|
||||
.login-container {
|
||||
height: calc(100vh - 64px);
|
||||
height: calc(var(--vh, 1vh) * 100 - 64px);
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
top: 15%;
|
||||
left: 25%;
|
||||
width: 21em;
|
||||
padding: 2em;
|
||||
|
|
@ -422,7 +438,7 @@ textarea.form-reply {
|
|||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #cecece;
|
||||
color: #ebebeb;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
|
|
@ -578,7 +594,7 @@ h1 {
|
|||
grid-template-columns: repeat(1, 1fr);
|
||||
grid-template-rows: repeat(1, auto);
|
||||
row-gap: 0;
|
||||
column-gap: 20px;
|
||||
column-gap: 10px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -594,13 +610,15 @@ h1 {
|
|||
|
||||
.peer {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.media {
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 84px);
|
||||
max-height: calc(var(--vh, 1vh) * 100 - 84px);
|
||||
padding-bottom: 20px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.media-failed {
|
||||
|
|
@ -622,10 +640,9 @@ h1 {
|
|||
z-index: 2999;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100vh;
|
||||
height: calc(var(--vh, 1vh) * 100);
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
.sidenav a {
|
||||
|
|
@ -635,6 +652,7 @@ h1 {
|
|||
color: #dbd9d9;
|
||||
display: block;
|
||||
transition: 0.3s;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.sidenav a:hover {
|
||||
|
|
@ -645,8 +663,7 @@ h1 {
|
|||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 25px;
|
||||
margin-left: 50px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.sidenav label{
|
||||
|
|
@ -654,9 +671,12 @@ h1 {
|
|||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.sidenav-header {
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
background: #eee;
|
||||
.sidenav-header h2{
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
max-width: 70%;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.sidenav-content {
|
||||
|
|
@ -671,6 +691,7 @@ h1 {
|
|||
|
||||
.nav-menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-menu li {
|
||||
|
|
@ -881,7 +902,6 @@ header .colapse {
|
|||
}
|
||||
|
||||
.video-container {
|
||||
height: calc(100vh - 64px);
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
right: 0;
|
||||
|
|
@ -890,7 +910,6 @@ header .colapse {
|
|||
}
|
||||
|
||||
.login-container {
|
||||
height: calc(100vh - 64px);
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
right: 0;
|
||||
|
|
@ -945,15 +964,23 @@ header .colapse {
|
|||
}
|
||||
|
||||
#peers {
|
||||
padding: 3px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
#resizer {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#chat {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
#sharebutton {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -105,6 +105,14 @@
|
|||
<div id="resizer"></div>
|
||||
<div class="coln-right" id="right">
|
||||
<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 id="peers"></div>
|
||||
</div>
|
||||
|
|
@ -131,10 +139,10 @@
|
|||
|
||||
<div id="sidebarnav" class="sidenav">
|
||||
<div class="sidenav-header">
|
||||
<h2>Settings</h2>
|
||||
<a class="closebtn" id="clodeside"><i class="fa fa-times" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
<div class="sidenav-content" id="optionsdiv">
|
||||
<h2>Configurations</h2>
|
||||
<div id="mediaoptions">
|
||||
<label for="videoselect">Camera:</label>
|
||||
<select id="videoselect" class="select select-inline">
|
||||
|
|
|
|||
|
|
@ -46,8 +46,11 @@ function getUsername() {
|
|||
}
|
||||
|
||||
function showVideo() {
|
||||
let width = window.innerWidth;
|
||||
let video_container = document.getElementById('video-container');
|
||||
video_container.classList.remove('no-video');
|
||||
if (width <= 768)
|
||||
document.getElementById('collapse-video').style.display = "block";
|
||||
}
|
||||
|
||||
function hideVideo(force) {
|
||||
|
|
@ -60,7 +63,12 @@ function hideVideo(force) {
|
|||
}
|
||||
let video_container = document.getElementById('video-container');
|
||||
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('collapse-video').style.display = "";
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -95,6 +103,8 @@ function setConnected(connected) {
|
|||
connectionbox.classList.remove('invisible');
|
||||
clearUsername();
|
||||
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) {
|
||||
e.preventDefault();
|
||||
addLocalMedia();
|
||||
|
|
@ -647,20 +667,21 @@ function resizePeers() {
|
|||
if (!count)
|
||||
// No video, nothing to resize.
|
||||
return;
|
||||
let rows = "";
|
||||
let size = 100 / columns;
|
||||
let container = document.getElementById("video-container")
|
||||
// Peers div has total padding of 30px, we remove 30 on offsetHeight
|
||||
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");
|
||||
[].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>} */
|
||||
|
|
@ -1079,6 +1100,34 @@ document.getElementById('user').onclick = function(e) {
|
|||
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) {
|
||||
let user_box = document.getElementById('userDropdown');
|
||||
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() {
|
||||
serverConnection = new ServerConnection();
|
||||
serverConnection.onconnected = gotConnected;
|
||||
|
|
|
|||
Loading…
Reference in a new issue