Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

new search hints, addons icon changed

Browse source
This commit is contained in:
kKaskak 2023-09-28 12:45:41 +03:00
parent f43706f967
commit 2a422fa8e0
7 changed files with 104 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -3,3 +3,4 @@
/yarn.lock /yarn.lock
/npm-debug.log /npm-debug.log
.DS_Store .DS_Store
.prettierignore

2
package-lock.json generated
View file

@ -65,7 +65,7 @@
"terser-webpack-plugin": "5.2.4", "terser-webpack-plugin": "5.2.4",
"webpack": "5.61.0", "webpack": "5.61.0",
"webpack-cli": "4.9.1", "webpack-cli": "4.9.1",
"webpack-dev-server": "4.7.4", "webpack-dev-server": "^4.7.4",
"workbox-webpack-plugin": "^6.5.3" "workbox-webpack-plugin": "^6.5.3"
} }
}, },

2
package.json
View file

@ -68,7 +68,7 @@
"terser-webpack-plugin": "5.2.4", "terser-webpack-plugin": "5.2.4",
"webpack": "5.61.0", "webpack": "5.61.0",
"webpack-cli": "4.9.1", "webpack-cli": "4.9.1",
"webpack-dev-server": "4.7.4", "webpack-dev-server": "^4.7.4",
"workbox-webpack-plugin": "^6.5.3" "workbox-webpack-plugin": "^6.5.3"
} }
} }

4
src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
View file

