Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

NavBar refactored to use rem for styling

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-07-31 18:10:06 +03:00
parent 3eecb81b40
commit 7250e1c598
5 changed files with 20 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,7 +11,7 @@ const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, user
window.history.back();
}, []);
return (
<nav className={classnames(className, styles['nav-bar'])}>
<nav className={classnames(className, styles['nav-bar-container'])}>
{
backButton ?
<NavBarButton

10
src/common/NavBar/NavBarButton/styles.less
View file

@ -2,8 +2,7 @@
display: flex;
flex-direction: row;
align-items: center;
padding: 0 1.2em;
overflow: hidden;
padding: 0 1.2rem;
cursor: pointer;
&:hover {
@ -16,16 +15,13 @@
.icon {
flex: none;
height: 1.2em;
margin-right: 0.6em;
height: 1.2rem;
margin-right: 0.6rem;
fill: var(--color-surfacelighter);
}
.label {
flex: 1;
height: 1.4em;
line-height: 1.4em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--color-surfacelighter);

2
src/common/NavBar/SearchBar/SearchBar.js
View file

@ -30,7 +30,7 @@ const SearchBar = ({ className }) => {
}
}, [active, focusable]);
return (
<label className={classnames(className, styles['search-label'], { 'active': active })} onClick={!active ? navigateToSearch : null}>
<label className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={!active ? navigateToSearch : null}>
{
active ?
<Input

10
src/common/NavBar/SearchBar/styles.less
View file

@ -1,7 +1,6 @@
.search-label {
.search-bar-container {
display: flex;
flex-direction: row;
align-items: stretch;
background-color: var(--color-secondary60);
&:hover {
@ -22,10 +21,11 @@
.search-input {
flex: 1;
align-self: stretch;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 0.8em;
padding: 0 0.8rem;
color: var(--color-surfacelighter);
cursor: text;
@ -48,8 +48,8 @@
.submit-icon {
flex: none;
width: 1.1em;
height: 1.1em;
width: 1.1rem;
height: 1.1rem;
fill: var(--color-surfacelighter);
}
}

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

@ -1,23 +1,10 @@
.nav-bar {
--nav-bar-height: 44px;
font-size: 16px;
.nav-tabs-container {
.nav-tab-button {
&:nth-child(n+5) {
display: none;
}
}
}
}
.nav-bar {
.nav-bar-container {
--nav-bar-height: 3.2rem;
display: flex;
flex-direction: row;
align-items: center;
height: var(--nav-bar-height);
background-color: var(--color-secondarydark);
overflow: hidden;
.back-button {
flex: none;
@ -34,20 +21,21 @@
flex: none;
max-width: calc(var(--nav-bar-height) * 3.5);
height: var(--nav-bar-height);
&:nth-child(n+5) {
display: none;
}
}
}
.title {
flex: 1;
font-size: 1.1em;
height: 1.4em;
line-height: 1.4em;
padding: 0 0.6em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 0.6rem;
font-size: 1.1rem;
font-style: normal;
font-weight: normal;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--color-surfacelighter);
&~.spacing {