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

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

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

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