From ac6d6861bff6fae2a86d287cbd346941ecdac582 Mon Sep 17 00:00:00 2001 From: Nathan Parikh Date: Thu, 12 Oct 2017 22:23:40 -0500 Subject: [PATCH] UI improvements --- css/app.css | 37 +++++++++++++---- js/app_common.js | 102 ++++++++++++++++++++++++----------------------- 2 files changed, 82 insertions(+), 57 deletions(-) diff --git a/css/app.css b/css/app.css index 6d5e61f..181ad32 100644 --- a/css/app.css +++ b/css/app.css @@ -36,7 +36,7 @@ button, body { background: rgba(0, 0, 0, 0.95); color: #fff; - margin-top: 5px; + margin-top: 35px; } ul { margin: 0; @@ -50,6 +50,13 @@ img { -webkit-user-select: none; -webkit-app-region: drag; opacity: 0; + position: fixed; + width: 94%; + z-index: 100; + background: rgba(0, 0, 0, 0.95); + top: 0; + left: 0; + padding: 8px 3% 3px; } .titlebar:hover { opacity: 1; @@ -66,7 +73,6 @@ button { border: 1px solid #252525; padding: 5px 10px; margin: -1px 0px 0px 0px; - font-family: 'Inconsolata', monospace; } header button { background: none; @@ -184,6 +190,14 @@ ul { } .coin-list li .sym:hover { cursor: -webkit-grab; + border-top-color: #4c4c4c; + border-right-color: #4c4c4c; + border-bottom-color: #4c4c4c; + -webkit-transition: all 250ms ease; + -moz-transition: all 250ms ease; + -ms-transition: all 250ms ease; + -o-transition: all 250ms ease; + transition: all 250ms ease; } /*Symbol Colors*/ .coin-list li#coin-BTC .sym { @@ -270,7 +284,6 @@ ul { margin-top: 5px; } #myInput { - font-family: 'Inconsolata', monospace; border: none; padding: 0px 0px 10px; font-size: 14px; @@ -288,7 +301,6 @@ ul { border: 1px solid #252525; padding: 5px 10px; margin: -1px 0px 0px 0px; - font-family: 'Inconsolata', monospace; } #coinlist { margin: 15px 0px 0px 0px; @@ -309,15 +321,18 @@ ul { #coinlist label, .checkbox-styled-label { - height: auto; - width: 100%; + height: 18px; z-index: 0; display: inline-block; position: absolute; top: 0; left: 0; text-indent: 24px; + overflow: hidden; } + #coinlist label { + cursor: pointer; + } #coinlist label div, .checkbox-styled-label div { height: 12px; @@ -329,6 +344,11 @@ ul { transition: all 0ms ease-in-out, border 0ms ease 0ms; position: absolute; top: 0; + -webkit-transition: all 250ms ease; + -moz-transition: all 250ms ease; + -ms-transition: all 250ms ease; + -o-transition: all 250ms ease; + transition: all 250ms ease; } #coinlist input:hover + label div, .checkbox-styled:hover + label div { @@ -404,9 +424,12 @@ ul { ::-webkit-scrollbar-thumb:window-inactive, ::-webkit-scrollbar-thumb { - background: #252525; + background-color: #252525; -webkit-border-radius: 100px; } + ::-webkit-scrollbar-thumb:hover { + background-color: #4c4c4c; + } /*Select Boxes*/ .custom-select { diff --git a/js/app_common.js b/js/app_common.js index 5f02ba3..fa2e3ae 100644 --- a/js/app_common.js +++ b/js/app_common.js @@ -369,56 +369,58 @@ document.getElementById('saveQuantities').onclick = function(){ * SETTINGS ***********/ // Settings - list of coins - function loadJSON(callback) { - var file = 'https://www.cryptocompare.com/api/data/coinlist/'; - var xobj = new XMLHttpRequest(); - xobj.overrideMimeType("application/json"); - xobj.open('GET', file, true); - xobj.onreadystatechange = function () { - if (xobj.readyState == 4 && xobj.status == "200") { - // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode - callback(xobj.responseText); - } - }; - xobj.send(null); - } //loadJSON - - // Generate the list of all coins - loadJSON(function(response) { - // Parse JSON string into object - var myDiv = document.getElementById("coinlist"); - var actual_JSON = JSON.parse(response); - //alert(settings.get('user.coins')); - //console.log(actual_JSON.Data); - - //loop through data, get coin info, generate checkbox for each coin - Object.keys(actual_JSON.Data).forEach(function(key) { - //console.log(actual_JSON.Data[key].Name); - //console.log(actual_JSON.Data[key].CoinName); - var li = document.createElement("li"); - var checkBox = document.createElement("input"); - checkBox.className = "coinCode"; - var label = document.createElement("label"); - label.className = "coinName"; - var div = document.createElement("div"); - checkBox.type = "checkbox"; - checkBox.value = actual_JSON.Data[key].Name; - checkBox.name = "cl[]"; - //check the coins the user has already set - var str = String(settings.get('user.coins')); - var split_str = str.split(","); - if (split_str.indexOf(actual_JSON.Data[key].Name) !== -1) { - checkBox.checked = true; - } - myDiv.appendChild(li); - li.appendChild(checkBox); - li.appendChild(label); - label.appendChild(document.createTextNode(actual_JSON.Data[key].CoinName)); - label.appendChild(document.createTextNode(' ('+actual_JSON.Data[key].Name+')')); - label.appendChild(div); - }); //forEach - - }); //loadJSON +function loadJSON(callback) { + var file = 'https://www.cryptocompare.com/api/data/coinlist/'; + var xobj = new XMLHttpRequest(); + xobj.overrideMimeType("application/json"); + xobj.open('GET', file, true); + xobj.onreadystatechange = function () { + if (xobj.readyState == 4 && xobj.status == "200") { + // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode + callback(xobj.responseText); + } + }; + xobj.send(null); +} //loadJSON + +// Generate the list of all coins +loadJSON(function(response) { + // Parse JSON string into object + var myDiv = document.getElementById("coinlist"); + var actual_JSON = JSON.parse(response); + //alert(settings.get('user.coins')); + //console.log(actual_JSON.Data); + + //loop through data, get coin info, generate checkbox for each coin + Object.keys(actual_JSON.Data).forEach(function(key) { + //console.log(actual_JSON.Data[key].Name); + //console.log(actual_JSON.Data[key].CoinName); + var li = document.createElement("li"); + var checkBox = document.createElement("input"); + checkBox.className = "coinCode"; + var label = document.createElement("label"); + label.className = "coinName"; + var div = document.createElement("div"); + checkBox.type = "checkbox"; + checkBox.value = actual_JSON.Data[key].Name; + checkBox.id = actual_JSON.Data[key].Name; + label.htmlFor = actual_JSON.Data[key].Name; + checkBox.name = "cl[]"; + //check the coins the user has already set + var str = String(settings.get('user.coins')); + var split_str = str.split(","); + if (split_str.indexOf(actual_JSON.Data[key].Name) !== -1) { + checkBox.checked = true; + } + myDiv.appendChild(li); + li.appendChild(checkBox); + li.appendChild(label); + label.appendChild(document.createTextNode(actual_JSON.Data[key].CoinName)); + label.appendChild(document.createTextNode(' ('+actual_JSON.Data[key].Name+')')); + label.appendChild(div); + }); //forEach + +}); //loadJSON // Returns an array with values of the selected (checked) checkboxes in "frm" function getSelectedChbox(frm) {