Added characters-left indicator to certain input fields, adjusted character limits

This commit is contained in:
Mia Rose Winter 2024-05-02 13:57:31 +02:00
parent d30ae09b9b
commit c98293cc0a
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
8 changed files with 40 additions and 13 deletions

View file

@ -15,7 +15,7 @@
<HelpDropdownComponent Body="@Localizer["AboutTheAuthor_Explanation"]"/> <HelpDropdownComponent Body="@Localizer["AboutTheAuthor_Explanation"]"/>
</span> </span>
</div> </div>
<InputTextArea class="textarea textarea-bordered w-full h-24" maxlength="512" <InputTextArea class="textarea textarea-bordered w-full h-24" maxlength="500" oninput="charactersLeft_onInput(this)"
@bind-Value="@Model.AboutTheAuthor" placeholder="@Localizer["AboutTheAuthor_Placeholder"]"/> @bind-Value="@Model.AboutTheAuthor" placeholder="@Localizer["AboutTheAuthor_Placeholder"]"/>
<div class="label"> <div class="label">
<span class="label-text-alt text-error"><ValidationMessage For="() => Model.AboutTheAuthor"/></span> <span class="label-text-alt text-error"><ValidationMessage For="() => Model.AboutTheAuthor"/></span>
@ -29,7 +29,7 @@
<HelpDropdownComponent Body="@Localizer["Biography_Explanation"]"/> <HelpDropdownComponent Body="@Localizer["Biography_Explanation"]"/>
</span> </span>
</div> </div>
<InputTextArea class="textarea textarea-bordered w-full h-48" maxlength="4096" <InputTextArea class="textarea textarea-bordered w-full h-48" maxlength="4000" oninput="charactersLeft_onInput(this)"
@bind-Value="@Model.Biography" placeholder="@Localizer["Biography_Placeholder"]"/> @bind-Value="@Model.Biography" placeholder="@Localizer["Biography_Placeholder"]"/>
<div class="label"> <div class="label">
<span class="label-text-alt text-error"><ValidationMessage For="() => Model.Biography"/></span> <span class="label-text-alt text-error"><ValidationMessage For="() => Model.Biography"/></span>

View file

@ -13,19 +13,23 @@
<DataAnnotationsValidator /> <DataAnnotationsValidator />
<InputLabelComponent For="() => Model.ContactEmail" LabelText="@Localizer["Contact_Email_Label"]"> <InputLabelComponent For="() => Model.ContactEmail" LabelText="@Localizer["Contact_Email_Label"]">
<InputText class="input input-bordered w-full" maxlength="128" type="email" autocomplete="email" <InputText class="input input-bordered w-full" maxlength="128" type="email" autocomplete="email"
oninput="charactersLeft_onInput(this)"
@bind-Value="@Model.ContactEmail" placeholder="@Localizer["Contact_Email_Placeholder"]" /> @bind-Value="@Model.ContactEmail" placeholder="@Localizer["Contact_Email_Placeholder"]" />
</InputLabelComponent> </InputLabelComponent>
<InputLabelComponent For="() => Model.ContactPhone" LabelText="@Localizer["Contact_Phone_Label"]"> <InputLabelComponent For="() => Model.ContactPhone" LabelText="@Localizer["Contact_Phone_Label"]">
<InputText class="input input-bordered w-full" maxlength="64" type="tel" autocomplete="tel" <InputText class="input input-bordered w-full" maxlength="64" type="tel" autocomplete="tel"
oninput="charactersLeft_onInput(this)"
@bind-Value="@Model.ContactPhone" placeholder="@Localizer["Contact_Phone_Placeholder"]" /> @bind-Value="@Model.ContactPhone" placeholder="@Localizer["Contact_Phone_Placeholder"]" />
</InputLabelComponent> </InputLabelComponent>
<InputLabelComponent For="() => Model.ContactPhoneBusiness" LabelText="@Localizer["Contact_PhoneBusiness_Label"]"> <InputLabelComponent For="() => Model.ContactPhoneBusiness" LabelText="@Localizer["Contact_PhoneBusiness_Label"]">
<InputText class="input input-bordered w-full" maxlength="64" type="tel" autocomplete="tel" <InputText class="input input-bordered w-full" maxlength="64" type="tel" autocomplete="tel"
oninput="charactersLeft_onInput(this)"
@bind-Value="@Model.ContactPhoneBusiness" placeholder="@Localizer["Contact_PhoneBusiness_Placeholder"]" /> @bind-Value="@Model.ContactPhoneBusiness" placeholder="@Localizer["Contact_PhoneBusiness_Placeholder"]" />
</InputLabelComponent> </InputLabelComponent>
<InputLabelComponent For="() => Model.ContactWebsite" LabelText="@Localizer["Contact_Website_Label"]"> <InputLabelComponent For="() => Model.ContactWebsite" LabelText="@Localizer["Contact_Website_Label"]">
<InputText class="input input-bordered w-full" maxlength="128" type="url" autocomplete="url" <InputText class="input input-bordered w-full" maxlength="128" type="url" autocomplete="url"
oninput="charactersLeft_onInput(this)"
@bind-Value="@Model.ContactWebsite" placeholder="@Localizer["Contact_Website_Placeholder"]" /> @bind-Value="@Model.ContactWebsite" placeholder="@Localizer["Contact_Website_Placeholder"]" />
</InputLabelComponent> </InputLabelComponent>

View file

