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:
parent
0ab8425025
commit
640fbb8107
3 changed files with 113 additions and 55 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue