LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Merge pull request #150 from lbryio/home_features_refactor

Browse source 
turn home features area into a component
This commit is contained in:
netop:// ウェッブ 2018-09-25 10:02:54 -05:00 committed by GitHub
commit e42082dd9d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 88 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/components/link-grid.js Normal file
View file

@ -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>
`;
}

1
app/sass/bundle.scss
View file

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

54
app/sass/pages/_home.scss
View file

@ -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,

53
app/sass/partials/_link-grid.scss Normal file
View file

@ -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;
}

26
app/views/home.js
View file

@ -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">
<li class="home__feature">
<p class="home__feature__title"><strong>New to LBRY?</strong></p>
<p class="home__feature__description">Learn how LBRY works with 3 easy examples</p>
<a class="home__feature__cta" href="/tour">Take the Tour</a>
</li>
<li class="home__feature">
<p class="home__feature__title"><strong>Want to contribute?</strong></p>
<p class="home__feature__description">Help make LBRY better!</p>
<a class="home__feature__cta" href="/contribute">Explore our repos</a>
</li>
</ul>
${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"
}])}
</section>
<section class="intro">