[userscript] (grease/violent/tamper) *monkey script to reformat Lemmy's look and feel to old.reddit with RES

3 years ago by mershed_perderders to c/plugins

userscript called "old.reddit" found here: https://github.com/soundjester/lemmy_monkey

(recently updated for Lemmy v0.18)
original thread link here
This is primarily for desktop clients. At the moment, formatting get a little crazy below 1280 px wide. There are ways to address this, but I have not at this time.
script will be updated as suggested
- significant changes have been made to address alignment, spacing, and other format issues. v1.1 will be where I stop for a while.
there are two script versions: old.reddit and old.reddit.compact. The primary difference is that the "compact" version greatly reduces thumbnail size and padding space.
notice: current script unblurs NSFW

(linked thumbnail shows old.reddit.compact version of the script)

Screenshot of old.reddit script results:

I don't want to pat myself on the back TOO hard, but I just browsed through 44 pages of content and it was SO NICE and easy on the eyes.

save

path: 0 140999, hotness: undefined, score: 6, children: 17

darkwing_duck 5 points 3 years ago

The widescreen really makes a difference.

save

path: 0 140999 141126, hotness: undefined, score: 5, children: 5

god 3 points 3 years ago

modded you

save

path: 0 140999 141126 141767, hotness: undefined, score: 3, children: 4

darkwing_duck 3 points 3 years ago

Nice, thanks. Not sure I'll want to stay a mod if this picks up however :D

save

path: 0 140999 141126 141767 141957, hotness: undefined, score: 3, children: 3

god 3 points 3 years ago

lol why not?

and leaving is ez, there's a "leave mod team" button on the sidebar below the community name

save

path: 0 140999 141126 141767 141957 142044, hotness: undefined, score: 3, children: 2

god 3 points 3 years ago

dude.... the screenshots don't do it justice, it's a beautiful thing. :) the experience is much better than i imagined.

save

path: 0 140999 141746, hotness: undefined, score: 3, children: 1

mershed_perderders 3 points 3 years ago

nice job team! @darkwing_duck@sh.itjust.works

save

path: 0 140999 141746 141965, hotness: undefined, score: 3, children: 0

starrox 2 points 3 years ago

Nah man you can pat yourself. My 4k resolution is finally utilized and I am very happy with how almost everything looks.

Some community headers get scaled pretty wonky, for example in https://sh.itjust.works/c/mildlyinfuriating@lemmy.world but thats a small price to pay for more visual clarity overall.

Thank you for the great work!

save

path: 0 140999 207053, hotness: undefined, score: 2, children: 7

mershed_perderders 2 points 3 years ago

I added a line to restrict the banner width to a lemmy-native 730px - this should keep banner images looking as intended... Check out the update and see if that fixes the issue. (link for good order: https://github.com/soundjester/lemmy_monkey)

save

path: 0 140999 207053 209952, hotness: undefined, score: 2, children: 6

starrox 1 point 3 years ago

Wow that was fast! Although I'm not 100% sure its better (for high-res at least).

Here's how it looks for me on a 3840x2160 resolution and 110% zoom:

But I think I understand the technical reasons beyond your change. It should be universally applicable and not just on 4k res.

I think it still would look best if the banner is spanning the whole top, maybe up to the community-sidebar on the right (1) or even beyond that (2). I tried to highlight 1 & 2 in this poor greenshot cap :)

Anyway, thanks for your great work!!

save

path: 0 140999 207053 209952 210574, hotness: undefined, score: 1, children: 5

gandalf_der_12te 2 points 3 years ago

I think having a slim banner is better, because it takes away less precious space on smaller screens. Remember that not everyone has huge monitors, many use web browsers on laptops and the like.

save

path: 0 140999 207053 209952 210574 230238, hotness: undefined, score: 2, children: 0

mershed_perderders 2 points 3 years ago

I absolutely agree that a wider, somewhat shorter banner across the top would be best. My current logic is that most mods do not have this userscript and rely on the limits set by the default stylesheet. So they upload images optimized to fill a 730 x 240 space.

