updating JS and styling

una · Sep 13, 2016 · 2f81ebc · 2f81ebc
1 parent 76fbaa1
commit 2f81ebc
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 39 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -8,22 +8,7 @@
   "globals": {
     "window": true,
     "define": true,
-    "module": true,
-    "DO": true,
-    "TimelineMax": true,
-    "TweenMax": true,
-    "Expo": true,
-    "Power0": true,
-    "Elastic": true,
-    "Back": true,
-    "ScrollMagic": true,
-    "Draggable": true,
-    "Flickity": true,
-    "Cookies": true,
-    "Layzr": true,
-    "$": true,
-    "analytics": true,
-    "Mailcheck": true
+    "$": true
   },
   "env": {
     "node": true,

diff --git a/README.md b/README.md
@@ -7,6 +7,17 @@ Instant, up-to-date, and theme-able browser statistics for your presentations (s
 - automatic browser logos & caniuse data
 - not compatible with IE 6/7
 
+## Usage
+
+Your browser logo options are [here](https://github.com/alrra/browser-logos).
+
+- chrome
+- firefox
+- opera
+- edge
+
+Your feature icons are based on the [Caniuse API](https://github.com/nyalab/caniuse-api)
+
 ## Development & Contribution
 
 To develop: `npm run dev`

diff --git a/dist/js/main.js b/dist/js/main.js
diff --git a/dist/styles/main.css b/dist/styles/main.css
diff --git a/src/index.html b/src/index.html
@@ -8,7 +8,14 @@
 <body>
 <h1>Hello World</h1>
 
-<ul id="caniuse--result-list" data-propName="css-filters" data-browsers="firefox chrome edge"></ul>
+<!-- style only for page purposes -->
+<style>
+  body {
+    font-family: 'Open Sans';
+  }
+</style>
+
+<ul id="caniuse--result-list" data-propName="css-filters" data-browsers="opera safari firefox chrome edge"></ul>
 
 <script src="../dist/js/main.js"></script>
 </body>

diff --git a/src/js/main.js b/src/js/main.js
@@ -19,16 +19,16 @@ class ResultBlock {
     // a: Up to which browser version the feature is partially supported
     // X: Up to which browser version the feature is prefixed
     for (let browser of browsers) {
-      let browserName = browser;
-      let propName = this.name;
+      const browserName = browser;
+      const propName = this.name;
       let returnedResult = '';
       let supportLevel = '';
       let isPrefixed = false;
-      let supportResults = this.supportCall()[browser];
+      const supportResults = this.supportCall()[browser];
 
       if (supportResults.y) { // its supported
         supportLevel = 'full';
-        returnedResult = supportResults.y;
+        returnedResult = supportResults.y + '+';
 
         if (supportResults.a) {
           supportLevel = 'partial';
@@ -50,19 +50,29 @@ class ResultBlock {
   buildBlock(browserName, publishedResult, supportLevel, isPrefixed) {
 
     // request the browser icon
-    let xhr = new XMLHttpRequest();
+    const xhr = new XMLHttpRequest();
 
     xhr.onreadystatechange = function() {
       if (xhr.readyState == XMLHttpRequest.DONE) {
         let prefixMsg = '';
-        let browserImg = xhr.responseText;
+        let browserImg = '';
+
+        // capitalizing Browser name
+        browserName = browserName.replace(/(^|\s)[a-z]/g, (f) => {return f.toUpperCase();});
+
+        // error handling
+        if (xhr.status == 404) {
+          browserImg = defaultImgLink;
+        } else {
+          browserImg = xhr.responseText;
+        }
 
         DOMContainer.innerHTML +=
          `<li class="support--${supportLevel}">
           <div class="caniuse--browser-img">${browserImg}</div>
           <h2 class="caniuse--browser-name">${browserName}</h2>
           <h3 class="caniuse--browser-results">${publishedResult}</h3>
-          <p class="caniuse--support-level">${supportLevel} support</p>`;
+          <p class="caniuse--support-level">support: ${supportLevel}</p>`;
 
         if (isPrefixed) {
           // these should be switch statements
@@ -92,16 +102,13 @@ class ResultBlock {
 // Read the DOM to initiate
 document.onreadystatechange = () => {
   if (document.readyState === 'complete') {
-    let name = DOMContainer.getAttribute('data-propName');
-    let browsers = DOMContainer.getAttribute('data-browsers').split(' ');
+    const name = DOMContainer.getAttribute('data-propName');
+    const browsers = DOMContainer.getAttribute('data-browsers').split(' ');
     console.log(name, browsers);
     new ResultBlock(name, true).browserResults(browsers);
   }
 };
 
-// call it in code:
-// new ResultBlock('css-filters', true).browserResults(['chrome', 'firefox', 'safari', 'edge']);
-
 // Outline
 // ---
 // have user specify which browsers they want to use:

diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -4,13 +4,12 @@ $color--error: #de2a2a; // no support
 $color--text--light: #fff; // text color on dark backgrounds
 $color--text--dark: #000; // text color on light backgrounds
 
-$font-stack: 'Open Sans', 'San Francisco', 'Helvetica Neue', Arial, sans-serif;
 $font__browser--size: 32px;
 $font__version--size: 24px;
 $font__meta--size: 18px;
 $border-radius: 2px;
 $li-margin: 10px;
-$icon-width: 60%;
+$icon-width: 120px;
 
 // Text Contrast Mixin
 // Determines font color based
@@ -33,7 +32,7 @@ $contrast-settings: (
 #caniuse--result-list {
   display: flex;
   flex-wrap: wrap;
-  font-family: $font-stack;
+  font-family: inherit;
   margin: 0;
   padding: 0;
 
@@ -49,6 +48,7 @@ $contrast-settings: (
   .caniuse {
     &--browser-img {
       width: $icon-width;
+      height: $icon-width;
       margin: $li-margin*2 auto 0;
     }