Add adaptive width style

src/operations.ts

@@ -31,6 +31,7 @@ import MANAGE_CARET_POSITION from "./operations/manage-caret-position";
 import REMOVE_MOBILE_SITE_DISCLAIMER from "./operations/remove-mobile-site-disclaimer";
 import KEYBOARD_SHORTCUTS_EDIT_MODE from "./operations/keyboard-shortcuts/edit-mode";
 import MOUSETRAP_PREPARATIONS from "./operations/mousetrap-preparations";
+import ADAPTIVE_WIDTH from "./operations/adaptive-width";
 import * as DarkTheme from "./operations/dark-theme";
 import * as Proofreading from "./operations/proofreading";
 
@@ -242,6 +243,21 @@ const OPERATIONS: ReadonlyArray<Operation> = [
         selectors: { followedThreadsLink: SELECTOR.followedThreadsLink },
         action: REPLACE_FOLLOWED_THREADS_LINK,
     }),
+    new DependentOperation({
+        description: "adaptive width: remove space for .pushColumn>.fixed if empty",
+        /*
+            Condition incomplete. I found no easy way to know if a page has the .pushColumn
+            or not. Is there a way to make this operation fail silently if the elements are
+            not found? Or should it be an IndependentOperation with its own loop checking
+            for the element's existence?
+         */
+        condition: !isReadingForumThread() && Preferences.get(P.advanced._.adaptive_width),
+        selectors: {
+            pcFluidInner: SELECTOR.pcFluidInner,
+            pcFixed: SELECTOR.pcFixed,
+        },
+        action: ADAPTIVE_WIDTH,
+    }),
 
     // Keyboard shortcuts
     new IndependentOperation({

src/operations/adaptive-width.ts

@@ -0,0 +1,8 @@
+export default (e: {
+    pcFluidInner: HTMLElement,
+    pcFixed: HTMLElement,
+}) => {
+    if (e.pcFixed.offsetHeight === 0) {
+        e.pcFluidInner.style.paddingRight = "0";
+    }
+}

src/preferences/advanced.ts

@@ -77,4 +77,9 @@ export default {
             },
         ],
     }),
+    adaptive_width: new BooleanPreference({
+        key: "adaptive_width",
+        default: false,
+        label: T.preferences.advanced.adaptive_width,
+    }),
 }

src/selectors.ts

@@ -15,6 +15,8 @@ const actionButtonsQuickReply = `#quickreply .controls button`;
 
 const textareaToolbarInner = `form .toolbar .tbInner`;
 
+const pushColumn = ".pushColumn";
+
 export default {
     textarea: "textarea#" + CSS.escape(SITE.ID.textarea),
     textareaToolbarInner,
@@ -42,4 +44,6 @@ export default {
     quickReplyForm: `#quickreply form`,
     followedThreadsLink: `#${SITE.ID.siteHeader} .profile .option.watched a.label`,
     proofDialogCloseButton: "." + SITE.CLASS.proofDialog + " .cntClose",
+    pcFluidInner: `${pushColumn}>.fluid>.inner`,
+    pcFixed: `${pushColumn}>.fixed`,
 };

src/styles.ts

@@ -114,6 +114,10 @@ const STYLESHEET_MODULES: ReadonlyArray<StylesheetModule> = [
         condition: Preferences.get(P.advanced._.custom_css_enable),
         css: Preferences.get(P.advanced._.custom_css_code),
     },
+    {
+        condition: Preferences.get(P.advanced._.adaptive_width),
+        css: require("styles/adaptive-width"),
+    },
 
     // Customize content:
     {

src/styles/adaptive-width.scss

@@ -0,0 +1,50 @@
+#content>.outsiderColumn {
+    >.fluid>.inner { /* Remove rightmost ad to make news pages and forum pages the same width */
+        padding-right: 0;
+    }
+    >.fixed {
+        display: none;
+    }
+}
+
+.container, .minWidth { /* Allow containers to shrink further */
+    width: auto !important;
+    min-width: 940px;
+}
+
+#search { /* Adjust search bar to fit in the thinner layout */
+    min-width: 156px;
+    max-width: 180px;
+    width: 15vw;
+}
+
+.footer .top .block { /* Make footer fit */
+    width: 25%;
+    box-sizing: border-box;
+}
+
+.newsList .itemBanner img,
+.articleHeader .bbImage img,
+.articleHeader .tv-frame,
+.articleContent .bbImage img { /* Scale up images to fill width in article feed and articles */
+    width: 100%;
+}
+
+.articleHeader .tv-frame { /* Frame for article video doesn't want to scale */
+    .tvf-top,
+    .tvf-right,
+    .tvf-bottom,
+    .tvf-left {
+        display: none;
+    }
+}
+
+.forumPost.isReader .button.reply { /* Sacrifice "Svara" on own posts to make room */
+    display: none;
+}
+
+.bbRelatedBox:after { /* Clearfix box in articles that images tend to pop out of */
+    content: " ";
+    clear: both;
+    display: block;
+}

src/text.ts

@@ -158,6 +158,7 @@ export const preferences = {
         proofread_forum_posts: `Markera möjliga fel i foruminlägg (i redigeringsläge)`,
         custom_css_enable: `Infoga egen CSS:`,
         custom_css_warning: `Klistra aldrig in kod som du inte litar på!`,
+        adaptive_width: `<kbd>BETA</kbd> LemonIllusions adaptiva bredd-stil`,
     },
 
     keyboard: `Kortkommandon`,