From 2ea7b0cff10549bf22d7695585599b8bf26e0845 Mon Sep 17 00:00:00 2001
From: GRL78 <80678534+GRL78@users.noreply.github.com>
Date: Wed, 8 Sep 2021 15:43:46 +0200
Subject: [PATCH] Menu style will adapt if iframe in map is opened (#1422)

---
 front/src/Components/Menu/Menu.svelte         | 39 ++++++++++++++++---
 .../src/Components/Menu/ProfileSubMenu.svelte | 13 ++-----
 .../Components/Menu/SettingsSubMenu.svelte    | 17 +++-----
 front/src/Stores/MenuStore.ts                 |  4 +-
 .../style/TextGlobalMessageSvelte-Style.scss  |  4 +-
 5 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/front/src/Components/Menu/Menu.svelte b/front/src/Components/Menu/Menu.svelte
index 4086a9ae..6cbef9c1 100644
--- a/front/src/Components/Menu/Menu.svelte
+++ b/front/src/Components/Menu/Menu.svelte
@@ -7,7 +7,13 @@
     import GlobalMessageSubMenu from "./GlobalMessagesSubMenu.svelte";
     import ContactSubMenu from "./ContactSubMenu.svelte";
     import CustomSubMenu from "./CustomSubMenu.svelte"
-    import {customMenuIframe, menuVisiblilityStore, SubMenusInterface, subMenusStore} from "../../Stores/MenuStore";
+    import {
+        checkSubMenuToShow,
+        customMenuIframe,
+        menuVisiblilityStore,
+        SubMenusInterface,
+        subMenusStore
+    } from "../../Stores/MenuStore";
     import {onDestroy, onMount} from "svelte";
     import {get} from "svelte/store";
     import type {Unsubscriber} from "svelte/store";
@@ -25,6 +31,8 @@
             }
         })
 
+        checkSubMenuToShow();
+
         switchMenu(SubMenusInterface.settings);
     })
 
@@ -95,6 +103,7 @@
         </nav>
     </div>
     <div class="menu-submenu-container nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
+        <button type="button" class="nes-btn is-error close" on:click={closeMenu}>&times</button>
         <h2>{activeSubMenu}</h2>
         <svelte:component this={activeComponent} {...props}/>
     </div>
@@ -110,9 +119,9 @@
 
     font-family: "Press Start 2P";
     pointer-events: auto;
-    height: 80vh;
-    width: 75vw;
-    top: 10vh;
+    height: 80%;
+    width: 75%;
+    top: 10%;
 
     position: relative;
     margin: auto;
@@ -139,16 +148,34 @@
     div.menu-submenu-container {
       background-color: #333333;
       color: whitesmoke;
+
+      .nes-btn.is-error.close {
+        position: absolute;
+        top: -20px;
+        right: -20px;
+      }
     }
   }
 
   @media only screen and (max-width: 800px) {
     div.menu-container-main {
       --size-first-columns-grid: 120px;
-      height: 70vh;
+      height: 70%;
       top: 55px;
-      width: 100vw;
+      width: 100%;
       font-size: 0.5em;
+
+      div.menu-nav-sidebar {
+        overflow-y: auto;
+      }
+
+      div.menu-submenu-container {
+        .nes-btn.is-error.close {
+          position: absolute;
+          top: -35px;
+          right: 0;
+        }
+      }
     }
   }
 </style>
\ No newline at end of file
diff --git a/front/src/Components/Menu/ProfileSubMenu.svelte b/front/src/Components/Menu/ProfileSubMenu.svelte
index 39214b4f..83ec329c 100644
--- a/front/src/Components/Menu/ProfileSubMenu.svelte
+++ b/front/src/Components/Menu/ProfileSubMenu.svelte
@@ -52,11 +52,6 @@
         enableCameraSceneVisibilityStore.showEnableCameraScene();
         gameManager.leaveGame(EnableCameraSceneName,new EnableCameraScene());
     }
