noby/workadventure
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix responsive Camera Settings

Browse Source
This commit is contained in:
Gregoire Parant 2021-04-22 11:47:59 +02:00
parent 3df32de83b
commit 3697ddabfa
3 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
front/dist/resources/html/helpCameraSettings.html vendored
View File

@ -7,7 +7,7 @@
width: 400px; width: 400px;
max-height: calc(50vh - 25px); max-height: calc(50vh - 25px);
overflow: scroll; overflow: scroll;
max-width: 50vw; max-width: 48vw;
} }
#helpCameraSettings h1 { #helpCameraSettings h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0); background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@ -30,7 +30,7 @@
margin: 0; margin: 0;
} }
#helpCameraSettings button { #helpCameraSettings button {
margin: 10px; margin: 10px 4px;
background-color: black; background-color: black;
color: white; color: white;
border-radius: 7px; border-radius: 7px;
@ -41,9 +41,8 @@
color: #292929; color: #292929;
} }
#helpCameraSettings section a{ #helpCameraSettings section a{
text-align: center;
font-size: 12px; font-size: 12px;
margin: 0 6px; text-decoration: underline;
color: black; color: black;
} }
#helpCameraSettings section h6, #helpCameraSettings section h6,
@ -87,7 +86,7 @@
<p id='browserHelpSetting'></p> <p id='browserHelpSetting'></p>
</section> </section>
<section class="action"> <section class="action">
<button type="submit" id="helpCameraSettingsFormRefresh">Refresh</button> <a href="#" id="helpCameraSettingsFormRefresh">Refresh</a>
<button type="submit" id="helpCameraSettingsFormContinue">Continue</button> <button type="submit" id="helpCameraSettingsFormContinue">Continue</button>
</section> </section>
</form> </form>

3
front/dist/resources/style/mobile-style.scss vendored
View File

@ -1,4 +1,5 @@
@media only screen and (max-width: 700px) { @media screen and (max-width: 700px),
screen and (max-height: 700px){
video#myCamVideo { video#myCamVideo {
width: 150px; width: 150px;
} }

8
front/src/Phaser/Menu/HelpCameraSettingsScene.ts
View File

@ -112,12 +112,14 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
} }
private getMiddleX() : number{ private getMiddleX() : number{
const middleX = ((window.innerWidth) - (( return (this.game.renderer.width / 2) -
(
this.helpCameraSettingsElement this.helpCameraSettingsElement
&& this.helpCameraSettingsElement.node && this.helpCameraSettingsElement.node
&& this.helpCameraSettingsElement.node.getBoundingClientRect().width > 0 && this.helpCameraSettingsElement.node.getBoundingClientRect().width > 0
? this.helpCameraSettingsElement.node.getBoundingClientRect().width : 300 /*FIXME to use a const will be injected in HTMLElement*/)*2)) / 2; ? (this.helpCameraSettingsElement.node.getBoundingClientRect().width / 4)
return (middleX > 0 ? middleX / 2 : 0); : (400 / 2)
);
} }
private getMiddleY() : number{ private getMiddleY() : number{