From b8eed9b0d7957378255cf42a2675ce6a2cda65cd Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Sun, 13 Apr 2025 13:37:03 +0200
Subject: [PATCH] Fix form sizing

---
 .../Components/GameCreationForm.razor.cs      | 12 ++++++++---
 .../Components/GameCreationForm.razor.css     |  5 +++++
 .../Components/GameCreationForm.razor.js      |  7 +------
 .../Shared/Components/Popup/Popup.razor       | 21 +++++++++++--------
 .../Shared/Components/Popup/Popup.razor.cs    |  5 ++++-
 .../Shared/Components/Popup/Popup.razor.css   |  2 +-
 6 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
index 43baf8d..edf6d17 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
@@ -1,3 +1,4 @@
+using GameIdeas.BlazorApp.Shared.Components.Popup;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;
@@ -9,6 +10,7 @@ namespace GameIdeas.BlazorApp.Pages.Games.Components;
 public partial class GameCreationForm
 {
     [Inject] private IJSRuntime Js { get; set; } = default!;
+    [CascadingParameter] private Popup? Popup { get; set; }
 
     private GameDto GameDto = new();
     private EditContext? EditContext;
@@ -17,12 +19,16 @@ public partial class GameCreationForm
     protected override void OnInitialized()
     {
         EditContext = new(GameDto);
+        if (Popup != null)
+        {
+            Popup.StateChanged += async (_, isOpen) => await HandlePopupStateChanged();
+        }
+
         base.OnInitialized();
     }
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
+    private async Task HandlePopupStateChanged()
     {
-        await Js.InvokeVoidAsync("addResizeGameFormListener");
-        await base.OnAfterRenderAsync(firstRender);
+        await Js.InvokeVoidAsync("resizeGameForm");
     }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
index f9907c0..87a6bcd 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
@@ -35,6 +35,11 @@ input {
     color: var(--white);
 }
 
+    input[type="date"]::-webkit-calendar-picker-indicator {
+        filter: invert(1);
+        cursor: pointer;
+    }
+
 .description-container {
     margin-top: 8px;
     display: grid;
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.js b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.js
index 1d2ed31..ab5b850 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.js
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.js
@@ -1,10 +1,5 @@
-function resizeFormContent() {
+window.resizeGameForm = () => {
     const label = document.getElementById('first-label');
     const targetLabel = document.getElementById('label-description');
     targetLabel.style.width = window.getComputedStyle(label).getPropertyValue("width");
-}
-
-window.addResizeGameFormListener = () => {
-    resizeFormContent();
-    window.addEventListener('resize', resizeFormContent);
 };
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor
index cc66ca4..794bb5e 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor
@@ -1,15 +1,18 @@
 @using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
 @using GameIdeas.BlazorApp.Shared.Constants
 
-<div class="popup-wrapper" style="@GetDisplayStyle()">
-    <div class="popup-content">
-        @if (Closable)
-        {
-            <button @onclick="HandleBackdropFilterClicked">@Icons.Shared.Close</button>
-        }
-        @ChildContent
-    </div>  
-</div>
+<CascadingValue Value="this">
+    <div class="popup-wrapper" style="@GetDisplayStyle()">
+        <div class="popup-content">
+            @if (Closable)
+            {
+                <button @onclick="HandleBackdropFilterClicked">@Icons.Shared.Close</button>
+            }
+            @ChildContent
+        </div>
+    </div>
+</CascadingValue>
+
 
 <BackdropFilter @ref="BackdropFilter" OnClick="HandleBackdropFilterClicked" CloseOnClick="@Closable"
                 AllowBodyScroll="false" Color="BackdropFilterColor.Overlay" />
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs
index 2b18c50..af8af70 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs
@@ -8,9 +8,10 @@ public partial class Popup
     [Parameter] public bool IsDrawerOpen { get; set; }
     [Parameter] public EventCallback BackdropFilterClicked { get; set; }
     [Parameter] public bool Closable { get; set; } = true;
+    public bool IsOpen { get; set; }
+    public EventHandler<bool>? StateChanged { get; set; }
 
     private BackdropFilter.BackdropFilter? BackdropFilter;
-    public bool IsOpen { get; set; }
 
     protected override async Task OnParametersSetAsync()
     {
@@ -30,6 +31,7 @@ public partial class Popup
     {
         IsOpen = true;
         await BackdropFilter?.Show()!;
+        StateChanged?.Invoke(null, IsOpen);
         StateHasChanged();
     }
 
@@ -37,6 +39,7 @@ public partial class Popup
     {
         IsOpen = false;
         await BackdropFilter?.Hide()!;
+        StateChanged?.Invoke(null, IsOpen);
         StateHasChanged();
     }
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css
index 66222e6..754be81 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css
@@ -29,7 +29,7 @@
     width: 20px;
 }
 
-    .popup-content button svg {
+    ::deep .popup-content button svg {
         height: 18px;
         fill: var(--white);
     }