CopyBot/crypto-price-widget
1
0
Fork 0
mirror of https://github.com/nathanp/crypto-price-widget.git synced 2025-11-06 03:08:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

UI improvements

Browse Source
This commit is contained in:
Nathan Parikh 2017-10-12 22:23:40 -05:00
parent 649a26299c
commit ac6d6861bf
2 changed files with 81 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
css/app.css
View File

@ -36,7 +36,7 @@ button,
body { body {
background: rgba(0, 0, 0, 0.95); background: rgba(0, 0, 0, 0.95);
color: #fff; color: #fff;
margin-top: 5px; margin-top: 35px;
} }
ul { ul {
margin: 0; margin: 0;
@ -50,6 +50,13 @@ img {
-webkit-user-select: none; -webkit-user-select: none;
-webkit-app-region: drag; -webkit-app-region: drag;
opacity: 0; 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 { .titlebar:hover {
opacity: 1; opacity: 1;
@ -66,7 +73,6 @@ button {
border: 1px solid #252525; border: 1px solid #252525;
padding: 5px 10px; padding: 5px 10px;
margin: -1px 0px 0px 0px; margin: -1px 0px 0px 0px;
font-family: 'Inconsolata', monospace;
} }
header button { header button {
background: none; background: none;
@ -184,6 +190,14 @@ ul {
} }
.coin-list li .sym:hover { .coin-list li .sym:hover {
cursor: -webkit-grab; 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*/ /*Symbol Colors*/
.coin-list li#coin-BTC .sym { .coin-list li#coin-BTC .sym {
@ -270,7 +284,6 @@ ul {
margin-top: 5px; margin-top: 5px;
} }
#myInput { #myInput {
font-family: 'Inconsolata', monospace;
border: none; border: none;
padding: 0px 0px 10px; padding: 0px 0px 10px;
font-size: 14px; font-size: 14px;
@ -288,7 +301,6 @@ ul {
border: 1px solid #252525; border: 1px solid #252525;
padding: 5px 10px; padding: 5px 10px;
margin: -1px 0px 0px 0px; margin: -1px 0px 0px 0px;
font-family: 'Inconsolata', monospace;
} }
#coinlist { #coinlist {
margin: 15px 0px 0px 0px; margin: 15px 0px 0px 0px;
@ -309,15 +321,18 @@ ul {
#coinlist label, #coinlist label,
.checkbox-styled-label { .checkbox-styled-label {
height: auto; height: 18px;
width: 100%;
z-index: 0; z-index: 0;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
text-indent: 24px; text-indent: 24px;
overflow: hidden;
} }
#coinlist label {
cursor: pointer;
}
#coinlist label div, #coinlist label div,
.checkbox-styled-label div { .checkbox-styled-label div {
height: 12px; height: 12px;
@ -329,6 +344,11 @@ ul {
transition: all 0ms ease-in-out, border 0ms ease 0ms; transition: all 0ms ease-in-out, border 0ms ease 0ms;
position: absolute; position: absolute;
top: 0; 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, #coinlist input:hover + label div,
.checkbox-styled:hover + label div { .checkbox-styled:hover + label div {
@ -404,9 +424,12 @@ ul {
::-webkit-scrollbar-thumb:window-inactive, ::-webkit-scrollbar-thumb:window-inactive,
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #252525; background-color: #252525;
-webkit-border-radius: 100px; -webkit-border-radius: 100px;
} }
::-webkit-scrollbar-thumb:hover {
background-color: #4c4c4c;
}
/*Select Boxes*/ /*Select Boxes*/
.custom-select { .custom-select {

96
js/app_common.js
View File

@ -369,56 +369,58 @@ document.getElementById('saveQuantities').onclick = function(){
* SETTINGS * SETTINGS
***********/ ***********/
// Settings - list of coins // Settings - list of coins
function loadJSON(callback) { function loadJSON(callback) {
var file = 'https://www.cryptocompare.com/api/data/coinlist/'; var file = 'https://www.cryptocompare.com/api/data/coinlist/';
var xobj = new XMLHttpRequest(); var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json"); xobj.overrideMimeType("application/json");
xobj.open('GET', file, true); xobj.open('GET', file, true);
xobj.onreadystatechange = function () { xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") { 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 // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText); callback(xobj.responseText);
} }
}; };
xobj.send(null); xobj.send(null);
} //loadJSON } //loadJSON
// Generate the list of all coins // Generate the list of all coins
loadJSON(function(response) { loadJSON(function(response) {
// Parse JSON string into object // Parse JSON string into object
var myDiv = document.getElementById("coinlist"); var myDiv = document.getElementById("coinlist");
var actual_JSON = JSON.parse(response); var actual_JSON = JSON.parse(response);
//alert(settings.get('user.coins')); //alert(settings.get('user.coins'));
//console.log(actual_JSON.Data); //console.log(actual_JSON.Data);
//loop through data, get coin info, generate checkbox for each coin //loop through data, get coin info, generate checkbox for each coin
Object.keys(actual_JSON.Data).forEach(function(key) { Object.keys(actual_JSON.Data).forEach(function(key) {
//console.log(actual_JSON.Data[key].Name); //console.log(actual_JSON.Data[key].Name);
//console.log(actual_JSON.Data[key].CoinName); //console.log(actual_JSON.Data[key].CoinName);
var li = document.createElement("li"); var li = document.createElement("li");
var checkBox = document.createElement("input"); var checkBox = document.createElement("input");
checkBox.className = "coinCode"; checkBox.className = "coinCode";
var label = document.createElement("label"); var label = document.createElement("label");
label.className = "coinName"; label.className = "coinName";
var div = document.createElement("div"); var div = document.createElement("div");
checkBox.type = "checkbox"; checkBox.type = "checkbox";
checkBox.value = actual_JSON.Data[key].Name; checkBox.value = actual_JSON.Data[key].Name;
checkBox.name = "cl[]"; checkBox.id = actual_JSON.Data[key].Name;
//check the coins the user has already set label.htmlFor = actual_JSON.Data[key].Name;
var str = String(settings.get('user.coins')); checkBox.name = "cl[]";
var split_str = str.split(","); //check the coins the user has already set
if (split_str.indexOf(actual_JSON.Data[key].Name) !== -1) { var str = String(settings.get('user.coins'));
checkBox.checked = true; var split_str = str.split(",");
} if (split_str.indexOf(actual_JSON.Data[key].Name) !== -1) {
myDiv.appendChild(li); checkBox.checked = true;
li.appendChild(checkBox); }
li.appendChild(label); myDiv.appendChild(li);
label.appendChild(document.createTextNode(actual_JSON.Data[key].CoinName)); li.appendChild(checkBox);
label.appendChild(document.createTextNode(' ('+actual_JSON.Data[key].Name+')')); li.appendChild(label);
label.appendChild(div); label.appendChild(document.createTextNode(actual_JSON.Data[key].CoinName));
}); //forEach label.appendChild(document.createTextNode(' ('+actual_JSON.Data[key].Name+')'));
label.appendChild(div);
}); //forEach
}); //loadJSON }); //loadJSON
// Returns an array with values of the selected (checked) checkboxes in "frm" // Returns an array with values of the selected (checked) checkboxes in "frm"
function getSelectedChbox(frm) { function getSelectedChbox(frm) {