CloudToys/puyopuyotetr.is
1
0
Fork 0
Code

Fix public hashtag timeline width on mobile, fix scrollbar width compensation (#9824)

Browse Source 
* Fix hashtag timeline width being potentially larger than window width

* Add automatic computation of scrollbar width
This commit is contained in:
ThibG 2019-01-16 20:36:10 +01:00 committed by Eugen Rochko
parent f2f9d50a13
commit 3b3a4d8a17
2 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/javascript/packs/public.js
View File

@ -108,6 +108,14 @@ function main() {
if (parallaxComponents.length > 0 ) { if (parallaxComponents.length > 0 ) {
new Rellax('.parallax', { speed: -1 }); new Rellax('.parallax', { speed: -1 });
} }
if (document.body.classList.contains('with-modals')) {
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
const scrollbarWidthStyle = document.createElement('style');
scrollbarWidthStyle.id = 'scrollbar-width';
document.head.appendChild(scrollbarWidthStyle);
scrollbarWidthStyle.sheet.insertRule(`body.with-modals--active { margin-right: ${scrollbarWidth}px; }`, 0);
}
}); });
delegate(document, '.webapp-btn', 'click', ({ target, button }) => { delegate(document, '.webapp-btn', 'click', ({ target, button }) => {

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

@ -364,7 +364,7 @@ $small-breakpoint: 960px;
@media screen and (max-width: $column-breakpoint) { @media screen and (max-width: $column-breakpoint) {
.grid { .grid {
grid-template-columns: auto; grid-template-columns: 100%;
.column-0 { .column-0 {
display: block; display: block;