Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-01-11 22:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: style navbars

Browse source
This commit is contained in:
Tim 2023-06-11 20:56:48 +02:00
parent f3a8bd84b9
commit 4e5ff8b2c4
9 changed files with 118 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
images/stremio_symbol.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 16 KiB

7
src/App/styles.less
View file

@ -17,14 +17,17 @@
--landscape-shape-ratio: 0.5625; --landscape-shape-ratio: 0.5625;
--poster-shape-ratio: 1.464; --poster-shape-ratio: 1.464;
--scroll-bar-size: 6px; --scroll-bar-size: 6px;
--horizontal-nav-bar-size: 4rem; --horizontal-nav-bar-size: 5.5rem;
--vertical-nav-bar-size: 5.2rem; --vertical-nav-bar-size: 6rem;
--focus-outline-size: 2px; --focus-outline-size: 2px;
--color-facebook: #4267b2; --color-facebook: #4267b2;
--color-twitter: #1DA1F2; --color-twitter: #1DA1F2;
--color-placeholder: #60606080; --color-placeholder: #60606080;
--color-placeholder-text: @color-surface-50; --color-placeholder-text: @color-surface-50;
--color-placeholder-background: @color-surface-dark5-20; --color-placeholder-background: @color-surface-dark5-20;
--primary-foreground-color: rgba(255, 255, 255, 1);
--primary-overlay-color: rgba(255, 255, 255, 0.1);
--primary-accent-color: rgb(123, 91, 245);
} }
* { * {

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

@ -45,36 +45,36 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
: :
null null
} }
<div className={styles['spacing']} />
{ {
searchBar ? searchBar ?
<SearchBar className={styles['search-bar']} query={query} active={route === 'search'} /> <SearchBar className={styles['search-bar']} query={query} active={route === 'search'} />
: :
null null
} }
<div className={styles['spacing']} /> <div className={styles['buttons-container']}>
{ {
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'} />
</Button> </Button>
: :
null null
} }
{ {
fullscreenButton ? fullscreenButton ?
<Button className={styles['button-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}> <Button className={styles['button-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
<Icon className={styles['icon']} name={fullscreen ? 'minimize' : 'maximize'} /> <Icon className={styles['icon']} name={fullscreen ? 'minimize' : 'maximize'} />
</Button> </Button>
: :
null null
} }
{ {
navMenu ? navMenu ?
<NavMenu renderLabel={renderNavMenuLabel} /> <NavMenu renderLabel={renderNavMenuLabel} />
: :
null null
} }
</div>
</nav> </nav>
); );
}); });

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

@ -60,7 +60,7 @@ const SearchBar = ({ className, query, active }) => {
</div> </div>
} }
<Button className={styles['submit-button-container']} tabIndex={-1} onClick={queryInputOnSubmit}> <Button className={styles['submit-button-container']} tabIndex={-1} onClick={queryInputOnSubmit}>
<Icon className={styles['icon']} name={'ic_search_link'} /> <Icon className={styles['icon']} name={'search'} />
</Button> </Button>
</label> </label>
); );
@ -80,7 +80,7 @@ const SearchBarFallback = ({ className }) => {
<div className={styles['placeholder-label']}>{ t('SEARCH_OR_PASTE_LINK') }</div> <div className={styles['placeholder-label']}>{ t('SEARCH_OR_PASTE_LINK') }</div>
</div> </div>
<Button className={styles['submit-button-container']} tabIndex={-1}> <Button className={styles['submit-button-container']} tabIndex={-1}>
<Icon className={styles['icon']} name={'ic_search_link'} /> <Icon className={styles['icon']} name={'search'} />
</Button> </Button>
</label> </label>
); );

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

@ -3,16 +3,12 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
.search-bar-container { .search-bar-container {
--search-bar-size: calc(var(--horizontal-nav-bar-size) - 1.2rem); --search-bar-size: 3.25rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: var(--search-bar-size); height: var(--search-bar-size);
border-radius: var(--search-bar-size); border-radius: var(--search-bar-size);
background-color: @color-background-light2; background-color: var(--primary-overlay-color);
&:hover {
background-color: @color-background-light3;
}
.search-input { .search-input {
flex: 1; flex: 1;
@ -20,15 +16,16 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 0 0.5rem 0 1.5rem; padding: 0 0.5rem 0 2rem;
font-weight: 500; font-weight: 500;
color: @color-secondaryvariant1-light1; color: var(--primary-foreground-color);
cursor: text; cursor: text;
&::placeholder, .placeholder-label { &::placeholder, .placeholder-label {
max-height: 1.2em; max-height: 1.2em;
opacity: 1; opacity: 1;
color: @color-secondaryvariant1-light1-90; color: var(--primary-foreground-color);
opacity: 0.6;
} }
} }
@ -38,20 +35,15 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: var(--search-bar-size);
height: var(--search-bar-size); height: var(--search-bar-size);
padding: 0 1.5rem;
&:hover {
.icon {
color: @color-secondaryvariant2-light1-90;
}
}
.icon { .icon {
flex: none; flex: none;
width: 1.7rem; width: 1.7rem;
height: 1.7rem; height: 1.7rem;
color: @color-secondaryvariant1-90; color: var(--primary-foreground-color);
opacity: 0.6;
} }
} }
} }

78
src/common/NavBar/HorizontalNavBar/styles.less
View file

