From 5784b7ed8ffdc87607fc35d1afaa69f347423f2e Mon Sep 17 00:00:00 2001 From: jean rodriguez Date: Tue, 19 Mar 2019 13:20:06 -0400 Subject: [PATCH] added content-feed component --- app/components/content-feed/bootstrap.yml | 7 + app/components/content-feed/model.js | 13 ++ app/components/content-feed/schema.yml | 45 ++++ app/components/content-feed/template.hbs | 36 ++++ app/layouts/layout/schema.yml | 1 + app/styleguides/_default/common/_vars.css | 6 +- .../_default/components/article.css | 6 +- .../_default/components/content-feed.css | 196 ++++++++++++++++++ .../components/content-feed_three-column.css | 101 +++++++++ .../components/content-feed_two-column.css | 74 +++++++ app/styleguides/_default/layouts/layout.css | 4 +- 11 files changed, 483 insertions(+), 6 deletions(-) create mode 100644 app/components/content-feed/bootstrap.yml create mode 100644 app/components/content-feed/model.js create mode 100644 app/components/content-feed/schema.yml create mode 100644 app/components/content-feed/template.hbs create mode 100644 app/styleguides/_default/components/content-feed.css create mode 100644 app/styleguides/_default/components/content-feed_three-column.css create mode 100644 app/styleguides/_default/components/content-feed_two-column.css diff --git a/app/components/content-feed/bootstrap.yml b/app/components/content-feed/bootstrap.yml new file mode 100644 index 0000000..252f621 --- /dev/null +++ b/app/components/content-feed/bootstrap.yml @@ -0,0 +1,7 @@ +_components: + content-feed: + showTimestamp: true + showByLine: true + feedColumn: '' + titleAlignment: '' + feedTitle: '' diff --git a/app/components/content-feed/model.js b/app/components/content-feed/model.js new file mode 100644 index 0000000..7baa4d6 --- /dev/null +++ b/app/components/content-feed/model.js @@ -0,0 +1,13 @@ +'use strict'; + +/** + * @todo remove data.articles after https://github.com/clay/clay-starter/issues/25 + */ +module.exports.render = (uri, data) => { + data.articles = [{},{},{}]; + return data; +}; + +module.exports.save = (ref, data) => { + return data; +}; diff --git a/app/components/content-feed/schema.yml b/app/components/content-feed/schema.yml new file mode 100644 index 0000000..852f21d --- /dev/null +++ b/app/components/content-feed/schema.yml @@ -0,0 +1,45 @@ +_description: | + A feed which shows most recent articles + +feedTitle: + _label: Feed Title + _has: + input: text + +titleAlignment: + _label: Title Text Alignment + _has: + input: radio + options: + - name: 'Left' + value: 'text-left' + - name: 'Center' + value: 'text-center' + - name: 'Right' + value: 'text-right' + +size: + _label: Size + _has: + input: text + type: number + help: This determines how many articles display per pages + +showByLine: + _label: Show ByLine? + _has: + input: checkbox + +showTimestamp: + _label: Show Timestamp? + _has: + input: checkbox + +_groups: + settings: + fields: + - feedTitle (Display) + - titleAlignment (Display) + - size (Display) + - showByLine (Display) + - showTimestamp (Display) diff --git a/app/components/content-feed/template.hbs b/app/components/content-feed/template.hbs new file mode 100644 index 0000000..8513a6c --- /dev/null +++ b/app/components/content-feed/template.hbs @@ -0,0 +1,36 @@ +
+ {{#if feedTitle}} +

{{ feedTitle }}

+ {{/if}} +
    + {{~#each articles as |article|~}} +
  1. +
    +
    + + + +
    + {{#if ../showTimestamp}} +
    + +
    + {{/if}} +
    + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +
    + {{#if ../showByLine}} +
    + By Authors +
    + {{/if}} +
    +
    2. + {{~/each~}} +
+ + More Stories + +
diff --git a/app/layouts/layout/schema.yml b/app/layouts/layout/schema.yml index 1b40f9a..cd56fed 100644 --- a/app/layouts/layout/schema.yml +++ b/app/layouts/layout/schema.yml @@ -33,6 +33,7 @@ main: page: true include: - article + - content-feed primary: _componentList: include: [] diff --git a/app/styleguides/_default/common/_vars.css b/app/styleguides/_default/common/_vars.css index bd0ba18..a36041c 100644 --- a/app/styleguides/_default/common/_vars.css +++ b/app/styleguides/_default/common/_vars.css @@ -3,7 +3,7 @@ $serif-stack: Georgia, serif; $sans-serif-stack: Grotesk, sans-serif; $sans-serif-narrow-stack: GroteskNarrow, sans-serif; - +$helvetica-stack: Helvetica, sans-serif; /* Colors */ @@ -23,3 +23,7 @@ $wrapperMaxWidth: 600px; $sm: 768px; $md: 992px; $lg: 1180px; +$min-sm: 320px; +$max-sm: 480px; +$min-md: 768px; +$max-md: 1024px; diff --git a/app/styleguides/_default/components/article.css b/app/styleguides/_default/components/article.css index 3b8e720..969ee65 100644 --- a/app/styleguides/_default/components/article.css +++ b/app/styleguides/_default/components/article.css @@ -10,7 +10,8 @@ $body-stack: Helvetica, serif; .article { counter-reset: annotated; - margin: 20px 0 0; + margin: 0 auto; + width: 600px; .article-header { margin: 0 0 20px; @@ -110,6 +111,8 @@ $body-stack: Helvetica, serif; @media screen and (max-width: 767.9px) { .article { + width: auto; + .lede-image-wrapper { margin: 0 0 24px; } @@ -118,7 +121,6 @@ $body-stack: Helvetica, serif; @media screen and (min-width: 1180px) { .article { - margin: 0; .lede-wrapper { align-items: stretch; diff --git a/app/styleguides/_default/components/content-feed.css b/app/styleguides/_default/components/content-feed.css new file mode 100644 index 0000000..bde2b0f --- /dev/null +++ b/app/styleguides/_default/components/content-feed.css @@ -0,0 +1,196 @@ +@import "_default/common/_vars.css"; + +$light-gray: #dbdbdb; +$grey: #4a4a4a; +$blue: #00bcf1; +$byline-font: 14px/1.06 $helvetica-stack; +$content-font: 31px/1.1 $helvetica-stack; +$content-small-font: 21px/1.14 $helvetica-stack; +$content-tablet-font: 26px/1.12 $helvetica-stack; +$content-phone-font: 21px/1.12 $helvetica-stack; +$timestamp-font: 12px/2 $helvetica-stack; +$heading-font: bold 31px $helvetica-stack; +$more-stories-button-font: bold 17px $helvetica-stack; + +.content-feed { + margin: 0 auto; + padding-top: 20px; + width: $lg; + + .content-feed-list-wrapper { + padding: 0; + } + + .content-feed-heading { + font: $heading-font; + letter-spacing: 3px; + } + + & .content-feed-list-wrapper { + list-style-type: none; + margin: 0 0 40px; + padding: 0; + } + + & .article-item { + border-bottom: 1px solid $light-gray; + display: flex; + } + + & .timestamp { + color: $grey; + display: block; + font: $timestamp-font; + letter-spacing: 2px; + text-transform: uppercase; + } + + & .main-article-content { + font: $content-font; + margin: 5px 0 0; + overflow-wrap: break-word; + word-wrap: break-word; + } + + & .link-text { + color: $black; + text-decoration: none; + } + + & .link-text:after { + bottom: 0; + content: ""; + left: 0; + position: absolute; + right: 0; + top: 0; + } + + & .link-text:focus { + outline: 0; + } + + & .headline { + font-family: Georgia, serif; + font-weight: 700; + } + + & .byline { + font: $byline-font; + letter-spacing: 0.08px; + margin: 6px 0 0; + } + + & .article-item-img-wrapper { + float: right; + margin: 10px 0; + } + + & .article-item-img { + background-color: $light-gray; + height: 146px; + width: 220px; + } + + & .more-stories-button { + border: 1px solid $black; + border-radius: 3px; + color: $black; + display: block; + font: $more-stories-button-font; + height: 44px; + margin: 40px auto; + padding: 10px 0; + text-align: center; + text-decoration: none; + width: 320px; + } + + & .more-stories-button:focus, + & .more-stories-button:hover { + color: $blue; + } + + .text-center { + text-align: center; + } + + .text-left { + text-align: left; + } + + .text-right { + text-align: right; + } + + .grid-container { + display: grid; + grid-gap: 5px; + grid-template-columns: auto; + } + + .grid-item { + padding: 15px 0; + } + + & .article-item-wrap { + color: $black; + margin: 20px 0; + } +} + +@media (min-width: $min-sm) and (max-width: $max-sm) { + .content-feed { + width: 100%; + + & .main-article-content { + font: $content-phone-font; + letter-spacing: 0.15px; + margin: 6px 0 0; + } + .grid-container { + grid-gap: 0; + } + + .grid-item { + padding: 0; + } + + .content-feed-heading { + text-align: center; + } + + .article-item:first-of-type { + margin: 0; + } + + & .article-item-img { + background-color: $light-gray; + height: 100px; + width: 100px; + } + + & .more-stories-button { + width: auto; + } + } +} + +@media (min-width: $min-md) and (max-width: $max-md) { + .content-feed { + width: 100%; + + & .timestamp { + display: inline-block; + font: $timestamp-font; + letter-spacing: 1.8px; + } + + & .main-article-content { + font: $content-tablet-font; + letter-spacing: 0.12px; + margin: 6px 0 0; + } + + } +} diff --git a/app/styleguides/_default/components/content-feed_three-column.css b/app/styleguides/_default/components/content-feed_three-column.css new file mode 100644 index 0000000..debcb36 --- /dev/null +++ b/app/styleguides/_default/components/content-feed_three-column.css @@ -0,0 +1,101 @@ +@import "_default/common/_vars.css"; + +$light-gray: #dbdbdb; +$content-font: 26px/1.12 $helvetica-stack; +$content-phone-font: 21px/1.14 $helvetica-stack; + +.content-feed.content-feed_three-column { + .grid-container { + display: grid; + grid-gap: 1em; + grid-template-columns: auto auto auto; + padding: 10px; + } + + .article-item-wrap { + color: $black; + display: grid; + grid-row: row 2; + margin: 5px; + } + + & .article-item-img { + background-color: $light-gray; + height: 213px; + width: 320px; + } + + & .article-item-img-wrapper { + float: none; + margin: 0; + min-width: auto; + position: relative; + } + + & .main-article-content { + font: $content-font; + margin: 5px 0; + } + + & .article-item { + border-bottom: 0; + } +} + +@media (min-width: $min-md) and (max-width: $max-md) { + .content-feed.content-feed_three-column { + + .grid-container { + display: grid; + grid-gap: 0; + grid-template-columns: auto auto; + padding: 10px; + } + + & .article-item-wrap { + color: $black; + display: grid; + grid-row: row 2; + margin: 0 10px; + } + + & .main-article-content { + font: $content-font; + margin: 6px 0 0; + } + + & .article-item-item-img { + background-color: $light-gray; + height: 213px; + width: 320px; + } + } +} + +@media (min-width: $min-sm) and (max-width: $max-sm) { + .content-feed.content-feed_three-column { + .grid-container { + display: grid; + grid-gap: 0; + grid-template-columns: auto; + } + .article-item-wrap { + color: $black; + display: grid; + grid-row: row 2; + margin: 0; + } + + & .main-article-content { + font: $content-phone-font; + letter-spacing: 0.15px; + margin: 6px 0 0; + } + + & .article-item-img { + background-color: $light-gray; + height: 210px; + width: 315px; + } + } +} diff --git a/app/styleguides/_default/components/content-feed_two-column.css b/app/styleguides/_default/components/content-feed_two-column.css new file mode 100644 index 0000000..67dc684 --- /dev/null +++ b/app/styleguides/_default/components/content-feed_two-column.css @@ -0,0 +1,74 @@ +@import "_default/common/_vars.css"; + +$light-gray: #dbdbdb; +$content-tablet-font: 26px/1.12 $helvetica-stack; +$content-phone-font: 21px/1.14 $helvetica-stack; + +.content-feed.content-feed_two-column { + .grid-container { + display: grid; + grid-gap: 1em; + grid-template-columns: auto auto; + padding: 10px; + } + + & .article-item { + border-bottom: 0; + } + + & .article-item-wrap { + color: $black; + display: grid; + grid-row: row 2; + margin: 10px 0; + } + + & .article-item-img { + background-color: $light-gray; + height: 340px; + width: 510px; + } + + & .article-item-img-wrapper { + float: none; + margin: 0; + min-width: auto; + position: relative; + } +} + +@media (min-width: $min-md) and (max-width: $max-md) { + .content-feed.content-feed_two-column { + & .main-article-content { + font: $content-tablet-font; + margin: 6px 0 0; + } + + & .article-item-img { + background-color: $light-gray; + height: 213px; + width: 320px; + } + } +} + +@media (min-width: $min-sm) and (max-width: $max-sm) { + .content-feed.content-feed_two-column { + .grid-container { + display: grid; + grid-gap: 0; + grid-template-columns: auto; + } + + & .main-article-content { + font: $content-phone-font; + margin: 6px 0 0; + } + + & .article-item-img { + background-color: $light-gray; + height: 210px; + width: 315px; + } + } +} diff --git a/app/styleguides/_default/layouts/layout.css b/app/styleguides/_default/layouts/layout.css index f463307..72a43d6 100644 --- a/app/styleguides/_default/layouts/layout.css +++ b/app/styleguides/_default/layouts/layout.css @@ -62,8 +62,7 @@ html { width: 100vw; } & > .wrapper { - margin-right: auto; - margin-left: auto; + margin: 0 auto; padding-right: 10px; padding-left: 10px; width: 100%; @@ -116,7 +115,6 @@ html { align-items: center; display: flex; justify-content: center; - max-width: $wrapperMaxWidth; } &.kiln-edit-mode .wrapper > .main {