From 096baa88979d1ed13503fe88901d79c2083c7564 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Tue, 17 Aug 2021 14:44:43 +0200
Subject: [PATCH] First pass on css

---
 .../Components/Menu/AboutRoomSubMenu.svelte   |  58 +++++-----
 .../src/Components/Menu/ContactSubMenu.svelte | 101 ++++++++++--------
 .../Components/Menu/CreateMapSubMenu.svelte   |  43 +++++---
 front/src/Components/Menu/Menu.svelte         |  18 +++-
 front/src/Components/Menu/MenuIcon.svelte     |   7 +-
 .../src/Components/Menu/ProfileSubMenu.svelte |  12 ++-
 .../Components/Menu/SettingsSubMenu.svelte    |  33 ++++--
 7 files changed, 162 insertions(+), 110 deletions(-)

diff --git a/front/src/Components/Menu/AboutRoomSubMenu.svelte b/front/src/Components/Menu/AboutRoomSubMenu.svelte
index 711ebb5d..7749abd7 100644
--- a/front/src/Components/Menu/AboutRoomSubMenu.svelte
+++ b/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">
-        <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);
       }
     }
   }
diff --git a/front/src/Components/Menu/ContactSubMenu.svelte b/front/src/Components/Menu/ContactSubMenu.svelte
index 223f0324..beb7e386 100644
--- a/front/src/Components/Menu/ContactSubMenu.svelte
+++ b/front/src/Components/Menu/ContactSubMenu.svelte
@@ -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;
diff --git a/front/src/Components/Menu/CreateMapSubMenu.svelte b/front/src/Components/Menu/CreateMapSubMenu.svelte
index 65e2e346..33d677ae 100644
--- a/front/src/Components/Menu/CreateMapSubMenu.svelte
+++ b/front/src/Components/Menu/CreateMapSubMenu.svelte
@@ -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>
\ No newline at end of file
diff --git a/front/src/Components/Menu/Menu.svelte b/front/src/Components/Menu/Menu.svelte
index 572fa19e..5e7acd64 100644
--- a/front/src/Components/Menu/Menu.svelte
+++ b/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>
\ No newline at end of file
diff --git a/front/src/Components/Menu/MenuIcon.svelte b/front/src/Components/Menu/MenuIcon.svelte
index ac409fde..3cdae289 100644
--- a/front/src/Components/Menu/MenuIcon.svelte
+++ b/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>
diff --git a/front/src/Components/Menu/ProfileSubMenu.svelte b/front/src/Components/Menu/ProfileSubMenu.svelte
index 1f28bb8b..bb49d45e 100644
--- a/front/src/Components/Menu/ProfileSubMenu.svelte
+++ b/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
-          width: 250px; //TODO: clamp value
+          height: 50px;
+          width: 250px;
         }
       }
     }
+
+    @media only screen and (max-height: 900px) {
+      div.customize-main section button {
+        width: 130px;
+      }
+    }
 </style>
\ No newline at end of file
diff --git a/front/src/Components/Menu/SettingsSubMenu.svelte b/front/src/Components/Menu/SettingsSubMenu.svelte
index 87974686..0d0dab83 100644
--- a/front/src/Components/Menu/SettingsSubMenu.svelte
+++ b/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="{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>
\ No newline at end of file