Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 15:52:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: simplify the menu-container

Browse source
This commit is contained in:
kKaskak 2024-01-03 16:12:22 +02:00
parent b7e77417b4
commit 6e73d56da2
2 changed files with 54 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
View file

@ -127,53 +127,45 @@ const SearchBar = React.memo(({ className, query, active }) => {
</Button> </Button>
} }
{ {
historyOpen ? historyOpen && searchHistory?.items?.length > 0 || localSearch?.items?.length > 0 ?
<div className={styles['menu-container']}> <div className={styles['menu-container']}>
{ {
localSearch.items.length === 0 && searchHistory.items.length === 0 ? searchHistory?.items?.length > 0 ?
<div className={styles['label']}>{ t('Start typing ...') }</div> <div className={styles['items']}>
<div className={styles['title']}>
<div className={styles['label']}>{ t('STREMIO_TV_SEARCH_HISTORY_TITLE') }</div>
<button className={styles['search-history-clear']} onClick={searchHistory.clear}>
{ t('CLEAR_HISTORY') }
</button>
</div>
{
searchHistory.items.slice(0, 8).map(({ query, deepLinks }, index) => (
<Button key={index} className={styles['item']} href={deepLinks.search} onClick={closeHistory}>
{query}
</Button>
))
}
</div>
: :
null null
} }
<div className={styles['content']}> {
{ localSearch?.items?.length ?
searchHistory?.items?.length > 0 ? <div className={styles['items']}>
<div className={styles['items']}> <div className={styles['title']}>
<div className={styles['title']}> <div className={styles['label']}>{ t('Recommendations') }</div>
<div className={styles['label']}>{ t('STREMIO_TV_SEARCH_HISTORY_TITLE') }</div>
<button className={styles['search-history-clear']} onClick={searchHistory.clear}>
{ t('CLEAR_HISTORY') }
</button>
</div>
{
searchHistory.items.slice(0, 8).map(({ query, deepLinks }, index) => (
<Button key={index} className={styles['item']} href={deepLinks.search} onClick={closeHistory}>
{query}
</Button>
))
}
</div> </div>
: {
null localSearch.items.map(({ query, deepLinks }, index) => (
} <Button key={index} className={styles['item']} href={deepLinks.search} onClick={closeHistory}>
{ {query}
localSearch?.items?.length ? </Button>
<div className={styles['items']}> ))
<div className={styles['title']}> }
<div className={styles['label']}>{ t('Recommendations') }</div> </div>
</div> :
{ null
localSearch.items.map(({ query, deepLinks }, index) => ( }
<Button key={index} className={styles['item']} href={deepLinks.search} onClick={closeHistory}>
{query}
</Button>
))
}
</div>
:
null
}
</div>
</div> </div>
: :
null null

46
src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
View file

@ -51,12 +51,18 @@
.menu-container { .menu-container {
position: absolute; position: absolute;
width: 100%;
height: auto;
top: 100%; top: 100%;
left: 0; left: 0;
width: 100%;
height: auto;
z-index: 10; z-index: 10;
padding: 1rem; padding: 1rem;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
gap: 1.5rem;
background-color: var(--modal-background-color); background-color: var(--modal-background-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -83,37 +89,27 @@
} }
} }
.content { .items {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
gap: 1.5rem;
.items { .item {
width: 90%;
color: var(--primary-foreground-color);
text-align: left;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: var(--border-radius);
width: 100%; width: 100%;
margin: 0 auto; cursor: pointer;
display: flex; z-index: 10;
justify-content: center;
align-items: flex-start; &:hover {
flex-direction: column; background-color: var(--secondary-background-color);
.item {
width: 90%;
color: var(--primary-foreground-color);
text-align: left;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: var(--border-radius);
width: 100%;
cursor: pointer;
z-index: 10;
&:hover {
background-color: var(--secondary-background-color);
}
} }
} }
} }