Skip to content

feat: search result modal #43

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
micahkepe merged 5 commits into from
Dec 12, 2025
Merged

feat: search result modal #43

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
610252b
feat(search-results): add initial search modal
micahkepe Dec 12, 2025
97f85f7
fix(search-modal): remove default background color from autofill field
micahkepe Dec 12, 2025
48dd5ec
fix(search-result-modal): fix background body and hide scrollbar on
micahkepe Dec 12, 2025
ac74aa1
feat(search-result-modal): refine scrollbar styling for search results
micahkepe Dec 12, 2025
d9cf2d2
feat(search-result-modal): add formatted result count string,
micahkepe Dec 12, 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
345 changes: 332 additions & 13 deletions sass/parts/_search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,29 +62,348 @@
border: 1.5px solid var(--search-border-color, #ddd);
}

/* Prevent body scroll when modal is open */
body.modal-open {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
overflow: hidden;

/* Hide scrollbar in Firefox */
scrollbar-width: none !important;

/* Hide scrollbar in Chrome/Safari */
&::-webkit-scrollbar {
display: none !important;
}
}

/* Backdrop overlay for search modal */
.search-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9998;
backdrop-filter: blur(4px);
animation: fadeIn 0.2s ease;
}

.search-backdrop.active {
display: block;
}

@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

@keyframes slideUp {
from {
opacity: 0;
transform: translate(-50%, -45%);
}

to {
opacity: 1;
transform: translate(-50%, -50%);
}
}

/* Search results modal */
.search-results {
display: none;
/* Initial state hidden */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 2rem);
max-width: 650px;
height: 80vh;
max-height: 500px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
background-color: #2a2a2a;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
z-index: 9999;
overflow: hidden;
flex-direction: column;
}

.search-results.active {
display: flex;
animation: slideUp 0.3s ease;
}

@media (max-width: 768px) {
.search-results {
width: calc(100% - 1rem);
height: 90vh;
max-height: none;
border-radius: 8px;
}
}

@media (min-width: 769px) and (max-height: 600px) {
.search-results {
height: 90vh;
max-height: none;
}
}

.light .search-results {
background-color: #ffffff;
border-color: rgba(0, 0, 0, 0.1);
}

/* Modal header with search input */
.search-modal-header {
position: relative;
padding: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0;
}

.light .search-modal-header {
border-bottom-color: rgba(0, 0, 0, 0.1);
}

.search-modal-icon {
position: absolute;
top: 100%;
left: 0;
left: 1.5rem;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
stroke: var(--text-color, #888);
pointer-events: none;
}

#search-modal {
width: 100%;
max-height: 300px;
padding: 0.75rem 1rem 0.75rem 2.5rem;
font-size: 1rem;
border: none;
background-color: transparent;
color: var(--text-color, #fff);
outline: none;
font-family: inherit;
}

/* Prevent browser autofill/autocomplete from adding white background */
#search-modal:-webkit-autofill,
#search-modal:-webkit-autofill:hover,
#search-modal:-webkit-autofill:focus,
#search-modal:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px #2a2a2a inset !important;
-webkit-text-fill-color: var(--text-color, #fff) !important;
transition: background-color 5000s ease-in-out 0s;
}

.light #search-modal {
color: #000;
}

.light #search-modal:-webkit-autofill,
.light #search-modal:-webkit-autofill:hover,
.light #search-modal:-webkit-autofill:focus,
.light #search-modal:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
-webkit-text-fill-color: #000 !important;
}

#search-modal::placeholder {
color: rgba(255, 255, 255, 0.4);
}

.light #search-modal::placeholder {
color: rgba(0, 0, 0, 0.4);
}

/* Results count display */
.search-results-count {
padding: 0.75rem 1.5rem 0.5rem;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: none;

&.visible {
display: block;
}

strong {
color: rgba(255, 255, 255, 0.8);
font-weight: 600;
}
}

.light .search-results-count {
color: rgba(0, 0, 0, 0.5);
border-bottom-color: rgba(0, 0, 0, 0.1);

strong {
color: rgba(0, 0, 0, 0.8);
}
}

/* Results container */
.search-results__items {
list-style: none;
padding: 0;
margin: 0;
flex-grow: 1;
overflow-y: auto;
border: 1px solid var(--search-border-color, #ddd);
border-radius: 4px;
background-color: var(--bg-primary, #fff);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
padding: 1rem;
min-height: 0;

/* Custom scrollbar styling */
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;

/* Webkit scrollbar styling */
&::-webkit-scrollbar {
width: 6px;
}

&::-webkit-scrollbar-track {
background: transparent;
}

&::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 3px;

&:hover {
background-color: rgba(255, 255, 255, 0.4);
}
}
}

.light .search-results {
background-color: var(--bg-light, #f9f9f9);
.light .search-results__items {
scrollbar-color: rgba(0, 0, 0, 0.3) transparent;

&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.3);

&:hover {
background-color: rgba(0, 0, 0, 0.4);
}
}
}

.search-results__item {
padding: 1rem;
margin-bottom: 0.5rem;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.15s ease;
scroll-margin: 1rem;
}

.search-results__item:hover,
.search-results__item.selected {
background-color: rgba(255, 255, 255, 0.05);
}

.light .search-results__item:hover,
.light .search-results__item.selected {
background-color: rgba(0, 0, 0, 0.03);
}

.search-results__item:last-child {
margin-bottom: 0;
}

.search-results__item a {
font-size: 1rem;
font-weight: 600;
display: block;
margin-bottom: 0.5rem;
text-decoration: none;
color: var(--text-color, #fff);
}

.light .search-results__item a {
color: #000;
}

.search-results__item section {
font-size: 0.875rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.6);
margin: 0;
}

.light .search-results__item section {
color: rgba(0, 0, 0, 0.6);
}

.search-results__item section b {
color: var(--accent);
font-weight: 600;
}

.search-results__no-results {
padding: 1rem !important;
padding: 2rem !important;
font-style: italic;
text-align: center;
color: rgba(255, 255, 255, 0.5);
}

.light .search-results__no-results {
color: rgba(0, 0, 0, 0.5);
}

/* Modal footer with keyboard hints */
.search-modal-footer {
padding: 0.875rem 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
gap: 0.5rem;
justify-content: center;
align-content: center;
align-items: center;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
flex-shrink: 0;
}

.light .search-modal-footer {
border-top-color: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.5);
}

.search-modal-footer span {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem;
}

.search-modal-footer kbd {
padding: 0.25rem 0.5rem;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
font-family: inherit;
font-size: 0.7rem;
line-height: 1;
display: inline-block;
min-width: 1.5rem;
text-align: center;
}

.light .search-modal-footer kbd {
background-color: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.12);
}
Loading