ar
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjust margins for mobile with navbar-under

rebase/4.0.0rc2
Ondřej Hruška 2017-07-22 20:41:21 +02:00
parent 74a0cc6a11
commit 9b74a12045
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;
}
} }