Adjust margins for mobile with navbar-under
parent
74a0cc6a11
commit
9b74a12045
|
@ -145,6 +145,7 @@ export default class UI extends React.PureComponent {
|
|||
if (nextProps.isComposing !== this.props.isComposing) {
|
||||
// Avoid expensive update just to toggle a class
|
||||
this.node.classList.toggle('is-composing', nextProps.isComposing);
|
||||
this.node.classList.toggle('navbar-under', nextProps.navbarUnder);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
@ -185,6 +186,7 @@ export default class UI extends React.PureComponent {
|
|||
const className = classNames('ui', columnsClass(layout), {
|
||||
'wide': isWide,
|
||||
'system-font': this.props.systemFontUi,
|
||||
'navbar-under': navbarUnder,
|
||||
});
|
||||
|
||||
return (
|
||||
|
|
|
@ -4227,4 +4227,40 @@ noscript {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// fixes for the navbar-under mode
|
||||
.is-composing.navbar-under {
|
||||
.search {
|
||||
margin-top: -20px;
|
||||
margin-bottom: -20px;
|
||||
.search__icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// more fixes for the navbar-under mode
|
||||
@mixin fix-margins-for-navbar-under {
|
||||
.tabs-bar {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: -6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.single-column.navbar-under {
|
||||
@include fix-margins-for-navbar-under;
|
||||
}
|
||||
|
||||
.auto-columns.navbar-under {
|
||||
@media screen and (max-width: 360px) {
|
||||
@include fix-margins-for-navbar-under;
|
||||
}
|
||||
}
|
||||
|
||||
.auto-columns.navbar-under .react-swipeable-view-container .columns-area,
|
||||
.single-column.navbar-under .react-swipeable-view-container .columns-area {
|
||||
@media screen and (max-width: 360px) {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue