First pass on css
This commit is contained in:
GRL
parent
82b95faa53
commit
096baa8897
|
|
@ -51,15 +51,13 @@
|
|||
<input type="text" readonly bind:this={HTMLShareLink} value={location.toString()}>
|
||||
<button type="button" class="nes-btn is-primary" on:click={copyLink}>Copy</button>
|
||||
</section>
|
||||
<section class="presentation-map">
|
||||
<p>This room use the following map : </p>
|
||||
<h2>Informations on the map</h2>
|
||||
<section class="container-overflow">
|
||||
<h3>{mapName}</h3>
|
||||
<p class="string-HTML">{mapDescription}</p>
|
||||
</section>
|
||||
<section class="copyright">
|
||||
<h3 class="nes-pointer" on:click={() => expandedMapCopyright = !expandedMapCopyright}>Copyrights of the map</h3>
|
||||
<h3 class="nes-pointer hoverable" on:click={() => expandedMapCopyright = !expandedMapCopyright}>Copyrights of the map</h3>
|
||||
<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}">
|
||||
{#each tilesetCopyright as copyright}
|
||||
<p class="string-HTML">{copyright}</p>
|
||||
|
|
@ -78,11 +76,10 @@
|
|||
|
||||
div.about-room-main {
|
||||
height: calc(100% - 56px);
|
||||
display: grid;
|
||||
grid-template-rows: 20% 40% 30%;
|
||||
|
||||
section.share-url {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
input {
|
||||
width: 85%;
|
||||
|
|
@ -93,30 +90,33 @@
|
|||
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 {
|
||||
background-color: #3c3e40;
|
||||
border-radius: 32px;
|
||||
h2, h3 {
|
||||
width: 100%;
|
||||
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);
|
||||
overflow: auto;
|
||||
|
||||
section.container-overflow {
|
||||
height: calc(100% - 120px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,51 +9,53 @@
|
|||
</script>
|
||||
|
||||
<div class="contact-main">
|
||||
<section>
|
||||
<p>
|
||||
The WorkAdventure team is always available to help you.
|
||||
If you have any questions, problems, new features or improvements ideas, or if you just want to give us your feedback,
|
||||
do not hesitate to contact us.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Our Office</h3>
|
||||
<p>
|
||||
The WorkAdventure team has its own offices in ... WorkAdventure!
|
||||
Do not hesitate to come see and talk to us.
|
||||
</p>
|
||||
<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>
|
||||
<p>Although we offer a solution to reduce their use, we have an email address that allows us to receive all your requests.</p>
|
||||
<a class="nes-pointer" href="mailto:hello@workadventu.re" target="_blank">hello@workadventu.re</a>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Our web site</h3>
|
||||
<p>If you want to know more about us, follow the link to our web site.</p>
|
||||
<a class="nes-pointer" href="https://workadventu.re/about-us" target="_blank">About us</a>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Our social media</h3>
|
||||
<a href="https://discord.gg/YGtngdh9gt" target="_blank">
|
||||
<img class="nes-pointer" src="{discordImg}" alt="{'Discord'}">
|
||||
</a>
|
||||
<a href="https://www.facebook.com/workadventure.WA" target="_blank">
|
||||
<img class="nes-pointer" src="{facebookImg}" alt="{'Facebook'}">
|
||||
</a>
|
||||
<a href="https://www.instagram.com/workadventure_/" target="_blank">
|
||||
<img class="nes-pointer" src="{instagramImg}" alt="{'Instagram'}">
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/workadventure-by-tcm/" target="_blank">
|
||||
<img class="nes-pointer" src="{linkedinImg}" alt="{'LinkedIn'}">
|
||||
</a>
|
||||
<a href="https://twitter.com/Workadventure_" target="_blank">
|
||||
<img class="nes-pointer" src="{twitterImg}" alt="{'Twitter'}">
|
||||
</a>
|
||||
<a href="https://www.youtube.com/channel/UCXJ9igV-kb9gw1ftR33y5tA" target="_blank">
|
||||
<img class="nes-pointer" src="{youtubeImg}" alt="{'Youtube'}">
|
||||
</a>
|
||||
<section class="container-overflow">
|
||||
<section>
|
||||
<p>
|
||||
The WorkAdventure team is always available to help you.
|
||||
If you have any questions, problems, new features or improvements ideas, or if you just want to give us your feedback,
|
||||
do not hesitate to contact us.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Our Office</h3>
|
||||
<p>
|
||||
The WorkAdventure team has its own offices in ... WorkAdventure!
|
||||
Do not hesitate to come see and talk to us.
|
||||
</p>
|
||||
<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>
|
||||
<p>Although we offer a solution to reduce their use, we have an email address that allows us to receive all your requests.</p>
|
||||
<a class="nes-pointer" href="mailto:hello@workadventu.re" target="_blank">hello@workadventu.re</a>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Our web site</h3>
|
||||
<p>If you want to know more about us, follow the link to our web site.</p>
|
||||
<a class="nes-pointer" href="https://workadventu.re/about-us" target="_blank">About us</a>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Our social media</h3>
|
||||
<a href="https://discord.gg/YGtngdh9gt" target="_blank">
|
||||
<img class="nes-pointer" src="{discordImg}" alt="{'Discord'}">
|
||||
</a>
|
||||
<a href="https://www.facebook.com/workadventure.WA" target="_blank">
|
||||
<img class="nes-pointer" src="{facebookImg}" alt="{'Facebook'}">
|
||||
</a>
|
||||
<a href="https://www.instagram.com/workadventure_/" target="_blank">
|
||||
<img class="nes-pointer" src="{instagramImg}" alt="{'Instagram'}">
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/workadventure-by-tcm/" target="_blank">
|
||||
<img class="nes-pointer" src="{linkedinImg}" alt="{'LinkedIn'}">
|
||||
</a>
|
||||
<a href="https://twitter.com/Workadventure_" target="_blank">
|
||||
<img class="nes-pointer" src="{twitterImg}" alt="{'Twitter'}">
|
||||
</a>
|
||||
<a href="https://www.youtube.com/channel/UCXJ9igV-kb9gw1ftR33y5tA" target="_blank">
|
||||
<img class="nes-pointer" src="{youtubeImg}" alt="{'Youtube'}">
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
|
@ -63,12 +65,17 @@
|
|||
height: calc(100% - 56px);
|
||||
width: 100%;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: 18% 21% 24% 21% 16%;
|
||||
section.container-overflow {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
section {
|
||||
text-align: center;
|
||||
padding: 4px 5px;
|
||||
margin-bottom: 25px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -22,20 +22,22 @@
|
|||
</script>
|
||||
|
||||
<div class="create-map-main">
|
||||
<section class="create-map-building">
|
||||
<h3>Create your map</h3>
|
||||
<p>
|
||||
WorkAdventure allows you to create an online space to communicate spontaneously with others.
|
||||
And it all starts with creating your own space. Choose from a large selection of prefabricated maps by our team.
|
||||
Or create your own map from scratch.
|
||||
</p>
|
||||
<button type="button" class="nes-btn is-primary" on:click={goToCreateMapPage}>Create a map</button>
|
||||
</section>
|
||||
<section class="create-map-scripting">
|
||||
<h3>Use the scripting API</h3>
|
||||
<p>Make your map more interactive, more alive and totally unique with the scripting API.</p>
|
||||
<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 class="container-overflow">
|
||||
<section>
|
||||
<h3>Create your map</h3>
|
||||
<p>
|
||||
WorkAdventure allows you to create an online space to communicate spontaneously with others.
|
||||
And it all starts with creating your own space. Choose from a large selection of prefabricated maps by our team.
|
||||
Or create your own map from scratch.
|
||||
</p>
|
||||
<button type="button" class="nes-btn is-primary" on:click={goToCreateMapPage}>Create a map</button>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Use the scripting API</h3>
|
||||
<p>Make your map more interactive, more alive and totally unique with the scripting API.</p>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
|
@ -44,8 +46,17 @@
|
|||
height: calc(100% - 56px);
|
||||
|
||||
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>
|
||||
|
|
@ -17,9 +17,10 @@
|
|||
let activeComponent: typeof SettingsSubMenu | typeof CustomSubMenu = SettingsSubMenu;
|
||||
|
||||
onMount(() => {
|
||||
if(!get(userIsAdminStore)) {
|
||||
//TODO: Uncomment before final push to merge
|
||||
/*if(!get(userIsAdminStore)) {
|
||||
subMenusStore.removeMenu(SubMenusInterface.globalMessages);
|
||||
}
|
||||
}*/
|
||||
|
||||
switchMenu(SubMenusInterface.settings);
|
||||
})
|
||||
|
|
@ -90,11 +91,11 @@
|
|||
}
|
||||
|
||||
div.menu-container-main {
|
||||
--size-first-columns-grid: 15%;
|
||||
--size-first-columns-grid: clamp(120px, 15%, 200px);
|
||||
|
||||
font-family: "Press Start 2P";
|
||||
pointer-events: auto;
|
||||
height: 70vh;
|
||||
height: 80vh;
|
||||
width: 75vw;
|
||||
top: 10vh;
|
||||
|
||||
|
|
@ -125,4 +126,13 @@
|
|||
color: whitesmoke;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 900px) {
|
||||
div.menu-container-main {
|
||||
top: 5vh;
|
||||
height: 85vh;
|
||||
width: 100vw;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -28,9 +28,12 @@
|
|||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-height: 700px) {
|
||||
@media only screen and (max-height: 900px) {
|
||||
.menuIcon {
|
||||
margin: 100px;
|
||||
margin: 3px;
|
||||
img {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
<style lang="scss">
|
||||
div.customize-main{
|
||||
display: grid;
|
||||
grid-template-rows: 33% 33% 33%; //TODO: clamp values
|
||||
grid-template-rows: 33% 33% 33%;
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
|
|
@ -65,9 +65,15 @@
|
|||
align-items: center;
|
||||
|
||||
button {
|
||||
height: 50px; //TODO: clamp value
|
||||
width: 250px; //TODO: clamp value
|
||||
height: 50px;
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 900px) {
|
||||
div.customize-main section button {
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
import {localUserStore} from "../../Connexion/LocalUserStore";
|
||||
import {videoConstraintStore} from "../../Stores/MediaStore";
|
||||
import {HtmlUtils} from "../../WebRtc/HtmlUtils";
|
||||
import {isMobile} from "../../Enum/EnvironmentVariable";
|
||||
|
||||
let fullscreen : boolean = localUserStore.getFullscreen();
|
||||
let notification : boolean = localUserStore.getNotification() === 'granted';
|
||||
|
|
@ -55,19 +56,19 @@ function changeNotification() {
|
|||
<section>
|
||||
<h3>Game quality</h3>
|
||||
<select class="nes-pointer" bind:value={valueGame}>
|
||||
<option value="{120}">High video quality (120 fps)</option>
|
||||
<option value="{60}">Medium video quality (60 fps, recommended)</option>
|
||||
<option value="{40}">Minimum video quality (40 fps)</option>
|
||||
<option value="{20}">Small video quality (20 fps)</option>
|
||||
<option value="{120}">{isMobile() ? 'High (120 fps)' : 'High video quality (120 fps)'}</option>
|
||||
<option value="{60}">{isMobile() ? 'Medium (60 fps)' : 'Medium video quality (60 fps, recommended)'}</option>
|
||||
<option value="{40}">{isMobile() ? 'Minimum (40 fps)' : 'Minimum video quality (40 fps)'}</option>
|
||||
<option value="{20}">{isMobile() ? 'Small (20 fps)' : 'Small video quality (20 fps)'}</option>
|
||||
</select>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Video quality</h3>
|
||||
<select class="nes-pointer" bind:value={valueVideo}>
|
||||
<option value="{30}">High video quality (30 fps)</option>
|
||||
<option value="{20}">Medium video quality (20 fps, recommended)</option>
|
||||
<option value="{10}">Minimum video quality (10 fps)</option>
|
||||
<option value="{5}">Small video quality (5 fps)</option>
|
||||
<option value="{30}">{isMobile() ? 'High (30 fps)' : 'High video quality (30 fps)'}</option>
|
||||
<option value="{20}">{isMobile() ? 'Medium (20 fps)' : 'Medium video quality (20 fps, recommended)'}</option>
|
||||
<option value="{10}">{isMobile() ? 'Minimum (10 fps)' : 'Minimum video quality (10 fps)'}</option>
|
||||
<option value="{5}">{isMobile() ? 'Small (5 fps)' : 'Small video quality (5 fps)'}</option>
|
||||
</select>
|
||||
</section>
|
||||
<section class="settings-section-save">
|
||||
|
|
@ -93,7 +94,7 @@ function changeNotification() {
|
|||
grid-template-rows: 25% 25% 25% 20%;
|
||||
|
||||
section {
|
||||
width: 100%; //TODO clamp value
|
||||
width: 100%;
|
||||
padding: 20px 20px 0;
|
||||
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>
|
||||
Loading…
Reference in a new issue