geekhack

geekhack Community => Other Geeky Stuff => Topic started by: nuclearsandwich on Mon, 02 September 2013, 03:02:46

Title: nuclear powerpack – keyboard navigation and theme mods for geekhack
Post by: nuclearsandwich on Mon, 02 September 2013, 03:02:46
I've been lurking on geekhack for a couple of weeks and very recently created an account. Shortly after I started browsing the forum, I also started tailoring it to my viewing habits using a browser extension similar to greasemonkey / userscripts for *nix developers called w3d (https://github.com/nuclearsandwich/w3d). I also added some javascript to identify moderators and thread starters so I could visually identify them. The javascript is totally independent of the styling and can probably be used no matter what the theme is!

Now with a Nostalgia mode (https://raw.github.com/nuclearsandwich/dotw3/master/nostalgia.geekhack.org.css)!

Screenshotsssss
More

The geekhack homepage
(https://f.cloud.github.com/assets/358882/1065785/15ecf61a-139f-11e3-83a1-eba7f21060dd.png)

The forum listing
(https://f.cloud.github.com/assets/358882/1065798/8e7f0c9e-139f-11e3-96ee-469db7de3dbf.png)

The topic listing

(https://f.cloud.github.com/assets/358882/1065806/b0ee337c-139f-11e3-8152-1b702fc4b3e7.png)

The thread view (the thread starter's badge is highlighted on each post)
(https://f.cloud.github.com/assets/358882/1065828/63f10256-13a0-11e3-8909-548fda4d9ad6.png)

Starred individuals are highlit wherever they go
(https://f.cloud.github.com/assets/358882/1065836/995f2da0-13a0-11e3-8e50-909eaf041d30.png)

And if they start a thread...
(https://f.cloud.github.com/assets/358882/1065848/ce3a77f0-13a0-11e3-9fba-89a6b19dcfc4.png)

A quick and minimal Nostalgia version
[attachimg=1]

I used the Austere theme, my preferred, as the base and made the following changes:


Installation Instructions

For use with the nostalgia theme save this file (https://raw.github.com/nuclearsandwich/dotw3/master/nostalgia.geekhack.org.css) as geekhack.org.css instead of the one linked in the instructions below. The javascript file is theme independent.

Firefox on Windows Vista/7/8
More
  • Install the dotjs addon (https://addons.mozilla.org/en-US/firefox/addon/dotjs/)
  • Download the stylesheet (https://raw.github.com/nuclearsandwich/dotw3/master/geekhack.org.css) and save it to C:\Users\%username%\css\geekhack.org.css
  • Download the script (https://raw.github.com/nuclearsandwich/dotw3/master/geekhack.org.js) and save it to C:\Users\%username%\js\geekhack.org.js
  • Refresh


Firefox on Mac OS X / *nix
More
  • Install the dotjs addon (https://addons.mozilla.org/en-US/firefox/addon/dotjs/)
  • Download the stylesheet (https://raw.github.com/nuclearsandwich/dotw3/master/geekhack.org.css) and save it to $HOME/.css/geekhack.org.css
  • Download the script (https://raw.github.com/nuclearsandwich/dotw3/master/geekhack.org.js) and save it to $HOME/.js/geekhack.org.js
  • Refresh


Chrome for Mac OS X / *nix
More
  • Follow these instructions (https://github.com/nuclearsandwich/w3d) to install w3d
  • Download the stylesheet (https://raw.github.com/nuclearsandwich/dotw3/master/geekhack.org.css) and save it to $HOME/.w3/geekhack.org.css
  • Download the script (https://raw.github.com/nuclearsandwich/dotw3/master/geekhack.org.js) and save it to $HOME/.w3/geekhack.org.js
  • Run the w3d daemon using your xinitrc or just nohup w3d > /dev/null &2>1
  • Refresh


Hopes and dreams (todo list)
Title: Re: nuclear austerity – a battery powered geekhack theme and userscript
Post by: microsoft windows on Mon, 02 September 2013, 06:50:08
HOW DO YOU MAKE FORUM THEMES LIKE THIS? I'VE ALWAYS WANTED TO MAKE A HOTDOG STAND THEME FOR THE FORUM.
Title: Re: nuclear austerity – a battery powered geekhack theme and userscript
Post by: Photekq on Mon, 02 September 2013, 06:51:19
I'm not a moderator..
Title: Re: nuclear austerity – a battery powered geekhack theme and userscript
Post by: BunnyLake on Mon, 02 September 2013, 06:56:30
Quote from: Photekq on Mon, 02 September 2013, 06:51:19
I'm not a moderator..

thats to show you as a thread starter
Title: Re: nuclear austerity – a battery powered geekhack theme and userscript
Post by: vun on Mon, 02 September 2013, 06:58:48
No love for Opera :/
Title: Re: nuclear austerity – a battery powered geekhack theme and userscript
Post by: Photekq on Mon, 02 September 2013, 06:59:35
Quote from: BunnyLake on Mon, 02 September 2013, 06:56:30
Quote from: Photekq on Mon, 02 September 2013, 06:51:19
I'm not a moderator..

thats to show you as a thread starter
No, I mean in the 'moderators are highlit wherever they go' picture.

Kangaroo was the thread starter so he's highlighted red, and i'm highlighted blue.
Title: Re: nuclear austerity – a battery powered geekhack theme and userscript
Post by: vun on Mon, 02 September 2013, 07:00:27
Quote from: Photekq on Mon, 02 September 2013, 06:59:35
Quote from: BunnyLake on Mon, 02 September 2013, 06:56:30
Quote from: Photekq on Mon, 02 September 2013, 06:51:19
I'm not a moderator..

thats to show you as a thread starter
No, I mean in the 'moderators are highlit wherever they go' picture.

Kangaroo was the thread starter so he's highlighted red, and i'm highlighted blue.

Probably confused the star with mod status
Title: Re: nuclear austerity – a battery powered geekhack theme and userscript
Post by: mauri on Mon, 02 September 2013, 07:00:55
Quote from: vun on Mon, 02 September 2013, 06:58:48
No love for Opera :/

Shh they'll never have something as beautiful as we do.
Title: Re: nuclear austerity – a battery powered geekhack theme and userscript
Post by: nuclearsandwich on Mon, 02 September 2013, 11:25:54
Quote from: vun on Mon, 02 September 2013, 07:00:27
Quote from: Photekq on Mon, 02 September 2013, 06:59:35
Quote from: BunnyLake on Mon, 02 September 2013, 06:56:30
Quote from: Photekq on Mon, 02 September 2013, 06:51:19
I'm not a moderator..

thats to show you as a thread starter
No, I mean in the 'moderators are highlit wherever they go' picture.

Kangaroo was the thread starter so he's highlighted red, and i'm highlighted blue.

Probably confused the star with mod status

Not confused with mod status as much as gave up distinguishing between starred folk and mods because I didn't feel like using regular expressions. I can always go down the dark path.
Title: Re: nuclear austerity – a battery powered geekhack theme and userscript
Post by: nuclearsandwich on Mon, 02 September 2013, 11:27:07
Quote from: mauri on Mon, 02 September 2013, 07:00:55
Quote from: vun on Mon, 02 September 2013, 06:58:48
No love for Opera :/

Shh they'll never have something as beautiful as we do.

Sorry, y'all lack a thing called ecosystem. But if Opera supports greasemonkey/userscripts and userstyles this will work there too once I get these up there. Right now this is still in alpha-stages.
Title: Re: nuclear austerity – a battery powered geekhack theme and userscript
Post by: SeriouSSpotS on Mon, 02 September 2013, 11:29:33
This is really awesome, nice job
Title: Re: nuclear austerity – a battery powered geekhack theme and userscript
Post by: esoomenona on Mon, 02 September 2013, 14:10:22
Can you separate administrators from moderators by color? Admins have purple stars, so should be purple, mods have blue stars, so should be blue.

Also, possibly mark "buddies" a certain color?
Title: Re: nuclear austerity – a battery powered geekhack theme and userscript
Post by: nuclearsandwich on Mon, 02 September 2013, 18:04:33
Quote from: SeriouSSpotS on Mon, 02 September 2013, 11:29:33
This is really awesome, nice job

Thanks <3. Were you able to try it out?

Quote from: esoomenona on Mon, 02 September 2013, 14:10:22
Can you separate administrators from moderators by color? Admins have purple stars, so should be purple, mods have blue stars, so should be blue.

 I don't feel like making the JS hax check the star color, plus it looks like there's a ton of them.  I updated OP to refer to them as starred people instead of moderators. So I need to find an explanation of them in a stickied post or wiki. Or just spend enough time here that I know what they mean.

Quote from: esoomenona on Mon, 02 September 2013, 14:10:22
Also, possibly mark "buddies" a certain color?

Maybe when I get some buddies.
Title: Re: nuclear austerity – a battery powered geekhack theme and userscript
Post by: nuclearsandwich on Tue, 03 September 2013, 10:02:37
Pushed up a new version that includes really super primitive keyboard navigation. Press Tab to focus on the next post and shift+Tab to go backwards.

For all you web developers out there, it uses tabindex and focus/blur events to add navigation-focus classes to the focused post. The current version of the stylesheet adds a subtle highlight to the focused post using that class.

Next up: binding these events to j/k and scrolling to the top the focused post instead of relying on the browser to bring it on screen.
Title: Re: nuclear austerity – a battery powered geekhack theme and userscript
Post by: nuclearsandwich on Wed, 04 September 2013, 00:45:39
Behold keyboard navigation on the keyboard forum!

Navigate downward with j, s, or tab. Head back up with k, w, or shift+tab

[attachimg=1]

The animations are a bit wonky (don't work) in Chrome on OS X. It may be a jquery bug specific to the version used by w3d, it may be an cross-browser incompatibility in jquery's animate() function. I'm not ninja enough to know.
Title: Re: nuclear austerity – a battery powered geekhack theme and userscript
Post by: sth on Wed, 04 September 2013, 00:46:54
looks good... now we need a nostalgia version :)
Title: Re: nuclear austerity – a battery powered geekhack theme and userscript
Post by: nuclearsandwich on Wed, 04 September 2013, 00:52:04
Quote from: sth on Wed, 04 September 2013, 00:46:54
looks good... now we need a nostalgia version :)

The javascript is theme independent and will remain so. I'm going to take a look at Nostalgia right meow but all you need to do is write a CSS rule for #forumposts .js-navigation-focus to make your own.
Title: Re: nuclear powerpack – keyboard navigation and theme mods for geekhack
Post by: nuclearsandwich on Wed, 04 September 2013, 02:01:08
Quote from: sth on Wed, 04 September 2013, 00:46:54
looks good... now we need a nostalgia version :)

Happy birthday sth! Check OP for Nostalgia instructions. Spoiler: Save this stylesheet (https://raw.github.com/nuclearsandwich/dotw3/master/nostalgia.geekhack.org.css) in place of the one listed in the instructions.

[attachimg=1]
Title: Re: nuclear powerpack – keyboard navigation and theme mods for geekhack
Post by: nuclearsandwich on Thu, 05 September 2013, 18:54:48
When following a post-specific link (such as last post) the selected post is now focused instead of the first post.