mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 17:15:48 +00:00
new search hints, addons icon changed
This commit is contained in:
kKaskak
parent
f43706f967
commit
2a422fa8e0
7 changed files with 104 additions and 42 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -3,3 +3,4 @@
|
|||
/yarn.lock
|
||||
/npm-debug.log
|
||||
.DS_Store
|
||||
.prettierignore
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
|
|
@ -65,7 +65,7 @@
|
|||
"terser-webpack-plugin": "5.2.4",
|
||||
"webpack": "5.61.0",
|
||||
"webpack-cli": "4.9.1",
|
||||
"webpack-dev-server": "4.7.4",
|
||||
"webpack-dev-server": "^4.7.4",
|
||||
"workbox-webpack-plugin": "^6.5.3"
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
"terser-webpack-plugin": "5.2.4",
|
||||
"webpack": "5.61.0",
|
||||
"webpack-cli": "4.9.1",
|
||||
"webpack-dev-server": "4.7.4",
|
||||
"webpack-dev-server": "^4.7.4",
|
||||
"workbox-webpack-plugin": "^6.5.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
|
|||
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
|
||||
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}>
|
||||
<Icon className={styles['icon']} name={'more-vertical'} />
|
||||
<Icon className={styles['icon']} name={'person-outline'} />
|
||||
{children}
|
||||
</Button>
|
||||
), []);
|
||||
|
|
@ -55,7 +55,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
|
|||
{
|
||||
addonsButton ?
|
||||
<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>
|
||||
:
|
||||
null
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ const NavMenuContent = ({ onClick }) => {
|
|||
<div className={styles['nav-menu-option-label']}>{ t('SETTINGS') }</div>
|
||||
</Button>
|
||||
<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>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={ t('PLAY_URL_MAGNET_LINK') } onClick={onPlayMagnetLinkClick}>
|
||||
|
|
|
|||
|
|
@ -49,14 +49,27 @@ const Search = ({ queryParams }) => {
|
|||
<div ref={scrollContainerRef} className={styles['search-content']} onScroll={onScroll}>
|
||||
{
|
||||
query === null ?
|
||||
<div className={classnames(styles['search-hints-container'], 'animation-fade-in')}>
|
||||
<div className={styles['search-hint-container']}>
|
||||
<Icon className={styles['icon']} name={'movies'} />
|
||||
<div className={styles['label']}>{ t('SEARCH_EXPLANATION_CONTENT') }</div>
|
||||
<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={styles['search-hint-container']}>
|
||||
<Icon className={styles['icon']} name={'actors'} />
|
||||
<div className={styles['label']}>{ t('SEARCH_EXPLANATION_PEOPLE') }</div>
|
||||
<div className={classnames(styles['search-hints-container'], 'animation-fade-in')}>
|
||||
<div className={styles['search-hint-container']}>
|
||||
<Icon className={styles['icon']} name={'trailer'} />
|
||||
<div className={styles['label']}>{t('SEARCH_HINTS_CONTENT')}</div>
|
||||
</div>
|
||||
<div className={styles['search-hint-container']}>
|
||||
<Icon className={styles['icon']} name={'actors'} />
|
||||
<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>
|
||||
:
|
||||
|
|
|
|||
|
|
@ -24,40 +24,68 @@
|
|||
.search-row {
|
||||
margin: 4rem 2rem;
|
||||
}
|
||||
|
||||
.search-hints-container {
|
||||
.search-hints-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
padding: 4rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.search-hint-container {
|
||||
flex: 0 0 50%;
|
||||
.search-hints-title-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 2rem;
|
||||
margin-bottom: 4rem;
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
margin-bottom: 2rem;
|
||||
color: @color-surface-light5-90;
|
||||
}
|
||||
|
||||
.label {
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
.search-hints-title {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.6rem;
|
||||
color: @color-surface-light5-90;
|
||||
text-align: center;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.search-hints-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
padding: 4rem;
|
||||
max-width: 50%;
|
||||
margin: 0 auto;
|
||||
|
||||
.search-hint-container {
|
||||
flex: 0 0 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 1rem;
|
||||
margin-bottom: 4rem;
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
color: @color-surface-light5-90;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
font-size: 1.2rem;
|
||||
color: @color-surface-light5-90;
|
||||
text-align: center;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -135,6 +163,11 @@
|
|||
@media only screen and (max-width: @medium) {
|
||||
.search-container {
|
||||
.search-content {
|
||||
.search-hints-wrapper {
|
||||
.search-hints-container {
|
||||
max-width: 70%;
|
||||
}
|
||||
}
|
||||
.search-row-poster, .search-row-square {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+8) {
|
||||
|
|
@ -157,6 +190,11 @@
|
|||
@media only screen and (max-width: @small) {
|
||||
.search-container {
|
||||
.search-content {
|
||||
.search-hints-wrapper {
|
||||
.search-hints-container {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
.search-row-poster, .search-row-square {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+7) {
|
||||
|
|
@ -201,6 +239,15 @@
|
|||
@media only screen and (max-width: @xxsmall) {
|
||||
.search-container {
|
||||
.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 {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+5) {
|
||||
|
|
@ -235,11 +282,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.search-hints-container {
|
||||
padding: 4rem 2rem;
|
||||
|
||||
.search-hint-container {
|
||||
padding: 0 1.5rem;
|
||||
.search-hints-wrapper {
|
||||
.search-hints-container {
|
||||
padding: 4rem 2rem;
|
||||
.search-hint-container {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue