CSS tweaks, updated IOTA logo, updated Readme

CHANGELOG.md

@@ -2,6 +2,15 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.0.1] - 2018-05-16
+
+### Changed
+- Updated Readme file
+- Tweaked CSS file for minor improvements
+
+### Fixed
+- Updated IOTA logo so that it is not black on black in color mode
+
 
 ## [1.0.0] - 2018-05-15
 

MMM-CoinMarketCap.css

@@ -11,27 +11,11 @@
 /**
  * Font configurations
  */
-.MMM-CoinMarketCap .x-small {
-  font-size: 15px;
-  line-height: 20px;
-}
-.MMM-CoinMarketCap .small {
-  font-size: 20px;
-  line-height: 25px;
-}
-.MMM-CoinMarketCap .medium {
-  font-size: 30px;
-  line-height: 35px;
-}
-.MMM-CoinMarketCap .large {
-  font-size: 65px;
-  line-height: 65px;
-}
-.MMM-CoinMarketCap .x-large {
-  font-size: 75px;
-  line-height: 75px;
-  letter-spacing: -3px;
-}
+.MMM-CoinMarketCap .x-small	{ font-size: 15px; line-height: 20px; }
+.MMM-CoinMarketCap .small	{ font-size: 20px; line-height: 25px; }
+.MMM-CoinMarketCap .medium	{ font-size: 30px; line-height: 35px; }
+.MMM-CoinMarketCap .large	{ font-size: 65px; line-height: 65px; }
+.MMM-CoinMarketCap .x-large	{ font-size: 75px; line-height: 75px; letter-spacing: -3px; }
 
 .MMM-CoinMarketCap .negative { color: #FF5A44; }
 .MMM-CoinMarketCap .positive { color: #A3EA80; }
@@ -47,7 +31,7 @@
  * Main Table CSS
  */
 .MMM-CoinMarketCap table td, .MMM-CoinMarketCap table th {
-	padding: 4px 8px 4px 8px;
+	padding: 4px 7px 4px 7px;
 	text-align: left;
 	vertical-align: middle;
 }
@@ -62,7 +46,9 @@
 .MMM-CoinMarketCap table.fullSize { width: 100%; }
 .MMM-CoinMarketCap table.minimalSize { width: auto; }
 .right	.MMM-CoinMarketCap table.minimalSize { margin-left: auto; }
-.center	.MMM-CoinMarketCap table.minimalSize { margin-left: auto; margin-right: auto; }
+.center	.MMM-CoinMarketCap table.minimalSize,
+.third	.MMM-CoinMarketCap table.minimalSize,
+.bar	.MMM-CoinMarketCap table.minimalSize { margin-left: auto; margin-right: auto; }
 
 /**
  * Table cells by type and their content
@@ -81,9 +67,9 @@
 .MMM-CoinMarketCap td.cell-logo img {
 	vertical-align: middle;
 }
-.MMM-CoinMarketCap td.logo-small img 	{ height: 16px; 		width: 16px; }
+.MMM-CoinMarketCap td.logo-small img 	{ height: 16px;		width: 16px; }
 .MMM-CoinMarketCap td.logo-medium img 	{ height: 32px;		width: 32px; }
-.MMM-CoinMarketCap td.logo-large img 	{ height: 64px; 		width: 64px; }
+.MMM-CoinMarketCap td.logo-large img 	{ height: 64px;		width: 64px; }
 .MMM-CoinMarketCap td.logo-x-large img 	{ height: 128px; 	width: 128px; }
 .MMM-CoinMarketCap .image-bw {
 	filter: invert(100%) grayscale(100%);
@@ -116,4 +102,5 @@
 .MMM-CoinMarketCap td.cell-priceWithChanges .changesPart div {
 	display: inline;
 	padding-left: 8px;
-}
+}
+.MMM-CoinMarketCap td.cell-priceWithChanges .changesPart div:first-child { padding-left: 0; }

README.md

@@ -6,7 +6,7 @@ This module displays cryptocurrency information from the [Coin Market Cap](https
 
 | Status  | Version | Date       | Maintained? | Minimum MagicMirror² Version |
 |:------- |:------- |:---------- |:----------- |:---------------------------- |
-| Working | `1.0.0` | 2018-05-15 | Yes         |`2.2.1`                       |
+| Working | `1.0.1` | 2018-05-16 | Yes         |`2.2.1`                       |
 
 ### Example
 ![Example of MMM-CoinMarketCap](images/sample.png?raw=true "Example screenshot")
@@ -40,7 +40,11 @@ var config = {
             position: "top_left",
             header: "Cryptocurrencies",
             config: {
-                // See below for Configuration Options
+                currencies: ['bitcoin', 'ethereum', 'litecoin', 'ripple'],
+                view: 'graphWithChanges',
+                conversion: 'CAD',
+                ...
+                // See below for more Configuration Options
             }
         },
         ...
@@ -113,11 +117,11 @@ Here is an example of a custom view created using the following configuration op
 
 ### Custom Logo Images
 
-By default, this module will download the logo image files for the requested currencies. It will save them into the `logos` folder located in the module's folder.  Some logos for popular currencies have already been provided with this module. If you would like to use your own logo for a particular currency, simply replace `.png` file in the `logos` folder with your custom logo file. New logo files will only be downloaded if there is NOT already an existing logo in the `logos` folder.  
+By default, this module will download the logo image files for the requested currencies. It will save them into the `logos` folder located in the module's folder.  Some logos for popular currencies have already been provided with this module. If you would like to use your own logo for a particular currency, simply replace the `.png` file in the `logos` folder with your custom logo file. New logo files will only be downloaded if there is NOT already an existing file in the `logos` folder.  
 
-When using black and white logos in the module, the color logos are loaded and a CSS filter is applied to convert the image to grayscale and invert the colors. This looks great for most of the logos, but as you can imagine, some of them don't look as good as others. If you would prefer a better black and white logo for a particular currency, you can make your own image file and place it into the `logos\bw` folder within this module's folder. Note: the images from the `logos\bw` fill be displayed  as is with no filtering applied, so they need to be grayscale images.  
+When using black and white logo mode, this module actually loads the color logos and a CSS filter is applied to convert the image to grayscale. This looks great for most of the logos, but as you can imagine, there may be some that don't look as good as the rest. If you would prefer a better black and white logo for a particular currency, you can make your own image file and place it into the `logos\bw` folder. Note: the images from the `logos\bw` will be displayed as is, with no CSS filtering applied, so they need to be grayscale images.  
 
-The naming convention for the logos is as follows: `{symbol}-{size}.png`. `{symbol}` represents the currency's short name, usually 3 to 5 characters, which MUST be in lower case.  `{size}` represents the size of the image in pixels.  There are 4 sizes configured for this module: 16, 32, 64, and 128.  These image files should be 16x16px, 32x32px, 64x64px, and 128x128px respectively.
+The naming convention for the logos is as follows: `{symbol}-{size}.png`. `{symbol}` represents the currency's short name, usually 3 to 5 characters, which MUST be in lower case.  `{size}` represents the size of the image in pixels.  There are 4 sizes configured in this module: 16, 32, 64, and 128.  These image files should be 16x16px, 32x32px, 64x64px, and 128x128px respectively.
 
 ## Updates
 To update the module to the latest version, use your terminal to: