From 416d9efc9b1b613df3617f685e3774d27e1e7192 Mon Sep 17 00:00:00 2001 From: Konrad Michalik Date: Sat, 24 Sep 2016 17:43:28 +0200 Subject: [PATCH] improve checkboxes & number counting animation --- assets/checkboxes.jpg | Bin 0 -> 3062 bytes assets/checkboxes.png | Bin 0 -> 1274 bytes index.html | 14 ++++++------ package.json | 3 ++- src/main.js | 3 ++- src/style.css | 49 +++++++++++++++++++++++++++++++++++++++--- src/utils.js | 4 +++- src/weather.js | 9 +++++++- 8 files changed, 69 insertions(+), 13 deletions(-) create mode 100644 assets/checkboxes.jpg create mode 100644 assets/checkboxes.png diff --git a/assets/checkboxes.jpg b/assets/checkboxes.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a07d98b80ad0369850521252421839518fc8f6e8 GIT binary patch literal 3062 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 literal 0 HcmV?d00001 diff --git a/assets/checkboxes.png b/assets/checkboxes.png new file mode 100644 index 0000000000000000000000000000000000000000..4efe70337e47ffd6191ad8345141ebebefacc136 GIT binary patch literal 1274 zcmV}wt@D=IE8EOLB*JRUzfIzlNZD5$8Y$Y?T~iNDE{V-&Y5zpC_B zroLcku9*&MOrNV}f-b|$V`F3KjKS9o3=BxV9$%Q9jcqtS>+^W~n|zjCICp-2er|5g z?RK-4w6N;QWU{rjwY|Mv|JuWojHHR={qYDiE!=i?!JJd zKP~^_I@os4!O_eLFZcEJIlggXVgh5cqgl*!yo_KLsBci09WV1*Lb#`=$K&xB?Xg%a z91cgLQ9g`bJ1@VFgotIeJ-D*Gw6*!Ny$h#1ejDGwKtiz_OCxLB@k_^OJz^le4bA<{ zelc51W4tVu+3aP6TN>%YK;VfgmR>f42?pj!w-dZvn-byfjD+Q62!1G6mJIJ!Rz0k) z_j|mxw=3*6ED;n41nk~G7X|=}+7(<~)_B?QHNfH=l51<8l%Qlf$HlEbl9FpjmlqWi z%P2qAR~Btn8(i+_=+M6h1I*NRaM^rI0tA})NtsYGv%`&=l%Uw{9!*3`ijH+;UBHUL zw)N36!8&+3>wdYO#k3Xj!Axo@1#@UAs;P}mxXZ|~0bgtks z%7@wMbaGLSg|LOBqCjflHmU)QbfI7-Z8%uds|Sw(DE$x^U}jLPY&yComG1hR{NOT7 z<1AUNEJwAxhiFQtN)iNA3O)CE(k4>Bv4thLbSn&xw?Ua(T3RM2CncuAEsb} z=tDNdkw&^C3ZG5r5I`(A#@Xj?$G@&D=^tV9Qk4)sdYHxlGpU|pW15jlFgXxIINiLp z3+)RJVNb9Rid}S05i3n z+D~F~>>+*7&k|+@^50wac$HNCoM9V`ZLSBE+0cB>pP!O4S3||6RG3e0HkmlKU z-@Y&+GZKlx$jNwvL0><5YT@Yr^O%$=gBSpXIuM@`3WY#3%gGw6OX#SR5~pkuUgcf? k!;%}h{)Z(;@=t&P0E;};FHks+aR2}S07*qoM6N<$f*EB}s{jB1 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 2d179ef..8b9b4d6 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,9 @@
-
+
+ +
@@ -58,7 +60,7 @@

- +
@@ -70,20 +72,20 @@

Temperature scale
- °C - °F + +
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('')