Merge pull request #150 from lbryio/home_features_refactor

turn home features area into a component

app/components/link-grid.js

@@ -0,0 +1,22 @@
+"use strict";
+
+import html from "choo/html";
+
+function returnLinkTemplate(title, description, destination, label) {
+  return `
+    <li class="link-grid__link">
+     <p class="link-grid__title"><strong>${title}</strong></p>
+     <p class="link-grid__description">${description}</p>
+     <a class="link-grid__cta" href="${destination}">${label}</a>
+    </li>
+  `;
+}
+
+export default (links) => {
+  const renderedLinks = links.map((link) => returnLinkTemplate(link.title, link.description, link.destination, link.label));
+  return html`
+    <ul class="link-grid">
+      ${renderedLinks}
+    </ul>
+  `;
+}

app/sass/bundle.scss

@@ -16,6 +16,7 @@
   "partials/footer",
   "partials/github-feed",
   "partials/glossary",
+  "partials/link-grid",
   "partials/navigation",
   "partials/mission-statement",
   "partials/modal",

app/sass/pages/_home.scss

@@ -63,60 +63,6 @@
 
   .features {
     grid-area: features;
-
-    .home__features {
-      align-content: center;
-      border-bottom: 1px solid rgba($black, 0.05);
-      display: flex;
-      flex-flow: row wrap;
-      list-style-type: none;
-      padding-top: 2rem;
-      padding-bottom: 2rem;
-    }
-
-    .home__feature {
-      position: relative;
-      text-align: center;
-      vertical-align: top;
-
-      @media (min-width: 651px) {
-        width: 50%;
-      }
-
-      @media (max-width: 650px) {
-        width: 100%;
-
-        &:first-of-type {
-          padding-bottom: 1rem;
-        }
-
-        &:last-of-type {
-          padding-top: 1rem;
-        }
-      }
-    }
-
-
-
-    .home__feature__title {
-      font-size: 2rem;
-      margin-bottom: 0.5rem;
-    }
-
-    .home__feature__description {
-      font-size: 1rem;
-      left: 10%;
-      margin-bottom: 1rem;
-      position: relative;
-      width: 80%;
-    }
-
-    .home__feature__cta {
-      @extend .__button-black;
-      display: inline-block;
-      font-size: 1rem;
-      position: relative;
-    }
   }
 
   .intro,

app/sass/partials/_link-grid.scss

@@ -0,0 +1,53 @@
+.link-grid {
+  align-content: center;
+  border-bottom: 1px solid rgba($black, 0.05);
+  display: flex;
+  flex-flow: row wrap;
+  list-style-type: none;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.link-grid__link {
+  position: relative;
+  text-align: center;
+  vertical-align: top;
+
+  @media (min-width: 651px) {
+    width: 50%;
+  }
+
+  @media (max-width: 650px) {
+    width: 100%;
+
+    &:first-of-type {
+      padding-bottom: 1rem;
+    }
+
+    &:last-of-type {
+      padding-top: 1rem;
+    }
+  }
+}
+
+
+
+.link-grid__title {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.link-grid__description {
+  font-size: 1rem;
+  left: 10%;
+  margin-bottom: 1rem;
+  position: relative;
+  width: 80%;
+}
+
+.link-grid__cta {
+  @extend .__button-black;
+  display: inline-block;
+  font-size: 1rem;
+  position: relative;
+}

app/views/home.js

@@ -5,7 +5,7 @@
 //  P A C K A G E
 
 import html from "choo/html";
-
+import linkGrid from "../components/link-grid";
 
 
 //  E X P O R T
@@ -22,19 +22,17 @@ module.exports = exports = () => html`
     </section>
 
     <section class="features">
-      <ul class="home__features">
+      ${linkGrid([{
-        <li class="home__feature">
+        title: "New to LBRY?",
-          <p class="home__feature__title"><strong>New to LBRY?</strong></p>
+        description: "Learn how LBRY works with 3 easy examples",
-          <p class="home__feature__description">Learn how LBRY works with 3 easy examples</p>
+        destination: "/tour",
-          <a class="home__feature__cta" href="/tour">Take the Tour</a>
+        label: "Take the Tour"
-        </li>
+      }, {
-
+        title: "New to LBRY?",
-        <li class="home__feature">
+        description: "Learn how LBRY works with 3 easy examples",
-          <p class="home__feature__title"><strong>Want to contribute?</strong></p>
+        destination: "/tour",
-          <p class="home__feature__description">Help make LBRY better!</p>
+        label: "Take the Tour"
-          <a class="home__feature__cta" href="/contribute">Explore our repos</a>
+      }])}
-        </li>
-      </ul>
     </section>
 
     <section class="intro">