Workshop: making the fimfic dashboard usable again

Heads up: computer talk ahead. Seriously. I made it somewhat accessible, but it still requires quite a bit of web knowledge.

So, you all know the Groups/dashboard page, right? Do you like how absurdly huge the margins are (though this one is true for the whole site), or certain users spamming threads, or groups that you just want to be in for the story notifications, but totally don't care about the forum?

Sure, you can uncheck notifications, but these threads will still show up in the Dashboard list. And that's annoying. Because I really don't care that much about what's going on in the Shipping group, for example, and they distract from the actually interesting info: groups that you're actually interested in.

Enough normal talk, time for a workshop.

Requirements:
* Greasemonkey
* Stylish
Knowing a thing or two about CSS and jQuery will also help you understand this workshop much better.

Step 1: Hide groups you don't want
This is where we need Greasemonkey. You want to go to the dashboard page, and click "New user script". You'll get a box with some stuff to fill in; name and description are self-explanatory, namespace cannot be left empty, I just put a space in there.
Depending on whether you used GM to make a script before, it might ask you to set your editor. I'm not helping you with this, so without further ado, here's the script:

// ==UserScript==
// @name fimfiction hide uninteresting groups
// @namespace
// @description hides uninteresting group threads from the dashboard
// @include http://www.fimfiction.net/dashboard
// @include https://www.fimfiction.net/dashboard
// @version 1
// @grant none
// @require http://localhost/js/jquery.js
// ==/UserScript==
$(document).ready(function(){
//list comma separated groupnums in between the square brackets here
$.each([3,1804], function(index, groupNum){
$("td>a[href^=/group/"+groupNum+"/]").parent().parent().hide();
});
});

UPDATE 2013-04-07: I noticed some weird behaviour with the old one. A better (?) way to add the script is by copypasting the above (and modify it as below) as something.user.js, then drag that file onto your browser. Then if you need to add groups, just edit it via the GUI. Also added it to run on the https version of the site. Also fixed some other small errors.

Now this wouldn't be a workshop if I didn't go explaining what happens above (feel free to skip it though, you'll probably get an error about a jquery file missing).

Notice the @grant none line in there. This is required since GM 1.0 or something, and otherwise it'll nag you constantly. I don't know if you can put other things there, but this worked for me.

Now the important line is the @require one. This should point to a jquery javascript file. Anyone with any kind of web knowledge should know where to find one, and how to link to one. If you view the source code for this webpage, you'll find a line that looks like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
somewhere in the header section. I guess that one would work too. I wouldn't be surprised if file:/// would work as well. I just run a local webserver on my PC anyway, so I happened to have a jquery there anyway as it is needed on other parts of my website anyway*.

Next you'll have to find out group id's. This is pretty easy. In the example, it are groups 3 and 1804, which are Shipping and Mentally Deficient Authors, respectively.

If everything goes well, when you have saved the script, you shouldn't see threads from those groups anymore. I'm not gonna explain how I got the selector, again, this is a workshop, not a copypaste session, and if you're still reading you can probably tell me what it does anyway.

Step 2: get rid of those awful paddings
This is actually the easiest step. You can let the following snippet run on just the dashboard page, though I myself have just one CSS which has things for the whole website (if you're interested in how I experience fimfiction, tell so in the comments, and I might just post a few random screens). Anyway, once you've made a new style, or opened your already existing one, you want to paste the following thing in it:

/******DASHBOARD HELL*/
div.thread_list>table>tbody>tr>td>img.avatar{
width:32px !important;
height:32px !important;
}
div.thread_list>table>tbody>tr>td{
padding:1px 0 !important;
line-height:1.2em !important;
}

What this does is simple:
1) avatars are now only 32x32 instead of 64x64
2) paddings are very small, and there is less whitespace between lines.
You shouldn't even have to refresh the page if you do it right, results should be instant. Notice that suddenly, the thread list takes up like two to three times as less screenspace. If you apply the 'more info on the same amount of screenspace' (eg. killing paddings or hiding useless things), you can really put much more info on your screen, meaning less scrolling. It might also make people realize that you don't need to run your browser maximed; about 1000x850 is more then enough if you remove most of the design stuff.

Step 3: Enjoy
If everything went well, you should now have something that looks like this:

yeah I could probably kill some vertical whitespace of that "Latest Group Threads" header too. But eh, I got lazy, and it's still infinitely better than it was before

Ohyeah, just about everything above will probably break on the next site update.

* don't bother trying to find that website; it's not reachable from the outside world. Reason: while I don't write terribly dirty code, it's probably not 100% safe either. Though if anyone is interested in what kind of stuff is on there, I wouldn't mind making a few blogs about it.

tldr; padding sucks and fimfic's css sucks even harder.

Comments

[equestrian.sen]

Wow, I didn't realize how easy and useful greasemonkey scripts could be. Time to fix something that's been bugging me for a while...

// ==UserScript==
// @name fimfiction expand all hidden chapters
// @namespace
// @description
// @include http://www.fimfiction.net/*
// @include https://www.fimfiction.net/*
// @version 1
// @grant none
// ==/UserScript==
function addJQuery(callback) {
var script = document.createElement("script");
script.setAttribute("src", "http://localhost/js/jquery.js");
script.addEventListener('load', function() {
var script = document.createElement("script");
script.textContent = "window.jQ=jQuery.noConflict(true);(" + callback.toString() + ")();";
document.body.appendChild(script);
}, false);
document.body.appendChild(script);
}

function main() {
$(".expand_chapters").trigger("click");
}

addJQuery(main);

The addJQuery thing is the first workaround I found for chrome not allowing the @require tag.

[barbeque]

1016718
You can easily solve this by using only CSS instead:

ul.chapters div.chapter_container.chapter_expander{
display:none;
}
ul.chapters div.chapter_container.chapter_container_hidden{
display:block !important;
}

The top one hides the "xx (read)? chapter hidden" box, the second one unhides all hidden boxes. Your solution isn't unelegant (and will probably still work on the next site update), but I just prefer to do things with CSS and only resort to jQuery if absolutely necessary.
I have a similar solution for the Feed thing, where if I run it in compact mode, the "blabla group had new stories added to it" is the only thing always expanded. I should probably post about that sometime; I can't be the only one annoyed with it.