From 4ad784da2f6e2020be8aeb78391268d17e7b0d36 Mon Sep 17 00:00:00 2001 From: Jeremy Kauffman Date: Mon, 24 Sep 2018 16:58:03 -0400 Subject: [PATCH 1/2] turn home features section into a component --- app/components/link-grid.js | 22 +++++++++++++ app/sass/bundle.scss | 1 + app/sass/pages/_home.scss | 54 ------------------------------- app/sass/partials/_link-grid.scss | 53 ++++++++++++++++++++++++++++++ app/views/home.js | 26 +++++++-------- 5 files changed, 88 insertions(+), 68 deletions(-) create mode 100644 app/components/link-grid.js create mode 100644 app/sass/partials/_link-grid.scss diff --git a/app/components/link-grid.js b/app/components/link-grid.js new file mode 100644 index 0000000..b68570d --- /dev/null +++ b/app/components/link-grid.js @@ -0,0 +1,22 @@ +"use strict"; + +import html from "choo/html"; + +function returnLinkTemplate(title, description, destination, label) { + return ` +
  • +

    ${title}

    +

    ${description}

    + ${label} +
    • + `; +} + +export default (links) => { + const renderedLinks = links.map((link) => returnLinkTemplate(link.title, link.description, link.destination, link.label)); + return html` + + `; +} diff --git a/app/sass/bundle.scss b/app/sass/bundle.scss index 3e8215f..c5804cf 100755 --- a/app/sass/bundle.scss +++ b/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", diff --git a/app/sass/pages/_home.scss b/app/sass/pages/_home.scss index d178ef5..8b79cfd 100644 --- a/app/sass/pages/_home.scss +++ b/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, diff --git a/app/sass/partials/_link-grid.scss b/app/sass/partials/_link-grid.scss new file mode 100644 index 0000000..952cd11 --- /dev/null +++ b/app/sass/partials/_link-grid.scss @@ -0,0 +1,53 @@ +.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; +} diff --git a/app/views/home.js b/app/views/home.js index 028bf14..b24b74b 100644 --- a/app/views/home.js +++ b/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`
    - + ${linkGrid([{ + title: "New to LBRY?", + description: "Learn how LBRY works with 3 easy examples", + destination: "/tour", + label: "Take the Tour" + }, { + title: "New to LBRY?", + description: "Learn how LBRY works with 3 easy examples", + destination: "/tour", + label: "Take the Tour" + }])}
    From 3ba7557d0170fad9d7c49593511d3238bf8052c7 Mon Sep 17 00:00:00 2001 From: Jeremy Kauffman Date: Mon, 24 Sep 2018 17:14:50 -0400 Subject: [PATCH 2/2] fix and refactor names --- app/components/link-grid.js | 12 ++++++------ app/sass/partials/_link-grid.scss | 10 +++++----- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/app/components/link-grid.js b/app/components/link-grid.js index b68570d..9e0d42c 100644 --- a/app/components/link-grid.js +++ b/app/components/link-grid.js @@ -4,10 +4,10 @@ import html from "choo/html"; function returnLinkTemplate(title, description, destination, label) { return ` -
  • -

    ${title}

    -

    ${description}

    - ${label} +
  • +

    ${title}

    +

    ${description}

    + ${label}
    • `; } @@ -15,8 +15,8 @@ function returnLinkTemplate(title, description, destination, label) { export default (links) => { const renderedLinks = links.map((link) => returnLinkTemplate(link.title, link.description, link.destination, link.label)); return html` -
      - ${renderedLinks.join("\n")} +
        + ${renderedLinks}
      `; } diff --git a/app/sass/partials/_link-grid.scss b/app/sass/partials/_link-grid.scss index 952cd11..8f4d04f 100644 --- a/app/sass/partials/_link-grid.scss +++ b/app/sass/partials/_link-grid.scss @@ -1,4 +1,4 @@ -.home__features { +.link-grid { align-content: center; border-bottom: 1px solid rgba($black, 0.05); display: flex; @@ -8,7 +8,7 @@ padding-bottom: 2rem; } -.home__feature { +.link-grid__link { position: relative; text-align: center; vertical-align: top; @@ -32,12 +32,12 @@ -.home__feature__title { +.link-grid__title { font-size: 2rem; margin-bottom: 0.5rem; } -.home__feature__description { +.link-grid__description { font-size: 1rem; left: 10%; margin-bottom: 1rem; @@ -45,7 +45,7 @@ width: 80%; } -.home__feature__cta { +.link-grid__cta { @extend .__button-black; display: inline-block; font-size: 1rem;