Small change UI

Author: Stigmatoz

src/index.html

@@ -39,38 +39,38 @@
       <div id="statsBlock">
          <div>
             <div class="title-block">
-               <span>First day</span>
+               <span class="stat-description">First day</span>
                <span class="value-block" id="statFirstDay"></span>
             </div>
             <div class="inline-block">
-               <span>Last day</span>
+               <span class="stat-description">Last day</span>
                <span class="value-block" id="statLastDay"></span>
             </div>
          </div>
          <div>
             <div class="title-block">
-               <span>Active days</span>
+               <span class="stat-description">Active days</span>
                <span class="value-block" id="statActiveDays"></span>
             </div>
             <div class="inline-block">
-               <span>Days in total</span>
+               <span class="stat-description">Days in total</span>
                <span class="value-block" id="statTotalDays"></span>
             </div>
          </div>
          <div>
             <div class="title-block">
-               <span>Today</span>
+               <span class="stat-description">Today</span>
                <span class="span-time" id="statTodayTime"></span>
             </div>
             <div class="inline-block">
-               <span>All-time</span>
+               <span class="stat-description">All-time</span>
                <span class="span-time" id="statAllDaysTime"></span>
             </div>
          </div>
          <div>
             <div class="most-active-days-title">
                <div class="most-active-days-value">
-                  <span>Most active day</span>
+                  <span class="stat-description">Most active day</span>
                </div>
                <div class="inline-block">
                   <div class="value-block" id="statActiveDay"></div>
@@ -79,7 +79,7 @@
             </div>
             <div class="inline-block">
                <div style="display: inline-block;vertical-align: top;">
-                  <span>Most inactive day</span>
+                  <span class="stat-description">Most inactive day</span>
                </div>
                <div class="inline-block">
                   <div class="value-block" id="statInActiveDay"></div>

src/manifest.json

@@ -3,7 +3,7 @@
 
         "name": "Web Activity Time Tracker",
         "short_name": "Web Time Tracker",
-        "version": "1.2.2",
+        "version": "1.3.0",
         "minimum_chrome_version": "26",
 
         "description": "Track and limit time your activity in the browser.",

src/scripts/webact.js

@@ -350,12 +350,12 @@ function setStatData(array){
     arrayAscByTime = arrayAscByTime.sort(function (a, b) {
         return a.total - b.total;
     });
-    stat.inActiveDay = arrayAscByTime[0].date;
-    stat.activeDay = arrayAscByTime[arrayAscByTime.length-1].date;
+    stat.inActiveDay = new Date(arrayAscByTime[0].date).toLocaleDateString('ru-RU');
+    stat.activeDay = new Date(arrayAscByTime[arrayAscByTime.length-1].date).toLocaleDateString('ru-RU');;
     stat.inActiveDayTime = arrayAscByTime[0].total;
     stat.activeDayTime = arrayAscByTime[arrayAscByTime.length-1].total;
-    stat.firstDay = array[0];
-    stat.lastDay = array[array.length-1];
+    stat.firstDay = new Date(array[0]).toLocaleDateString('ru-RU');;
+    stat.lastDay = new Date(array[array.length-1]).toLocaleDateString('ru-RU');;
     stat.activeDays = array.length;
     stat.totalDays = daysBetween(array[0], array[array.length-1]);
 }

src/style/webact.css

@@ -406,6 +406,14 @@ p.table-header{
     font-size: 13px;
   }
 
+  #statsBlock .span-time{
+    font-weight: 600;
+  }
+
+  #statsBlock .span-time-active{
+    font-weight: 600;
+  }
+
   #statsBlock .title-block{
     display: inline-block; 
     width: 40%; 
@@ -436,4 +444,9 @@ p.table-header{
     color: #9b9b9b;
     font-size: 13px;
     text-align: center;
+  }
+
+  .stat-description{
+    float: left;
+    width: 110px;
   }