This repository has no description
fiux automcplete
author
damedotblog
date
(Apr 22, 2025, 3:54 PM -0400)
commit
8dbcba66
8dbcba66b0adc5b9be18a81683d4fbedf559c9e2
parent
563cc261
563cc261d3cad62e2baa02f63d30815b07efc95c
+8
-66
+1
-57
src/components/Verifier/Verifier.css
+1
-57
src/components/Verifier/Verifier.css
···
108
108
flex-wrap: wrap; /* Allow wrapping */
109
109
padding: 0px;
110
110
border: 0px;
111
+
position: relative; /* Added for suggestion list positioning */
111
112
}
112
113
113
114
.verifier-input-field {
···
129
130
border-color: var(--button-bg);
130
131
background-color: var(--background); /* Match main app focus */
131
132
outline: none;
132
-
}
133
-
134
-
/* Autocomplete Styles */
135
-
.verifier-suggestions-list {
136
-
position: absolute;
137
-
top: 100%; /* Position below input */
138
-
left: 0;
139
-
right: 0;
140
-
background-color: var(--navbar-bg);
141
-
border: 1px solid var(--card-border);
142
-
border-top: none; /* Avoid double border */
143
-
border-radius: 0 0 6px 6px;
144
-
list-style: none;
145
-
padding: 0;
146
-
margin: 0;
147
-
max-height: 200px;
148
-
overflow-y: auto;
149
-
z-index: 10;
150
-
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
151
-
}
152
-
153
-
.verifier-suggestion-item {
154
-
display: flex;
155
-
align-items: center;
156
-
padding: 10px;
157
-
cursor: pointer;
158
-
border-bottom: 1px solid var(--card-border);
159
-
}
160
-
.verifier-suggestion-item:last-child {
161
-
border-bottom: none;
162
-
}
163
-
164
-
.verifier-suggestion-item:hover {
165
-
background-color: var(--background); /* Use main background for hover */
166
-
}
167
-
168
-
.verifier-suggestion-avatar {
169
-
width: 30px;
170
-
height: 30px;
171
-
border-radius: 50%;
172
-
margin-right: 10px;
173
-
object-fit: cover;
174
-
}
175
-
176
-
.verifier-suggestion-text {
177
-
display: flex;
178
-
flex-direction: column;
179
-
}
180
-
181
-
.verifier-suggestion-display-name {
182
-
font-weight: bold;
183
-
color: var(--text);
184
-
}
185
-
186
-
.verifier-suggestion-handle {
187
-
font-size: 0.9em;
188
-
color: var(--text-muted, var(--text));
189
133
}
190
134
191
135
/* Status Box */
+7
-9
src/components/Verifier/Verifier.js
+7
-9
src/components/Verifier/Verifier.js
···
705
705
</button>
706
706
</form>
707
707
{showSuggestions && (suggestions.length > 0 || isFetchingSuggestions) && (
708
-
<ul className="verifier-suggestions-list" ref={suggestionsRef}>
708
+
<ul className="autocomplete-items" ref={suggestionsRef}>
709
709
{isFetchingSuggestions && suggestions.length === 0 ? (
710
-
<li className="verifier-suggestion-item">Loading...</li>
710
+
<li className="autocomplete-item">Loading...</li>
711
711
) : (
712
712
suggestions.map((actor) => (
713
-
<li key={actor.did} className="verifier-suggestion-item" onMouseDown={(e) => { e.preventDefault(); handleSuggestionClick(actor.handle); }}>
714
-
<img src={actor.avatar} alt="" className="verifier-suggestion-avatar" />
715
-
<div className="verifier-suggestion-text">
716
-
<span className="verifier-suggestion-display-name">{actor.displayName || actor.handle}</span>
717
-
<span className="verifier-suggestion-handle">@{actor.handle}</span>
718
-
</div>
713
+
<li key={actor.did} className="autocomplete-item" onMouseDown={(e) => { e.preventDefault(); handleSuggestionClick(actor.handle); }}>
714
+
<img src={actor.avatar} alt="" />
715
+
<span className="verifier-suggestion-display-name">{actor.displayName || actor.handle}</span>
716
+
<span className="verifier-suggestion-handle">@{actor.handle}</span>
719
717
</li>
720
718
))
721
719
)}
722
720
{suggestions.length === 0 && !isFetchingSuggestions && targetHandle.length >= 2 && (
723
-
<li className="verifier-suggestion-item">No users found matching "{targetHandle}"</li>
721
+
<li className="autocomplete-item">No users found matching "{targetHandle}"</li>
724
722
)}
725
723
</ul>
726
724
)}