-
-    //TODO: Uncomment when login will be completely developed
-    /*function clickLogin() {
-        connectionManager.loadOpenIDScreen();
-    }*/
 </script>
 
 <div class="customize-main">
@@ -71,20 +66,17 @@
         </section>
     {:else}
         <section>
-            <a type="button" class="nes-btn" href="/login">Sing in</a>
+            <a type="button" class="nes-btn" href="/login">Sign in</a>
         </section>
     {/if}
     <section>
         <button type="button" class="nes-btn" on:click|preventDefault={openEditNameScene}>Edit Name</button>
-        <button type="button" class="nes-btn is-rounded" on:click|preventDefault={openEditSkinScene}>Edit Skin</button>
+        <button type="button" class="nes-btn" on:click|preventDefault={openEditSkinScene}>Edit Skin</button>
         <button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>Edit Companion</button>
     </section>
     <section>
         <button type="button" class="nes-btn" on:click|preventDefault={openEnableCameraScene}>Setup camera</button>
     </section>
-<!--    <section>
-        <button type="button" class="nes-btn is-primary" on:click|preventDefault={clickLogin}>Login</button>
-    </section>-->
 </div>
 
 <style lang="scss">
@@ -93,6 +85,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        flex-wrap: wrap;
         margin-bottom: 20px;
 
         iframe{
diff --git a/front/src/Components/Menu/SettingsSubMenu.svelte b/front/src/Components/Menu/SettingsSubMenu.svelte
index 4c0c62dd..6b3e96f8 100644
--- a/front/src/Components/Menu/SettingsSubMenu.svelte
+++ b/front/src/Components/Menu/SettingsSubMenu.svelte
@@ -94,6 +94,7 @@ function changeNotification() {
 <style lang="scss">
   div.settings-main {
     height: calc(100% - 40px);
+    overflow-y: auto;
 
     section {
       width: 100%;
@@ -112,14 +113,14 @@ function changeNotification() {
       }
     }
     section.settings-section-noSaveOption {
-      --nb-noSaveOptions: 2; //number of sub-element in the section
-      display: grid;
-      grid-template-columns: calc(100% / var(--nb-noSaveOptions)) calc(100% / var(--nb-noSaveOptions)); //Same size for every sub-element
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
 
       label {
+        flex: 1 1 auto;
         text-align: center;
-        width: 100%;
-        margin: 0;
+        margin: 0 0 15px;
       }
     }
   }
@@ -129,12 +130,6 @@ function changeNotification() {
       section {
         padding: 0;
       }
-
-      section.settings-section-noSaveOption {
-        height: 80px;
-        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
diff --git a/front/src/Stores/MenuStore.ts b/front/src/Stores/MenuStore.ts
index 035ba174..96e731a9 100644
--- a/front/src/Stores/MenuStore.ts
+++ b/front/src/Stores/MenuStore.ts
@@ -71,7 +71,7 @@ function createSubMenusStore() {
 
 export const subMenusStore = createSubMenusStore();
 
-function checkSubMenuToShow() {
+export function checkSubMenuToShow() {
     if (!get(userIsAdminStore)) {
         subMenusStore.removeMenu(SubMenusInterface.globalMessages);
     }
@@ -81,8 +81,6 @@ function checkSubMenuToShow() {
     }
 }
 
-checkSubMenuToShow();
-
 export const customMenuIframe = new Map<string, { url: string; allowApi: boolean }>();
 
 export function handleMenuRegistrationEvent(
diff --git a/front/style/TextGlobalMessageSvelte-Style.scss b/front/style/TextGlobalMessageSvelte-Style.scss
index ce67b699..dda65d05 100644
--- a/front/style/TextGlobalMessageSvelte-Style.scss
+++ b/front/style/TextGlobalMessageSvelte-Style.scss
@@ -1,10 +1,10 @@
 //TextGlobalMessage
 section.section-input-send-text {
-  --height-toolbar: 15%;
+  --height-toolbar: 20%;
   height: 100%;
 
   .ql-toolbar{
-    height: var(--height-toolbar);
+    max-height: var(--height-toolbar);
     background: whitesmoke;
   }