https://github.com/ngduc/better-pull-request
Better comment styles for Github Pull Request.
https://github.com/ngduc/better-pull-request
Last synced: 4 months ago
JSON representation
Better comment styles for Github Pull Request.
- Host: GitHub
- URL: https://github.com/ngduc/better-pull-request
- Owner: ngduc
- License: mit
- Created: 2016-03-16T05:30:56.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-03-16T20:09:53.000Z (about 10 years ago)
- Last Synced: 2025-07-26T09:05:20.120Z (11 months ago)
- Size: 848 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# better-pull-request
Better comment styles for Github Pull Request (PR).
Note that this is still an experiment at this time.
# What ?
From this style:

To this:

## Features
* Side comments so you can read the code without distractions
* Cleaner comment style
* Mouse over a comment to expand it
# How ?
For now, [Stylish](https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en) is used to modify CSS of the Pull Request Diff Page
Stylish URL Regex to match with PR pages:
```
(?=.*?github.com.*?\/pull/).*
```
Stylish CSS:
```
.file-diff-split .js-inline-comments-container {
left: 410px !important;
right: 0;
}
.file-diff-split .js-inline-comments-container .line-comments {
margin-left: 0px;
position: absolute;
}
.js-inline-comments-container {
position: absolute;
z-index: 1;
left: -200px;
margin-top: -10px;
border-top: 2px solid #ccc;
width: 300px;
background: transparent;
}
.js-inline-comments-container .line-comments {
border: none !important;
}
.js-inline-comments-container .btn
{
font-size: 12px;
font-weight: normal;
line-height: inherit;
}
.js-inline-comments-container:hover {
z-index: 2;
border-top: 3px solid blue;
}
.timeline-comment-header {
visibility: hidden;
height: 15px;
}
.timeline-comment-header .avatar {
visibility: visible;
}
.timeline-comment-header .author {
visibility: visible;
position: absolute;
left: 40px;
margin-top: 2px;
}
.timeline-comment-header .timestamp {
visibility: visible;
position: absolute;
right: 5px;
top: 0;
}
.diff-table .line-comments {
padding: 0;
}
.inline-comment-form-actions {
margin-top: -10px;
}
.inline-comments .empty-cell {
background: transparent;
}
```
## Contributing
PR and issues reporting are always welcome :)
Follow [CONTRIBUTING.md](CONTRIBUTING.md)