avior/code-stats-vscode
1
0
Fork 0
mirror of https://gitlab.com/aviortheking/code-stats-vscode.git synced 2025-07-29 05:49:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

About done

Browse Source
This commit is contained in:
Valentin Ivanov
2018-04-24 16:04:39 -04:00
committed by Juha Ristolainen
parent ac74701866
commit ed2b511762
4 changed files with 47 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
assets/profile.css
View File

@ -20,6 +20,26 @@
height: 7rem;
}
.circle-progress .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #ddca7e;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.circle-progress:hover .tooltiptext {
visibility: visible;
}
svg {
position: absolute;
top: 0;
@ -107,7 +127,7 @@ img {
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
}
.progress-bar-success {
background-color: #318245;

21
assets/profile.html.eex
View File

@ -5,18 +5,33 @@
<%= profile.new_xp %>)</sup>
<% } %>
</h3>
<div class="progress">
<div class="progress-bar progress-bar-success" style='width:${profile.progress}%;'>
<span class="sr-only">Level progress ${profile.progress - profile.new_progress}%.</span>
</div>
<div class="progress-bar progress-bar-striped progress-bar-warning" style='width:${profile.new_progress}%;'>
<span class="sr-only">Recent level progress ${profile.new_progress}%.</span>
</div>
</div>
<div style="clear: both;">
<% for( let l in languages) { %>
<div class="circle-progress">
<div class="language">
<%= languages[l].name %>
<span>
<%= languages[l].xp %>
<%= languages[l].level %>
</span>
</div>
<span class="tooltiptext">
Total XP: <strong><%=languages[l].xp %></strong> <br/>
New XP: <%=languages[l].new_xp%>
</span>
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" stroke="#424242" stroke-width="5"></circle>
<circle cx="50" cy="50" r="45" stroke="#318245" stroke-width="5" stroke-dasharray="282.6" stroke-dashoffset="70.65"></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 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>
</svg>
</div>
<% } %>
@ -37,7 +52,7 @@
<div class="progress">
<div class="progress-bar progress-bar-success" style='width:${machines[m].progress}%;'>
<span class="sr-only">Level progress ${machines[m].progress}%.</span>
<span class="sr-only">Level progress ${machines[m].progress - machines[m].new_progress}%.</span>
</div>
<div class="progress-bar progress-bar-striped progress-bar-warning" style='width:${machines[m].new_progress}%;'>
<span class="sr-only">Recent level progress ${machines[m].new_progress}%.</span>