compact layout for top languages card #134

[sagar-gavhane]

What type of PR is this? (check all applicable)

• Refactor
• Feature
• Bug Fix
• Optimization
• Documentation

Pull request checklist

Please check if your PR fulfills the following requirements:

• Build (npm run build) was run locally and any changes were pushed
• Tests (npm run test) has passed locally and any fixes were made for failures

Description

Compact layout for top languages card similar to GitHub's lang card.

Related Tickets & Documents

#134

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Added tests?

• Yes
• No, because they aren't needed
• No, because I need help

Does this introduce a breaking change?

• Yes
• No

[codecov]

Codecov Report

Merging #179 into master will increase coverage by 0.30%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master     #179      +/-   ##
==========================================
+ Coverage   94.76%   95.07%   +0.30%     
==========================================
  Files          15       15              
  Lines         382      406      +24     
  Branches      114      120       +6     
==========================================
+ Hits          362      386      +24     
  Misses         16       16              
  Partials        4        4              

Impacted Files	Coverage Δ
api/top-langs.js	100.00% <ø> (ø)
src/renderTopLanguages.js	100.00% <100.00%> (ø)
api/index.js	100.00% <0.00%> (ø)
src/utils.js	96.15% <0.00%> (ø)
themes/index.js	100.00% <0.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e32ab3f...656ffe2. Read the comment docs.

[anuraghazra]

Hi @sagar-gavhane thanks for the PR.

[anuraghazra]

Hmmm i see so in the screenshot it looks like the most used language php is at the end of the progress bar but it should be reversed. first PHP, then HTML, then all other langs

[anuraghazra]

@sagar-gavhane Also the theming system is broken right now since you did not take the colors intro consideration.

/api/top-langs?username=anuraghazra&layout=compact&theme=dark

EDIT: Oh it's because you missed the border-bg rect

[sagar-gavhane]

Hey @anuraghazra, somehow I've fixed border-radius on the lang progress bar. Could you please take a look at PR?

[anuraghazra]

Preview:

Hide lang

Hide title

[anuraghazra]

Hi @sagar-gavhane Thanks for the PR, this looks good to me although it needs a bit of refactoring (code kinda looks messy rn) will do it later tho.

Thanks!