First pass on css

front/src/Components/Menu/AboutRoomSubMenu.svelte

@@ -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">
+    <h2>Informations on the map</h2>
-        <p>This room use the following map : </p>
+    <section class="container-overflow">
         <h3>{mapName}</h3>
         <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>
-        <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 {
+    h2, h3 {
       width: 100%;
       text-align: center;
     }
-      p {
-        max-height: calc(100% - 36px);
-        overflow: auto;
-      }
-    }
-    section.copyright {
-      text-align: center;
 
-      h3:hover {
+    h3.hoverable:hover {
       background-color: #3c3e40;
       border-radius: 32px;
     }
-      p {
+
-        max-height: calc(100% - 36px);
+    section.container-overflow {
-        overflow: auto;
+      height: calc(100% - 220px);
+      margin: 0;
+      padding: 0;
+      overflow-y: auto;
       }
-      section {
+  }
-        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.container-overflow {
+        height: calc(100% - 120px);
       }
     }
   }

front/src/Components/Menu/ContactSubMenu.svelte

@@ -9,6 +9,7 @@
 </script>
 
 <div class="contact-main">
+    <section class="container-overflow">
         <section>
             <p>
                 The WorkAdventure team is always available to help you.
@@ -55,6 +56,7 @@
                 <img class="nes-pointer" src="{youtubeImg}" alt="{'Youtube'}">
             </a>
         </section>
+    </section>
 </div>
 
 
@@ -63,12 +65,17 @@
       height: calc(100% - 56px);
       width: 100%;
 
-      display: grid;
+      section.container-overflow {
-      grid-template-rows: 18% 21% 24% 21% 16%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: auto;
+      }
 
       section {
         text-align: center;
         padding: 4px 5px;
+        margin-bottom: 25px;
 
         p {
           margin: 0;

front/src/Components/Menu/CreateMapSubMenu.svelte

@@ -22,7 +22,8 @@
 </script>
 
 <div class="create-map-main">
-    <section class="create-map-building">
+    <section class="container-overflow">
+        <section>
             <h3>Create your map</h3>
             <p>
                 WorkAdventure allows you to create an online space to communicate spontaneously with others.
@@ -31,12 +32,13 @@
             </p>
             <button type="button" class="nes-btn is-primary" on:click={goToCreateMapPage}>Create a map</button>
         </section>
-    <section class="create-map-scripting">
+        <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>
 
 <style lang="scss">
@@ -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>

front/src/Components/Menu/Menu.svelte

@@ -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>

front/src/Components/Menu/MenuIcon.svelte

@@ -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>

front/src/Components/Menu/ProfileSubMenu.svelte

@@ -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
+          height: 50px;
-          width: 250px; //TODO: clamp value
+          width: 250px;
         }
       }
     }
+
+    @media only screen and (max-height: 900px) {
+      div.customize-main section button {
+        width: 130px;
+      }
+    }
 </style>

front/src/Components/Menu/SettingsSubMenu.svelte

@@ -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="{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>
     </section>
     <section>
         <h3>Video quality</h3>
             <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>
     </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>