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

[Glitch] Fix new hashtag page's items not being full-width on mobile

Browse source 
Port d28a2f7636 to glitch-soc
This commit is contained in:
Thibaut Girka 2019-01-20 11:52:06 +01:00
parent a205783d1c
commit a847f3bec6
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/flavours/glitch/features/status/components/detailed_status.js
View file

@ -62,7 +62,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/flavours/glitch/styles/containers.scss
View file

@ -297,7 +297,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/flavours/glitch/styles/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 {