sh.itjust.works Main Community

Now we just need to get rid of the image preview for really old farts like me. I also wouldn't mind a theme that gets rid of the inline images in comments and just replaces them with a link.

Do you think this would be adaptable into an official bootstrap theme for Lemmy? Then instance admins can install it locally and it would be selectable from the settings UI.

Info here: https://join-lemmy.org/docs/en/administration/theming.html

This looks awesome. I look forward to trying it next time I'm on desktop. Thank you!

for special children like me, how do we use such a thing? I'm guessing a browser plugin of some sort?

Thanks for taking the effort to make this place feel like our old, abusive, but still comfortable, home. :)

Good shit, That fixes most of the UI complaints from me. One other think I can think of is making the post a bit smaller to fit more on the screen. Much better than default though.

Your amazing :)

I love how fast the updates are coming for this haha. Thanks @mershed_perderders@sh.itjust.works and @DarkwingDuck@sh.itjust.works

Looks awesome, thanks!

Pull Request: I made the max width of comments and reply boxes to 840px

lines changed: 64-65. Inserted:

		GM_addStyle(".comment p {  max-width: 840px }");
		GM_addStyle(".comment textarea {  max-width: 840px }");

:::spoiler full code:

// ==UserScript==
// @name         Lemmy to Old.Reddit Re-format (Observer)
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  Reformat widescreen desktop to look more like Reddit
// @author       mershed_perderders, DarkwingDuck
// @match        https://*/*
// ==/UserScript==

(function() {
	'use strict';

	var isLemmy = document.head.querySelector("[name~=Description][content]").content === "Lemmy";

	function GM_addStyle(css) {
		const style = document.getElementById("GM_addStyleBy8626") || (function() {
			const style = document.createElement('style');
			style.type = 'text/css';
			style.id = "GM_addStyleBy8626";
			document.head.appendChild(style);
			return style;
		})();
		const sheet = style.sheet;
		sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
	}

	function MoveCommentCollapseButton(container) {
		var firstTargDiv = container.querySelector(".btn.btn-sm.text-muted");
		var secondTargDiv = container.querySelector(".mr-2");
		//-- Swap last to first.
		container.insertBefore(firstTargDiv, secondTargDiv);
	}

	function ApplyMoveCommentCollapseButton(element) {
		const observer = new MutationObserver(function(mutationsList) {
			for (let mutation of mutationsList) {
				if (mutation.type === 'childList') {
					for (let addedNode of mutation.addedNodes) {
						if (addedNode.matches('.d-flex.flex-wrap.align-items-center.text-muted.small')) {
							MoveCommentCollapseButton(addedNode);
						}
					}
				}
			}
		});

		observer.observe(element, { childList: true, subtree: true });
	}

  //Lemmy to old.Reddit style reformats (to be used for custom stylesheet at a later date)
	if (isLemmy) {
		GM_addStyle(".container-fluid, .container-lg, .container-md, .container-sm, .container-xl {   margin-right: unset !important; margin-left: unset !important;}");
		GM_addStyle(".container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 100% !important; }");
		GM_addStyle(".col-md-4 { flex: 0 0 20% !important; max-width: 20%; }");
		GM_addStyle(".col-md-8 { flex: 0 0 80% !important; max-width: 80%; }");
		GM_addStyle(".col-sm-2 { flex: 0 0 9% !important; max-width: 10%; }");
		GM_addStyle(".col-1 { flex: 0 0 4% !important; max-width: 5%; }");
		GM_addStyle(".mb-2, .my-2 { margin-bottom: 0.3rem !important; }");
		GM_addStyle(".mb-3, .my-3 { margin-bottom: .2rem !important; }");
		GM_addStyle(".mt-3, .my-3 { margin-top: .2rem !important; }");
		GM_addStyle(".thumbnail {   min-height: 100px; max-height: 125px; }");
		GM_addStyle(".vote-bar { margin-top: 15px !important; }");
		GM_addStyle(".comments {  margin-left: 20px; }");
		GM_addStyle(".comment p {  max-width: 840px }");
		GM_addStyle(".comment textarea {  max-width: 840px }");

		// Move comment collapse buttons for existing elements
		var divList = document.querySelectorAll(".d-flex.flex-wrap.align-items-center.text-muted.small");
		divList.forEach(MoveCommentCollapseButton);

		// Apply MoveCommentCollapseButton to dynamically loaded elements
		ApplyMoveCommentCollapseButton(document.documentElement);
	}
})();

This is excellent, thank you.

:( It doesn't work for me. I'm using firefox, so maybe some levated security or something is getting in the way of it working.