@ -7,9 +7,10 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between;
height: var(--horizontal-nav-bar-size); height: var(--horizontal-nav-bar-size);
padding-right: 1rem; padding-right: 1rem;
background-color: @color-background; background-color: transparent;
overflow: visible; overflow: visible;
.logo-container { .logo-container {
@ -30,8 +31,8 @@
} }
} }
.spacing { .back-button-container {
flex: 1 0 0; margin-left: 1rem;
} }
.title { .title {
@ -44,19 +45,18 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
color: @color-secondaryvariant2-light1-90; color: @color-secondaryvariant2-light1-90;
&+.spacing {
display: none;
}
} }
.search-bar { .search-bar {
flex: 2 0 9.5rem; height: 3.25rem;
max-width: 30rem; width: 30rem;
}
&+.spacing { .buttons-container {
max-width: 11rem; display: flex;
} flex-direction: row;
gap: 0.5rem;
overflow: visible;
} }
.button-container { .button-container {
@ -64,31 +64,27 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: var(--horizontal-nav-bar-size); width: 3.5rem;
height: var(--horizontal-nav-bar-size); height: 3.5rem;
border-radius: 0.75rem;
&.back-button-container { opacity: 0.4;
width: var(--vertical-nav-bar-size);
height: var(--horizontal-nav-bar-size);
}
&:hover {
background-color: @color-background-light2;
}
&:global(.active) {
background-color: @color-background-light3;
.icon {
color: @color-surface-light5-90;
}
}
.icon { .icon {
flex: none; flex: none;
width: 1.7rem; width: 2rem;
height: 1.7rem; height: 2rem;
color: @color-secondaryvariant2-light1-90; color: var(--primary-foreground-color);
opacity: 0.6;
}
&:hover, &:global(.active) {
background-color: var(--primary-overlay-color);
opacity: 1;
.icon {
color: var(--primary-foreground-color);
opacity: 0.8;
}
} }
} }
} }
@ -102,16 +98,12 @@
width: var(--horizontal-nav-bar-size); width: var(--horizontal-nav-bar-size);
} }
.search-bar { .button-container {
margin: 0 0.5rem; margin: 0 1rem;
}
.spacing { &:not(.back-button-container):not(.menu-button-container) {
display: none; display: none;
} }
.button-container:not(.back-button-container):not(.menu-button-container) {
display: none;
} }
} }
} }

2
src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js
View file

@ -27,7 +27,7 @@ const NavTabButton = ({ className, logo, icon, label, href, selected, onClick })
/> />
: :
typeof icon === 'string' && icon.length > 0 ? typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} name={icon} /> <Icon className={styles['icon']} name={selected ? icon : `${icon}-outline`} />
: :
null null
} }

52
src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
View file

@ -1,50 +1,66 @@
// Copyright (C) 2017-2022 Smart code 203358507 // Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.nav-tab-button-container { .nav-tab-button-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: @color-background-dark1; background-color: transparent;
border-radius: 0.75rem;
&:hover { &:hover {
background-color: @color-background-light2; background-color: var(--primary-overlay-color);
.label {
opacity: 0.6;
}
} }
&:global(.selected) { &:global(.selected) {
background-color: @color-secondaryvariant1-dark5;
&:hover {
background-color: @color-secondaryvariant1-dark4;
}
.icon { .icon {
color: @color-surface-light5-90; opacity: 1;
} color: var(--primary-accent-color);
.label {
color: @color-surface-light5-90;
} }
} }
.icon, .logo { .icon, .logo {
flex: none; flex: none;
width: 1.7rem; width: 2.2rem;
height: 1.7rem; height: 2.2rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: @color-secondary-light5-90; }
.icon {
color: var(--primary-foreground-color);
opacity: 0.2;
} }
.label { .label {
flex: none; flex: none;
max-height: 2.4em; max-height: 2.4em;
padding: 0 0.2rem; padding: 0 0.2rem;
font-size: 0.9rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
letter-spacing: 0.01rem; letter-spacing: 0.01rem;
text-align: center; text-align: center;
color: @color-secondaryvariant1-90; color: var(--primary-foreground-color);
opacity: 0;
}
}
@media only screen and (max-width: @minimum) {
.nav-tab-button-container {
.label {
opacity: 0.2;
}
&:global(.selected) {
.label {
opacity: 0.6;
}
}
} }
} }

12
src/common/NavBar/VerticalNavBar/styles.less
View file

@ -4,8 +4,12 @@
@import (reference) '~stremio/common/screen-sizes.less'; @import (reference) '~stremio/common/screen-sizes.less';
.vertical-nav-bar-container { .vertical-nav-bar-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
width: var(--vertical-nav-bar-size); width: var(--vertical-nav-bar-size);
background-color: @color-background-dark1; background-color: transparent;
overflow-y: auto; overflow-y: auto;
scrollbar-width: none; scrollbar-width: none;
@ -14,8 +18,8 @@
} }
.nav-tab-button { .nav-tab-button {
width: var(--vertical-nav-bar-size); width: calc(var(--vertical-nav-bar-size) - 1.5rem);
height: var(--vertical-nav-bar-size); height: calc(var(--vertical-nav-bar-size) - 1.5rem);
&:first-child { &:first-child {
margin-top: 1rem; margin-top: 1rem;
@ -29,11 +33,11 @@
@media only screen and (max-width: @minimum) { @media only screen and (max-width: @minimum) {
.vertical-nav-bar-container { .vertical-nav-bar-container {
display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
height: var(--vertical-nav-bar-size); height: var(--vertical-nav-bar-size);
width: 100%; width: 100%;
padding: 0 1rem;
overflow-y: hidden; overflow-y: hidden;
overflow-x: auto; overflow-x: auto;