☰

Greasy Fork is available in English.

Reddit - Big Card View

Makes the card view on Reddit bigger and improves ways content is displayed to go along with that.

Install this script?
Author's suggested script

You may also like Reddit - Big Card View.

Install as user style 
// ==UserScript==
// @name         Reddit - Big Card View
// @namespace    1N07
// @version      0.3.1
// @description  Makes the card view on Reddit bigger and improves ways content is displayed to go along with that.
// @author       1N07
// @license      Unlicense
// @match        https://www.reddit.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=reddit.com
// @require      https://update.greasyfork.org/scripts/511046/1457685/DeindentTemplateLiteralString.js
// @run-at       document-body
// @grant        GM_addStyle
// @grant        GM_addElement
// @grant        GM_registerMenuCommand
// @grant        GM_unregisterMenuCommand
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(() => {
	//initialize settings
	let MainContainerWidthHandle;
	let MainContainerWidth = GM_getValue("MainContainerWidth", "75%");
	SetMainContainerWidthHandle();
	let PostImageHeightHandle;
	let PostImageHeight = GM_getValue("PostImageHeight", "70vh");
	SetPostImageHeightHandle();

	//add main stylesheet to DOM
	GM_addStyle(`
		.subgrid-container {
			max-width: calc(100vw - 272px);
			width: calc(100vw - 272px);
		}
		.main-container {
			justify-content: center;
		}
		#main-content {
			max-width: 100%;
			width: ${MainContainerWidth};
		}
		#right-sidebar-container:has(> aside) {
			display: none;
		}
		#main-content:has(+ #right-sidebar-container > aside) {
			max-width: 100%;
		}

		/*Single image post height*/
			#main-content [slot='post-media-container'] shreddit-aspect-ratio{
			--max-height: min(100%, ${PostImageHeight}) !important;
		}

		#main-content [slot='post-media-container'] gallery-carousel ul {
			column-gap: 5px;
		}

		#main-content [slot='post-media-container'] gallery-carousel ul > li {
			visibility: visible !important;
		}
  `);

	//start tracking multi image carousels to improve on how they are displayed.
	setInterval(() => {
		const carousels = document.querySelectorAll(
			"#main-content [slot='post-media-container'] gallery-carousel:not(.rbcv-carousel-height-set)",
		);
		for (const carousel of carousels) {
			const faceplate =
				carousel.shadowRoot?.querySelector("faceplate-carousel");
			if (faceplate) {
				faceplate.style.maxHeight = "70vh";
				faceplate.style.height = "70vh";

				carousel.classList.add("rbcv-carousel-height-set");

				const carouselImgs = carousel.querySelectorAll(
					"ul > li img:not(.rbcv-image-handled)",
				);
				for (const carouselImg of carouselImgs) {
					if (!TrySetCarouselImgWidth(carouselImg)) {
						carouselImg.onload = (e) => {
							e.target.onload = null;
							TrySetCarouselImgWidth(e.target);
						};
					}
					if (!carouselImg.src)
						carouselImg.src = carouselImg.getAttribute("data-lazy-src");
					carouselImg.classList.add("rbcv-image-handled");
				}
			}
		}
	}, 500);

	//=== FUNCTIONS ===//
	function TrySetCarouselImgWidth(img) {
		//TODO: check if image is too wide for carousel, if so, set width so it fits, preserving ratio. i.e. set smaller height.
		if (img?.naturalWidth > 0) {
			const naturalRatio = img.naturalWidth / img.naturalHeight;
			const calculatedWidth = img.clientHeight * naturalRatio;

			if (img.parentNode?.tagName === "LI") {
				const slot = img.parentNode.getAttribute("slot");
				const postId = img.closest("gallery-carousel").getAttribute("post-id");
				GM_addElement(img.parentNode, "style", {
					class: "carousel-image-widths",
					textContent: `gallery-carousel[post-id="${postId}"] li[slot=${slot}] { width: ${calculatedWidth}px !important; }`,
				});
			}
			return true;
		}

		return false;
	}
	function SetMainContainerWidthHandle() {
		GM_unregisterMenuCommand(MainContainerWidthHandle);

		MainContainerWidthHandle = GM_registerMenuCommand(
			`Set main reddit content container width (${MainContainerWidth}) -click to change-`,
			() => {
				const newMainContainerWidth = prompt(
					Deindent(`
						Set main reddit content container width.
						Values that would result in a main container wider than the viewport, fallback to 100% width.
						Use any valid CSS unit value.
                    `),
					MainContainerWidth,
				);
				if (newMainContainerWidth) {
					MainContainerWidth = newMainContainerWidth;
					GM_setValue("MainContainerWidth", MainContainerWidth);
					SetMainContainerWidthHandle();

					if (
						confirm(
							'Press "OK" to refresh the page to apply new settings or "cancel" refresh and apply later.',
						)
					) {
						location.reload();
					}
				}
			},
		);
	}
	function SetPostImageHeightHandle() {
		GM_unregisterMenuCommand(PostImageHeightHandle);

		PostImageHeightHandle = GM_registerMenuCommand(
			`Set post image height (${PostImageHeight}) -click to change-`,
			() => {
				const newPostImageHeight = prompt(
					Deindent(`
						Set post image height.
						Use any valid CSS unit value.
                    `),
					PostImageHeight,
				);
				if (newPostImageHeight) {
					PostImageHeight = newPostImageHeight;
					GM_setValue("PostImageHeight", PostImageHeight);
					SetPostImageHeightHandle();

					if (
						confirm(
							'Press "OK" to refresh the page to apply new settings or "cancel" refresh and apply later.',
						)
					) {
						location.reload();
					}
				}
			},
		);
	}
})();