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

Start language radial progress

Browse Source
This commit is contained in:
Valentin Ivanov
2018-04-24 12:26:03 -04:00
committed by Juha Ristolainen
parent 1643159674
commit ac74701866
5 changed files with 98 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
assets/profile.css
View File

@ -1,4 +1,4 @@
.language {
/* .language {
float: left;
width: 5rem;
height: 5rem;
@ -11,14 +11,40 @@
-moz-box-sizing: border-box;
box-sizing: border-box;
border: solid 2px;
} */
.circle-progress {
float: left;
position: relative;
width: 7rem;
height: 7rem;
}
.language span{
display: block;
svg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: rotate(-90deg);
}
/* .circle-progress svg {
transform: rotate(-90deg);
} */
.circle-progress svg circle {
fill:transparent;
}
.language {
padding-top: 2.5rem;
margin: auto;
text-align: center;
}
.language span {
display: block;
font-weight: bold;
font-size: 1.1em;
}
@ -60,9 +86,10 @@ img {
.progress {
height: 20px;
margin-bottom: 20px;
/* background-color: #f5f5f5; */
background-color: #303030;
border-radius: 4px;
border: solid 1px;
border-color: #424242;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
@ -72,10 +99,9 @@ img {
width: 0%;
height: 100%;
font-size: 12px;
line-height: 20px;
/* color: #fff; */
line-height: 20px;
text-align: center;
background-color: #337ab7;
background-color: #ddca7e;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-webkit-transition: width .6s ease;
@ -84,7 +110,7 @@ img {
}
.progress-bar-success {
background-color: #ddca7e;;
background-color: #318245;
}
.sr-only {

40
assets/profile.html
View File

@ -1,40 +0,0 @@
<link rel="stylesheet" href="file:///${profile.style}">
<h3> ${profile.user} Level ${profile.level} (${profile.total_xp} XP)
<% if( profile.new_xp > 0 ) { %>
<sup>(
<%= profile.new_xp %>)</sup>
<% } %>
</h3>
<div style="display: block;">
<% for( let l in languages) { %>
<div class="language">
<%= languages[l].name %>
<span>
<%= languages[l].xp %>
</span>
</div>
<% } %>
</div>
<p/>
<div class="machines">
<% for( let m in machines) { %>
<div class="machine">
<strong>
<%= machines[m].name %>
</strong>
<span>
<%= machines[m].xp %>
</span>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:50%">
<span class="sr-only">Level progress ${machines[m].progress}%.</span>
</div>
<div class="progress-bar progress-bar-striped progress-bar-warning" style="width: 7%;">
<span class="sr-only">Recent level progress 7%.</span>
</div>
</div>
</div>
<% } %>
</div>

51
assets/profile.html.eex Normal file
View File

@ -0,0 +1,51 @@
<link rel="stylesheet" href="file:///${profile.style}">
<h3> ${profile.user} Level ${profile.level} (${profile.total_xp} XP)
<% if( profile.new_xp > 0 ) { %>
<sup>(
<%= profile.new_xp %>)</sup>
<% } %>
</h3>
<div style="clear: both;">
<% for( let l in languages) { %>
<div class="circle-progress">
<div class="language">
<%= languages[l].name %>
<span>
<%= languages[l].xp %>
</span>
</div>
<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>
</svg>
</div>
<% } %>
</div>
<p/>
<div class="machines">
<% for( let m in machines) { %>
<div class="machine">
<strong>
<%= machines[m].name %>
</strong>
<span class="level">
level <%= machines[m].level %>
</span>
<span class="xp">
(<%= machines[m].xp %> XP)
</span>
<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>
</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>
</div>
</div>
</div>
<% } %>
</div>
<circle cx="60" cy="60" r="50"/>