• Stars
    star
    227
  • Rank 175,900 (Top 4 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 4 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Revert GitHub's UI back to its classic look (before the June 23, 2020 update that has a flat, rounded and more whitespaced design).

Old School GitHub (Chrome / Firefox extension / User Style)

Copyright 2021 Dean Attali

Install the Chrome extension or Firefox add-on

GitHub rolled out a brand new UI on June 23, 2020 that introduced a flat, rounded, and more whitespaced design. There are some aspects of the new UI that many people don't like, so this extension reverts most of GitHub to its classic look.

If you enjoy my work (or just want to get special perks!), you should support me on GitHub.

Installation

Go to the Chrome extension store or Firefox add-ons page to instantly install with one click.

Also available as user style, which you can use with a user style manager such as Stylus.

Features

  1. Move header tabs to main content area: In the June update, GitHub moved the header buttons ("Code"/"Issues"/"Pull Requests"/etc) to the far left of the page. This became an issue if you have a big wide monitor because those buttons are now very very far from the rest of the page content. If you're on a laptop you probably won't notice the difference.

  2. Highlight selected page in header: Prior to the update, the selected page you're on was clearly highlighted. The update made the current page selection much more subtle.

  3. Classic-syle buttons and labels: The old buttons had depth and bold font, and the new buttons are flat and look less clickable.

  4. Add row separators in file explorer: The file explorer that shows all the files and folders currently has no borders between rows, making it harder to read the file list.

  5. Remove circular user images and rounded corners everywhere: The new circular user photos result in unwanted rounding near the corners, cropping significant features from photos that are intended to be square for some users. Many other items were also made very round.

And many other UI fixes such as fix the text width of issue counters and issue label, fix the whitespace of issues, add a slight background to README title, and more.

Limitations

This extension can change the look of existing items on the page, but it cannot change the layout of the page by moving things around.

For example, a common question is whether the repository sidebar can be moved to be above the main code section, like it was previously. Unfortunately that is not possible with this extension.

The reason is because of the strange way GitHub handles internal links: some pages are actual page reloads, but some pages are fully loaded with AJAX. This makes it difficult to use JavaScript to fix any UI issues, and only CSS can be used. If you're on the Code tab and you click on Pull Requests then you don't actually refresh the page, but if you click on Issues then it is a new page. What that means is that after moving from Code to Pull Requests, any JavaScript changes are reverted because large portions of the page body were re-written. Technically it's possible to find ways around that (using event listeners or mutator observers for example) to try and force a re-initialization of the JavaScript when a new page is AJAX-loaded, but the code to achieve that is too complex for this extension.

Screenshots

3, 4, 5: add row separators, use classic buttons, remove circular images

vs

1. Move headers to main content area

vs

2. Highlight selected page in header

vs

Disclaimer

This was written in just a couple hours and does not deal with some of the biggest UI changes like the layout of the sidebar vs the main content. Because GitHub uses AJAX to load many of its pages (like when navigating from the Code page to Pull Requests), I had to make everything use CSS and no JavaScript.

My other extensions

GitHub Diff Navigator - Chrome/Firefox extension that allows you to easily navigate through the changes in a file that has been edited on GitHub.

Google Slides Auto Resize Speaker Notes - the slides thumbnails in the Speaker Notes window of Google Slides are tiny. This extension dynamically resizes the slides to be more readable based on the window size.


To see my other projects, visit https://deanattali.com/projects

When submitting to a browser extension store, remove the img/doc/ folder and generate-user-style.js

More Repositories

1

beautiful-jekyll

โœจ Build a beautiful and simple website in literally minutes. Demo at https://beautifuljekyll.com
HTML
5,297
star
2

advanced-shiny

๐Ÿคน Shiny tips & tricks for improving your apps and solving common problems
R
1,196
star
3

addinslist

๐Ÿ“œ Discover and install useful RStudio addins
R
840
star
4

shinyjs

๐Ÿ’ก Easily improve the user experience of your Shiny apps in seconds
R
730
star
5

timevis

๐Ÿ“… Create interactive timeline visualizations in R
R
654
star
6

shinycssloaders

โŒ› Add loading animations to a Shiny output while it's recalculating
CSS
400
star
7

ggExtra

๐Ÿ“Š Add marginal histograms to ggplot2, and more ggplot2 enhancements
R
379
star
8

shiny-server

My personal Shiny server
R
252
star
9

shinyalert

๐Ÿ—ฏ๏ธ Easily create pretty popup messages (modals) in Shiny
R
241
star
10

colourpicker

๐ŸŽจ A colour picker tool for Shiny and for selecting colours in plots (in R)
JavaScript
214
star
11

shinyforms

๐Ÿ“ Easily create questionnaire-type forms with Shiny
R
162
star
12

shinyscreenshot

๐Ÿ“ท Capture screenshots of entire pages or parts of pages in Shiny apps
R
69
star
13

shinydisconnect

๐Ÿ”Œ Show a nice message when a Shiny app disconnects or errors
R
65
star
14

ddpcr

๐Ÿ”ฌ Analysis and visualization of Droplet Digital PCR data in R and on the web
R
60
star
15

daattali.github.io

Dean Attali's website - R/Shiny Consultant
HTML
58
star
16

shinybrowser

๐ŸŒ Find out information about a user's web browser in Shiny apps
R
40
star
17

lightsout

๐Ÿ”ฆ Lights Out game implemented in R
R
39
star
18

rsalad

A mix of useful R functions that are good for you
R
26
star
19

UBC-STAT545

My first 12 months with R, mostly through a UBC course and my own experiments
HTML
23
star
20

timevisBasic

Helper package to learn advanced 'htmlwidgets' tips
R
22
star
21

gslides-betternotes-extension

The slide previews in the Speaker Notes window of Google Slides are tiny and unreadable. This extension automatically resizes the slides when the window is resized, and allows the user to drag the sidebar to select a size.
JavaScript
21
star
22

statsTerrorismProject

Final project for STAT545A - Terrorist activity data analysis
HTML
20
star
23

github-diff-navigator-extension

Chrome/Firefox extension that allows you to easily navigate through the changes in a file that has been edited on GitHub.
JavaScript
19
star
24

shinytip

๐Ÿ’ฌ Simple flexible tooltips for Shiny apps
R
18
star
25

shinyfilebrowser

๐Ÿ“ Simple file browser and list selector for Shiny apps
R
17
star
26

shinymixpanel

๐Ÿ” Track user interactions with Mixpanel in Shiny apps or R scripts
R
13
star
27

rasperry-pi-gaming-console-setup

How to set up raspberry pi as a portable oldies gaming console
13
star
28

cranalerts

Get email alerts when a CRAN package gets updated
R
11
star
29

shiny-mini-workshop

Shiny Mini Workshop
R
9
star
30

single-page-amazon-return-labels-extension

Print Amazon return labels as a single page
JavaScript
9
star
31

settlers-catan-turn-analyzer

Settlers of Catan Turn Analyzer - a simple app to teach myself ReactJS
JavaScript
8
star
32

shinycodeviewer

๐Ÿ“ View and edit a series of code chunks with syntax highlighting in Shiny
R
7
star
33

undomanager

๐Ÿ”„ Generic undo/redo manager for R
R
7
star
34

shiny-colour-gradient-input

Colour gradient input for R-Shiny
R
6
star
35

cashflow-calculation-extension

Cashflow Calculator extension for Zillow, Trulia, and Redfin (works in Chrome/Firefox/Edge)
JavaScript
6
star
36

smileyfy-my-facebook-extension

Chrome extension that adds infinite happiness to your Facebook browsing, plus a little bonus rickrolling :)
JavaScript
5
star
37

shinyHelpers

R
5
star
38

shiny-workshop-odsc2019

Shiny Workshop at ODSC 2019 (visualizing NBA 2018/19 player stats)
R
5
star
39

modularize-addin

RStudio addin to help modularize Shiny app code
R
4
star
40

useR2017

Analysis of useR2017 attendance information
R
3
star
41

bingo

Generate Bingo cards with R.
R
3
star
42

Rlist

Easy way to navigate and explore list structures in R (abandoned project)
R
2
star
43

dash2

R
2
star
44

shiny-training-rstudioconf-2018

R
2
star
45

presentations

A place for me to keep my presentations/papers/etc organized
2
star
46

pftv-ad-bypass-extension

Project Free TV shows an interstitial ad page before allowing users to continue to the video - this extension bypasses that page
JavaScript
2
star
47

attalitech

AttaliTech Ltd
CSS
1
star
48

shinywc

R
1
star
49

shiny-conf-nyr-2022

R
1
star
50

stat540-2014-attali-dean

Lab work for UBC STAT540
R
1
star
51

htmldependencybug

JavaScript
1
star
52

genes-track-demo

HTML
1
star