From 56be93c99aeb12d6f3bf65ead283364b75d9cbe1 Mon Sep 17 00:00:00 2001
From: Jake Mannens <jake@asger.xyz>
Date: Mon, 28 Aug 2023 23:36:15 +1000
Subject: Fixed dialog bug causing dialogs to be shown briefly during page load

---
 Pages/Component/Dialog.razor     | 17 ++++++++++-------
 Pages/Component/Dialog.razor.css |  7 -------
 2 files changed, 10 insertions(+), 14 deletions(-)

(limited to 'Pages')

diff --git a/Pages/Component/Dialog.razor b/Pages/Component/Dialog.razor
index 1e2929a..ded2d2d 100644
--- a/Pages/Component/Dialog.razor
+++ b/Pages/Component/Dialog.razor
@@ -1,4 +1,4 @@
-<div style="@style" class="@(visible ? "visible" : "")">
+<div style="@(heightStyle + visiblilityStyle)">
     @if(Title is not null) {
         <p>@Title</p>
         <hr/>
@@ -13,6 +13,11 @@
     [Parameter]
     public RenderFragment ChildContent { get; set; }
 
+    [Parameter]
+    public int HeightPixels  { set => height = $"{value}px"; }
+    [Parameter]
+    public int HeightPercent { set => height = $"{value}%"; }
+
     public bool Visible {
         get => visible;
         set {
@@ -21,11 +26,6 @@
         }
     }
 
-    [Parameter]
-    public int HeightPixels  { set => height = $"{value}px"; }
-    [Parameter]
-    public int HeightPercent { set => height = $"{value}%"; }
-
     public void Show() => Visible = true;
     public void Hide() => Visible = false;
 
@@ -33,6 +33,9 @@
 
     private string? height;
 
-    private string style =>
+    private string heightStyle =>
         $"{(height is null ? "" : $"max-height:{height};")}";
+
+    private string visiblilityStyle =>
+        Visible ? "opacity:1;visibility:visible;" : "opacity:0;visibility:hidden;";
 }
diff --git a/Pages/Component/Dialog.razor.css b/Pages/Component/Dialog.razor.css
index ff34843..22d59f0 100644
--- a/Pages/Component/Dialog.razor.css
+++ b/Pages/Component/Dialog.razor.css
@@ -5,17 +5,10 @@
     display:        flex;
     flex-direction: column;
     left:           50%;
-    opacity:        0;
     padding:        20px;
     position:       absolute;
     top:            50%;
     transform:      translate(-50%, -50%);
     transition:     visibility 0.1s, opacity 0.1s linear;
-    visibility:     hidden;
     width:          450px;
 }
-
-div.visible {
-    opacity:    1;
-    visibility: visible;
-}
-- 
cgit v1.3