121
submitted 1 year ago* (last edited 1 year ago) by mershed_perderders@sh.itjust.works to c/main@sh.itjust.works

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

>

top 50 comments
sorted by: hot top controversial new old
[-] knova@links.dartboard.social 21 points 1 year ago

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

Maybe? I gotta be honest, UX / UI is not my area. I really had to poke around and stretch my CSS knowledge to make this script

[-] knova@links.dartboard.social 11 points 1 year ago

Well, congrats because it looks great. You did way better than I would have done. Hoping someone else with more subject matter knowledge can weigh in. I would love to install this as default for my users.

[-] SplatterGasp@sh.itjust.works 6 points 1 year ago

I gotta be honest, UX / UI is not my area.

I'm sorry, but I don't believe you. It looks fantastic! Really great job!

heh. I did what all good artists do: I shamelessly stole the idea from somebody else (reddit in this case)

[-] zeldis@sh.itjust.works 4 points 1 year ago

The CSS from the script could just be appended to any bootstrap css file and then admins could use that

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. :)

[-] mershed_perderders@sh.itjust.works 11 points 1 year ago* (last edited 1 year ago)

Yeah, so this relies on a browser extension called Tampermonkey (or greasemonkey depending on your browser).

You install the extension, then create a "new script" and paste in the code above. Then save, refresh the page, and Bob's your uncle (or Betty's your aunt)!

load more comments (2 replies)
[-] eric5949@beehaw.org 6 points 1 year ago

I don't know how to use it but greasemonkey is a browser extension, I assume it lets you run scripts and this is a script for it.

[-] knova@links.dartboard.social 5 points 1 year ago

Yep, you need either tampermonkey or grease monkey extensions for your browser.

[-] zeldis@sh.itjust.works 8 points 1 year ago
[-] darkwing_duck@sh.itjust.works 3 points 1 year ago* (last edited 1 year ago)

I think @mershed_perderders@sh.itjust.works went to bed, but apparently a formatting issue occurred while copy-pasting, and > was replaced with > which would break the script.

Should be

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

Edit again: something is fucky with right pointing arrow. If you're having trouble, replace > with right pointing arrow.

[-] zeldis@sh.itjust.works 3 points 1 year ago

It looks like the lemmy ui itself is changing that after the page loads which seems like a bug. If you refresh and watch the code you can see it change

[-] darkwing_duck@sh.itjust.works 6 points 1 year ago* (last edited 1 year ago)

Alright then, let's avoid right arrow for now. Here is a new and improved version with an Observer that will (or at least should) move the button for dynamically loaded comments as well. Note that the Observer piece was generated by ChatGPT.

// ==UserScript==
// @name         Lemmy to Old.Reddit Re-format (Observer)
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Reformat widescreen desktop to look more like Reddit
// @author       mershed_perderders
// @match        https://*/*
// @grant        none
// ==/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 });
	}

	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(".thumbnail {   min-height: 100px; max-height: 125px; }");
		GM_addStyle(".mb-3, .my-3 { margin-bottom: .2rem !important; }");
		GM_addStyle(".mt-3, .my-3 { margin-top: .2rem !important; }");
		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);
	}
})();
[-] zeldis@sh.itjust.works 4 points 1 year ago

You may want to remove the @icon for now as well. The &'s are getting changed and greasemonkey wasn't saving it since it couldn't resolve the url

[-] Bardak@lemmy.ca 5 points 1 year ago* (last edited 1 year ago)

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.

load more comments (1 replies)
[-] nLuLukna@sh.itjust.works 4 points 1 year ago

Your amazing :)

[-] rimmytea@lemmy.one 4 points 1 year ago

Thank you for this.

[-] chaorace@lemmy.sdf.org 4 points 1 year ago

Oops! I took one, then forgot to post it:

[-] atkion@sh.itjust.works 3 points 1 year ago

This is excellent, thank you.

[-] darkwing_duck@sh.itjust.works 3 points 1 year ago

Oh this is nice, thank you sir!

I’ll have to give this a try! Does it work on any instance or just the one that you use?

[-] mershed_perderders@sh.itjust.works 5 points 1 year ago* (last edited 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 4 points 1 year ago* (last edited 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 :)

[-] god@sh.itjust.works 2 points 1 year ago

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

[-] darkwing_duck@sh.itjust.works 4 points 1 year ago* (last edited 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?

[-] zeldis@sh.itjust.works 3 points 1 year ago

This is amazing! Nice work

an elegant solution. I gave up on it after an hour.

[-] god@sh.itjust.works 2 points 1 year ago
[-] darkwing_duck@sh.itjust.works 2 points 1 year ago
[-] god@sh.itjust.works 2 points 1 year ago

But I didn't mention you lol. Or are you talking about another mention?

[-] darkwing_duck@sh.itjust.works 2 points 1 year ago

I'm sorry, it's late and I'm a bit tired. Indeed you did not mention me, the reason I got notified is because your comment is a response to mine.

@darkwing_duck@sh.itjust.works @god@sh.itjust.works I got it. Code changed. Will await the other code, but I'm going to bed now (such a weakling, I know).

load more comments (6 replies)
load more comments (1 replies)
[-] god@sh.itjust.works 2 points 1 year ago

Also, this is super awesome. I will test it as soon as I'm on desktop tomorrow.

[-] darkwing_duck@sh.itjust.works 3 points 1 year ago* (last edited 1 year ago)

The only issue is this only works on page load, so comments loaded dynamically while you're on the page already won't get the collapse button moved.

[-] god@sh.itjust.works 3 points 1 year ago

Ahh. I made something for this. It uses some observer. Well, chatgpt made it. I'll find it and send it to you in a sec.

[-] god@sh.itjust.works 2 points 1 year ago* (last edited 1 year ago)

Here you go. Check the last lines about the observer. I don't know how that works. Honestly I didn't even read it. Chatgpt did that whole part for me. https://sh.itjust.works/post/42893

It doesn't work 100% but it works way better than without it.

load more comments (1 replies)
load more comments (1 replies)
load more comments (2 replies)
load more comments (1 replies)
[-] thomas@lemmy.douwes.co.uk 3 points 1 year ago

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.

Agreed. Here is about as tight as I can get it: https://github.com/soundjester/lemmy_monkey/blob/main/old.reddit.compact

Give it a shot and see what you think

[-] thomas@lemmy.douwes.co.uk 3 points 1 year ago* (last edited 1 year ago)

Brilliant, I can see so much more of the main page. one less than old.reddit.com but that doesn't really matter. Thank you so much!
I know there isn't anything you can do but one of the things I'll miss about reddit is the custom CSS. I hope some form of custom CSS gets added to lemmy. I'll miss the "unique" design of r/mildlyinfuriating or the complete insanity of r/ooer (I tried to link WayBackMachine but it seems to be down)

[-] Ugh@sh.itjust.works 3 points 1 year ago

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

[-] Aldo@discuss.tchncs.de 3 points 1 year ago

Looks awesome, thanks!

[-] oxideSeven@sh.itjust.works 2 points 1 year ago

:( 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.

which *monkey are you using?

load more comments (4 replies)
load more comments
view more: next ›
this post was submitted on 12 Jun 2023
121 points (100.0% liked)

sh.itjust.works Main Community

7649 readers
8 users here now

Home of the sh.itjust.works instance.

Matrix

founded 1 year ago
MODERATORS