The line that controls this in the script is line 75: GM_addStyle(".position-relative.mb-2 { max-width: 730px; }");

if you take that out and replace it with: GM_addStyle(".img-fluid { height: 180px; }"); you'll have something closer to what you want. It'll still look strange tho (IMO)

^^ do not do this ^^ I was wrong

save

path: 0 140999 207053 209952 210574 211189, hotness: undefined, score: 2, children: 3

god 1 point 3 years ago

all throughout doing all of what I was doing, I forgot to test your awesome script??? lmao im a retard, doing it now.

save

path: 0 140999 141475, hotness: undefined, score: 1, children: 0

AnAverageSnoot 4 points 3 years ago

This is amazing! I think everyone needs to install this. Thank you!

save

path: 0 141886, hotness: undefined, score: 4, children: 0

starrox 3 points 3 years ago

it's great!

save

path: 0 176491, hotness: undefined, score: 3, children: 2

mershed_perderders 2 points 3 years ago

out of curiosity, which version did you go for - the one with the larger thumbnails or the compact version?

save

path: 0 176491 177081, hotness: undefined, score: 2, children: 1

starrox 2 points 3 years ago

Compact version! Liking it very much :)

save

path: 0 176491 177081 177866, hotness: undefined, score: 2, children: 0

liberal_malcontent 3 points 3 years ago

Oh my gosh this is amazing. Thank you for this.

save

path: 0 213393, hotness: undefined, score: 3, children: 0

god 3 points 3 years ago

i pinned a guide on how to install grease tamper etc here: https://sh.itjust.works/post/71088 maybe you can help augment it if you want. i'll add violentmonkey link.

hopefully this removes the need of clarifying how to install userscripts any time we make an update or post.

save

path: 0 140940, hotness: undefined, score: 3, children: 2

mershed_perderders 2 points 3 years ago

looks good!

save

path: 0 140940 140941, hotness: undefined, score: 2, children: 1

god 2 points 3 years ago

made a promo post: https://sh.itjust.works/post/71442

save

path: 0 140940 140941 140942, hotness: undefined, score: 2, children: 0

Whooping_Seal 3 points 3 years ago

If you are using greasemonkey, I suggest appending #.user.js to the end of the github raw url and then reloading the page, this should allow the css to be installed by greasemonkey and automatically updated.

save

path: 0 196005, hotness: undefined, score: 3, children: 3

mershed_perderders 2 points 3 years ago

Ooh, pro tip! I'll do that

save

path: 0 196005 196291, hotness: undefined, score: 2, children: 2

Whooping_Seal 2 points 3 years ago

If you are changing the actual file name in the github repo remove the "#"

https://raw.githubusercontent.com/...

Would become

https://raw.githubusercontent.com/...

The # is just to append it in the url bar to allow auto installing in greasemonkey. I'm not sure if it's the same in tampermonkey though.

save

path: 0 196005 196291 196376, hotness: undefined, score: 2, children: 1

mershed_perderders 2 points 3 years ago

Yup, got it. Thanks for the pointer!

save

path: 0 196005 196291 196376 196544, hotness: undefined, score: 2, children: 0

denemdenem 2 points 3 years ago

It looks really cool but the side margins are waaay too small for my taste. I tried putting some little 1rem margins back in the container css but that gave a bad bottom scrollbar (which is the most annoying on the communities list). It's getting late and there is work tomorrow but I might look into it more later.

save

path: 0 144699, hotness: undefined, score: 2, children: 3

mershed_perderders 3 points 3 years ago

I believe I've remedied this issue, if you want to take another look at it. link to script here: https://github.com/soundjester/lemmy_monkey

save

path: 0 144699 152561, hotness: undefined, score: 3, children: 1

denemdenem 1 point 3 years ago

Wow, this is it! Thanks for looking into my problem!

I just really don't like when content "hugs" the edge of the monitor.

save

path: 0 144699 152561 159366, hotness: undefined, score: 1, children: 0

mershed_perderders 2 points 3 years ago

