Merge branch 'develop' into action-button
# Conflicts: # front/dist/resources/style/style.css # front/src/Phaser/Game/GameScene.ts
This commit is contained in:
Gregoire Parant
commit
3aaeda6f80
34 changed files with 940 additions and 324 deletions
77
front/dist/resources/logos/boy.svg
vendored
Normal file
77
front/dist/resources/logos/boy.svg
vendored
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 188.149 188.149" style="enable-background:new 0 0 188.149 188.149;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<defs>
|
||||
<circle id="SVGID_1_" cx="94.075" cy="94.075" r="94.074"/>
|
||||
</defs>
|
||||
<use xlink:href="#SVGID_1_" style="overflow:visible;fill:#4AC8EB;"/>
|
||||
<clipPath id="SVGID_2_">
|
||||
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
<g style="clip-path:url(#SVGID_2_);">
|
||||
<path style="fill:#A57561;" d="M148.572,197.629v0.01H39.507v-0.01c0-15.124,6.147-28.809,16.09-38.679
|
||||
c0.463-0.463,0.926-0.905,1.408-1.347c1.43-1.326,2.931-2.57,4.493-3.732c1.028-0.771,2.098-1.491,3.177-2.189
|
||||
c1.08-0.699,2.19-1.357,3.331-1.975c0.021-0.021,0.042-0.021,0.042-0.021c0.441-0.247,0.873-0.493,1.306-0.761
|
||||
c1.295-0.761,2.519-1.624,3.69-2.56c4.966-3.948,8.812-9.254,11.001-15.34v-0.011c1.306-3.629,2.016-7.546,2.016-11.639
|
||||
l16.121,0.072c0,4.04,0.688,7.927,1.964,11.525c2.169,6.117,5.994,11.433,10.96,15.401c0.339,0.277,0.688,0.545,1.038,0.802
|
||||
c0.483,0.36,0.977,0.71,1.47,1.039c0.37,0.246,0.751,0.493,1.132,0.72c0.421,0.257,0.853,0.514,1.285,0.75
|
||||
c0.041,0.011,0.071,0.021,0.103,0.041c0.03,0.02,0.062,0.041,0.093,0.061c1.265,0.699,2.498,1.439,3.69,2.221
|
||||
c0.401,0.258,0.802,0.524,1.192,0.803c0.515,0.37,1.039,0.74,1.543,1.131h0.021C139.966,163.875,148.572,179.729,148.572,197.629
|
||||
z"/>
|
||||
<path style="fill:#EB6D4A;" d="M148.572,197.629H39.507c0-15.124,6.147-28.809,16.09-38.679c0.463-0.463,0.926-0.905,1.408-1.347
|
||||
c1.43-1.326,2.931-2.581,4.493-3.742c1.028-0.762,2.098-1.491,3.177-2.18c1.08-0.699,2.19-1.357,3.331-1.975
|
||||
c0.021-0.021,0.042-0.021,0.042-0.021c0.441-0.247,0.873-0.493,1.306-0.761c1.295-0.761,2.519-1.624,3.69-2.56
|
||||
c5.347,5.469,12.79,8.852,21.046,8.852c8.226,0,15.669-3.393,21.016-8.842c0.339,0.277,0.688,0.545,1.038,0.802
|
||||
c0.483,0.36,0.977,0.71,1.47,1.039c0.37,0.246,0.751,0.493,1.132,0.72c0.421,0.267,0.853,0.514,1.285,0.75
|
||||
c0.041,0.011,0.071,0.021,0.103,0.041c0.03,0.011,0.062,0.031,0.093,0.052c1.265,0.699,2.498,1.439,3.69,2.23
|
||||
c0.401,0.258,0.802,0.524,1.192,0.803c0.515,0.37,1.039,0.74,1.543,1.131h0.021C139.966,163.875,148.572,179.729,148.572,197.629
|
||||
z"/>
|
||||
<path style="fill:#A57561;" d="M52.183,46.81v34.117c0,28.977,25.437,52.466,41.857,52.466c16.421,0,41.858-23.489,41.858-52.466
|
||||
V46.81H52.183z"/>
|
||||
<path style="fill:#141720;" d="M52.183,76.823L52.183,76.823c2.063,0,3.734-1.671,3.734-3.733V49.356h-3.734V76.823z"/>
|
||||
<path style="fill:#141720;" d="M135.899,76.823L135.899,76.823V49.356h-3.733V73.09
|
||||
C132.165,75.152,133.836,76.823,135.899,76.823z"/>
|
||||
<path style="fill:#141720;" d="M135.893,48.33c0,4.884-0.328,6.061-3.734,5.801c-0.137-2.367-17.141-4.296-38.111-4.296
|
||||
c-20.985,0-37.989,1.929-38.126,4.296c-3.406,0.26-3.734-0.917-3.734-5.801c0-0.479,0.014-0.984,0.027-1.519
|
||||
c0.52-12.052,7.318-34.582,41.833-34.582c34.5,0,41.299,22.53,41.818,34.582C135.879,47.346,135.893,47.852,135.893,48.33z"/>
|
||||
</g>
|
||||
<path style="clip-path:url(#SVGID_2_);fill:#FFFFFF;" d="M115.106,146.119c-3.517,10.826-10.601,21.539-21.036,30.299
|
||||
c-10.436-8.76-17.509-19.473-21.025-30.299c0.052,0.02,0.113,0.041,0.165,0.061c5.531,4.955,12.852,7.979,20.86,7.979
|
||||
c8.009,0,15.319-3.013,20.851-7.968C114.982,146.17,115.044,146.14,115.106,146.119z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
1
front/dist/resources/logos/discussion.svg
vendored
Normal file
1
front/dist/resources/logos/discussion.svg
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg height="682pt" viewBox="-21 -47 682.66669 682" width="682pt" xmlns="http://www.w3.org/2000/svg"><path d="m640 86.65625v283.972656c0 48.511719-39.472656 87.988282-87.988281 87.988282h-279.152344l-185.183594 128.863281v-128.863281c-48.375-.164063-87.675781-39.574219-87.675781-87.988282v-283.972656c0-48.515625 39.472656-87.988281 87.988281-87.988281h464.023438c48.515625 0 87.988281 39.472656 87.988281 87.988281zm0 0" fill="#ffdb2d"/><path d="m640 86.65625v283.972656c0 48.511719-39.472656 87.988282-87.988281 87.988282h-232.109375v-459.949219h232.109375c48.515625 0 87.988281 39.472656 87.988281 87.988281zm0 0" fill="#ffaa20"/><g fill="#fff"><path d="m171.296875 131.167969h297.40625v37.5h-297.40625zm0 0"/><path d="m171.296875 211.167969h297.40625v37.5h-297.40625zm0 0"/><path d="m171.296875 291.167969h297.40625v37.5h-297.40625zm0 0"/></g><path d="m319.902344 131.167969h148.800781v37.5h-148.800781zm0 0" fill="#e1e1e3"/><path d="m319.902344 211.167969h148.800781v37.5h-148.800781zm0 0" fill="#e1e1e3"/><path d="m319.902344 291.167969h148.800781v37.5h-148.800781zm0 0" fill="#e1e1e3"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
211
front/dist/resources/style/style.css
vendored
211
front/dist/resources/style/style.css
vendored
|
|
@ -1,6 +1,14 @@
|
|||
*{
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
body{
|
||||
overflow: hidden;
|
||||
}
|
||||
body button:focus,
|
||||
body img:focus,
|
||||
body input:focus {
|
||||
outline: -webkit-focus-ring-color auto 0;
|
||||
}
|
||||
body .message-info{
|
||||
width: 20%;
|
||||
height: auto;
|
||||
|
|
@ -72,14 +80,16 @@ body .message-info.warning{
|
|||
|
||||
#div-myCamVideo {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
}
|
||||
|
||||
video#myCamVideo{
|
||||
width: 15vw;
|
||||
-webkit-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
/*width: 200px;*/
|
||||
/*height: 113px;*/
|
||||
}
|
||||
|
|
@ -372,6 +382,7 @@ body {
|
|||
margin: 2%;
|
||||
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: pointer;
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
}
|
||||
|
||||
.sidebar > div:hover {
|
||||
|
|
@ -384,6 +395,7 @@ body {
|
|||
justify-content: center;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.chat-mode {
|
||||
|
|
@ -435,7 +447,7 @@ body {
|
|||
max-height: 80%;
|
||||
top: -80%;
|
||||
left: 10%;
|
||||
background: #000000a6;
|
||||
background: #333333;
|
||||
z-index: 200;
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
|
|
@ -532,7 +544,7 @@ body {
|
|||
border: 1px solid black;
|
||||
background-color: #00000000;
|
||||
color: #ffda01;
|
||||
border-radius: 10px;
|
||||
border-radius: 15px;
|
||||
padding: 10px 30px;
|
||||
transition: all .2s ease;
|
||||
}
|
||||
|
|
@ -627,6 +639,7 @@ div.modal-report-user{
|
|||
left: calc(50% - 400px);
|
||||
top: 100px;
|
||||
background-color: #000000ad;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.modal-report-user textarea{
|
||||
|
|
@ -638,6 +651,7 @@ div.modal-report-user{
|
|||
color: white;
|
||||
width: calc(100% - 60px);
|
||||
margin: 30px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.modal-report-user img{
|
||||
|
|
@ -669,7 +683,7 @@ div.modal-report-user{
|
|||
border: 1px solid black;
|
||||
background-color: #00000000;
|
||||
color: #ffda01;
|
||||
border-radius: 10px;
|
||||
border-radius: 15px;
|
||||
padding: 10px 30px;
|
||||
transition: all .2s ease;
|
||||
}
|
||||
|
|
@ -701,6 +715,193 @@ div.modal-report-user{
|
|||
max-width: calc(800px - 60px); /* size of modal - padding*/
|
||||
}
|
||||
|
||||
/*MESSAGE*/
|
||||
.discussion{
|
||||
position: fixed;
|
||||
left: -300px;
|
||||
top: 0px;
|
||||
width: 220px;
|
||||
height: 100%;
|
||||
background-color: #333333;
|
||||
padding: 20px;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.discussion.active{
|
||||
left: 0;
|
||||
}
|
||||
.discussion .active-btn{
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-color: #2d2d2dba;
|
||||
position: absolute;
|
||||
top: calc(50% - 25px);
|
||||
margin-left: 315px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.discussion .active-btn.active{
|
||||
display: block;
|
||||
}
|
||||
.discussion .active-btn:hover {
|
||||
transform: scale(1.1) rotateY(3.142rad);
|
||||
}
|
||||
.discussion .active-btn img{
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin: 13px 5px;
|
||||
}
|
||||
|
||||
.discussion .close-btn{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.discussion .close-btn img{
|
||||
height: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.discussion p{
|
||||
color: white;
|
||||
font-size: 22px;
|
||||
padding-left: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.discussion .participants{
|
||||
height: 200px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.discussion .participants .participant{
|
||||
display: flex;
|
||||
margin: 5px 10px;
|
||||
background-color: #ffffff69;
|
||||
padding: 5px;
|
||||
border-radius: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.discussion .participants .participant:hover{
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.discussion .participants .participant:hover p{
|
||||
color: black;
|
||||
}
|
||||
|
||||
.discussion .participants .participant:before {
|
||||
content: '';
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background-color: #1e7e34;
|
||||
position: absolute;
|
||||
margin-left: 18px;
|
||||
border-radius: 50%;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.discussion .participants .participant img{
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.discussion .participants .participant p{
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.discussion .participants .participant button.report-btn{
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
background-color: #2d2d2dba;
|
||||
right: 34px;
|
||||
margin: 0px;
|
||||
padding: 6px 0px;
|
||||
border-radius: 15px;
|
||||
border: none;
|
||||
color: white;
|
||||
width: 0px;
|
||||
overflow: hidden;
|
||||
transition: all .5s ease;
|
||||
}
|
||||
|
||||
.discussion .participants .participant:hover button.report-btn{
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.discussion .messages{
|
||||
position: absolute;
|
||||
height: calc(100% - 360px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
max-width: calc(100% - 40px);
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.discussion .messages h2{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.discussion .messages .message{
|
||||
margin: 5px;
|
||||
float: right;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.discussion .messages .message.me{
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.discussion .messages .message p{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.discussion .messages .message p.body{
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.discussion .send-message{
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
width: 220px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.discussion .send-message input{
|
||||
position: absolute;
|
||||
width: calc(100% - 10px);
|
||||
height: 20px;
|
||||
background-color: #171717;
|
||||
color: white;
|
||||
border-radius: 15px;
|
||||
border: none;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.discussion .send-message img{
|
||||
position: absolute;
|
||||
margin-right: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #ffffff69;
|
||||
}
|
||||
.discussion .send-message img:hover{
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
/** Action button **/
|
||||
div.action{
|
||||
position: absolute;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue