gaiety/codestats-readme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

design: added a rim to circle rank's progress

Browse source
This commit is contained in:
anuraghazra 2020-07-14 13:02:45 +05:30
parent 014f710e12
commit 6f79b495a6
1 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/renderStatsCard.js
View file

@ -113,6 +113,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
: `<g data-testid="rank-circle" transform="translate(400, ${ : `<g data-testid="rank-circle" transform="translate(400, ${
height / 1.85 height / 1.85
})"> })">
<circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
<circle class="rank-circle" cx="-10" cy="8" r="40" /> <circle class="rank-circle" cx="-10" cy="8" r="40" />
<text <text
x="0" x="0"
@ -139,6 +140,12 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
fill: ${iconColor}; fill: ${iconColor};
display: ${!!show_icons ? "block" : "none"}; display: ${!!show_icons ? "block" : "none"};
} }
.rank-circle-rim {
stroke: ${titleColor};
fill: none;
stroke-width: 6;
opacity: 0.2;
}
.rank-circle { .rank-circle {
stroke-dashoffset: 30; stroke-dashoffset: 30;
stroke-dasharray: ${rankProgress}; stroke-dasharray: ${rankProgress};