mirror of
https://github.com/nathanp/crypto-price-widget.git
synced 2025-11-06 03:08:55 -05:00
UI improvements
This commit is contained in:
Nathan Parikh
parent
649a26299c
commit
ac6d6861bf
37
css/app.css
37
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 {
|
||||
|
||||
100
js/app_common.js
100
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
|
||||
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
|
||||
// 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) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user