use pr icon to show if a pr is open or not (#105)

* use pr icon to show if a pr is open or not * move icon * fix missing css
leapfrogtechnology · Oct 2, 2017 · a412fc1 · a412fc1
1 parent 6e8a14d
commit a412fc1
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 13 deletions.
diff --git a/controllers/index.js b/controllers/index.js
@@ -39,7 +39,7 @@ exports.index = (req, res) => {
                     repo_name: repo.replace('https://github.com/', ''),
                     title: event.title,
                     url: event.html_url,
-                    state: event.state,
+                    open: event.state === 'open',
                     hasHacktoberFestLabel: hacktoberFestLabels.length > 0
                 };
 

diff --git a/public/css/main.css b/public/css/main.css
@@ -1,21 +1,35 @@
 @font-face {
-    font-family: 'squealerregular';
-    src: url('fonts/squealer-webfont.eot');
-    src: url('fonts/squealer-webfont.eot?#iefix') format('embedded-opentype'),
+  font-family: 'squealerregular';
+  src: url('fonts/squealer-webfont.eot');
+  src: url('fonts/squealer-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/squealer-webfont.woff2') format('woff2'),
     url('fonts/squealer-webfont.woff') format('woff'),
     url('fonts/squealer-webfont.ttf') format('truetype'),
     url('fonts/squealer-webfont.svg#squealerregular') format('svg');
-    font-weight: normal;
-    font-style: normal;
+  font-weight: normal;
+  font-style: normal;
 }
 
 body {
-    background-image: radial-gradient(circle, #3241a6 0, #202a6b 120%);
-    font-family: "proxima-nova", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", "Arial", sans-serif;
+  background-image: radial-gradient(circle, #3241a6 0, #202a6b 120%);
+  font-family: "proxima-nova", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue",
+    "Arial", sans-serif;
 }
 
 h1 {
-    font-family: squealerregular;
-    font-weight: normal;
+  font-family: squealerregular;
+  font-weight: normal;
+}
+
+.pr {
+  min-height: 64px;
+}
+
+.pr > .open > svg {
+  fill: #2cbe4e;
+}
+
+.pr > .closed > svg {
+  fill: #6f42c1;
 }
diff --git a/views/layouts/main.hbs b/views/layouts/main.hbs
@@ -18,7 +18,7 @@
     <meta name="twitter:title" content="Hacktoberfest Checker">
     <meta name="twitter:description" content="Check how you're doing in hacktoberfest">
     <meta name="twitter:image" content="https://hacktoberfestchecker.herokuapp.com/img/og.png">
-    <link rel='icon' type='image/x-icon' href='/img/favicon.ico' />
+    <link rel="icon" type="image/x-icon" href="/img/favicon.ico" />
     <title>Hacktoberfest Checker</title>
     <link rel="stylesheet" href="https://unpkg.com/tachyons@4.8.0/css/tachyons.min.css"/>
     <link rel="stylesheet" href="/css/main.css">

diff --git a/views/partials/prs.hbs b/views/partials/prs.hbs
@@ -8,8 +8,19 @@
     <h3 class="white"><strong>{{ statement }}</strong></h3>
 
     {{#each prs}}
-      <a href="{{this.url}}" class="center db pa3 bg-white bb br1 w-75 w-50-ns grey dim pointer no-underline {{#if hasHacktoberFestLabel}}b--orange{{/if}}">
-        {{this.repo_name}} - #{{this.title}} ({{this.state}})
+      <a href="{{this.url}}" class="center db pa3 bg-white bb br1 w-75 w-50-ns grey dim pointer no-underline pr {{#if hasHacktoberFestLabel}}b--orange{{/if}}">
+        {{#if this.open}}
+          <div class="fl w-10 pa2 open">
+            <svg aria-hidden="true" height="24" version="1.1" viewBox="0 0 12 16" width="32"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
+          </div>
+        {{else}}
+          <div class="fl w-10 pa2 closed">
+            <svg aria-hidden="true" height="24" version="1.1" viewBox="0 0 12 16" width="32"><path fill-rule="evenodd" d="M10 7c-.73 0-1.38.41-1.73 1.02V8C7.22 7.98 6 7.64 5.14 6.98c-.75-.58-1.5-1.61-1.89-2.44A1.993 1.993 0 0 0 2 .99C.89.99 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2a1.993 1.993 0 0 0 1-3.72V7.67c.67.7 1.44 1.27 2.3 1.69.86.42 2.03.63 2.97.64v-.02c.36.61 1 1.02 1.73 1.02 1.11 0 2-.89 2-2 0-1.11-.89-2-2-2zm-6.8 6c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm8 6c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
+          </div>
+        {{/if}}
+        <div class="fl w-90 pa2">
+          {{this.repo_name}} - #{{this.title}}
+        </div>
       </a>
     {{/each}}
 {{/exists}}