wayBetter for X
This commit is contained in:
commit
df5dff619e
720 changed files with 147465 additions and 0 deletions
|
|
@ -0,0 +1,44 @@
|
|||
/**
|
||||
* @name Media Grid Focus
|
||||
* @description On a profile's Media tab, hides the right column, widens the page and tightens the gaps so the photo and video grid fills the window. Other pages are unchanged.
|
||||
* @version 1.1.1
|
||||
* @author wayBetter
|
||||
* @permissions network:none
|
||||
*/
|
||||
const ATTR = 'data-bt-media-grid';
|
||||
|
||||
module.exports = class MediaGridFocus {
|
||||
static isMediaTab(pathname) {
|
||||
return /^\/[A-Za-z0-9_]{1,15}\/media\/?$/.test(pathname);
|
||||
}
|
||||
|
||||
start() {
|
||||
const api = window.wayBetter.api;
|
||||
this.scope = api.scope();
|
||||
// Scoped by an attribute on <html> that is only present on /<handle>/media.
|
||||
this.scope.css('media-grid-focus', `
|
||||
html[${ATTR}] [data-testid="sidebarColumn"] { display: none !important; }
|
||||
/* The main area takes the free width next to X's nav (whatever the nav's width: 275px, 88px or
|
||||
none), and the page fills it up to 1400px. A fixed "100vw - 88px" was wider than the pane
|
||||
next to X's 275px nav and scrolled the page sideways. */
|
||||
html[${ATTR}] main[role="main"] { flex-grow: 1000 !important; min-width: 0 !important; }
|
||||
html[${ATTR}] main[role="main"] > div { width: min(1400px, 100%) !important; max-width: none !important; }
|
||||
html[${ATTR}] main[role="main"] > div > div,
|
||||
html[${ATTR}] [data-testid="primaryColumn"] { max-width: none !important; width: 100% !important; flex-grow: 1 !important; }
|
||||
html[${ATTR}] [data-testid="primaryColumn"] section li,
|
||||
html[${ATTR}] [data-testid="primaryColumn"] section [data-testid="cellInnerDiv"] a[href*="/photo/"],
|
||||
html[${ATTR}] [data-testid="primaryColumn"] section [data-testid="cellInnerDiv"] a[href*="/video/"] { padding: 1px !important; margin: 0 !important; }
|
||||
`);
|
||||
this.scope.onRouteChange(() => this.sync());
|
||||
this.scope.defer(() => document.documentElement.removeAttribute(ATTR));
|
||||
this.sync();
|
||||
}
|
||||
|
||||
stop() {
|
||||
this.scope.dispose();
|
||||
}
|
||||
|
||||
sync() {
|
||||
document.documentElement.toggleAttribute(ATTR, MediaGridFocus.isMediaTab(location.pathname));
|
||||
}
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue