Skip to content

feat(MeiliSearch): update css #584

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ArgoZhang merged 5 commits into from
Oct 9, 2025
Merged

feat(MeiliSearch): update css #584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f5554d1
refactor: 更新样式
ArgoZhang Oct 9, 2025
b77dc66
refactor: 增加初始化样式
ArgoZhang Oct 9, 2025
74e03d8
refactor: 脚本加载后恢复样式
ArgoZhang Oct 9, 2025
19482c9
chore: bump version 9.1.11
ArgoZhang Oct 9, 2025
6fce57a
Merge branch 'master' into refactor-search
ArgoZhang Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/BootstrapBlazor.MeiliSearch/BootstrapBlazor.MeiliSearch.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<Project Sdk="Microsoft.NET.Sdk.Razor">
<Project Sdk="Microsoft.NET.Sdk.Razor">

<PropertyGroup>
<Version>9.1.10</Version>
<Version>9.1.11</Version>
</PropertyGroup>

<PropertyGroup>
Expand Down
2 changes: 1 addition & 1 deletion src/components/BootstrapBlazor.MeiliSearch/MeiliSearchBox.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString">
<i class="fa-solid fa-search search-dialog-icon"></i>
<input type="text" readonly placeholder="@SearchBoxPlaceHolder" />
<div class="search-dialog-mask">
<div class="search-dialog-mask d-none">
Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot Oct 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Using both 'd-none' and 'display: none' in CSS may lead to specificity conflicts.

Standardize the method for toggling mask visibility to avoid CSS specificity issues and ensure consistent behavior.

Suggested implementation:

    <div class="search-dialog-mask @(IsMaskVisible ? "" : "d-none")">
  1. You will need to define a bool IsMaskVisible property in your component's code-behind or @code block.
  2. Update any logic that shows/hides the mask to set IsMaskVisible to true or false as appropriate.
  3. Remove any other usage of inline style="display: none" for .search-dialog-mask in this file.

<div class="search-dialog shadow-lg" tabindex="0">
<header class="search-dialog-input">
<i class="fa-solid fa-search"></i>
Expand Down
2 changes: 1 addition & 1 deletion src/components/BootstrapBlazor.MeiliSearch/MeiliSearchBox.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ public partial class MeiliSearchBox
[Parameter]
public RenderFragment? FooterTemplate { get; set; }

private string? ClassString => CssBuilder.Default("bb-g-search")
private string? ClassString => CssBuilder.Default("bb-g-search visually-hidden")
Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot Oct 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: Adding 'visually-hidden' to the root class may affect layout and accessibility.

If you intend to keep the search container accessible while hiding it visually, use a utility class or ARIA attributes designed for that purpose. Also, verify that visibility toggling works as expected on initialization.

.AddClassFromAttributes(AdditionalAttributes)
.Build();

Expand Down
7 changes: 6 additions & 1 deletion src/components/BootstrapBlazor.MeiliSearch/MeiliSearchBox.razor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ if (window.BootstrapBlazor === void 0) {
export async function init(id, options) {
const el = document.getElementById(id);
await addLink('_content/BootstrapBlazor.MeiliSearch/meilisearch.css');
el.classList.remove('visually-hidden');

const mask = el.querySelector('.search-dialog-mask');
mask.classList.remove("d-none");

await addScript('_content/BootstrapBlazor.MeiliSearch/meilisearch.umd.min.js');
Comment on lines 12 to 18
Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot Oct 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (bug_risk): Directly removing 'visually-hidden' class may cause layout shifts if initialization is delayed.

Ensure the element is revealed only after all required resources are loaded to prevent layout shifts or flashes of unstyled content.

Suggested change
await addLink('_content/BootstrapBlazor.MeiliSearch/meilisearch.css');
el.classList.remove('visually-hidden');
const mask = el.querySelector('.search-dialog-mask');
mask.classList.remove("d-none");
await addScript('_content/BootstrapBlazor.MeiliSearch/meilisearch.umd.min.js');
await addLink('_content/BootstrapBlazor.MeiliSearch/meilisearch.css');
const mask = el.querySelector('.search-dialog-mask');
mask.classList.remove("d-none");
await addScript('_content/BootstrapBlazor.MeiliSearch/meilisearch.umd.min.js');
el.classList.remove('visually-hidden');


const search = {
Expand All @@ -23,7 +28,7 @@ export async function init(id, options) {
blockTemplate: el.querySelector('.search-dialog-block-template'),
emptyTemplate: el.querySelector('.search-dialog-empty-template'),
dialog: el.querySelector('.search-dialog'),
mask: el.querySelector('.search-dialog-mask')
mask: mask
};
Data.set(id, search);

Expand Down
58 changes: 46 additions & 12 deletions src/components/BootstrapBlazor.MeiliSearch/wwwroot/meilisearch.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,40 @@
.search-dialog-mask {
.bb-g-search {
--bb-global-search-padding: 0.25rem 0.75rem;
--bb-global-search-width: 168px;
display: flex;
align-items: center;
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
padding: var(--bb-global-search-padding);
width: var(--bb-global-search-width);
transition: border-color .3s linear;
color: rgba(var(--bs-body-color-rgb), 0.5);
}

.bb-g-search:hover {
border: var(--bs-border-width) solid var(--bb-border-hover-color);
}

.bb-g-search > input {
width: 100%;
background-color: transparent;
border: none;
line-height: 1.5;
padding: 0;
cursor: pointer;
}
Comment on lines +18 to +25
Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot Oct 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Consider using 'cursor: text' for input fields instead of 'pointer'.

Using 'cursor: pointer' on text inputs can confuse users and affect accessibility. If the input is not editable and opens a dialog, make the interaction clear.

Suggested change
.bb-g-search > input {
width: 100%;
background-color: transparent;
border: none;
line-height: 1.5;
padding: 0;
cursor: pointer;
}
.bb-g-search > input {
width: 100%;
background-color: transparent;
border: none;
line-height: 1.5;
padding: 0;
cursor: text;
}


.bb-g-search > input::placeholder {
color: rgba(var(--bs-body-color-rgb), 0.5);
}

.search-dialog-icon {
cursor: pointer;
font-size: 18px;
margin-inline-end: .5rem;
}

.search-dialog-mask {
--bb-global-search-item-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.2);
--bb-global-search-item-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
--bb-global-search-dialog-input-focus-border-color: rgba(var(--bs-emphasis-color-rgb), 0.4);
Expand All @@ -8,6 +44,15 @@
--bb-global-search-main-max-height: calc(100vh - 260px);
--bb-global-search-footer-kbd-bg: var(--bs-body-color);
--bb-global-search-footer-kbd-color: var(--bs-body-bg);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: var(--bb-global-search-dialog-mask-z-index);
background-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
justify-content: center;
display: none;
Copy link

Copilot AI Oct 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using display: none directly in CSS conflicts with the JavaScript logic that removes the d-none class. Consider using display: none !important or rely solely on the Bootstrap d-none class for consistency.

Suggested change
display: none;

Copilot uses AI. Check for mistakes.
}

.search-dialog-mask .search-dialog-item ol {
Expand All @@ -26,17 +71,6 @@
color: var(--bb-global-search-footer-kbd-color);
}

.search-dialog-mask {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: var(--bb-global-search-dialog-mask-z-index);
background-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
justify-content: center;
}

[data-bs-theme='dark'] .search-dialog-mask {
--bb-global-search-footer-kbd-color: var(--bs-body-color);
}
Expand Down