diff --git a/package.json b/package.json
index b16a902..2e8bd4a 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
"jquery": "^3.1.1",
"json-storage": "^2.1.1",
"localStorage": "^1.0.3",
- "chart.js": "^2.2.1"
+ "chart.js": "^2.2.1",
+ "countup.js": "^1.7.1"
}
}
diff --git a/src/main.js b/src/main.js
index 4a0f8b4..087f1d1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,7 @@ var store = JsonStorage.create(localStorage, 'temps', { stringify: true })
var $, jQuery = require('jquery')
var chart = require('chart.js')
var ipcRenderer = require('electron').ipcRenderer
+var CountUp = require('countup.js')
const config = require('./src/config.json')
@@ -13,6 +14,7 @@ var wdata = {}
var color = null
var loading = [false, false, false, false]
var timeoffset = config.timezone.offset
+var numAnim = null
window.onload = function ()
{
@@ -55,7 +57,6 @@ var loadEventListener = function () {
jQuery('input[type="checkbox"][name="favorite-city"]').change(function () {
var bool = jQuery('input[type="checkbox"][name="favorite-city"]:checked').length > 0
- console.log(bool)
if (bool) {
setFavoriteCity(jQuery('input#city').val())
} else {
diff --git a/src/style.css b/src/style.css
index 0c0005b..a21dc39 100644
--- a/src/style.css
+++ b/src/style.css
@@ -415,6 +415,13 @@ h1:after {
padding-right: 5px;
}
+#settings .form-item label.inline {
+ color: #000000;
+ font-size: 18px;
+ display: inline-block;
+ padding-left: 10px;
+}
+
#settings .form-item input[type="text"] {
display: block;
width: 100%;
@@ -434,10 +441,11 @@ h1:after {
padding-right: 20px;
}
-#settings .form-item input[type="checkbox"][name="favorite-city"] {
- margin-top: -20px;
+#settings .form-item label.fav {
+ margin-top: -22px;
position: absolute;
- right: 10px;
+ right: 5px;
+ font-size: 12px;
}
#settings .form-item input[type="radio"] {
@@ -454,6 +462,41 @@ h1:after {
color: #000;
}
+input[type="checkbox"], input[type="radio"] {
+ display:none;
+}
+input[type="checkbox"] + span {
+ display:inline-block;
+ width:20px;
+ height:20px;
+ margin:-1px 4px 0 0;
+ vertical-align:middle;
+ background:url(../assets/checkboxes.png) left top no-repeat;
+ cursor:pointer;
+}
+input[type="checkbox"]:checked + span {
+ background:url(../assets/checkboxes.png) -20px top no-repeat;
+}
+input[type="radio"] + span {
+ display:inline-block;
+ width:20px;
+ height:20px;
+ margin:-1px 4px 0 0;
+ vertical-align:middle;
+ background:url(../assets/checkboxes.png) -40px top no-repeat;
+ cursor:pointer;
+}
+input[type="radio"]:checked + span {
+ background:url(../assets/checkboxes.png) -60px top no-repeat;
+}
+
+input[type="checkbox"][name="favorite-city"] + span {
+ background:url(../assets/checkboxes.png) -80px top no-repeat;
+}
+input[type="checkbox"][name="favorite-city"]:checked + span {
+ background:url(../assets/checkboxes.png) -100px top no-repeat;
+}
+
.clear::after {
content: "";
clear: both;
diff --git a/src/utils.js b/src/utils.js
index 8835a3c..96cd6c6 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -146,7 +146,9 @@ var showErrorMessage = function (message) {
jQuery('#details .location').html('')
jQuery('#details .forecast').html('')
jQuery('#details .hourly #canvas-holder').html('')
- jQuery('#main .content .temp').html('=( ')
+ jQuery('#main .content #temp').html('=( ')
+ jQuery('#main .content .temp .unit').html('')
+ numAnim = null
jQuery('#main .content .temp-note').html(message)
jQuery('#main .actual-icon svg').html('')
diff --git a/src/weather.js b/src/weather.js
index 1eb03ea..3411b30 100644
--- a/src/weather.js
+++ b/src/weather.js
@@ -54,7 +54,14 @@ var refreshWeather = function () {
}
var showWeatherData = function () {
- jQuery('#main .temp').html(roundTemp(wdata[0].main.temp) + '°')
+ //jQuery('#main #temp').html(roundTemp(wdata[0].main.temp))
+ if (numAnim == null) {
+ numAnim = new CountUp("temp", 0, roundTemp(wdata[0].main.temp), 0, 2);
+ numAnim.start();
+ } else {
+ numAnim.update(roundTemp(wdata[0].main.temp))
+ }
+ jQuery('#main .temp .unit').html('°')
jQuery('#main .temp-note').html(wdata[0].weather[0].description)
jQuery('#details .location').html(wdata[0].name.toLowerCase() + ', ' + wdata[0].sys.country.toLowerCase())
jQuery('#main .actual-icon svg').html('')