understandable. I like things really compact with minimal open spacing, but that's def not for everyone.

save

path: 0 144699 145169, hotness: undefined, score: 2, children: 0

dimspace 2 points 3 years ago

nice job so far.

Communities page (both list and search) need some margins.

save

path: 0 142388, hotness: undefined, score: 2, children: 2

mershed_perderders 3 points 3 years ago

Issue (hopefully) resolved. v0.8 available on github: https://github.com/...

save

path: 0 142388 143212, hotness: undefined, score: 3, children: 0

mershed_perderders 2 points 3 years ago

yup. I see the problem.

save

path: 0 142388 142448, hotness: undefined, score: 2, children: 0

god 2 points 3 years ago

modded

thanks for formatting like this, good style reference.

save

path: 0 203316, hotness: undefined, score: 2, children: 2

mershed_perderders 0 points 3 years ago

hopefully it will help with searching in the future

save

path: 0 203316 203317, hotness: undefined, score: 0, children: 1

Avian_Carrier 2 points 3 years ago

Bro you got modded by fucking God himself :O

save

path: 0 203316 203317 203318, hotness: undefined, score: 2, children: 0

god 1 point 3 years ago

BTW, I love your themes but I haven't been using them cuz I have a very wide screen, it's like 80cm ez, and the margins are necessary lol, maybe i'll add some surround margins to the compact theme to create a version that works 4 me.

save

path: 0 422310, hotness: undefined, score: 1, children: 6

mershed_perderders 1 point 3 years ago

how big we talking in pixels? I can add some more @media tags (probably)

save

path: 0 422310 422366, hotness: undefined, score: 1, children: 5

god 1 point 3 years ago

3440px wide

::: spoiler screenshots

save

path: 0 422310 422366 422393, hotness: undefined, score: 1, children: 3

mershed_perderders 2 points 3 years ago

dats beeeg. ok thx

save

path: 0 422310 422366 422393 422406, hotness: undefined, score: 2, children: 0

mershed_perderders 2 points 3 years ago

When you get a free moment, check out one of the script updates here: https://github.com/....

I've cleaned up a lot of things and added a big-screen handler around line 120. Perhaps you can experiment with the width as you like and let me know what works.

save

path: 0 422310 422366 422393 424590, hotness: undefined, score: 2, children: 1

god 1 point 3 years ago

😍🥰

save

path: 0 422310 422366 422393 424590 425542, hotness: undefined, score: 1, children: 0

god 1 point 3 years ago

save

path: 0 422310 422366 422409, hotness: undefined, score: 1, children: 0

NoisyFlake 1 point 3 years ago

Awesome work! Would it be possible to add the "expand image/video/text" button from RES? Preferably with the option to increase/decrease the size of images by dragging with the mouse.

I'm talking about these: https://imgur.com/a/1yH5FTN

That would perfect my experience!

save

path: 0 329978, hotness: undefined, score: 1, children: 1

mershed_perderders 3 points 3 years ago

Here's a userscript that auto-expands images: https://sh.itjust.works/post/164735 it's nice because it keeps the scripts a little more single-purpose so that if one malfunctions, the other stays working. Incorporating all of the things would be perfect for a plug-in, which is being discussed.

save

path: 0 329978 329979, hotness: undefined, score: 3, children: 0

0xCBE 1 point 3 years ago

great! Have you consider packing this up as a full theme for Lemmy?

save

path: 0 177134, hotness: undefined, score: 1, children: 2

mershed_perderders 1 point 3 years ago

yeah, i keep trying to look at the bootstrap themes but it just isn't super clear how I would edit it to be color agnostic. Like, hopefully this script works with whatever color theming you choose, it just changes the layout.

save

path: 0 177134 177208, hotness: undefined, score: 1, children: 1

0xCBE 1 point 3 years ago

Maybe it's enough to make a pull request to the original CSS files here? I would guess the Lemmy devs would rather focus more on the backend right now

save

path: 0 177134 177208 212526, hotness: undefined, score: 1, children: 0