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

back button and tab buttons styled separately

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-04-25 17:41:28 +03:00
parent 8f1a61d3cf
commit 96e59928af
2 changed files with 31 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/common/NavBar/NavBar.js
View file

@ -14,7 +14,7 @@ const NavBar = ({ backButton, tabs, title, searchBar, userMenu }) => {
{ {
backButton ? backButton ?
<NavBarButton <NavBarButton
className={styles['nav-bar-button']} className={styles['back-button']}
icon={'ic_back_ios'} icon={'ic_back_ios'}
label={'back'} label={'back'}
onClick={onBackButtonClick} onClick={onBackButtonClick}
@ -24,15 +24,17 @@ const NavBar = ({ backButton, tabs, title, searchBar, userMenu }) => {
} }
{ {
tabs.length > 0 ? tabs.length > 0 ?
tabs.map(({ href, icon, label }) => ( <div className={styles['nav-tabs-container']}>
<NavBarButton {tabs.map(({ href, icon, label }) => (
key={href} <NavBarButton
className={styles['nav-bar-button']} key={href}
href={href} className={styles['nav-tab-button']}
icon={icon} href={href}
label={label} icon={icon}
/> label={label}
)) />
))}
</div>
: :
<h2 className={styles['title']}>{title}</h2> <h2 className={styles['title']}>{title}</h2>
} }

24
src/common/NavBar/styles.less
View file

@ -2,9 +2,11 @@
--nav-bar-height: 44px; --nav-bar-height: 44px;
font-size: 16px; font-size: 16px;
.nav-bar-button { .nav-tabs-container {
&:nth-child(n+5) { .nav-tab-button {
display: none; &:nth-child(n+5) {
display: none;
}
} }
} }
} }
@ -17,12 +19,24 @@
background-color: var(--color-secondarydark); background-color: var(--color-secondarydark);
overflow: hidden; overflow: hidden;
.nav-bar-button { .back-button {
flex: none; flex: none;
max-width: calc(var(--nav-bar-height) * 3.5); max-width: calc(var(--nav-bar-height) * 5);
height: var(--nav-bar-height); height: var(--nav-bar-height);
} }
.nav-tabs-container {
flex: none;
display: flex;
flex-direction: row;
.nav-tab-button {
flex: none;
max-width: calc(var(--nav-bar-height) * 3.5);
height: var(--nav-bar-height);
}
}
.title { .title {
flex: 1; flex: 1;
font-size: 1.1em; font-size: 1.1em;