@ -13,7 +13,8 @@
<form id="add-user-link" @formname="add-user-link" @onsubmit="Add" method="post"> <form id="add-user-link" @formname="add-user-link" @onsubmit="Add" method="post">
<AntiforgeryToken /> <AntiforgeryToken />
<InputLabelComponent LabelText="@Localizer["Links_Url_Label"]"> <InputLabelComponent LabelText="@Localizer["Links_Url_Label"]">
<input class="input input-bordered" maxlength="1024" autocomplete="off" type="url" <input class="input input-bordered" maxlength="512" autocomplete="off" type="url"
oninput="charactersLeft_onInput(this)"
name="link-url" value="@Url" placeholder="@Localizer["Links_Url_Placeholder"]" /> name="link-url" value="@Url" placeholder="@Localizer["Links_Url_Placeholder"]" />
</InputLabelComponent> </InputLabelComponent>
</form> </form>
@ -50,7 +51,7 @@
public required ApplicationUser User { get; set; } public required ApplicationUser User { get; set; }
// Create // Create
[SupplyParameterFromForm(FormName = "add-user-link", Name = "link-url")] [SupplyParameterFromForm(FormName = "add-user-link", Name = "link-url"), MaxLength(512)]
private string Url { get; set; } = string.Empty; private string Url { get; set; } = string.Empty;
// Delete // Delete
@ -62,7 +63,7 @@
Message.ShowError("Url is required."); Message.ShowError("Url is required.");
return; return;
} }
if (Url.Length > 1024) { if (Url.Length > 512) {
Message.ShowError("Url is too long."); Message.ShowError("Url is too long.");
return; return;
} }

View file

@ -12,7 +12,7 @@
<div class="label"> <div class="label">
<span class="label-text">@Localizer["FullName_Label"]</span> <span class="label-text">@Localizer["FullName_Label"]</span>
</div> </div>
<InputText class="input input-bordered w-full" maxlength="64" autocomplete="name" <InputText class="input input-bordered w-full" maxlength="64" autocomplete="name" oninput="charactersLeft_onInput(this)"
@bind-Value="@Model.FullName" placeholder="@Localizer["FullName_Placeholder"]" /> @bind-Value="@Model.FullName" placeholder="@Localizer["FullName_Placeholder"]" />
<div class="label"> <div class="label">
<span class="label-text-alt text-error"> <span class="label-text-alt text-error">

View file

@ -47,6 +47,24 @@
<script src="_framework/blazor.web.js" defer></script> <script src="_framework/blazor.web.js" defer></script>
<SectionOutlet SectionName="scripts" /> <SectionOutlet SectionName="scripts" />
<script> <script>
charactersLeft_onInput = function(input) {
const maxLength = input.maxLength;
const currentLength = input.value.length;
const newLeft = maxLength - currentLength;
let elem = input.parentNode.querySelector(".characters-left");
if (elem) {
elem.innerText = newLeft;
} else {
input.parentNode.classList.add("relative");
elem = document.createElement("span");
elem.classList.add("characters-left");
elem.innerText = newLeft;
input.parentNode.appendChild(elem);
}
}
window.insertBeforeSelection = function (markdown, startOfLine = false) { window.insertBeforeSelection = function (markdown, startOfLine = false) {
const target = document.getElementById("tool-target"); const target = document.getElementById("tool-target");

View file

@ -31,7 +31,7 @@
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-8">
<InputLabelComponent LabelText="@Localizer["Title_Label"]" For="() => Model.Title"> <InputLabelComponent LabelText="@Localizer["Title_Label"]" For="() => Model.Title">
<InputText class="input input-bordered w-full" maxlength="256" required aria-required <InputText class="input input-bordered w-full" maxlength="256" required aria-required oninput="charactersLeft_onInput(this)"
@bind-Value="@Model.Title" placeholder="@Localizer["Title_Placeholder"]" autocomplete="off"/> @bind-Value="@Model.Title" placeholder="@Localizer["Title_Placeholder"]" autocomplete="off"/>
</InputLabelComponent> </InputLabelComponent>
@ -49,7 +49,7 @@
<InputLabelComponent LabelText="@Localizer["Slug_Label"]" For="() => Model.Slug"> <InputLabelComponent LabelText="@Localizer["Slug_Label"]" For="() => Model.Slug">
@if (Article.Status is not ArticleStatus.Published || Article.PublishDate >= DateTimeOffset.UtcNow) { @if (Article.Status is not ArticleStatus.Published || Article.PublishDate >= DateTimeOffset.UtcNow) {
<InputText class="input input-bordered w-full" maxlength="64" <InputText class="input input-bordered w-full" maxlength="64" oninput="charactersLeft_onInput(this)"
@bind-Value="@Model.Slug" placeholder="@Localizer["Slug_Placeholder"]" autocomplete="off"/> @bind-Value="@Model.Slug" placeholder="@Localizer["Slug_Placeholder"]" autocomplete="off"/>
} else { } else {
<input class="input input-bordered w-full" readonly value="@Model.Slug" <input class="input input-bordered w-full" readonly value="@Model.Slug"

View file

@ -51,4 +51,8 @@ @layer components {
.prose pre:has(code) { .prose pre:has(code) {
@apply border-2 border-current; @apply border-2 border-current;
} }
.characters-left {
@apply absolute right-6 bottom-6 select-none pointer-events-none;
}
} }

File diff suppressed because one or more lines are too long