diff --git a/src/Site/Site.Client/Components/TerminalChat.razor.css b/src/Site/Site.Client/Components/TerminalChat.razor.css index 8542f9b..970ae16 100644 --- 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 index a457f4c..b4f45ee 100644 --- a/src/Site/Site.Client/Components/TerminalInput.razor +++ b/src/Site/Site.Client/Components/TerminalInput.razor @@ -5,13 +5,17 @@ - + @if (string.IsNullOrEmpty(Message)) + { + Tap to respond. + } + @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 index 09078b6..08c7fa9 100644 --- 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; + } +} \ No newline at end of file