From ae430493d7469fc84814505215b6e36b4862074a Mon Sep 17 00:00:00 2001
From: Valentin Ivanov <valen.ivanov@gmail.com>
Date: Tue, 24 Apr 2018 18:11:55 -0400
Subject: [PATCH] SVG styling

---
 assets/profile.css      | 48 ++++++++++++++++-------------------------
 assets/profile.html.eex | 26 +++++++++++++---------
 2 files changed, 35 insertions(+), 39 deletions(-)

diff --git a/assets/profile.css b/assets/profile.css
index c59cc73..119ef03 100644
--- a/assets/profile.css
+++ b/assets/profile.css
@@ -1,26 +1,11 @@
-/* .language {
-  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 {
+.language-progress {
   float: left;
   position: relative;
   width: 6rem;
   height: 6rem;
 }
 
-.circle-progress .tooltiptext {
+.language-progress .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: #ddca7e;
@@ -34,13 +19,11 @@
   z-index: 1;
 }
 
-.circle-progress:hover .tooltiptext {
+.language-progress:hover .tooltiptext {
   visibility: visible;
 }
 
-
-
-svg {
+.language-progress svg {
   position: absolute;
   top: 0;
   left: 0;
@@ -49,14 +32,23 @@ svg {
   transform: rotate(-90deg);
 }
 
-/* .circle-progress svg {
-  transform: rotate(-90deg);
-} */
-
-.circle-progress svg circle {
+circle {
+  stroke-width: 5;
   fill:transparent;
 }
 
+circle.backg {
+  stroke: #424242;
+}
+
+circle.newxp {
+  stroke: #ddca7e;
+}
+
+circle.oldxp {
+  stroke: #318245;
+}
+
 .language {
   padding-top: 2rem;
   margin: auto;
@@ -70,13 +62,11 @@ svg {
 }
 
 .vscode-dark .language {
-  /* background: rgb(37,37,38); */
   color: #ddca7e;
   border-color: #424242;
 }
 
-.vscode-light .language {
-  background: gray;
+.vscode-light .language {  
   color: blue;
   border-color: black;
 }
diff --git a/assets/profile.html.eex b/assets/profile.html.eex
index 0570dd5..e1f3717 100644
--- a/assets/profile.html.eex
+++ b/assets/profile.html.eex
@@ -1,7 +1,7 @@
 <link rel="stylesheet" href="file:///${style}">
 <h3> ${profile.user} Level ${profile.level} (${profile.total_xp} XP)
   <% if( profile.new_xp > 0 ) { %>
-    <sup>(
+    <sup>(+
       <%= profile.new_xp %>)</sup>
     <% } %>
 </h3>
@@ -15,9 +15,9 @@
   </div>
 </div>
 
-<div style="clear: both;">
+<div class="languages">
   <% for( let l in languages) { %>
-    <div class="circle-progress">
+    <div class="language-progress">
       <div class="language">
         <%= languages[l].name %>
           <span>
@@ -25,13 +25,16 @@
           </span>
       </div>
       <span class="tooltiptext">
-        Total XP: <strong><%=languages[l].xp %></strong> <br/>
-        New XP: <%=languages[l].new_xp%>
-      </span>      
+        <strong><%=languages[l].xp %> XP</strong>        
+        <% if( languages[l].new_xp > 0 ) { %>
+          <sup>(+
+            <%= languages[l].new_xp %>)</sup>
+        <% } %>        
+      </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="#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>
+        <circle class="backg" cx="50" cy="50" r="45" ></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 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>
     </div>
     <% } %>
@@ -48,8 +51,11 @@
       </span>
       <span class="xp">
         (<%= machines[m].xp %> XP)
+       <% if( machines[m].new_xp > 0 ) { %>
+        <sup>(+
+          <%= machines[m].new_xp %>)</sup>
+      <% } %>
       </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 - machines[m].new_progress}%.</span>