Updated style and included issues and PRs

Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>

src/index.html

@@ -26,6 +26,7 @@
         <div id="status"></div>
 
         <div id="result"></div>
+        <div id="subResult"></div>
         <details id="rawResultsWrapper" class="hidden">
           <summary>Raw results</summary>
           <pre id="rawResults"></pre>

src/script.js

@@ -1,6 +1,7 @@
 const btn = document.querySelector("#find");
 const gh = document.querySelector("#github");
 const result = document.querySelector("#result");
+const subResult = document.querySelector("#subResult");
 const status = document.querySelector("#status");
 
 const rawResultsWrapper = document.querySelector("#rawResultsWrapper");
@@ -35,13 +36,13 @@ function find() {
     .then(data => {
       statusUpdate("", "info");
       let score = data.contributions;
-      if (score) {
+      if (!score) {
+        statusUpdate(`Failed to get devstats score for '${user}'.\nEither user doesn't exist or no contributions recorded.`, "error");
+      }
       result.innerHTML = score;
+      subResult.innerHTML = `Issues: ${data.issues} | PRs: ${data.prs}`;
       rawResults.innerText = JSON.stringify(data, "", 2)
       rawResultsWrapper.classList.remove('hidden');
-      } else {
-        statusUpdate(`Failed to get devstats score for '${user}'`, "error");
-      }
     })
     .catch(err => {
       statusUpdate(`Failed to get devstats score for '${user}'`, "error");

src/style.css

@@ -99,6 +99,7 @@ input {
 #status {
   height: 22px;
   margin: 8px;
+  text-align: center;
 }
 
 #status.info {
@@ -114,11 +115,30 @@ input {
   font-style: normal;
   font-weight: bold;
   font-size: 70px;
-  margin: 0.5em;
+  margin: 0.2em;
   height: 100px;
 }
 
-#rawResultsWrapper {
+#subResult {
-  max-width: 90vw;
+  font-family: HK Grotesk;
-  overflow-x: scroll;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 20px;
+  margin: 0em;
+  height: 30px;
+}
+
+#rawResultsWrapper {
+  margin-top: 2em;
+  overflow-x: scroll;
+  width: 100%;
+  text-align: center;
+}
+
+#rawResultsWrapper summary {
+  cursor: pointer;
+}
+
+#rawResultsWrapper pre {
+  text-align: left;
 }