From d6bd883c94d0aa6b18305dadc8837247b771c112 Mon Sep 17 00:00:00 2001 From: GRL Date: Wed, 18 Aug 2021 15:34:26 +0200 Subject: [PATCH] Third pass on css and reportMenu --- .../Components/Menu/AboutRoomSubMenu.svelte | 2 +- .../Menu/GlobalMessagesSubMenu.svelte | 2 +- front/src/Components/Menu/Menu.svelte | 12 +++++----- front/src/Components/Menu/MenuIcon.svelte | 2 +- .../src/Components/Menu/ProfileSubMenu.svelte | 2 +- .../Components/Menu/SettingsSubMenu.svelte | 2 +- .../Components/ReportMenu/ReportMenu.svelte | 22 +++++++++++++------ .../ReportMenu/ReportSubMenu.svelte | 8 ++++++- .../style/TextGlobalMessageSvelte-Style.scss | 2 +- 9 files changed, 35 insertions(+), 19 deletions(-) diff --git a/front/src/Components/Menu/AboutRoomSubMenu.svelte b/front/src/Components/Menu/AboutRoomSubMenu.svelte index 9637e9ce..0d753a96 100644 --- a/front/src/Components/Menu/AboutRoomSubMenu.svelte +++ b/front/src/Components/Menu/AboutRoomSubMenu.svelte @@ -127,7 +127,7 @@ } } - @media only screen and (max-height: 900px) { + @media only screen and (max-width: 800px), only screen and (max-height: 800px) { div.about-room-main { section.share-url.not-mobile { display: none; diff --git a/front/src/Components/Menu/GlobalMessagesSubMenu.svelte b/front/src/Components/Menu/GlobalMessagesSubMenu.svelte index 451d3b53..8ec66de9 100644 --- a/front/src/Components/Menu/GlobalMessagesSubMenu.svelte +++ b/front/src/Components/Menu/GlobalMessagesSubMenu.svelte @@ -103,7 +103,7 @@ } } - @media only screen and (max-height: 900px) { + @media only screen and (max-width: 800px), only screen and (max-height: 800px) { .global-message-content { height: calc(100% - 5px); } diff --git a/front/src/Components/Menu/Menu.svelte b/front/src/Components/Menu/Menu.svelte index 7f62f612..c021358a 100644 --- a/front/src/Components/Menu/Menu.svelte +++ b/front/src/Components/Menu/Menu.svelte @@ -90,13 +90,13 @@ } div.menu-container-main { - --size-first-columns-grid: clamp(120px, 15%, 200px); + --size-first-columns-grid: 200px; font-family: "Press Start 2P"; pointer-events: auto; - height: 80vh; + height: 70vh; width: 75vw; - top: clamp(55px, 10vh, 10vh); + top: 10vh; position: relative; margin: auto; @@ -126,9 +126,11 @@ } } - @media only screen and (max-height: 900px) { + @media only screen and (max-width: 800px) { div.menu-container-main { - bottom: 55px; + --size-first-columns-grid: 120px; + //height: calc(100vh - 110px); + top: 55px; width: 100vw; font-size: 0.5em; } diff --git a/front/src/Components/Menu/MenuIcon.svelte b/front/src/Components/Menu/MenuIcon.svelte index 3cdae289..db57c595 100644 --- a/front/src/Components/Menu/MenuIcon.svelte +++ b/front/src/Components/Menu/MenuIcon.svelte @@ -28,7 +28,7 @@ padding-top: 0; } } - @media only screen and (max-height: 900px) { + @media only screen and (max-width: 800px), only screen and (max-height: 800px) { .menuIcon { margin: 3px; img { diff --git a/front/src/Components/Menu/ProfileSubMenu.svelte b/front/src/Components/Menu/ProfileSubMenu.svelte index c4b0c16c..516baf6b 100644 --- a/front/src/Components/Menu/ProfileSubMenu.svelte +++ b/front/src/Components/Menu/ProfileSubMenu.svelte @@ -70,7 +70,7 @@ } } - @media only screen and (max-height: 900px) { + @media only screen and (max-width: 800px) { div.customize-main section button { width: 130px; } diff --git a/front/src/Components/Menu/SettingsSubMenu.svelte b/front/src/Components/Menu/SettingsSubMenu.svelte index e771bc4f..2d45c1bc 100644 --- a/front/src/Components/Menu/SettingsSubMenu.svelte +++ b/front/src/Components/Menu/SettingsSubMenu.svelte @@ -125,7 +125,7 @@ function changeNotification() { } } - @media only screen and (max-height: 900px) { + @media only screen and (max-width: 800px), only screen and (max-height: 800px) { div.settings-main { section { padding: 0; diff --git a/front/src/Components/ReportMenu/ReportMenu.svelte b/front/src/Components/ReportMenu/ReportMenu.svelte index 9b3cf06b..689ea954 100644 --- a/front/src/Components/ReportMenu/ReportMenu.svelte +++ b/front/src/Components/ReportMenu/ReportMenu.svelte @@ -5,12 +5,12 @@ import {onDestroy, onMount} from "svelte"; import type {Unsubscriber} from "svelte/store"; import {playersStore} from "../../Stores/PlayersStore"; - import {connectionManager} from "../../Connexion/ConnectionManager"; - import {GameConnexionTypes} from "../../Url/UrlManager"; + //import {connectionManager} from "../../Connexion/ConnectionManager"; + //import {GameConnexionTypes} from "../../Url/UrlManager"; let blockActive = true; let reportActive = !blockActive; - let anonymous: boolean; + let anonymous: boolean = false; let userUUID: string | undefined = ''; let userName = "No name"; let unsubscriber: Unsubscriber @@ -25,7 +25,7 @@ } } }) - anonymous = connectionManager.getConnexionType === GameConnexionTypes.anonymous; + //anonymous = connectionManager.getConnexionType === GameConnexionTypes.anonymous; }) onDestroy(() => { @@ -48,8 +48,15 @@ reportActive = true; } + function onKeyDown(e:KeyboardEvent) { + if (e.key === 'Escape') { + close(); + } + } + +

Moderate {userName}

@@ -96,7 +103,7 @@ position: relative; height: 70vh; width: 50vw; - top: clamp(55px, 10vh, 10vh); + top: 10vh; margin: auto; section.report-menu-title { @@ -122,9 +129,10 @@ } } - @media only screen and (max-height: 900px) { + @media only screen and (max-width: 800px) { div.report-menu-main { - bottom: 55px; + top: 21vh; + height: 60vh; width: 100vw; font-size: 0.5em; } diff --git a/front/src/Components/ReportMenu/ReportSubMenu.svelte b/front/src/Components/ReportMenu/ReportSubMenu.svelte index 36bf878b..1ff29bbb 100644 --- a/front/src/Components/ReportMenu/ReportSubMenu.svelte +++ b/front/src/Components/ReportMenu/ReportSubMenu.svelte @@ -42,7 +42,13 @@ text-align: center; textarea { - height: clamp(100px, 20vh, 20vh); + height: clamp(100px, 15vh, 300px); + } + } + + @media only screen and (max-height: 630px) { + div.report-container-main textarea { + height: 50px; } } \ No newline at end of file diff --git a/front/style/TextGlobalMessageSvelte-Style.scss b/front/style/TextGlobalMessageSvelte-Style.scss index dce20378..ce67b699 100644 --- a/front/style/TextGlobalMessageSvelte-Style.scss +++ b/front/style/TextGlobalMessageSvelte-Style.scss @@ -30,7 +30,7 @@ section.section-input-send-text { } } -@media only screen and (max-height: 900px) { +@media only screen and (max-width: 800px), only screen and (max-height: 800px) { section.section-input-send-text { --height-toolbar: 30%;