Merge pull request #52 from freyamade/fix-org-page

Fix org page

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 1.0.12
+- Fixing issues with displaying the chart on org profiles
+- Minor style fixes to the chart container on personal profiles
+
 # 1.0.11
 - Handling error response codes from the Github API instead of just making them a generic error
 

dist/manifest.json

@@ -38,7 +38,7 @@
     "tabs"
   ],
   "short_name": "github-user-languages",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "web_accessible_resources": [
     "colors.json"
   ]

dist/popup.html

@@ -37,7 +37,7 @@ <h4>API Token <small>Click out of input to save</small></h4>
         <p>If you wish to be able to see your own private repos in the chart, be sure to select the <b>repo</b> scope for the token also.</p>
     </main>
     <footer>
-        <small>GitHub User Languages v1.0.11</small>
+        <small>GitHub User Languages v1.0.12</small>
     </footer>
     <script src="js/popup.js"></script>
 </body>

package.json

@@ -27,8 +27,8 @@
     "archive-src": "zip -r src.zip package.json package-lock.json src/ webpack/ tsconfig.json tslint.json README.md",
     "build": "webpack --config webpack/webpack.prod.js",
     "deploy-amo": "web-ext sign --api-key=$AMO_ISSUER --api-secret=$AMO_SECRET",
-    "watch": "webpack --config webpack/webpack.dev.js --watch",
-    "lint": "tslint src/*.ts"
+    "lint": "tslint src/*.ts",
+    "watch": "webpack --config webpack/webpack.dev.js --watch"
   },
-  "version": "1.0.11"
-}
+  "version": "1.0.12"
+}

src/content.ts

@@ -24,7 +24,7 @@ class LanguageDisplay {
     if (this.parent === null) {
       // Org page, set the flag as such
       this.isOrg = true
-      this.parent = document.querySelector('div.col-4.float-right.pl-4')
+      this.parent = document.querySelector('div.js-profile-tab-count-container')
     }
     this.canvas = null
     this.container = null
@@ -64,7 +64,6 @@ class LanguageDisplay {
       // This is where we need to add the error display
       // Create the container, add it to the page and then add an error message to it
       this.container = this.createContainer()
-      this.parent.appendChild(this.container)
 
       // If the error is an api error, just get the message out of it, otherwise insert generic message
       let message = 'An error occurred when fetching data from the GitHub API. This could be due to rate-limiting.' +
@@ -93,6 +92,7 @@ class LanguageDisplay {
     const header = document.createElement('h4')
     const headerText = document.createTextNode('Languages')
     header.appendChild(headerText)
+
     if (this.isOrg) {
       // Need to create an extra div for the Box-body class
       this.orgDiv = document.createElement('div')
@@ -103,12 +103,22 @@ class LanguageDisplay {
       // Add the inner div to the outer one
       this.orgDiv.appendChild(header)
       div.appendChild(this.orgDiv)
+
+      // Get the last Box child of the parent div, and insert this box in after that
+      const siblings = this.parent.querySelectorAll('div.Box')
+      const sibling = siblings[siblings.length - 1]
+      this.parent.insertBefore(div, sibling.nextSibling)
     }
+
     else {
-      div.classList.add('border-top', 'py-3', 'clearfix')
-      header.classList.add('mb-1', 'h4')
+      div.classList.add('border-top', 'color-border-secondary', 'pt-3', 'mt-3', 'clearfix', 'hide-sm', 'hide-md')
+      header.classList.add('mb-2', 'h4')
       div.appendChild(header)
+
+      // Append the container to the parent
+      this.parent.appendChild(div)
     }
+
     return div
   }
 
@@ -128,7 +138,6 @@ class LanguageDisplay {
 
   private build(colorData: IColorData, repoData: IRepoData) {
     this.container = this.createContainer()
-    this.parent.appendChild(this.container)
     // Get the width and height of the container and use it to build the canvas
     const width = +(window.getComputedStyle(this.container).width.split('px')[0])
     this.canvas = this.createCanvas(width)