Moving sidebar to the top

[sreenivasanramesh]

This PR is for issue #20. It moves the sidebar to the top section of the page, and makes the code and readme section centered.

Todo

• [x] Move the sidebar to the top of the screen
• [ ] Fix the releases/sponsor/contributors... section
• [ ] The language bar breaks responsiveness, when resizing window.
• [ ] Fix padding around some of the elements
• [ ] Add comments

[daattali]

This new css should only be applied on the Code tab of a repo page, right?

If that's the case, I like your idea of adding another rule to the manifest. Instead of having the new rule exclude a few pages, can we somehow use a regular expression that tells it to only apply on repo pages - but not on sub-pages?

[CelestialAmber]

Would it also be possible to change the followers and stars text below the profile picture back to how it was before? (normal tabs)

[daattali]

Can you show a picture of what it looked like

[daattali]

I dont see followers and stars under the profile picture in the image you shared?

Anyway - this doesnt seem to be directly related to this issue so can you please open a separate issue

[zekefarwell]

I think a very similar result can be achieved with quite a bit less css. The code below gets us most of the way there. However, it still significantly breaks other pages that use the same sort of sidebar because the classes are all very general. I wish there was a class on the body or anywhere in the DOM that could be used to narrow the scope of these rules to only the main repo page, but I'm having a hard time finding anything to use. I think that excluding patterns at the manifest level may unfortunately be the only option.

.repository-content .flex-column {
  flex-direction: column-reverse !important;
}
.repository-content .col-md-9, .repository-content .col-md-3 {
  width: 100%;
}
.mb-3.h4 {
  display: none;
}
.BorderGrid-row:nth-child(n+2):nth-child(-n+5){
  display: none;
}
.BorderGrid.BorderGrid--spacious .BorderGrid-cell {
  padding: 0;
}
.BorderGrid.BorderGrid--spacious {
  margin-bottom: 8px;
}
.BorderGrid-cell .mt-3:not(.d-flex) + .sr-only + .mt-3:not(.d-flex) {
  display: inline-block;
  margin: 12px !important;
}

Looks like this with these rules added:

Wayback machine for reference

[daattali]

Is there no way to use a regex in the manifest rule that will only match exactly two levels from github.com, but not three levels down?

[sreenivasanramesh]

Looks great! But I feel that hiding releases and packages information might not be the best idea...

[zekefarwell]

Is there no way to use a regex in the manifest rule that will only match exactly two levels from github.com, but not three levels down?

I imagine there is, but would that achieve the goal? There are probably pages that use the side bar, and would therefor be broken, that are two levels down. I guess testing need here. If all the other sidebar pages are either one level down or more than two levels down then that sounds like a good solution!

But I feel that hiding releases and packages information might not be the best idea...

You're absolutely right and it also hides contributors which would be good to show. The css I posted would definitely need some more tweaks. It was just meant to show a general approach.

[daattali]

@sreenivasanramesh Have you continued any work on this?

[sreenivasanramesh]

I haven't had time to work on it. About the regex matching in the manifest file: It isn't possible to match a url exactly two levels from github.com. Given that is the case, how to proceed with this?

Apart from that, I'm out of ideas on how to fix the releases/sponsor/contributors... section.

[daattali]

I think that for this task, venturing away from pure CSS and doing a little bit in javascript might be best. https://github.com/daattali/oldschool-github-extension/issues/14#issuecomment-651779984 shows how introducing minimal JS can be done

[masterneko]

I hate the toolbar on the side. It works much better at the top