bipface
12/07/16 01:24PM
My R34 userscript
_____________________________________________________
Download here : github.com/bipface/usersc...-page-adjustments.user.js
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Some time ago I whipped up a userscript to improve the site layout, so I thought I'd share it here.
(google "userscript" if you're not familiar with the concept)

Video: webmshare.com/AvXvy
Screenshot: i.imgur.com/WvIWkFg.png

It probably only works in Firefox, and it's not well tested in any case, but some of you might be able to make use of it.

More screens:
i.imgur.com/1AZwc80.png
j61.imgup.net/ScreenShot5ff2.png
d27.imgup.net/ScreenShot586b.png
z12.imgup.net/ScreenShot52b2.png

-------------------------------------------------------

[edit:]
By the way, if any of you are just after a simple dark theme for the whole site, there's a very easy way to do it. Create a new userstyle and add these rules:

@-moz-document domain("rule34.xxx") {
html {filter: invert(100%) hue-rotate(180deg); background-color: #182618;}
img {filter: invert(100%) hue-rotate(180deg);}
}
TentacleMonster
12/07/16 01:27PM
You know.. A dark theme would be nice.
SolemnTagger
12/07/16 02:07PM
Uhhhh...
Damn I like the layout...the darkness of it really makes my eyes happy LOL.

But how do I edit tags or comment with this script installed? Doesn't seem to be possible. Are you thinking of adding those features back in at any time?

My suggestion would be to put the edit and comment buttons on the left bar somewhere...there's plenty of room still on that thing. Then when you click them they bring up a semi-transparent overlay over the center image.

So yeah, I like it, but I won't be using it if I can't edit or comment :/

EDIT: Also it doesn't really play nice with really wide images like this one: post #2217459...it kind of pushes the toolbars off the screen.
bipface
12/07/16 02:30PM
Lemons22 said:
But how do I edit tags or comment with this script installed? Doesn't seem to be possible. Are you thinking of adding those features back in at any time?


There should be two buttons "Edit | Respond" under the image (same as in the original layout). If they're not visible, something has gone wrong.

Lemons22 said:
Also it doesn't really play nice with really wide images like this one


It intentionally pushes the sidebars offscreen to maximise available space for the image, but you should be able to scroll horizontally to access the tag list (as in the demonstration video).
SolemnTagger
12/07/16 02:44PM
bipface said:
There should be two buttons "Edit | Respond" under the image (same as in the original layout). If they're not visible, something has gone wrong.

Ah ok...it seems another script I was running was interfering with it. They're back now...still...the editing layout seems really unpolished and ugly compared to the rest of the script. Like it's really jarring that everything is in the center then when I click edit suddenly it's left-aligned.

bipface said:
It intentionally pushes the sidebars offscreen to maximise available space for the image, but you should be able to scroll horizontally to access the tag list (as in the demonstration video).

Not the biggest fan of that but alright.
bipface
12/07/16 03:06PM
Lemons22 said:
the editing layout seems really unpolished and ugly compared to the rest of the script. Like it's really jarring that everything is in the center then when I click edit suddenly it's left-aligned.


You're right; I don't edit tags very often, so the editing controls are all default. However, if you have some ideas of how to enhance them, let me know — it might be as simple as adding a few style rules.
SolemnTagger
12/08/16 12:14AM
bipface said:
You're right; I don't edit tags very often, so the editing controls are all default. However, if you have some ideas of how to enhance them, let me know — it might be as simple as adding a few style rules.

Well I kind of already gave a suggestion before...that would be my ultimate dream.

However, if that's too much perhaps just center-align the editing section...get rid of title, parent, next post, previous post...I've been tag editing for years and never found a use for any of those. Lastly, I'd expand the source box to match the width of the tags box...because sources are often pretty long urls, and just cause visually I think it would look nice. I would also wrangle in the "my tags" section just a bit. Right now it's spanning the entire page.
bipface
12/08/16 09:29AM
Lemons22 said:
. . .


You've got some good insight; I definitely like the transparent-overlay idea after testing it out.

Try this: pastebin.com/7ChB5ysG

Ideally I think the editing controls should be integrated with the tag list on the right. However, that could take quite some time and effort to implement; maybe one day…
SolemnTagger
12/09/16 06:03AM
bipface said:
You've got some good insight; I definitely like the transparent-overlay idea after testing it out.

Try this: pastebin.com/7ChB5ysG

Ideally I think the editing controls should be integrated with the tag list on the right. However, that could take quite some time and effort to implement; maybe one day…

Wow that was quick. I especially like the edit button next to the "tags" header.

However, at least when I used it, it was still spanning the entire screen and pushing the other toolbars off the page. I managed to mess with the CSS to get it to look like this:

f88i.imgup.net/EditWindow9ee3.jpg

The one thing I couldn't figure out is how to align it with bottom of the screen? I think it would be best placed there because...idk I just feel like most of the action in an image is usually towards the top so that area should be most visible.

And if it would be possible to put the save changes/cancel buttons to the right of the ratings? Just trying to think of ways to make the box as compact as possible.
bipface
12/09/16 10:11AM
Lemons22 said:
Wow that was quick. I especially like the edit button next to the "tags" header.

However, at least when I used it, it was still spanning the entire screen and pushing the other toolbars off the page. I managed to mess with the CSS to get it to look like this:

f88i.imgup.net/EditWindow9ee3.jpg

The one thing I couldn't figure out is how to align it with bottom of the screen? I think it would be best placed there because...idk I just feel like most of the action in an image is usually towards the top so that area should be most visible.

And if it would be possible to put the save changes/cancel buttons to the right of the ratings? Just trying to think of ways to make the box as compact as possible.


Never underestimate CSS :P
pastebin.com/x0EZ1yH2

Let me know if anything breaks now; I didn't test it very thoroughly.

Note that the controls will only be on the bottom when the image is in 'fit-to-window' mode (the default), otherwise they'll go offscreen in an annoying way.
room
12/10/16 05:28AM
anyway to have userscripts on android? i've tried a lot of things but the greasemonkey app is obnoxious.
bipface
12/10/16 06:27AM
room said:
anyway to have userscripts on android? i've tried a lot of things but the greasemonkey app is obnoxious.


You could try this: addons.mozilla.org/en-US/...runified-script-injector/

In any case, my script has never been tested on Android, and it definitely won't work with the mobile site layout. If you use the desktop layout, there is a chance that it will work with Android.

If there's problems, first step would be working out how to open the browser console (not the 'web console'). Errors appear there.
1


Reply | Forum Index