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

nav tabs count ensured regardless of back button

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-04-22 18:40:38 +03:00
parent 2f287113ac
commit 875f7a925c
2 changed files with 22 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -22,15 +22,17 @@ const NavBar = ({ backButton, tabs, title, searchInput, userMenu }) => (
} }
{ {
tabs.length > 0 ? tabs.length > 0 ?
tabs.map(({ href, icon, label }) => ( <div className={styles['tabs-container']}>
<NavBarButton {tabs.map(({ href, icon, label }) => (
key={href} <NavBarButton
className={styles['nav-bar-button']} key={href}
href={href} className={styles['nav-bar-button']}
icon={icon} href={href}
label={label} icon={icon}
/> label={label}
)) />
))}
</div>
: :
<h2 className={styles['title']}>{title}</h2> <h2 className={styles['title']}>{title}</h2>
} }

14
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 { .tabs-container {
&:nth-of-type(n+4) { .nav-bar-button {
display: none; &:nth-child(n+5) {
display: none;
}
} }
} }
} }
@ -17,6 +19,12 @@
background-color: var(--color-secondarydark); background-color: var(--color-secondarydark);
overflow: hidden; overflow: hidden;
.tabs-container {
flex: none;
display: flex;
flex-direction: row;
}
.nav-bar-button { .nav-bar-button {
max-width: calc(var(--nav-bar-height) * 3.5); max-width: calc(var(--nav-bar-height) * 3.5);
height: var(--nav-bar-height); height: var(--nav-bar-height);