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

First pass on css

Browse source
This commit is contained in:
GRL 2021-08-17 14:44:43 +02:00
parent 82b95faa53
commit 096baa8897
7 changed files with 162 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

58
front/src/Components/Menu/AboutRoomSubMenu.svelte
View file

@ -51,15 +51,13 @@
<input type="text" readonly bind:this={HTMLShareLink} value={location.toString()}> <input type="text" readonly bind:this={HTMLShareLink} value={location.toString()}>
<button type="button" class="nes-btn is-primary" on:click={copyLink}>Copy</button> <button type="button" class="nes-btn is-primary" on:click={copyLink}>Copy</button>
</section> </section>
<section class="presentation-map"> <h2>Informations on the map</h2>
<p>This room use the following map : </p> <section class="container-overflow">
<h3>{mapName}</h3> <h3>{mapName}</h3>
<p class="string-HTML">{mapDescription}</p> <p class="string-HTML">{mapDescription}</p>
</section> <h3 class="nes-pointer hoverable" on:click={() => expandedMapCopyright = !expandedMapCopyright}>Copyrights of the map</h3>
<section class="copyright">
<h3 class="nes-pointer" on:click={() => expandedMapCopyright = !expandedMapCopyright}>Copyrights of the map</h3>
<p class="string-HTML" hidden="{!expandedMapCopyright}">{mapCopyright}</p> <p class="string-HTML" hidden="{!expandedMapCopyright}">{mapCopyright}</p>
<h3 class="nes-pointer" on:click={() => expandedTilesetCopyright = !expandedTilesetCopyright}>Copyrights of the tilesets</h3> <h3 class="nes-pointer hoverable" on:click={() => expandedTilesetCopyright = !expandedTilesetCopyright}>Copyrights of the tilesets</h3>
<section hidden="{!expandedTilesetCopyright}"> <section hidden="{!expandedTilesetCopyright}">
{#each tilesetCopyright as copyright} {#each tilesetCopyright as copyright}
<p class="string-HTML">{copyright}</p> <p class="string-HTML">{copyright}</p>
@ -78,11 +76,10 @@
div.about-room-main { div.about-room-main {
height: calc(100% - 56px); height: calc(100% - 56px);
display: grid;
grid-template-rows: 20% 40% 30%;
section.share-url { section.share-url {
text-align: center; text-align: center;
margin-bottom: 20px;
input { input {
width: 85%; width: 85%;
@ -93,30 +90,33 @@
background-color: #209cee; background-color: #209cee;
} }
} }
section.presentation-map {
h3 {
width: 100%;
text-align: center;
}
p {
max-height: calc(100% - 36px);
overflow: auto;
}
}
section.copyright {
text-align: center;
h3:hover { h2, h3 {
background-color: #3c3e40; width: 100%;
border-radius: 32px; text-align: center;
}
h3.hoverable:hover {
background-color: #3c3e40;
border-radius: 32px;
}
section.container-overflow {
height: calc(100% - 220px);
margin: 0;
padding: 0;
overflow-y: auto;
} }
p { }
max-height: calc(100% - 36px);
overflow: auto; @media only screen and (max-height: 900px) {
div.about-room-main {
section.share-url input {
display: none;
} }
section {
max-height: calc(100% - 36px); section.container-overflow {
overflow: auto; height: calc(100% - 120px);
} }
} }
} }

101
front/src/Components/Menu/ContactSubMenu.svelte
View file

@ -9,51 +9,53 @@
</script> </script>
<div class="contact-main"> <div class="contact-main">
<section> <section class="container-overflow">
<p> <section>
The WorkAdventure team is always available to help you. <p>
If you have any questions, problems, new features or improvements ideas, or if you just want to give us your feedback, The WorkAdventure team is always available to help you.
do not hesitate to contact us. If you have any questions, problems, new features or improvements ideas, or if you just want to give us your feedback,
</p> do not hesitate to contact us.
</section> </p>
<section> </section>
<h3>Our Office</h3> <section>
<p> <h3>Our Office</h3>
The WorkAdventure team has its own offices in ... WorkAdventure! <p>
Do not hesitate to come see and talk to us. The WorkAdventure team has its own offices in ... WorkAdventure!
</p> Do not hesitate to come see and talk to us.
<a class="nes-pointer" href="https://play.staging.workadventu.re/@tcm/workadventure/wa-village" target="_blank">Visit us</a> </p>
</section> <a class="nes-pointer" href="https://play.staging.workadventu.re/@tcm/workadventure/wa-village" target="_blank">Visit us</a>
<section> </section>
<h3>Our Mail</h3> <section>
<p>Although we offer a solution to reduce their use, we have an email address that allows us to receive all your requests.</p> <h3>Our Mail</h3>
<a class="nes-pointer" href="mailto:hello@workadventu.re" target="_blank">hello@workadventu.re</a> <p>Although we offer a solution to reduce their use, we have an email address that allows us to receive all your requests.</p>
</section> <a class="nes-pointer" href="mailto:hello@workadventu.re" target="_blank">hello@workadventu.re</a>
<section> </section>
<h3>Our web site</h3> <section>
<p>If you want to know more about us, follow the link to our web site.</p> <h3>Our web site</h3>
<a class="nes-pointer" href="https://workadventu.re/about-us" target="_blank">About us</a> <p>If you want to know more about us, follow the link to our web site.</p>
</section> <a class="nes-pointer" href="https://workadventu.re/about-us" target="_blank">About us</a>
<section> </section>
<h3>Our social media</h3> <section>
<a href="https://discord.gg/YGtngdh9gt" target="_blank"> <h3>Our social media</h3>
<img class="nes-pointer" src="{discordImg}" alt="{'Discord'}"> <a href="https://discord.gg/YGtngdh9gt" target="_blank">
</a> <img class="nes-pointer" src="{discordImg}" alt="{'Discord'}">
<a href="https://www.facebook.com/workadventure.WA" target="_blank"> </a>
<img class="nes-pointer" src="{facebookImg}" alt="{'Facebook'}"> <a href="https://www.facebook.com/workadventure.WA" target="_blank">
</a> <img class="nes-pointer" src="{facebookImg}" alt="{'Facebook'}">
<a href="https://www.instagram.com/workadventure_/" target="_blank"> </a>
<img class="nes-pointer" src="{instagramImg}" alt="{'Instagram'}"> <a href="https://www.instagram.com/workadventure_/" target="_blank">
</a> <img class="nes-pointer" src="{instagramImg}" alt="{'Instagram'}">
<a href="https://www.linkedin.com/company/workadventure-by-tcm/" target="_blank"> </a>
<img class="nes-pointer" src="{linkedinImg}" alt="{'LinkedIn'}"> <a href="https://www.linkedin.com/company/workadventure-by-tcm/" target="_blank">
</a> <img class="nes-pointer" src="{linkedinImg}" alt="{'LinkedIn'}">
<a href="https://twitter.com/Workadventure_" target="_blank"> </a>
<img class="nes-pointer" src="{twitterImg}" alt="{'Twitter'}"> <a href="https://twitter.com/Workadventure_" target="_blank">
</a> <img class="nes-pointer" src="{twitterImg}" alt="{'Twitter'}">
<a href="https://www.youtube.com/channel/UCXJ9igV-kb9gw1ftR33y5tA" target="_blank"> </a>
<img class="nes-pointer" src="{youtubeImg}" alt="{'Youtube'}"> <a href="https://www.youtube.com/channel/UCXJ9igV-kb9gw1ftR33y5tA" target="_blank">
</a> <img class="nes-pointer" src="{youtubeImg}" alt="{'Youtube'}">
</a>
</section>
</section> </section>
</div> </div>
@ -63,12 +65,17 @@
height: calc(100% - 56px); height: calc(100% - 56px);
width: 100%; width: 100%;
display: grid; section.container-overflow {
grid-template-rows: 18% 21% 24% 21% 16%; height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
section { section {
text-align: center; text-align: center;
padding: 4px 5px; padding: 4px 5px;
margin-bottom: 25px;
p { p {
margin: 0; margin: 0;

43
front/src/Components/Menu/CreateMapSubMenu.svelte
View file

@ -22,20 +22,22 @@
</script> </script>
<div class="create-map-main"> <div class="create-map-main">
<section class="create-map-building"> <section class="container-overflow">
<h3>Create your map</h3> <section>
<p> <h3>Create your map</h3>
WorkAdventure allows you to create an online space to communicate spontaneously with others. <p>
And it all starts with creating your own space. Choose from a large selection of prefabricated maps by our team. WorkAdventure allows you to create an online space to communicate spontaneously with others.
Or create your own map from scratch. And it all starts with creating your own space. Choose from a large selection of prefabricated maps by our team.
</p> Or create your own map from scratch.
<button type="button" class="nes-btn is-primary" on:click={goToCreateMapPage}>Create a map</button> </p>
</section> <button type="button" class="nes-btn is-primary" on:click={goToCreateMapPage}>Create a map</button>
<section class="create-map-scripting"> </section>
<h3>Use the scripting API</h3> <section>
<p>Make your map more interactive, more alive and totally unique with the scripting API.</p> <h3>Use the scripting API</h3>
<p>(Programming skills are required to use the scripting API).</p> <p>Make your map more interactive, more alive and totally unique with the scripting API.</p>
<button type="button" class="nes-btn" on:click={goToScriptingApiPage}>Use a script</button> <p>(Programming skills are required to use the scripting API).</p>
<button type="button" class="nes-btn" on:click={goToScriptingApiPage}>Use a script</button>
</section>
</section> </section>
</div> </div>
@ -44,8 +46,17 @@
height: calc(100% - 56px); height: calc(100% - 56px);
text-align: center; text-align: center;
display: grid;
grid-template-rows: 50% 50%; section {
margin-bottom: 50px;
}
section.container-overflow {
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
} }
</style> </style>

18
front/src/Components/Menu/Menu.svelte
View file

@ -17,9 +17,10 @@
let activeComponent: typeof SettingsSubMenu | typeof CustomSubMenu = SettingsSubMenu; let activeComponent: typeof SettingsSubMenu | typeof CustomSubMenu = SettingsSubMenu;
onMount(() => { onMount(() => {
if(!get(userIsAdminStore)) { //TODO: Uncomment before final push to merge
/*if(!get(userIsAdminStore)) {
subMenusStore.removeMenu(SubMenusInterface.globalMessages); subMenusStore.removeMenu(SubMenusInterface.globalMessages);
} }*/
switchMenu(SubMenusInterface.settings); switchMenu(SubMenusInterface.settings);
}) })
@ -90,11 +91,11 @@
} }
div.menu-container-main { div.menu-container-main {
--size-first-columns-grid: 15%; --size-first-columns-grid: clamp(120px, 15%, 200px);
font-family: "Press Start 2P"; font-family: "Press Start 2P";
pointer-events: auto; pointer-events: auto;
height: 70vh; height: 80vh;
width: 75vw; width: 75vw;
top: 10vh; top: 10vh;
@ -125,4 +126,13 @@
color: whitesmoke; color: whitesmoke;
} }
} }
@media only screen and (max-height: 900px) {
div.menu-container-main {
top: 5vh;
height: 85vh;
width: 100vw;
font-size: 0.5em;
}
}
</style> </style>

7
front/src/Components/Menu/MenuIcon.svelte
View file

@ -28,9 +28,12 @@
padding-top: 0; padding-top: 0;
} }
} }
@media only screen and (max-height: 700px) { @media only screen and (max-height: 900px) {
.menuIcon { .menuIcon {
margin: 100px; margin: 3px;
img {
width: 50px;
}
} }
} }
</style> </style>

