me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Adjust margins for mobile with navbar-under

Browse source
This commit is contained in:
Ondřej Hruška 2017-07-22 20:41:21 +02:00
parent f749148e65
commit d60e6c41f6
2 changed files with 38 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/javascript/mastodon/features/ui/index.js
View file

@ -145,6 +145,7 @@ export default class UI extends React.PureComponent {
if (nextProps.isComposing !== this.props.isComposing) { if (nextProps.isComposing !== this.props.isComposing) {
// Avoid expensive update just to toggle a class // Avoid expensive update just to toggle a class
this.node.classList.toggle('is-composing', nextProps.isComposing); this.node.classList.toggle('is-composing', nextProps.isComposing);
this.node.classList.toggle('navbar-under', nextProps.navbarUnder);
return false; return false;
} }
@ -185,6 +186,7 @@ export default class UI extends React.PureComponent {
const className = classNames('ui', columnsClass(layout), { const className = classNames('ui', columnsClass(layout), {
'wide': isWide, 'wide': isWide,
'system-font': this.props.systemFontUi, 'system-font': this.props.systemFontUi,
'navbar-under': navbarUnder,
}); });
return ( return (

36
app/javascript/styles/components.scss
View file

@ -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;
}
} }