Giter Club home page Giter Club logo

github-wide's Introduction

github-wide

Wide GitHub

Userstyle for making all of GitHub completely fluid.

Why

Well, we just shipped split diffs—hell yeah!—and now only part of the site is fluid. This makes it all fluid with just a bunch of CSS.

Disclaimer

I work at GitHub. This repo comes with absolutely no promise of an official full-width interface GitHub. No such project is under way, and as you'll find with this userstyle, it's not as simple as just adding more CSS. That said, enjoy!

How to use

Install a userstyle manager for your favorite browser:

Stylus

Website: stylus

Stylish

Due to privacy concerns (extension has permission to all your browser data) Stylus is recommended.

Website: userstyles.org

  • Chrome: currently not available (checked 2018-07-19)
  • Firefox: https://addons.mozilla.org/firefox/addon/stylish/ (be sure to place the CSS inside the @-moz-document domain("github.com") block)
  • Opera: currently not available (checked 2018-07-19)

Other

Then, copy-pasta the styles from github-wide.css into a new userstyle. Be sure to specify that it apply to sites beginning with https://github.com/*.

In addition, you can apply styles from gist-wide.css to sites beginning with https://gist.github.com/*.

Userstyles.org

If you use the Stylus (or Stylish) addon you can find one-click installs including automatic updates via the packages below.

Bug reports

Open an issue or submit a pull request, please.

<3

Licensed under MIT and copyright @mdo.

github-wide's People

Contributors

cfoellmann avatar jubianchi avatar marcoesposito1988 avatar mdo avatar nick-f avatar nickcampbell18 avatar timotheecour avatar tophf avatar yorkie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

github-wide's Issues

github-wide with Octotree sidebar

Hello,

I found this repo today, and it gives me quite a good wide view on github. 👍👍👍

Since I use octotree plugin,
which show me code tree on steroids.
It has very small conflicts with github-wide.

image

As you see, navbar by octotree hide content of issue.
I want to move .repository-content depends on navbar width but I don't know about css very well 😢
May I get a advice for this issue?

thanks

Github Enterprise Support?

Every time there is an update update to the style, I need to manually enter in any of the enterprise github urls I use.
I came up with the following regex that appears to work for both public & GHE and wanted to see if anyone else felt it would be of value.
Instead of matching just for the github.com domain, you can match against the regex expression https?://github\..*
this would match the standard github.com but also the github.enterprise-domain-here.com domains.

While viewing a long Gist, the horizontal scrollbar is way down at the bottom of the content.

While viewing a long Gist, the horizontal scrollbar is way down at the bottom of the content.

This is mostly only a problem in cases where content is wider than viewport. Scrolling to the right to see the un-wrapped content is easier with the scrollbar. I find myself sometimes scrolling to the bottom of the page just so I can scroll right, and then all the way back up to see the content that didn't wrap.

Maybe this is not something you can change with a theme, and thats ok if that is true.

Request/Help: Limit to diff view only

Hello, and thank you for this wonderful tool! It's great for diff views, but I'd like to limit it to be active only in the diff view, and not on other pages on github. Is there an easy way?

Images can be super tall

Since my screen is very wide, the default GitHub CSS can make images become very wide and therefore very tall. I find myself having to scroll to see the entirety of a screenshot from modern phones. The following CSS snippet appears to work for my use-case.

.markdown-body img {
    max-height: 60em; /* or ~800px */
}

Before

image

After

image

If you'd like, I can open a PR with this minor change.

Fix for homepage

First of all: thanks a lot for this style, it is a nerve-saver!

I have noticed however, that it currently scrambles my homepage (see the attached screenshot below).

bildschirmfoto 2019-01-12 um 13 44 42

I was able to fix the problem by just commenting out the .news and .dashboard-sidebar classes from github.css. I can make a pull request if you'd like, but first I wanted to ask:

  • do you foresee any problem in any other page than the homepage? I haven't found any yet
  • should the pull request be against master or the v2 branch?

GitHub broke this userstyle

Hi there!
As for now, with new GH interface, this style seems to be broken and does not work anymore.
Looks like it is needed to be updated...

// P.S. I not sure if I had enough time in near future, so don't rely on me, please. But I'll try to look into this when I'll have some spare time.

Why isn't this the default for GitHub.com?

You said in the Readme that you work at GitHub...
I know it's non-zero work to "ship" this as the default, but it seem worth it. Please do this. All users would benefit.

Individual issue text boxes in GitHub Enterprise Server 2.18.10 to not flow to width of window.

The CSS file github-wide.css makes my list of issues automatically resize to the width of the browser, but not the text fields in each issue. That's a problem for me, because our issues tend to have source-code in them that is too wide for the window. I was hoping that this would allow the windows to expand horizontally when I made the browser window wider.

Don't get me wrong --- this is a great CSS package --- but it would be more useful for me if it made more of the layouts responsive.

Which extension causes privacy concerns?

The README says

#### Stylus
Website: [Stylish](http://add0n.com/stylus.html)

#### Stylish
> Due to privacy concerns (extension has permission to all your browser data) Stylus is recommended.

Website: [userstyles.org](http://userstyles.org)

I find the above confusing. Under the "Stylus" header is a website named Stylish (with an address containing "stylus"), while under the "Stylish" header, Stylus is recommended, and the website has a name that is neither "stylus" nor "stylish".

Which one is recommended in the end?

Github wide isn't wide anymore

Similar or same as #74. From one day to the next, my Github isn't doing what it did with your style active.

No more Github wide. Github now acts and looks as if the style isn't active anymore

NOTE: I tried both the version in this repo and the fork by cfoellmann

Consider hosting on GitHub.

As an alternative to userstyles.org, have you considered just hosting the style here on GitHub?

Thank you.

Changes to the create new pull request page

Edit: I have just realised that I have posted in the wrong repo! I should have posted here. I have no idea if the same problem applies to this project or not!

Github recently made some small changes to the page we use to open a new pull request.

As a result, the text box is no longer wide, and sits on the far left, leaving a big empty gap on the right hand side.

I had a little play with the CSS but it didn't look that trivial to solve, so I'm hoping one of you experts can do it... :)

(I am actually using the userscript release here.)

Issue edit height bug

When I edit an issue with this user style enabled, extra whitespace appears below the form controls. I'm using the latest Chrome. Here's what it looks like:

edit issue height bug

Slight change for issues view

GitHub seem to have released a small change yesterday which uses columns on the PR page. These two CSS declarations are now breaking the display:

/* Issues/PRs */
.discussion-sidebar {
  width: 280px !important;
}
.discussion-timeline {
  width: calc(100% - 300px) !important;
}

I've found just removing them seems to revert to the old behaviour 👍

Before

Before screenshot - columns are wrong

After

After screenshot (overrides removed)

Header still has min-width

github-wide

github-wide works like a charm for main content, but the header bars still have a min-width applied to them (the screenshot above is for a viewport which is slightly smaller than 980px). Would be great if those would be responsive for smaller widths too.

New version?

I made this so many years ago—GitHub's UI has changed drastically. Our nav, header, and more is completely new in contrast. Any thoughts on me carving out a fresh release here, and then changing this repo entirely for a sleeker, full-width-ish CSS variables powered stylesheet?

screen shot 2018-07-19 at 9 31 49 am

GitHub Enterprise?

I tried installing this for our GitHub enterprise and it doesn't seem to affect the width. Any ideas?

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.