mirrors/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-11-23 13:05:12 +01:00
Code Issues Projects Releases Wiki Activity

Fix new hashtag page's items not being full-width on mobile (#9852)

Browse Source 
Fix #9845
This commit is contained in:
Eugen Rochko 2019-01-18 20:58:11 +01:00 committed by GitHub
parent 32daecffef
commit b506ce1197
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/mastodon/features/status/components/detailed_status.js
View File

@ -54,7 +54,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
_measureHeight (heightJustChanged) { _measureHeight (heightJustChanged) {
if (this.props.measureHeight && this.node) { if (this.props.measureHeight && this.node) {
scheduleIdleTask(() => this.node && this.setState({ height: this.node.scrollHeight })); scheduleIdleTask(() => this.node && this.setState({ height: Math.ceil(this.node.scrollHeight) + 1 }));
if (this.props.onHeightChange && heightJustChanged) { if (this.props.onHeightChange && heightJustChanged) {
this.props.onHeightChange(); this.props.onHeightChange();

2
app/javascript/styles/mastodon/containers.scss
View File

@ -295,7 +295,7 @@
color: $primary-text-color; color: $primary-text-color;
} }
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: 550px) {
&.optional { &.optional {
display: none; display: none;
} }

10
app/javascript/styles/mastodon/widgets.scss
View File

@ -432,6 +432,10 @@ $fluid-breakpoint: $maximum-width + 20px;
.statuses-grid { .statuses-grid {
min-height: 600px; min-height: 600px;
@media screen and (max-width: 640px) {
width: 100% !important; // Masonry layout is unnecessary at this width
}
&__item { &__item {
width: (960px - 20px) / 3; width: (960px - 20px) / 3;
@ -439,6 +443,10 @@ $fluid-breakpoint: $maximum-width + 20px;
width: (940px - 20px) / 3; width: (940px - 20px) / 3;
} }
@media screen and (max-width: 640px) {
width: 100%;
}
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
width: 100vw; width: 100vw;
} }
@ -448,7 +456,7 @@ $fluid-breakpoint: $maximum-width + 20px;
border-radius: 4px; border-radius: 4px;
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
border-bottom: 1px solid lighten($ui-base-color, 12%); border-top: 1px solid lighten($ui-base-color, 16%);
} }
&.compact { &.compact {