When the whole list is made scrollable, the graph can no longer be positioned absolute. Instead, make it relative so it scrolls with the content ... and 0 height (with the graph overflowing) so the table content will be shown next to the overflowing graph.
less: change markup and styling for the logo shown in the top left corner
Based on work by Dominik Ruf, but in this changeset, the goal is just to improve markup and styling while keeping exactly the same look and feel. In that process, it also fixes some browser specific issues that gave odd spacing/positioning.
All styling (especially the logo image URL) is moved to CSS/LESS, using background-image styling instead of an img tag.
The logo image is made a :before on the site branding text and will usually have to align with this text, so we use inline-block to align to the baseline.
We set the right amount of negative margin-bottom so the image can go below the baseline.
We use a "big enough" negative margin-top to allow the image to bleed outside the line height and into the 12px top padding.
We assume the background image doesn't need cropping or panning and do thus not set background-size, background-position, or background-repeat.
less: simplify positioning of the +/- symbols on diff lines
As before, we place the +/- symbols in the pre:before so they default to the same font and styling as the line content.
Instead of giving the pre a wide left margin and put the :before out there using negative positing and visible overflow, just give the :before a fixed width on all lines.
Commit 30d61922f24eb144190052818c3fc6a24562f42b (auth: fix crash on invalid bcrypt password) left a debug print statement of the user's password in plaintext and its hashed equivalent.
- remove unnecessary float: left for .reviewer_status - remove unnecessary height and padding for .reviewers_member - there is no .email_entry, .ip_entry, .pullrequests_section_head, .pr-desc - remove unnecessary margin for .msg-div
- #legend_data default padding is fine - #legend_container border: none is unnecessary - #legend_choices is invisible - #legend_container width: auto is unnecessary - with many commiters less padding and height is actually better - there is no .legend ul
<a> already use @brand-primary color and I think it is actually beneficial if the two other non-link elements look a bit different. (blackish default .panel-heading color)
The two non-link elements thus already have a different non-link look and don't need the opacity.
less: remove borders and padding around navbar items
Navbar items were styled with borders to look like embossed areas that could be clicked. The top menu also had it in the drop-down menu, while the context menu didn't.
The areas are big, and it is quite clear it is some kind of clickable menu ... and the clickable area is also highlighted when hovering. We can thus do without the borders and get a slightly cleaner look.
- 'position: absolute' and 'margin: 3px 4px;' make it actually look worse - 'text-decoration: none' is already set on all <a> - we only use it in one place so the selector can be simplified
- less spacing still leave room to show the comment bubble with hiding the line number - looks good w/o letter-spacing - bootstrap already sets box-sizing: border-box; - it is a <a> no need for cursor: pointer - width: 100% makes no difference
35d3a85fc650 introduced the Bootstrap default overflow:auto styling of pre. That made overflow hidden instead of visible, and thus broke our display of +/- as a :before with relative positioning outside the pre.
To undo that, add overflow to the list of Bootstrap pre styling we override.
When you have a big user base, with thousends of users, always using the whole dataset makes the UI slow.
This will replace kallithea/model/repo.py get_users_js and get_user_groups_js which were used to inline the full list of users and groups in the document. Instead, it will expose a json service for doing the completion.
When using the autocomplete, there might be multiple ajax requests, but tests with a userbase > 9000 showed no problems. And keep in mind, that although we now make multiple requests (one for every character) that - the autocomplete is not used that often - the requests are quite cheap - most importanly, we no longer need to calculate the user list/group list if the user doesn't use the autocomplete
Users and groups are still passed as parameters to the javascript functions - they will be removed later.
gravatar: use icon-gravatar for default gravatar sizing and styling instead of icon-empty
We may want to use a different style for gravatar then for icon-empty, so we should give it its own class, but still consider it an icon, like the default icon-user is.
style: use npm less to generate kallithea stylesheet style.css from style.less
This is a minimal change to introduce less as framework to generate our stylesheet. The input less file is currently the same as the original css stylesheet, so that the delta between the input style.less and the output style.css is zero.
To regenerate style.css from style.less, run:
npm --prefix kallithea/public/less install npm --prefix kallithea/public/less run less
style: change indentation of stylesheet to match future less output
Align the indentation of the stylesheet with the indentation that a less-compiled version of this stylesheet would use. This will allow easy comparison of the original and less-generated stylesheet in future commits.