Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #380 from thecodingmachine/jitsiQOL

Browse source 
opening and closing jitsi windows now trigger some transitions
This commit is contained in:
Kharhamel 2020-10-27 17:57:56 +01:00 • committed by GitHub
commit dfd2b2048c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 133 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

22
front/dist/index.html vendored
View file

@ -42,30 +42,14 @@
<body id="body" style="margin: 0">
<div class="main-container" id="main-container">
<!-- Create the editor container -->
<div id="game" class="game" style="/*background: red;*/">
<div id="game-overlay" class="game-overlay" style="/*background: violet*/;">
<div id="game" class="game">
<div id="game-overlay" class="game-overlay">
<div id="main-section" class="main-section">
<!--<div style="background: lightpink;">a</div>
<div style="background: lightpink;">a</div> -->
</div>
<aside id="sidebar" class="sidebar">
<!--<div style="background: lightgreen;">a</div>
<div style="background: green;">b</div>
<div style="background: darkgreen;">c</div>
<div style="background: darkgreen;">d</div>-->
</aside>
<div id="chat-mode" class="chat-mode three-col" style="display: none;">
<!--<div style="background: lightgreen;">a</div>
<div style="background: green;">b</div>
<div style="background: darkgreen;">c</div>
<div style="background: darkolivegreen;">d</div>
<div style="background: darkolivegreen;">d</div>
<div style="background: darkgreen;">c</div>
<div style="background: green;">b</div>
<div style="background: lightgreen;">last elem for game</div>-->
</div>
<div id="activeCam" class="activeCam">
<div id="div-myCamVideo" class="video-container">
<video id="myCamVideo" autoplay muted></video>
@ -88,7 +72,7 @@
</div>
</div>
<div id="cowebsite" class="cowebsite"></div>
<div id="cowebsite" class="cowebsite hidden"></div>
<div class="audio-playing">
<img src="/resources/logos/megaphone.svg"/>
</div>

56
front/dist/resources/style/style.css vendored
View file

@ -242,15 +242,10 @@ body {
.main-container {
height: 100vh;
width: 100vw;
display: flex;
align-items: stretch;
position: absolute;
}
@media (min-aspect-ratio: 1/1) {
.main-container {
flex-direction: row;
}
.game-overlay {
flex-direction: row;
}
@ -266,12 +261,21 @@ body {
.sidebar > div:hover {
max-height: 25%;
}
#cowebsite {
right: 0;
top: 0;
width: 50%;
height: 100vh;
}
#cowebsite.loading {
transform: translateX(90%);
}
#cowebsite.hidden {
transform: translateX(100%);
}
}
@media (max-aspect-ratio: 1/1) {
.main-container {
flex-direction: column;
}
.game-overlay {
flex-direction: column;
}
@ -288,24 +292,36 @@ body {
.sidebar > div:hover {
max-width: 25%;
}
#cowebsite {
left: 0;
bottom: 0;
width: 100%;
height: 50%;
}
#cowebsite.loading {
transform: translateY(90%);
}
#cowebsite.hidden {
transform: translateY(100%);
}
}
.game {
flex-basis: 100%;
#game {
width: 100%;
position: relative; /* Position relative is needed for the game-overlay. */
}
/* A potentially shared website could appear in an iframe in the cowebsite space. */
.cowebsite {
flex-basis: 100%;
transition: flex-basis 0.5s;
#cowebsite {
position: fixed;
transition: transform 0.5s;
}
#cowebsite.loading {
background-color: gray;
}
/*.cowebsite:hover {
flex-basis: 100%;
}*/
.cowebsite > iframe {
#cowebsite > iframe {
width: 100%;
height: 100%;
}