tap to respond

erinnmclaughlin · Apr 19, 2024 · 6f59ce5 · 6f59ce5
1 parent 76976c4
commit 6f59ce5
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/src/Site/Site.Client/Components/TerminalChat.razor.css b/src/Site/Site.Client/Components/TerminalChat.razor.css
@@ -4,4 +4,5 @@
     flex-direction: column;
     gap: 0.5em;
     padding: 0.5em;
+    padding-bottom: 4rem;
 }
diff --git a/src/Site/Site.Client/Components/TerminalInput.razor b/src/Site/Site.Client/Components/TerminalInput.razor
@@ -5,13 +5,17 @@
     <EditForm Model="this" OnValidSubmit="SubmitAsync" @onclick="FocusInputFieldAsync">
         <AntiforgeryToken />
         <DataAnnotationsValidator />
-        <InputText autocomplete="off" @ref="_inputField" @bind-Value="Message" @onclick:stopPropagation="true" />
+        @if (string.IsNullOrEmpty(Message))
+        {
+            <span class="instructions">Tap to respond.</span>
+        }
+        <input autocomplete="off" @ref="_inputField" @bind-value="Message" @bind-value:event="oninput" />
     </EditForm>
 </div>
 
 @code {
 
-    private InputText? _inputField;
+    private ElementReference _inputField;
 
     [Required]
     private string Message { get; set; } = string.Empty;
@@ -22,18 +26,24 @@
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
-            await FocusInputFieldAsync();
+        {
+            await InvokeAsync(async () =>
+            {
+                await FocusInputFieldAsync();
+                StateHasChanged();
+            });
+        }
     }
 
     private async Task FocusInputFieldAsync()
     {
-        if (_inputField?.Element is not null)
-            await _inputField.Element.Value.FocusAsync();
+        await _inputField.FocusAsync();
     }
 
     private async Task SubmitAsync()
     {
-        await OnUserInputReceived.InvokeAsync(Message);
+        if (!string.IsNullOrWhiteSpace(Message))
+            await OnUserInputReceived.InvokeAsync(Message);
     }
 
 }
diff --git a/src/Site/Site.Client/Components/TerminalInput.razor.css b/src/Site/Site.Client/Components/TerminalInput.razor.css
@@ -15,4 +15,27 @@ div ::deep form {
         padding: 0;
         color: transparent;
         text-shadow: 0 0 0 white;
+        position: relative;
     }
+
+
+    div ::deep input::before {
+        content: '(Tap to respond)';
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        color: red;
+    }
+
+.instructions {
+    position: absolute;
+    opacity: 0.25;
+    color: lime;
+}
+
+@media only screen and (min-width: 600px) {
+
+    .instructions {
+        display: none;
+    }
+}