@ -19,7 +19,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen(); const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
const renderNavMenuLabel = React.useCallback(({ ref, className, onClick, children, }) => ( const renderNavMenuLabel = React.useCallback(({ ref, className, onClick, children, }) => (
<Button ref={ref} className={classnames(className, styles['button-container'], styles['menu-button-container'])} tabIndex={-1} onClick={onClick}> <Button ref={ref} className={classnames(className, styles['button-container'], styles['menu-button-container'])} tabIndex={-1} onClick={onClick}>
<Icon className={styles['icon']} name={'more-vertical'} /> <Icon className={styles['icon']} name={'person-outline'} />
{children} {children}
</Button> </Button>
), []); ), []);
@ -55,7 +55,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
{ {
addonsButton ? addonsButton ?
<Button className={styles['button-container']} href={'#/addons'} title={t('ADDONS')} tabIndex={-1}> <Button className={styles['button-container']} href={'#/addons'} title={t('ADDONS')} tabIndex={-1}>
<Icon className={styles['icon']} name={'addons'} /> <Icon className={styles['icon']} name={'addons-outline'} />
</Button> </Button>
: :
null null

2
src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
View file

@ -71,7 +71,7 @@ const NavMenuContent = ({ onClick }) => {
<div className={styles['nav-menu-option-label']}>{ t('SETTINGS') }</div> <div className={styles['nav-menu-option-label']}>{ t('SETTINGS') }</div>
</Button> </Button>
<Button className={styles['nav-menu-option-container']} title={ t('ADDONS') } href={'#/addons'}> <Button className={styles['nav-menu-option-container']} title={ t('ADDONS') } href={'#/addons'}>
<Icon className={styles['icon']} name={'addons'} /> <Icon className={styles['icon']} name={'addons-outline'} />
<div className={styles['nav-menu-option-label']}>{ t('ADDONS') }</div> <div className={styles['nav-menu-option-label']}>{ t('ADDONS') }</div>
</Button> </Button>
<Button className={styles['nav-menu-option-container']} title={ t('PLAY_URL_MAGNET_LINK') } onClick={onPlayMagnetLinkClick}> <Button className={styles['nav-menu-option-container']} title={ t('PLAY_URL_MAGNET_LINK') } onClick={onPlayMagnetLinkClick}>

19
src/routes/Search/Search.js
View file

@ -49,14 +49,27 @@ const Search = ({ queryParams }) => {
<div ref={scrollContainerRef} className={styles['search-content']} onScroll={onScroll}> <div ref={scrollContainerRef} className={styles['search-content']} onScroll={onScroll}>
{ {
query === null ? query === null ?
<div className={classnames(styles['search-hints-wrapper'])}>
<div className={classnames(styles['search-hints-title-container'], 'animation-fade-in')}>
<div className={styles['search-hints-title']}>{t('SEARCH_HINTS_TITLE')}</div>
</div>
<div className={classnames(styles['search-hints-container'], 'animation-fade-in')}> <div className={classnames(styles['search-hints-container'], 'animation-fade-in')}>
<div className={styles['search-hint-container']}> <div className={styles['search-hint-container']}>
<Icon className={styles['icon']} name={'movies'} /> <Icon className={styles['icon']} name={'trailer'} />
<div className={styles['label']}>{ t('SEARCH_EXPLANATION_CONTENT') }</div> <div className={styles['label']}>{t('SEARCH_HINTS_CONTENT')}</div>
</div> </div>
<div className={styles['search-hint-container']}> <div className={styles['search-hint-container']}>
<Icon className={styles['icon']} name={'actors'} /> <Icon className={styles['icon']} name={'actors'} />
<div className={styles['label']}>{ t('SEARCH_EXPLANATION_PEOPLE') }</div> <div className={styles['label']}>{t('SEARCH_HINTS_ACTORS')}</div>
</div>
<div className={styles['search-hint-container']}>
<Icon className={styles['icon']} name={'link'} />
<div className={styles['label']}>{t('SEARCH_HINTS_LINKS')}</div>
</div>
<div className={styles['search-hint-container']}>
<Icon className={styles['icon']} name={'imdb-outline'} />
<div className={styles['label']}>{t('SEARCH_HINTS_IMDB')}</div>
</div>
</div> </div>
</div> </div>
: :

60
src/routes/Search/styles.less
View file

@ -24,31 +24,57 @@
.search-row { .search-row {
margin: 4rem 2rem; margin: 4rem 2rem;
} }
.search-hints-wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100%;
.search-hints-title-container {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
.search-hints-title {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
font-size: 1.6rem;
color: @color-surface-light5-90;
text-align: center;
opacity: 0.4;
}
}
.search-hints-container { .search-hints-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: center;
align-content: flex-start; align-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
padding: 4rem; padding: 4rem;
max-width: 50%;
margin: 0 auto;
.search-hint-container { .search-hint-container {
flex: 0 0 50%; flex: 0 0 25%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 2rem; padding: 0 1rem;
margin-bottom: 4rem; margin-bottom: 4rem;
.icon { .icon {
flex: none; flex: none;
width: 6rem; width: 4rem;
height: 6rem; height: 4rem;
margin-bottom: 2rem; margin-bottom: 2rem;
color: @color-surface-light5-90; color: @color-surface-light5-90;
opacity: 0.4;
} }
.label { .label {
@ -58,6 +84,8 @@
font-size: 1.2rem; font-size: 1.2rem;
color: @color-surface-light5-90; color: @color-surface-light5-90;
text-align: center; text-align: center;
opacity: 0.4;
}
} }
} }
} }
@ -135,6 +163,11 @@
@media only screen and (max-width: @medium) { @media only screen and (max-width: @medium) {
.search-container { .search-container {
.search-content { .search-content {
.search-hints-wrapper {
.search-hints-container {
max-width: 70%;
}
}
.search-row-poster, .search-row-square { .search-row-poster, .search-row-square {
.meta-item, .meta-item-placeholder { .meta-item, .meta-item-placeholder {
&:nth-child(n+8) { &:nth-child(n+8) {
@ -157,6 +190,11 @@
@media only screen and (max-width: @small) { @media only screen and (max-width: @small) {
.search-container { .search-container {
.search-content { .search-content {
.search-hints-wrapper {
.search-hints-container {
max-width: 90%;
}
}
.search-row-poster, .search-row-square { .search-row-poster, .search-row-square {
.meta-item, .meta-item-placeholder { .meta-item, .meta-item-placeholder {
&:nth-child(n+7) { &:nth-child(n+7) {
@ -201,6 +239,15 @@
@media only screen and (max-width: @xxsmall) { @media only screen and (max-width: @xxsmall) {
.search-container { .search-container {
.search-content { .search-content {
.search-hints-wrapper {
margin-top: 4rem;
.search-hints-container {
max-width: 100%;
.search-hint-container {
flex: 0 0 50%;
}
}
}
.search-row-poster, .search-row-square { .search-row-poster, .search-row-square {
.meta-item, .meta-item-placeholder { .meta-item, .meta-item-placeholder {
&:nth-child(n+5) { &:nth-child(n+5) {
@ -235,13 +282,14 @@
} }
} }
.search-hints-wrapper {
.search-hints-container { .search-hints-container {
padding: 4rem 2rem; padding: 4rem 2rem;
.search-hint-container { .search-hint-container {
padding: 0 1.5rem; padding: 0 1.5rem;
} }
} }
} }
} }
}
} }