Figured I’d cobble together a quick-n-dirty greasemonkey/tapermonkey script to slighly modify the CSS to feel a little more like old.reddit with RES. Still not quite as compact as I’d like, but it’s getting there.

**edit/update: **

changelog

  • All future versions on github: https://github.com/soundjester/lemmy_monkey/
  • v0.4 - reformatted to remove greater-than signs; added observer to catch and reformat new comments;
  • v0.3 - added script to move the comment collapse button to be in front of user name (thanks @DarkwingDuck); tightened up the code, removed unneeded function call.
  • v0.2 - modified to work on any lemmy instance (thank you, God!)
// ==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; }");

		// 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);
	}
})();

Screenshot

>

    • mershed_perderders@sh.itjust.worksOP
      link
      fedilink
      English
      arrow-up
      0
      ·
      edit-2
      1 year ago

      The script is written to work on “sh.itjust.works” but you can easily change it to whatever instance you use by editing the @match https://sh.itjust.works/* to use that instance’s URL.

      Just drop in the top-level name, similar to what you see used here. Easy-peasy.

      I guess it IS a good argument to create a style like that other comment suggested. I’ll look at doing that.

      • God@sh.itjust.works
        link
        fedilink
        English
        arrow-up
        0
        ·
        edit-2
        1 year ago

        just so you know, you can make it universal by adding something very simple to your script:

        just wrap the script with this:

        var isLemmy =
          document.head.querySelector("[name~=Description][content]").content ===
          "Lemmy";
        
        if (isLemmy) {
          // your code here
        }
        

        that way ppl don’t have to modify their script and it just works by default :)

        • kopper [they/them]@lemmy.blahaj.zone
          link
          fedilink
          English
          arrow-up
          1
          ·
          edit-2
          1 year ago

          Instead of querying the description (which I’m not sure is hardcoded or not), a better way to do this would probably be just if (window.lemmyConfig). To me it seems pretty unused and might be gone in later versions, but it exists now and we can take advantage of it.

          There is also window.isoData which is probably bit more reliable, but no idea if that naming is Lemmy’s or from a framework Lemmy happens to use. Unlike lemmyConfig though it has plenty of data inside which might make it a lot more reliable if you dig deep enough.

          • God@sh.itjust.works
            link
            fedilink
            English
            arrow-up
            0
            ·
            1 year ago

            I wanna put this here later, if you get around to doing it before I stop being busy, lmk

            • DarkwingDuck@sh.itjust.works
              link
              fedilink
              English
              arrow-up
              0
              ·
              edit-2
              1 year ago

              This took way too long.

              var div_list = document.querySelectorAll(".d-flex.flex-wrap.align-items-center.text-muted.small");
              var div_array = [...div_list];
              div_array.forEach(container => {
                  var firstTargDiv = container.querySelector(".btn.btn-sm.text-muted");
                  var secondTargDiv = container.querySelector(".mr-2");
              
                  //-- Swap last to first.
                  container.insertBefore (firstTargDiv, secondTargDiv);
              });
              

              Edited because I screwed up and only moved the first comment’s collapse button. Whoopsie.

              @mershed_perderders care to add this?