12
front/src/Components/Menu/ProfileSubMenu.svelte
View file

@ -57,7 +57,7 @@
<style lang="scss"> <style lang="scss">
div.customize-main{ div.customize-main{
display: grid; display: grid;
grid-template-rows: 33% 33% 33%; //TODO: clamp values grid-template-rows: 33% 33% 33%;
section { section {
display: flex; display: flex;
@ -65,9 +65,15 @@
align-items: center; align-items: center;
button { button {
height: 50px; //TODO: clamp value height: 50px;
width: 250px; //TODO: clamp value width: 250px;
} }
} }
} }
@media only screen and (max-height: 900px) {
div.customize-main section button {
width: 130px;
}
}
</style> </style>

33
front/src/Components/Menu/SettingsSubMenu.svelte
View file

@ -2,6 +2,7 @@
import {localUserStore} from "../../Connexion/LocalUserStore"; import {localUserStore} from "../../Connexion/LocalUserStore";
import {videoConstraintStore} from "../../Stores/MediaStore"; import {videoConstraintStore} from "../../Stores/MediaStore";
import {HtmlUtils} from "../../WebRtc/HtmlUtils"; import {HtmlUtils} from "../../WebRtc/HtmlUtils";
import {isMobile} from "../../Enum/EnvironmentVariable";
let fullscreen : boolean = localUserStore.getFullscreen(); let fullscreen : boolean = localUserStore.getFullscreen();
let notification : boolean = localUserStore.getNotification() === 'granted'; let notification : boolean = localUserStore.getNotification() === 'granted';
@ -55,19 +56,19 @@ function changeNotification() {
<section> <section>
<h3>Game quality</h3> <h3>Game quality</h3>
<select class="nes-pointer" bind:value={valueGame}> <select class="nes-pointer" bind:value={valueGame}>
<option value="{120}">High video quality (120 fps)</option> <option value="{120}">{isMobile() ? 'High (120 fps)' : 'High video quality (120 fps)'}</option>
<option value="{60}">Medium video quality (60 fps, recommended)</option> <option value="{60}">{isMobile() ? 'Medium (60 fps)' : 'Medium video quality (60 fps, recommended)'}</option>
<option value="{40}">Minimum video quality (40 fps)</option> <option value="{40}">{isMobile() ? 'Minimum (40 fps)' : 'Minimum video quality (40 fps)'}</option>
<option value="{20}">Small video quality (20 fps)</option> <option value="{20}">{isMobile() ? 'Small (20 fps)' : 'Small video quality (20 fps)'}</option>
</select> </select>
</section> </section>
<section> <section>
<h3>Video quality</h3> <h3>Video quality</h3>
<select class="nes-pointer" bind:value={valueVideo}> <select class="nes-pointer" bind:value={valueVideo}>
<option value="{30}">High video quality (30 fps)</option> <option value="{30}">{isMobile() ? 'High (30 fps)' : 'High video quality (30 fps)'}</option>
<option value="{20}">Medium video quality (20 fps, recommended)</option> <option value="{20}">{isMobile() ? 'Medium (20 fps)' : 'Medium video quality (20 fps, recommended)'}</option>
<option value="{10}">Minimum video quality (10 fps)</option> <option value="{10}">{isMobile() ? 'Minimum (10 fps)' : 'Minimum video quality (10 fps)'}</option>
<option value="{5}">Small video quality (5 fps)</option> <option value="{5}">{isMobile() ? 'Small (5 fps)' : 'Small video quality (5 fps)'}</option>
</select> </select>
</section> </section>
<section class="settings-section-save"> <section class="settings-section-save">
@ -93,7 +94,7 @@ function changeNotification() {
grid-template-rows: 25% 25% 25% 20%; grid-template-rows: 25% 25% 25% 20%;
section { section {
width: 100%; //TODO clamp value width: 100%;
padding: 20px 20px 0; padding: 20px 20px 0;
text-align: center; text-align: center;
@ -124,4 +125,18 @@ function changeNotification() {
} }
} }
} }
@media only screen and (max-height: 900px) {
div.settings-main {
section {
padding: 0;
}
section.settings-section-noSaveOption {
margin-top: 20px;
grid-template-columns: none;
grid-template-rows: calc(100% / var(--nb-noSaveOptions)) calc(100% / var(--nb-noSaveOptions)); //Same size for every sub-element;
}
}
}
</style> </style>