Modify visibility for search users

This commit is contained in:
Bojan Mojsilovic 2024-02-01 17:00:30 +01:00
parent 6fa7d42262
commit acd529b2f7
2 changed files with 29 additions and 23 deletions

View File

@ -83,6 +83,12 @@
.searchSuggestions { .searchSuggestions {
margin-top: 8px; margin-top: 8px;
width: 316px; width: 316px;
visibility: visible;
&.hidden {
visibility: hidden;
height: 0;
}
} }
.loadingOverlay { .loadingOverlay {

View File

@ -136,7 +136,7 @@ const Search: Component<{
/> />
</form> </form>
<Show when={isFocused()}> <div class={`${styles.searchSuggestions} ${!isFocused() ? styles.hidden : ''}`}>
<Show <Show
when={!props.hideDefault} when={!props.hideDefault}
> >
@ -159,31 +159,31 @@ const Search: Component<{
/> />
</Show> </Show>
</Show> </Show>
</div>
<div class={styles.searchSuggestions}> <div class={`${styles.searchSuggestions} ${!isFocused() ? styles.hidden : ''}`}>
<Show when={search?.isFetchingUsers && query().length > 0}> <Show when={search?.isFetchingUsers && query().length > 0}>
<div class={styles.loadingOverlay}> <div class={styles.loadingOverlay}>
<div> <div>
<Loader /> <Loader />
</div>
</div> </div>
</Show> </div>
</Show>
<For each={search?.users}> <For each={search?.users}>
{(user) => ( {(user) => (
<SearchOption <SearchOption
href={props.noLinks ? undefined : `/p/${user.npub}`} href={props.noLinks ? undefined : `/p/${user.npub}`}
title={userName(user)} title={userName(user)}
description={nip05Verification(user)} description={nip05Verification(user)}
icon={<Avatar user={user} size="vvs" />} icon={<Avatar user={user} size="vvs" />}
statNumber={profile?.profileHistory.stats[user.pubkey]?.followers_count || search?.scores[user.pubkey]} statNumber={profile?.profileHistory.stats[user.pubkey]?.followers_count || search?.scores[user.pubkey]}
statLabel={intl.formatMessage(t.followers)} statLabel={intl.formatMessage(t.followers)}
onClick={() => selectUser(user)} onClick={() => selectUser(user)}
/> />
)} )}
</For> </For>
</div> </div>
</Show>
</div> </div>
) )
} }