Merge branch 'develop' of github.com:thecodingmachine/workadventure into skiprender2
# Conflicts: # front/src/Phaser/Game/GameScene.ts # front/src/index.ts
This commit is contained in:
David Négrier
commit
6b4d064f19
143 changed files with 6943 additions and 1272 deletions
49
front/dist/resources/style/cowebsite-mobile.scss
vendored
Normal file
49
front/dist/resources/style/cowebsite-mobile.scss
vendored
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
@media (max-aspect-ratio: 1/1) {
|
||||
|
||||
#main-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
|
||||
#cowebsite {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
&.loading {
|
||||
transform: translateY(-90%);
|
||||
}
|
||||
&.hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
aside {
|
||||
height: 30px;
|
||||
cursor: ns-resize;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.top-right-btn {
|
||||
&#cowebsite-close {
|
||||
right: 0;
|
||||
}
|
||||
&#cowebsite-fullscreen {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
48
front/dist/resources/style/cowebsite.scss
vendored
48
front/dist/resources/style/cowebsite.scss
vendored
|
|
@ -87,51 +87,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
@media (max-aspect-ratio: 1/1) {
|
||||
|
||||
#main-container {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
|
||||
#cowebsite {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
&.loading {
|
||||
transform: translateY(-90%);
|
||||
}
|
||||
&.hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
main {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
aside {
|
||||
height: 30px;
|
||||
cursor: ns-resize;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.top-right-btn {
|
||||
&#cowebsite-close {
|
||||
right: 0px;
|
||||
}
|
||||
&#cowebsite-fullscreen {
|
||||
right: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
4
front/dist/resources/style/index.scss
vendored
4
front/dist/resources/style/index.scss
vendored
|
|
@ -1,2 +1,4 @@
|
|||
@import "cowebsite.scss";
|
||||
@import "style.css";
|
||||
@import "cowebsite-mobile.scss";
|
||||
@import "style.css";
|
||||
@import "mobile-style.scss";
|
||||
49
front/dist/resources/style/mobile-style.scss
vendored
Normal file
49
front/dist/resources/style/mobile-style.scss
vendored
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
@media screen and (max-width: 700px),
|
||||
screen and (max-height: 700px){
|
||||
video#myCamVideo {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 20%;
|
||||
min-width: 200px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
right: 0;
|
||||
height: 80%;
|
||||
|
||||
&> div {
|
||||
max-height: 120px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.video-container{
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-cam-action {
|
||||
min-width: 150px;
|
||||
|
||||
&:hover{
|
||||
transform: translateY(20px);
|
||||
}
|
||||
div {
|
||||
margin: 0 1%;
|
||||
&:hover {
|
||||
background-color: #666;
|
||||
}
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-section {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
min-width: 400px;
|
||||
|
||||
& > div {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
124
front/dist/resources/style/style.css
vendored
124
front/dist/resources/style/style.css
vendored
|
|
@ -53,6 +53,7 @@ body .message-info.warning{
|
|||
padding-top: 32px;
|
||||
font-size: 28px;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-container img{
|
||||
|
|
@ -97,7 +98,7 @@ body .message-info.warning{
|
|||
}
|
||||
|
||||
.video-container button.report:hover {
|
||||
width: 150px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.video-container button.report img{
|
||||
|
|
@ -125,6 +126,7 @@ body .message-info.warning{
|
|||
|
||||
.video-container video{
|
||||
height: 100%;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
.video-container video:focus{
|
||||
|
|
@ -138,8 +140,9 @@ body .message-info.warning{
|
|||
#div-myCamVideo {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
bottom: 30px;
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
max-height: 20%;
|
||||
}
|
||||
|
||||
video#myCamVideo{
|
||||
|
|
@ -151,28 +154,70 @@ video#myCamVideo{
|
|||
/*height: 113px;*/
|
||||
}
|
||||
|
||||
.sound-progress{
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: calc(50% - 5px);
|
||||
}
|
||||
.sound-progress.active{
|
||||
display: table-column;
|
||||
}
|
||||
.sound-progress span{
|
||||
position: absolute;
|
||||
color: black;
|
||||
background-color: #00000020;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.sound-progress span.active{
|
||||
background-color: #00c3ff66
|
||||
}
|
||||
.sound-progress span:nth-child(1){
|
||||
top: calc(50% + 20px);
|
||||
}
|
||||
.sound-progress span:nth-child(2){
|
||||
top: calc(50% + 10px);
|
||||
}
|
||||
.sound-progress span:nth-child(3){
|
||||
top: calc(50% - 0px);
|
||||
}
|
||||
.sound-progress span:nth-child(4){
|
||||
top: calc(50% - 10px);
|
||||
}
|
||||
.sound-progress span:nth-child(5){
|
||||
top: calc(50% - 20px);
|
||||
}
|
||||
|
||||
.btn-cam-action {
|
||||
pointer-events: all;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 450px;
|
||||
height: 150px;
|
||||
display: inline-flex;
|
||||
bottom: 10px;
|
||||
right: 15px;
|
||||
width: 15vw;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
}
|
||||
/*btn animation*/
|
||||
.btn-cam-action div{
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
position: absolute;
|
||||
/*position: absolute;*/
|
||||
border: solid 0px black;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: #666;
|
||||
box-shadow: 2px 2px 24px #444;
|
||||
border-radius: 48px;
|
||||
transform: translateY(40px);
|
||||
transform: translateY(20px);
|
||||
transition-timing-function: ease-in-out;
|
||||
bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin: 0 4%;
|
||||
}
|
||||
.btn-cam-action div.disabled {
|
||||
background: #d75555;
|
||||
|
|
@ -186,22 +231,22 @@ video#myCamVideo{
|
|||
.btn-cam-action div:hover{
|
||||
background: #407cf7;
|
||||
box-shadow: 4px 4px 48px #666;
|
||||
transition: 280ms;
|
||||
transition: 120ms;
|
||||
}
|
||||
.btn-micro{
|
||||
pointer-events: auto;
|
||||
transition: all .3s;
|
||||
right: 44px;
|
||||
/*right: 44px;*/
|
||||
}
|
||||
.btn-video{
|
||||
pointer-events: auto;
|
||||
transition: all .25s;
|
||||
right: 134px;
|
||||
/*right: 134px;*/
|
||||
}
|
||||
.btn-monitor{
|
||||
pointer-events: auto;
|
||||
transition: all .2s;
|
||||
right: 224px;
|
||||
/*right: 224px;*/
|
||||
}
|
||||
.btn-copy{
|
||||
pointer-events: auto;
|
||||
|
|
@ -336,25 +381,7 @@ body {
|
|||
max-height: 25%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@media (max-aspect-ratio: 1/1) {
|
||||
.game-overlay {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.sidebar > div {
|
||||
max-width: 21%;
|
||||
}
|
||||
|
||||
.sidebar > div:hover {
|
||||
max-width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
#game {
|
||||
|
|
@ -530,7 +557,7 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
}
|
||||
|
||||
.game-overlay video {
|
||||
width: 100%
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-section {
|
||||
|
|
@ -546,6 +573,7 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
flex-basis: 96%;
|
||||
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
pointer-events: auto;
|
||||
/*flex-shrink: 2;*/
|
||||
}
|
||||
|
||||
|
|
@ -557,7 +585,6 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
.sidebar {
|
||||
flex: 0 0 25%;
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sidebar > div {
|
||||
|
|
@ -565,12 +592,17 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s;
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.sidebar > div:hover {
|
||||
margin: 0%;
|
||||
}
|
||||
|
||||
.sidebar > div video {
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
}
|
||||
|
||||
/* Let's make sure videos are vertically centered if they need to be cropped */
|
||||
.media-container {
|
||||
display: flex;
|
||||
|
|
@ -814,7 +846,7 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
right: 0;
|
||||
}
|
||||
.main-container .audio-playing img{
|
||||
width: 30px;
|
||||
/*width: 30px;*/
|
||||
border-radius: 50%;
|
||||
background-color: #ffda01;
|
||||
padding: 10px;
|
||||
|
|
@ -822,6 +854,7 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
.main-container .audio-playing p{
|
||||
color: white;
|
||||
margin-left: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
/* VIDEO QUALITY */
|
||||
|
|
@ -1053,7 +1086,7 @@ div.modal-report-user{
|
|||
|
||||
.discussion .messages{
|
||||
position: absolute;
|
||||
height: calc(100% - 360px);
|
||||
height: calc(100% - 390px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
max-width: calc(100% - 40px);
|
||||
|
|
@ -1134,17 +1167,34 @@ div.action{
|
|||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
div.action.info,
|
||||
div.action.warning,
|
||||
div.action.danger{
|
||||
transition: all 1s ease;
|
||||
animation: mymove 1s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
div.action p.action-body{
|
||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||
padding: 10px;
|
||||
background-color: #2d2d2dba;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
max-width: 250px;
|
||||
margin-left: calc(50% - 125px);
|
||||
max-width: 350px;
|
||||
margin-left: calc(50% - 175px);
|
||||
border-radius: 15px;
|
||||
}
|
||||
div.action.warning p.action-body{
|
||||
background-color: #ff9800eb;
|
||||
color: #000;
|
||||
}
|
||||
div.action.danger p.action-body{
|
||||
background-color: #da0000e3;
|
||||
color: #000;
|
||||
}
|
||||
.popUpElement{
|
||||
font-family: 'Press Start 2P';
|
||||
text-align: left;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue