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

>

you are viewing a single comment's thread
view the rest of the comments
[-] 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

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.

[-] 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).

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

@DarkwingDuck@sh.itjust.works @mershed_perderders@sh.itjust.works what do you guys think would be a good name for a community hosting this kind of augmentations? I was thinking of making something like /c/userscripts or /c/plugins. The latter sounds pretty cool.

I lost this in the comment chain. I think this is a good idea. I think plugins would be good - the next item I want to tackle is an infinite scroll script... pagination is for the birds.

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

!plugins@sh.itjust.works

Feel free to share anything there, I will share a couple of things myself. Once you post or comment I'll mod you.

I ran across a script the other day that essentially functioned as an auto-subscribe. The use case was subscribing to a federated community just by visiting and it was super useful. I had it installed, then uninstalled it and now I can't find it (sadface).

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

I was thinking of making it hahah. I actually made the basis for it but then had some trouble because of CORS. Was thinking of implementing an iframe to run the API fetch from within but that's so much trouble that I ended up giving up for now. If you find it please let me know.

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

Nooo how can you go to bed now! :c (am literally in bed lights off about to sleep) lol

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

Hello, I made !plugins@sh.itjust.works, when you join and post a comment or make a post, I will mod you.

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

Thank you too :) I bless you for your awesome share.

[-] ShittyKopper 2 points 1 year ago* (last edited 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 1 points 1 year ago

What I use I've tested all throughout many instances and it hasn't failed once yet. I didn't understand the first thing but yeah I might go with your suggestion Anyway at least to try it because it seems a tiny bit better practice.

this post was submitted on 12 Jun 2023
121 points (100.0% liked)

sh.itjust.works Main Community

7703 readers
7 users here now

Home of the sh.itjust.works instance.

Matrix

founded 1 year ago
MODERATORS