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;
--poster-shape-ratio: 1.464;
--scroll-bar-size: 6px;
--horizontal-nav-bar-size: 4rem;
--vertical-nav-bar-size: 5.2rem;
--horizontal-nav-bar-size: 5.5rem;
--vertical-nav-bar-size: 6rem;
--focus-outline-size: 2px;
--color-facebook: #4267b2;
--color-twitter: #1DA1F2;
--color-placeholder: #60606080;
--color-placeholder-text: @color-surface-50;
--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
}
<div className={styles['spacing']} />
{
searchBar ?
<SearchBar className={styles['search-bar']} query={query} active={route === 'search'} />
:
null
}
<div className={styles['spacing']} />
{
addonsButton ?
<Button className={styles['button-container']} href={'#/addons'} title={t('ADDONS')} tabIndex={-1}>
<Icon className={styles['icon']} name={'addons'} />
</Button>
:
null
}
{
fullscreenButton ?
<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'} />
</Button>
:
null
}
{
navMenu ?
<NavMenu renderLabel={renderNavMenuLabel} />
:
null
}
<div className={styles['buttons-container']}>
{
addonsButton ?
<Button className={styles['button-container']} href={'#/addons'} title={t('ADDONS')} tabIndex={-1}>
<Icon className={styles['icon']} name={'addons'} />
</Button>
:
null
}
{
fullscreenButton ?
<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'} />
</Button>
:
null
}
{
navMenu ?
<NavMenu renderLabel={renderNavMenuLabel} />
:
null
}
</div>
</nav>
);
});

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

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

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

@ -3,16 +3,12 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
.search-bar-container {
--search-bar-size: calc(var(--horizontal-nav-bar-size) - 1.2rem);
--search-bar-size: 3.25rem;
display: flex;
flex-direction: row;
height: var(--search-bar-size);
border-radius: var(--search-bar-size);
background-color: @color-background-light2;
&:hover {
background-color: @color-background-light3;
}
background-color: var(--primary-overlay-color);
.search-input {
flex: 1;
@ -20,15 +16,16 @@
display: flex;
flex-direction: row;
align-items: center;
padding: 0 0.5rem 0 1.5rem;
padding: 0 0.5rem 0 2rem;
font-weight: 500;
color: @color-secondaryvariant1-light1;
color: var(--primary-foreground-color);
cursor: text;
&::placeholder, .placeholder-label {
max-height: 1.2em;
opacity: 1;
color: @color-secondaryvariant1-light1-90;
color: var(--primary-foreground-color);
opacity: 0.6;
}
}
@ -38,20 +35,15 @@
flex-direction: row;
justify-content: center;
align-items: center;
width: var(--search-bar-size);
height: var(--search-bar-size);
&:hover {
.icon {
color: @color-secondaryvariant2-light1-90;
}
}
padding: 0 1.5rem;
.icon {
flex: none;
width: 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;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: var(--horizontal-nav-bar-size);
padding-right: 1rem;
background-color: @color-background;
background-color: transparent;
overflow: visible;
.logo-container {
@ -30,8 +31,8 @@
}
}
.spacing {
flex: 1 0 0;
.back-button-container {
margin-left: 1rem;
}
.title {
@ -44,19 +45,18 @@
white-space: nowrap;
text-overflow: ellipsis;
color: @color-secondaryvariant2-light1-90;
&+.spacing {
display: none;
}
}
.search-bar {
flex: 2 0 9.5rem;
max-width: 30rem;
height: 3.25rem;
width: 30rem;
}
&+.spacing {
max-width: 11rem;
}
.buttons-container {
display: flex;
flex-direction: row;
gap: 0.5rem;
overflow: visible;
}
.button-container {
@ -64,31 +64,27 @@
display: flex;
align-items: center;
justify-content: center;
width: var(--horizontal-nav-bar-size);
height: var(--horizontal-nav-bar-size);
&.back-button-container {
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;
}
}
width: 3.5rem;
height: 3.5rem;
border-radius: 0.75rem;
opacity: 0.4;
.icon {
flex: none;
width: 1.7rem;
height: 1.7rem;
color: @color-secondaryvariant2-light1-90;
width: 2rem;
height: 2rem;
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);
}
.search-bar {
margin: 0 0.5rem;
}
.button-container {
margin: 0 1rem;
.spacing {
display: none;
}
.button-container:not(.back-button-container):not(.menu-button-container) {
display: none;
&: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 ?
<Icon className={styles['icon']} name={icon} />
<Icon className={styles['icon']} name={selected ? icon : `${icon}-outline`} />
:
null
}

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

@ -1,50 +1,66 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.nav-tab-button-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: @color-background-dark1;
background-color: transparent;
border-radius: 0.75rem;
&:hover {
background-color: @color-background-light2;
background-color: var(--primary-overlay-color);
.label {
opacity: 0.6;
}
}
&:global(.selected) {
background-color: @color-secondaryvariant1-dark5;
&:hover {
background-color: @color-secondaryvariant1-dark4;
}
.icon {
color: @color-surface-light5-90;
}
.label {
color: @color-surface-light5-90;
opacity: 1;
color: var(--primary-accent-color);
}
}
.icon, .logo {
flex: none;
width: 1.7rem;
height: 1.7rem;
width: 2.2rem;
height: 2.2rem;
margin-bottom: 0.5rem;
color: @color-secondary-light5-90;
}
.icon {
color: var(--primary-foreground-color);
opacity: 0.2;
}
.label {
flex: none;
max-height: 2.4em;
padding: 0 0.2rem;
font-size: 0.9rem;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.01rem;
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';
.vertical-nav-bar-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
width: var(--vertical-nav-bar-size);
background-color: @color-background-dark1;
background-color: transparent;
overflow-y: auto;
scrollbar-width: none;
@ -14,8 +18,8 @@
}
.nav-tab-button {
width: var(--vertical-nav-bar-size);
height: var(--vertical-nav-bar-size);
width: calc(var(--vertical-nav-bar-size) - 1.5rem);
height: calc(var(--vertical-nav-bar-size) - 1.5rem);
&:first-child {
margin-top: 1rem;
@ -29,11 +33,11 @@
@media only screen and (max-width: @minimum) {
.vertical-nav-bar-container {
display: flex;
flex-direction: row;
justify-content: space-between;
height: var(--vertical-nav-bar-size);
width: 100%;
padding: 0 1rem;
overflow-y: hidden;
overflow-x: auto;