From edc9614cfdbdcd2cdfb3b3880d60f4dad3b9d96b Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 17 Dec 2023 00:14:38 +0700 Subject: [PATCH] search bar updates --- .../src/components/common/Badge/Badge.scss | 6 ++ .../src/components/common/Badge/Badge.tsx | 4 +- .../common/SearchBar/SearchBar.scss | 70 ++++++++++++ .../components/common/SearchBar/SearchBar.tsx | 20 +++- .../common/SearchBar/SearchField.tsx | 17 ++- .../SearchBar/SearchResultsDropdown.tsx | 102 ++++++++---------- packages/fakeyou.com/src/scss/nav.scss | 29 ----- 7 files changed, 154 insertions(+), 94 deletions(-) create mode 100644 packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss diff --git a/packages/fakeyou.com/src/components/common/Badge/Badge.scss b/packages/fakeyou.com/src/components/common/Badge/Badge.scss index 81c7b48b3d..dac8b23f8a 100644 --- a/packages/fakeyou.com/src/components/common/Badge/Badge.scss +++ b/packages/fakeyou.com/src/components/common/Badge/Badge.scss @@ -18,6 +18,12 @@ &.shadow { box-shadow: 0 0 12px rgba($bg, 0.4); } + + &.badge-small { + font-size: 11px; + padding: 1px 6px; + border-radius: 0.3rem; + } } @each $color, $value in $badge-colors { diff --git a/packages/fakeyou.com/src/components/common/Badge/Badge.tsx b/packages/fakeyou.com/src/components/common/Badge/Badge.tsx index 7458e7a3b5..a9fdf1d1fe 100644 --- a/packages/fakeyou.com/src/components/common/Badge/Badge.tsx +++ b/packages/fakeyou.com/src/components/common/Badge/Badge.tsx @@ -6,6 +6,7 @@ interface BadgeProps { color: string; overlay?: boolean; className?: string; + small?: boolean; } export default function Badge({ @@ -13,10 +14,11 @@ export default function Badge({ color, overlay = false, className = "", + small = false, }: BadgeProps) { const badgeClass = `fy-badge badge-${color} ${ overlay ? "shadow" : "" - } mb-0 ${className}`.trim(); + } mb-0 ${className} ${small ? "badge-small" : ""}`.trim(); return {label}; } diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss new file mode 100644 index 0000000000..61e2abb7ba --- /dev/null +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss @@ -0,0 +1,70 @@ +@import "scss/colours.scss"; + +.search-bar-container { + display: flex; + justify-content: center; +} + +.search-bar-group { + position: relative; + width: 580px; +} + +.search-field { + .form-control { + padding-top: 7.25px !important; + padding-bottom: 7.25px !important; + border-radius: 0.5rem 0 0 0.5rem !important; + position: relative; + z-index: 3; + + &::placeholder { + color: rgba($white, 0.3) !important; + } + } +} + +.search-results-dropdown { + position: absolute; + border-color: lighten($panel-inner, 6%) !important; + border: 1px solid; + top: 46px; + width: 100%; + z-index: 4; + border-radius: 0.5rem; + overflow: hidden; + + .search-results-dropdown-item { + background-color: $panel-inner; + border-bottom: 1px solid lighten($panel-inner, 6%); + transition: 0.05s; + + &:hover { + background-color: lighten($panel-inner, 6%); + cursor: pointer; + } + + &:last-child { + border-bottom: none; + } + } + + .view-more { + display: flex; + justify-content: center; + color: $primary; + font-size: 16px; + font-weight: 500; + } +} + +.search-bar-button { + border-radius: 0 0.5rem 0.5rem 0 !important; + border-color: lighten($secondary, 5%) !important; + background-color: lighten($secondary, 5%) !important; + + &:hover { + border-color: lighten($secondary, 10%) !important; + background-color: lighten($secondary, 10%) !important; + } +} diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx index a2ed9fd857..6c12b67ef0 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx @@ -1,5 +1,4 @@ import React, { useCallback, useEffect, useState } from "react"; -import Input from "../Input"; import Button from "../Button"; import { faSearch } from "@fortawesome/pro-solid-svg-icons"; import { @@ -8,12 +7,14 @@ import { } from "@storyteller/components/src/api/tts/SearchTtsModels"; import SearchResultsDropdown from "./SearchResultsDropdown"; import SearchField from "./SearchField"; +import "./SearchBar.scss"; interface SearchBarProps {} export default function SearchBar(props: SearchBarProps) { const [searchTerm, setSearchTerm] = useState(""); const [foundTtsModels, setFoundTtsModels] = useState([]); + const [isFocused, setIsFocused] = useState(false); const maybeSearch = useCallback(async (value: string) => { setSearchTerm(value); @@ -41,11 +42,22 @@ export default function SearchBar(props: SearchBarProps) { doSearch(searchTerm); }, [doSearch, searchTerm]); + const onBlurHandler = () => { + setTimeout(() => { + setIsFocused(false); + }, 100); + }; + return (
-
- - +
+ setIsFocused(true)} + onBlur={onBlurHandler} + /> + {isFocused && }
+ ); + })} +
+ View more results
- ); - })} -
+ + )} + ); } diff --git a/packages/fakeyou.com/src/scss/nav.scss b/packages/fakeyou.com/src/scss/nav.scss index e1991f61e1..9fe42f64d9 100644 --- a/packages/fakeyou.com/src/scss/nav.scss +++ b/packages/fakeyou.com/src/scss/nav.scss @@ -176,35 +176,6 @@ $topbar-height: 66px; align-items: center; } -.search-bar-container { - display: flex; - justify-content: center; -} - -.search-bar { - width: 580px; - .form-control { - padding-top: 7.25px !important; - padding-bottom: 7.25px !important; - border-radius: 0.5rem 0 0 0.5rem !important; - - &::placeholder { - color: rgba($white, 0.3) !important; - } - } -} - -.search-bar-button { - border-radius: 0 0.5rem 0.5rem 0 !important; - border-color: lighten($secondary, 5%) !important; - background-color: lighten($secondary, 5%) !important; - - &:hover { - border-color: lighten($secondary, 10%) !important; - background-color: lighten($secondary, 10%) !important; - } -} - @media (min-width: 992px) { #wrapper { padding-left: 260px;