Added icons for main and portfolio screens. More portfolio updates. Portfolio coin order now matches main screen order.

css/app.css

@@ -50,15 +50,20 @@ button {
   #min-btn:hover {
     background: #ffbd45;
   }
-#settings-btn {
-  padding: 0;
 
+.tabs button {
+  padding: 0;
 }
-#settings-btn img {
+.tabs button,
-  width: 24px;
+.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 {

index.html

@@ -15,9 +15,9 @@
         <button id="close-btn"></button>
       </div><!-- .controls -->
       <div class="tabs">
-        <button id="main-btn" href="#main">main</button>
+        <button id="main-btn" href="#main"><img src="images/icons8-Home-64.png"></button>
+        <button id="portfolio-btn" href="#portfolio"><img src="images/icons8-Rebalance Portfolio-100.png"></button>
         <button id="settings-btn" href="#settings"><img src="images/icons8-Settings.png"></button>
-        <button id="portfolio-btn" href="#portfolio">folio</button>
       </div><!-- .tabs -->
     </header>
 
@@ -89,7 +89,9 @@
 
       <div id="portfolio-total-value">Total Value: <span class="value"></span></div>
 
-      <canvas id="myChart" width="400" height="400"></canvas>
+      <div class="chart-container" style="position: relative; height:40vh; width:94vw">
+        <canvas id="portfolioChart" width="360" height="360"></canvas>
+      </div>
 
       <!-- show what % each coin is of portfolio -->
 

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',
+                '#FF9F1C',
-                '#AFB42B',
+                '#2EC4B6',
-                '#7B1FA2',
+                '#E71D36',
-                '#512DA8',
+                '#011627',
-                '#455A64',
+                '#FDFFFC',
-                '#1976D2',
+                '#D31EE8',
                 '#0288D1',
-                '#0288D1',
+                '#5FC42D',
-                '#D32F2F',
+                '#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);

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,