Code Monkey home page Code Monkey logo

blackskorpio / qx-hexagon Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 0.0 26.32 MB

QX HexaGon is a marriage between a @greasemonkey UserScript and a @openstyles UserStyle that gives qruiser.com a new cleaner layout and adding some useful keyboard navigation shortcuts together with some usability tweaks to make the whole experience more enjoyable.

License: GNU General Public License v3.0

CSS 75.07% JavaScript 24.93%
css3 svg svg-icons svg-images css-grid css stylish stylish-theme userscript userstyle

qx-hexagon's Introduction

QX HexaGon

QX HexaGon is a marrige between a @greasemonkey UserScript and a @openstyles UserStyle that gives qruiser.com a new cleaner layout and adding some usefull keyboard navigation shortcuts together with some usability tweaks to make the whole experience more enjoyable.

QX HexaGon QX HexaGon Clean QX HexaGon Companion
Install directly with Stylus Install directly with Stylus Install directly with Greasemokey
T h e B l e e d i n g E d g e
Install directly with Stylus Install directly with Stylus Install directly with Greasemokey

You need a Userstyle Manager to use these, I recommend stylus as it supports UserCSS, which allows for auto-updating of styles.

QX HexaGon logo

QX HexaGon UserStyle

A modernized theme for qruiser.com that rewrites the new layout using flexbox and grid containers.

Some style highlight of QX HexaGon

  • Merged Logged in favorites and Favorites widget
  • Sticky sidebar sections
    • Left sidebar
      • Mood/Status widget
      • Favorites widget
      • Messages widget
      • Your stuff widget
    • Right sidebar
      • Latest logged in members widget
  • Animated notifications
  • SVG icons instead of the old raster images

You can have a closer look at how it looks here.

Install directly with Stylus

QX HexaGon Companion UserScript

Fixes that goes hand in hand with the QX Hexagon userstyle.

The UserScript is required to be able to enjoy the above UserStyle since here we are cleaning up a lot of the annoyencies that comes with the original layout and adding a lot of goodies!

FIXES

  • Removing the .odd and .even classes in favor for the .qxh-flex-item and .qxh-grid-item.
  • Removing a lot of redundant and obsolete elements that is no longer neccesary now when using display grid and flexbox.
  • Replacing all .png images with more modern .svg equilaments, these icons is even adapting there colors to the current color scheme used in profiles and clubs.

Additions

  • Adding browser titles to all pages for easy bookmarking and cleaner browser history.
  • Adding source and template classes to the body tag. I.e: .qxh-source-clubs and .qxh-template-clubs-scribble.
  • Adding keyboard navigation to all important pages:

Keyboard navigation

  • Basic keys
    • H - Takes you directly to your own profilepage
    • F - Takes you to your current online favorites, or if non of them are online at the moment, it takes you to the all favorites page.
    • V - Takes you to the Your last visitors page
    • C - Takes you to the updated clubs page, if any, if no clubs is found updated it takes you the Your clubs page.
    • X - Clear all notifications/mark all messages as read.

  • Scroll keys
    • Q - Back to the top
      • W - Scroll upwards slowly
      • A - Scroll up one "page"/One viewport height
    • E - Down to the end
      • S - Scroll downwards slowly
      • D - Scroll down one "page"/One viewport height

  • Sections Keyboard shortcuts
    • 1 - Members Section
    • 2 - Clubs Section
    • 3 - Pictures Section
    • 4 - Movies Section
    • 5 - Blogs Section
    • 6 - Forums Section
    • 7 - Conversations Section
    • 8 - Info Section
    • 9 - Logout

Install HexaGon

QX HexaGon QX HexaGon Clean QX HexaGon Companion
Install directly with Stylus Install directly with Stylus Install directly with Greasemokey

FAQ

  • Question: Is the style available on userstyles.org?
    • Answer: No, the style there is just a placeholder pointing here.
  • Question: What is a UserStyle manager?
    • Answer: Simply said: it's a browser extension that will help you keep your custom styles in a neat order.
  • Question: Is there a special manager that you can recomend?
  • Question: Do I need the QX HexaGon Companion UserScript?
    • Answer: Yes the companion script is neccesary since it does a lot of the heavy lifting for the style.
  • Question: Is there any UserScript manager that you can recomend?

qx-hexagon's People

Contributors

blackskorpio avatar

Stargazers

 avatar

Watchers

 avatar  avatar

qx-hexagon's Issues

Browser title is missing from the polls

We need to look at the browser title attribute for show poll comments (/showpolls.php?id=1301359&showcomments=) and the polls title is missing in the brwoser title at /forum/polls/?pollid=18838

Remove obsolete JS and CSS

There is some JS and CSS that is applied to the not logged in index atm, that we need to keep an eye on when the beta is going final

Remove #whole when beta period is over

Remove #whole from the

 onReady(function() {
 	setVisible('.page-container, #whole, #satellite, body[onload="timer()"] div[style="margin: 10px"]', true),
 	setVisible('#qxh_loading', false),
 	$(document.body).removeClass('qxh-loading');
 });

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.