diff --git a/css/app.css b/css/app.css index 94dbf9f..acd0140 100644 --- a/css/app.css +++ b/css/app.css @@ -50,15 +50,20 @@ button { #min-btn:hover { background: #ffbd45; } -#settings-btn { - padding: 0; +.tabs button { + padding: 0; } -#settings-btn img { - width: 24px; +.tabs button, +.tabs button.active { + display: inline-block; +} +.tabs button img { + width: 19px; opacity: 0.5; } - #settings-btn:hover img { + .tabs button:hover img, + .tabs button.active img { opacity: 1; } @@ -81,6 +86,7 @@ ul { } #portfolio-list.coin-list { font-size: 16px; + padding-top: 9px; } .coin-list li { margin: 0px 0px 15px 0px; @@ -309,6 +315,17 @@ ul { text-decoration: none; color: #252525; } + + /*Portfolio*/ + #portfolio-total-value { + text-align: center; + font-size: 1.5em; + font-weight: 600; + margin: 15px 0px; + } + #portfolioChart { + max-height: 480px; + } /*Scrollbar*/ ::-webkit-scrollbar-corner { diff --git a/images/icons8-Home-64.png b/images/icons8-Home-64.png new file mode 100644 index 0000000..1f15a6d Binary files /dev/null and b/images/icons8-Home-64.png differ diff --git a/images/icons8-Rebalance Portfolio-100.png b/images/icons8-Rebalance Portfolio-100.png new file mode 100644 index 0000000..0f10cae Binary files /dev/null and b/images/icons8-Rebalance Portfolio-100.png differ diff --git a/index.html b/index.html index 3447a96..10e51f3 100644 --- a/index.html +++ b/index.html @@ -15,9 +15,9 @@
- + + -
@@ -89,7 +89,9 @@
Total Value:
- +
+ +
diff --git a/js/app_common.js b/js/app_common.js index caabdca..4d7da5f 100644 --- a/js/app_common.js +++ b/js/app_common.js @@ -148,23 +148,27 @@ function initData() { append(li, span); append(ul, li); i++; - } + } //for //console.log(data.RAW.BTC.USD.PRICE) sortChildren( document.getElementById('prices'), function(li) { return +li.getAttribute('sortorder') } ); + sortChildren( + document.getElementById('portfolio-list'), + function(li) { return +li.getAttribute('sortorder') } + ); //sort your coins sortable('#prices', { handle: 'span' })[0].addEventListener('sortstop', function(e) { // Declare variables - var ul, li, i; + var ul, ulPortfolio, li, liPortfolio, i; ul = document.getElementById("prices"); + ulPortfolio = document.getElementById("portfolio-list"); li = ul.getElementsByTagName('li'); - // Loop through all list items for (i = 0; i < li.length; i++) { li[i].setAttribute("sortorder", i); @@ -174,7 +178,7 @@ function initData() { order: li[i].getAttribute('sortorder') }); //alert(settings.get(elementID + '.order')); - } + } //for //alert(settings.get('coin.'+e+'.order')); }); //sortable @@ -203,29 +207,31 @@ function updateData() { let pricesDISPLAY = data.DISPLAY; // display for everything except coin symbol let pricesRAW = data.RAW; // raw to get BTC instead of bitcoin symbol let portfolioSum = 0; + // Chart labels var chartLabels = []; // Chart data var chartData = []; - // Chart colors + // Chart colors - need to match these colors to the coin in a future release var chartColors = [ - '#F57C00', - '#AFB42B', - '#7B1FA2', - '#512DA8', - '#455A64', - '#1976D2', + '#FF9F1C', + '#2EC4B6', + '#E71D36', + '#011627', + '#FDFFFC', + '#D31EE8', '#0288D1', - '#0288D1', - '#D32F2F', + '#5FC42D', + '#E64A19', '#0097A7', + '#FBC02D', '#00796B', '#388E3C', '#689F38', '#303F9F', - '#FBC02D', + '#C2185B', '#FFA000', - '#E64A19', + '#D32F2F', '#C2185B', '#fff' ]; @@ -320,10 +326,16 @@ function updateData() { chartData.push(quantityTotal); } //for + + sortChildren( + document.getElementById('portfolio-list'), + function(li) { return +li.getAttribute('sortorder') } + ); + var newChartLabels = chartLabels; // Chart - var ctx = document.getElementById("myChart"); + var ctx = document.getElementById("portfolioChart"); var myChart = new Chart(ctx, { type: 'doughnut', data: { @@ -331,7 +343,7 @@ function updateData() { data: chartData, backgroundColor: chartColors, borderColor: '#000', - borderWidth: 2 + borderWidth: 0 }], labels: newChartLabels @@ -342,7 +354,7 @@ function updateData() { position: 'bottom' } } - }); + }); //myChart }); //then } @@ -382,6 +394,7 @@ for (let key of Object.keys(portfolio_list)) { span = createNode('span'); sym = createNode('span'); li.setAttribute("id", "coin-"+[coin]); + li.setAttribute("sortorder", settings.get(li.id+'.order')); append(li, span); append(portfolio_ul, li); diff --git a/main.js b/main.js index 23044ce..a98e337 100644 --- a/main.js +++ b/main.js @@ -31,7 +31,7 @@ function createWindow () { width: mainWindowState.width, height: mainWindowState.height, maxWidth: 360, - minWidth: 240, + minWidth: 280, minHeight: 100, maximizable: false, fullscreenable: false,