avior/code-stats-vscode
1
0
Fork 0
mirror of https://gitlab.com/aviortheking/code-stats-vscode.git synced 2025-04-22 10:52:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

SVG styling

Browse Source
This commit is contained in:
Valentin Ivanov 2018-04-24 18:11:55 -04:00 committed by Juha Ristolainen
parent 96bd68be7c
commit ae430493d7
2 changed files with 35 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
assets/profile.css
View File

@ -1,26 +1,11 @@
/* .language { .language-progress {
float: left;
width: 5rem;
height: 5rem;
padding-top: 1.5rem;
text-align: center;
margin: 0.1rem;
border-radius: 50%;
font-size: 0.9em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: solid 2px;
} */
.circle-progress {
float: left; float: left;
position: relative; position: relative;
width: 6rem; width: 6rem;
height: 6rem; height: 6rem;
} }
.circle-progress .tooltiptext { .language-progress .tooltiptext {
visibility: hidden; visibility: hidden;
width: 120px; width: 120px;
background-color: #ddca7e; background-color: #ddca7e;
@ -34,13 +19,11 @@
z-index: 1; z-index: 1;
} }
.circle-progress:hover .tooltiptext { .language-progress:hover .tooltiptext {
visibility: visible; visibility: visible;
} }
.language-progress svg {
svg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -49,14 +32,23 @@ svg {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
/* .circle-progress svg { circle {
transform: rotate(-90deg); stroke-width: 5;
} */
.circle-progress svg circle {
fill:transparent; fill:transparent;
} }
circle.backg {
stroke: #424242;
}
circle.newxp {
stroke: #ddca7e;
}
circle.oldxp {
stroke: #318245;
}
.language { .language {
padding-top: 2rem; padding-top: 2rem;
margin: auto; margin: auto;
@ -70,13 +62,11 @@ svg {
} }
.vscode-dark .language { .vscode-dark .language {
/* background: rgb(37,37,38); */
color: #ddca7e; color: #ddca7e;
border-color: #424242; border-color: #424242;
} }
.vscode-light .language { .vscode-light .language {
background: gray;
color: blue; color: blue;
border-color: black; border-color: black;
} }

24
assets/profile.html.eex
View File

@ -1,7 +1,7 @@
<link rel="stylesheet" href="file:///${style}"> <link rel="stylesheet" href="file:///${style}">
<h3> ${profile.user} Level ${profile.level} (${profile.total_xp} XP) <h3> ${profile.user} Level ${profile.level} (${profile.total_xp} XP)
<% if( profile.new_xp > 0 ) { %> <% if( profile.new_xp > 0 ) { %>
<sup>( <sup>(+
<%= profile.new_xp %>)</sup> <%= profile.new_xp %>)</sup>
<% } %> <% } %>
</h3> </h3>
@ -15,9 +15,9 @@
</div> </div>
</div> </div>
<div style="clear: both;"> <div class="languages">
<% for( let l in languages) { %> <% for( let l in languages) { %>
<div class="circle-progress"> <div class="language-progress">
<div class="language"> <div class="language">
<%= languages[l].name %> <%= languages[l].name %>
<span> <span>
@ -25,13 +25,16 @@
</span> </span>
</div> </div>
<span class="tooltiptext"> <span class="tooltiptext">
Total XP: <strong><%=languages[l].xp %></strong> <br/> <strong><%=languages[l].xp %> XP</strong>
New XP: <%=languages[l].new_xp%> <% if( languages[l].new_xp > 0 ) { %>
<sup>(+
<%= languages[l].new_xp %>)</sup>
<% } %>
</span> </span>
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" stroke="#424242" stroke-width="5"></circle> <circle class="backg" cx="50" cy="50" r="45" ></circle>
<circle cx="50" cy="50" r="45" stroke="#ddca7e" stroke-width="5" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress) * 282.6 / 100) }'></circle> <circle class="newxp" cx="50" cy="50" r="45" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress) * 282.6 / 100) }'></circle>
<circle cx="50" cy="50" r="45" stroke="#318245" stroke-width="5" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress + languages[l].new_progress) * 282.6 / 100) }'></circle> <circle class="oldxp" cx="50" cy="50" r="45" stroke-dasharray="282.6" stroke-dashoffset='${ ((100-languages[l].progress + languages[l].new_progress) * 282.6 / 100) }'></circle>
</svg> </svg>
</div> </div>
<% } %> <% } %>
@ -48,8 +51,11 @@
</span> </span>
<span class="xp"> <span class="xp">
(<%= machines[m].xp %> XP) (<%= machines[m].xp %> XP)
<% if( machines[m].new_xp > 0 ) { %>
<sup>(+
<%= machines[m].new_xp %>)</sup>
<% } %>
</span> </span>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-success" style='width:${machines[m].progress}%;'> <div class="progress-bar progress-bar-success" style='width:${machines[m].progress}%;'>
<span class="sr-only">Level progress ${machines[m].progress - machines[m].new_progress}%.</span> <span class="sr-only">Level progress ${machines[m].progress - machines[m].new_progress}%.</span>