☰

VisualCrumbs (Stack Visuals)

Customizes StackExchange to your liking.

  1. // ==UserScript==
  2. // @name         VisualCrumbs (Stack Visuals)
  3. // @namespace    https://github.com/GrumpyCrouton/Userscripts
  4. // @version      3.0
  5. // @description  Customizes StackExchange to your liking.
  6. // @author       GrumpyCrouton
  7. // @match          *://*.stackoverflow.com/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     var $ = window.jQuery;
  15.  
  16.     /***** GLOBAL SITE CHANGES *****/
  17.     var header_search = $('header.top-bar form#search');
  18.     var main_container = $('body div.container');
  19.     var main_content = main_container.find('div#content');
  20.  
  21.     header_search.css({
  22.         'max-width': 'none'
  23.     });
  24.     $('header ol.-secondary').css('padding-left', '0px');
  25.  
  26.     main_container.append('<div id="visualcrumbs-sidebar" class="left-sidebar"></div>').css({
  27.         'max-width': 'none',
  28.         'background-color': '#f4fff3'
  29.     });
  30.  
  31.     main_content.css({
  32.         'max-width': 'none',
  33.         'border-right': '1px solid #d6d9dc'
  34.     });
  35.  
  36.     /***** LOGOUT BUTTON IN MENU *****/
  37.     var logout_button = '\
  38.          <li class="-item">\
  39. 	         <a href="https://stackoverflow.com/users/logout" class="-link" title="Logout">\
  40. 		         <svg aria-hidden="true" class="svg-icon iconStackExchange" width="18" height="18" viewBox="0 0 21 21"><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg>\
  41. 	         </a>\
  42.          </li>\
  43.     ';
  44.     $('li.js-topbar-dialog-corral').before(logout_button);
  45.     //https://meta.stackoverflow.com/questions/372291/can-we-make-the-log-out-link-more-discoverable
  46.  
  47.     /***** QUESTIONS PAGE CHANGES *****/
  48.     var questions_content = main_container.find('div#questions');
  49.     questions_content.find('br.cbt').remove();
  50.     questions_content.css({
  51.         'border-right': '1px solid #d6d9dc',
  52.         'margin-bottom': '0px'
  53.     });
  54.  
  55.     /***** HIDE JOBS STUFF *****/
  56.     main_content.find('div#hireme').remove();
  57.     main_container.find('li.p6').remove();
  58.  
  59.     /***** HIDE ADS *****/
  60.     main_content.find('div#dfp-tsb').remove();
  61.  
  62.     /***** MAINBAR *****/
  63.     var filterbuttons = $('div.grid.tabs-filter.s-btn-group.tt-capitalize');
  64.     var headline = $('h1.grid--cell.fl1.fs-headline1,h1.grid--cell.fl1.fs-headline1.mb24');
  65.     $('div.pl8.aside-cta.grid--cell').before(filterbuttons);
  66.     headline.removeClass('mb24').css("margin-bottom", "0px");
  67.  
  68.     var questions = $('div.grid--cell.fl1.fs-body3');
  69.     var questionCount = questions.length == 1 ? questions.html().trim().split(" ")[0] : "";
  70.     headline.html(headline.html() + " <span style='font-size:14px'>" + questionCount + "</span>");
  71.     questions.remove();
  72.     $('div#mainbar div[class="mb24"]').remove();
  73.  
  74.     filterbuttons.children('a').css("line-height", "20px");
  75.     $('#question-mini-list').css({
  76.         'border-right': '1px solid #d6d9dc',
  77.         'border-bottom': '1px solid #d6d9dc'
  78.     });
  79.  
  80.  
  81.     /***** RIGHT SIDEBAR *****/
  82.     $(function() {
  83.  
  84.         var widget_array = {
  85.             'RELATED_TAGS' : {
  86.                 'old_find' : 'div#related-tags, .module.js-gps-related-tags',
  87.                 'icon_path' : 'M9 1a8 8 0 1 0 0 16A8 8 0 0 0 9 1zm.81 12.13c-.02.71-.55 1.15-1.24 1.13-.66-.02-1.17-.49-1.15-1.2.02-.72.56-1.18 1.22-1.16.7.03 1.2.51 1.17 1.23zM11.77 8a5.8 5.8 0 0 1-1.02.91l-.53.37c-.26.2-.42.43-.5.69a4 4 0 0 0-.09.75c0 .05-.03.16-.18.16H7.88c-.16 0-.18-.1-.18-.15.03-.66.12-1.21.4-1.66a5.29 5.29 0 0 1 1.43-1.22c.16-.12.28-.25.38-.39a1.34 1.34 0 0 0 .02-1.71c-.24-.31-.51-.46-1.03-.46-.51 0-.8.26-1.02.6-.21.33-.18.73-.18 1.1H5.75c0-1.38.35-2.25 1.1-2.76.52-.35 1.17-.5 1.93-.5 1 0 1.79.18 2.49.71.64.5.98 1.18.98 2.12 0 .57-.2 1.05-.48 1.44z',
  88.                 'inner_id' : 'related-tags'
  89.             },
  90.             'HOT_NETWORK_QUESTIONS' : {
  91.                 'old_find' : 'div#hot-network-questions',
  92.                 'icon_path' : 'M7.48.01c.87 2.4.44 3.74-.57 4.77-1.06 1.16-2.76 2.02-3.93 3.7C1.4 10.76 1.13 15.72 6.8 17c-2.38-1.28-2.9-5-.32-7.3-.66 2.24.57 3.67 2.1 3.16 1.5-.52 2.5.58 2.46 1.84-.02.86-.33 1.6-1.22 2A6.17 6.17 0 0 0 15 10.56c0-3.14-2.74-3.56-1.36-6.2-1.64.14-2.2 1.24-2.04 3.03.1 1.2-1.11 2-2.02 1.47-.73-.45-.72-1.31-.07-1.96 1.36-1.36 1.9-4.52-2.03-6.88L7.45 0l.03.01z',
  93.                 'inner_id' : 'hot-network-questions'
  94.             },
  95.             'RELATED_QUESTIONS' : {
  96.                 'old_find' : 'div.sidebar-related',
  97.                 'icon_path' : 'M9 1a8 8 0 1 0 0 16A8 8 0 0 0 9 1zm.81 12.13c-.02.71-.55 1.15-1.24 1.13-.66-.02-1.17-.49-1.15-1.2.02-.72.56-1.18 1.22-1.16.7.03 1.2.51 1.17 1.23zM11.77 8a5.8 5.8 0 0 1-1.02.91l-.53.37c-.26.2-.42.43-.5.69a4 4 0 0 0-.09.75c0 .05-.03.16-.18.16H7.88c-.16 0-.18-.1-.18-.15.03-.66.12-1.21.4-1.66a5.29 5.29 0 0 1 1.43-1.22c.16-.12.28-.25.38-.39a1.34 1.34 0 0 0 .02-1.71c-.24-.31-.51-.46-1.03-.46-.51 0-.8.26-1.02.6-.21.33-.18.73-.18 1.1H5.75c0-1.38.35-2.25 1.1-2.76.52-.35 1.17-.5 1.93-.5 1 0 1.79.18 2.49.71.64.5.98 1.18.98 2.12 0 .57-.2 1.05-.48 1.44z',
  98.                 'inner_id' : 'related-questions'
  99.             },
  100.             'FREQUENTLY_ASKED_QUESTIONS' : {
  101.                 'old_find' : 'div.module h4:contains(Frequently Asked)',
  102.                 'icon_path' : 'M11 4l2.29 2.29L10.5 9l-3-3L1 12.5 2.5 14l5-5 3 3 4.21-4.29L17 10V4z',
  103.                 'inner_id' : 'frequently-asked-questions'
  104.             },
  105.             'LINKED_QUESTIONS' : {
  106.                 'old_find' : 'div.sidebar-linked',
  107.                 'icon_path' : 'M2.9 9c0-1.16.94-2.1 2.1-2.1h3V5H5a4 4 0 1 0 0 8h3v-1.9H5A2.1 2.1 0 0 1 2.9 9zM13 5h-3v1.9h3a2.1 2.1 0 1 1 0 4.2h-3V13h3a4 4 0 1 0 0-8zm-7 5h6V8H6v2z',
  108.                 'inner_id' : 'linked-questions'
  109.             },
  110.             'QUESTION_STATS' : {
  111.                 'old_find' : 'div.question-stats',
  112.                 'icon_path' : 'M3 1h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3c0-1.1.9-2 2-2zm1 8v5h2V9H4zm4-5v10h2V4H8zm4 3v7h2V7h-2z',
  113.                 'inner_id' : 'question-stats'
  114.             },
  115.             'PEOPLE_CHATTING' : {
  116.                 'old_find' : 'div#chat-feature',
  117.                 'icon_path' : 'M4 14l-3 3V3c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4zm0-8v1h10V6H4zm0-2v1h10V4H4zm0 4v1h10V8H4zm0 2v1h7v-1H4z',
  118.                 'inner_id' : 'people-chatting'
  119.             }
  120.         };
  121.  
  122.         for (var key in widget_array) {
  123.             var row = widget_array[key];
  124.  
  125.             var oldelem = main_content.find(row.old_find);
  126.             if(row.inner_id == "frequently-asked-questions" || row.inner_id == "community-bulletin") {
  127.                 oldelem = oldelem.parent();
  128.             }
  129.  
  130.             var title = row.inner_id == "people-chatting" ? $('a#h-chat-link').parent().html() : row.inner_id.replace(/-/g, ' ').replace(/\b\S/g, function(t) { return t.toUpperCase() });
  131.  
  132.             var newelem = '\
  133.                 <div class="s-sidebarwidget" style="margin-bottom:19.500px;">\
  134. 	                <div class="s-sidebarwidget--header grid">\
  135. 		                <span class="grid--cell mr4"><svg style="fill:#6a737c;" width="18" height="18" viewBox="0 0 18 18"><path d="'+ row.icon_path +'"/></svg></span>\
  136. 		                <span id="visualcrumbs-widget-title" class="grid--cell fl1">' + title + '</span>\
  137. 	                </div>\
  138. 	                <div id="visualcrumbs-'+ row.inner_id +'" class="s-sidebarwidget--content fd-column"></div>\
  139.                 </div>\
  140.             ';
  141.  
  142.             oldelem.before(newelem).children('h4, a').remove().parent();
  143.             newelem = main_content.find('div#visualcrumbs-' + row.inner_id);
  144.  
  145.             if(row.inner_id == "related-tags") {
  146.                 newelem.prepend(oldelem.children()).children().wrapAll('<div class="js-watched-tag-list grid gs4 py4 fw-wrap">').each(function() {
  147.                     $(this).toggleClass('dno js-hidden js-tag grid--cell').children().slice(1).remove();
  148.                 });
  149.             } else {
  150.                 newelem.prepend(oldelem.css('margin-bottom', '0px'));
  151.             }
  152.             newelem.find('p.label-key').css('margin-bottom', '0px');
  153.  
  154.             console.log('VisualCrumbs: Converted ' + key);
  155.  
  156.         }
  157.  
  158.      });
  159.  
  160. })();