winter-software/Wave
winter-software/Wave
1
0
Fork 0
Code Issues Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Wave/Components/Account/Pages/Manage/Partials/AboutMeFormPartial.razor
View file

@ -15,7 +15,7 @@
<HelpDropdownComponent Body="@Localizer["AboutTheAuthor_Explanation"]"/>
</span>
</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"]"/>
<div class="label">
<span class="label-text-alt text-error"><ValidationMessage For="() => Model.AboutTheAuthor"/></span>
@ -29,7 +29,7 @@
<HelpDropdownComponent Body="@Localizer["Biography_Explanation"]"/>
</span>
</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"]"/>
<div class="label">
<span class="label-text-alt text-error"><ValidationMessage For="() => Model.Biography"/></span>

4
Wave/Components/Account/Pages/Manage/Partials/ContactInformationPartial.razor
View file

@ -14,18 +14,22 @@
<InputLabelComponent For="() => Model.ContactEmail" LabelText="@Localizer["Contact_Email_Label"]">
<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"]" />
</InputLabelComponent>
<InputLabelComponent For="() => Model.ContactPhone" LabelText="@Localizer["Contact_Phone_Label"]">
<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"]" />
</InputLabelComponent>
<InputLabelComponent For="() => Model.ContactPhoneBusiness" LabelText="@Localizer["Contact_PhoneBusiness_Label"]">
<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"]" />
</InputLabelComponent>
<InputLabelComponent For="() => Model.ContactWebsite" LabelText="@Localizer["Contact_Website_Label"]">
<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"]" />
</InputLabelComponent>

7
Wave/Components/Account/Pages/Manage/Partials/LinksPartial.razor
View file

@ -13,7 +13,8 @@
<form id="add-user-link" @formname="add-user-link" @onsubmit="Add" method="post">
<AntiforgeryToken />
<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"]" />
</InputLabelComponent>
</form>
@ -50,7 +51,7 @@
public required ApplicationUser User { get; set; }
// 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;
// Delete
@ -62,7 +63,7 @@
Message.ShowError("Url is required.");
return;
}
if (Url.Length > 1024) {
if (Url.Length > 512) {
Message.ShowError("Url is too long.");
return;
}

2
Wave/Components/Account/Pages/Manage/Partials/ProfileFormPartial.razor
View file

@ -12,7 +12,7 @@
<div class="label">
<span class="label-text">@Localizer["FullName_Label"]</span>
</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"]" />
<div class="label">
<span class="label-text-alt text-error">

18
Wave/Components/App.razor
View file

@ -47,6 +47,24 @@
<script src="_framework/blazor.web.js" defer></script>
<SectionOutlet SectionName="scripts" />
<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) {
const target = document.getElementById("tool-target");

4
Wave/Components/Pages/Partials/ArticleEditorPartial.razor
View file

@ -31,7 +31,7 @@
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-8">
<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"/>
</InputLabelComponent>
@ -49,7 +49,7 @@
<InputLabelComponent LabelText="@Localizer["Slug_Label"]" For="() => Model.Slug">
@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"/>
} else {
<input class="input input-bordered w-full" readonly value="@Model.Slug"

4
Wave/wwwroot/css/main.css
View file

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

2
Wave/wwwroot/css/main.min.css vendored
View file

File diff suppressed because one or more lines are too long