From 6e4b0004a5f76d3e1a418151afdf7566ac00b6a9 Mon Sep 17 00:00:00 2001 From: Ulad Bohdan Date: Fri, 20 Mar 2020 13:31:16 +0300 Subject: [PATCH] task(core): scss modules for cards and blocks; fixes for article etc --- components/articles/Article.js | 6 +- components/articles/CollectionNote.js | 4 +- .../articles}/article.module.scss | 277 -------- components/articles/blocks/ArticlesByTag2.js | 4 +- components/articles/blocks/ArticlesByTag3.js | 2 +- components/articles/blocks/BannerBlock.js | 2 +- components/articles/blocks/BlockWrapper.js | 11 +- components/articles/blocks/FeaturedBlock.js | 2 +- components/articles/blocks/TagPageBlockB.js | 23 +- components/articles/blocks/TagPageBlockCD.js | 16 +- components/articles/blocks/TagsByTopic.js | 44 +- .../articles/blocks/TwoArticlesInRow.js | 4 +- .../articles/blocks/blockWrapper.module.scss | 18 +- ...eBlockB.scss => tagPageBlockB.module.scss} | 5 +- ...lockCD.scss => tagPageBlockCD.module.scss} | 7 +- ...gsByTopic.scss => tagsByTopic.module.scss} | 8 +- components/articles/cards/ArticleCard.js | 84 +-- components/articles/cards/CardWrapper.js | 42 +- components/articles/cards/PlaceholderCard.js | 19 +- components/articles/cards/TagCard.js | 55 +- .../{article.scss => articleCard.module.scss} | 40 +- components/articles/cards/auto.js | 20 +- ...rdWrapper.scss => cardWrapper.module.scss} | 24 +- components/articles/cards/cards.scss | 2 + components/articles/cards/location.scss | 198 ------ components/articles/cards/person.scss | 375 ----------- ...older.scss => placeholderCard.module.scss} | 4 +- components/articles/cards/tagCard.module.scss | 595 ++++++++++++++++++ components/articles/cards/tagCard.scss | 141 ----- components/common/AudioPlayer.js | 7 +- components/common/VideoPlayer.js | 9 +- .../common/audioVideoPlayer.module.scss | 41 ++ components/common/layout/CoreLayout.js | 2 +- .../common/layout/{ => header}/Header.js | 30 +- .../common/layout/header/HeaderLinks.js | 7 +- components/common/layout/header/Motto.js | 6 +- .../{styles.scss => header.module.scss} | 18 +- components/common/{ => ui}/Picture.js | 2 +- components/common/ui/table.module.scss | 12 +- constants/partners.js | 6 +- package.json | 8 +- pages/_app.js | 12 - pages/about.js | 10 +- pages/admin/articles.js | 6 +- pages/admin/preview.js | 3 +- pages/topic.js | 2 +- styles/pages/about.module.scss | 6 +- styles/readme.md | 3 +- utils/fibery/renderer.js | 41 +- utils/fibery/renderer.module.scss | 242 +++++++ 50 files changed, 1244 insertions(+), 1261 deletions(-) rename {styles/pages => components/articles}/article.module.scss (60%) rename components/articles/blocks/{tagPageBlockB.scss => tagPageBlockB.module.scss} (90%) rename components/articles/blocks/{tagPageBlockCD.scss => tagPageBlockCD.module.scss} (86%) rename components/articles/blocks/{tagsByTopic.scss => tagsByTopic.module.scss} (84%) rename components/articles/cards/{article.scss => articleCard.module.scss} (94%) rename components/articles/cards/{cardWrapper.scss => cardWrapper.module.scss} (51%) delete mode 100644 components/articles/cards/location.scss delete mode 100644 components/articles/cards/person.scss rename components/articles/cards/{placeholder.scss => placeholderCard.module.scss} (85%) create mode 100644 components/articles/cards/tagCard.module.scss delete mode 100644 components/articles/cards/tagCard.scss create mode 100644 components/common/audioVideoPlayer.module.scss rename components/common/layout/{ => header}/Header.js (52%) rename components/common/layout/header/{styles.scss => header.module.scss} (89%) rename components/common/{ => ui}/Picture.js (95%) create mode 100644 utils/fibery/renderer.module.scss diff --git a/components/articles/Article.js b/components/articles/Article.js index 4af5a138..9887bacd 100644 --- a/components/articles/Article.js +++ b/components/articles/Article.js @@ -1,5 +1,3 @@ -import styles from 'styles/pages/article.module.scss'; - import React from 'react'; import { useRouter } from 'next/router'; import flatten from 'lodash/flatten'; @@ -25,6 +23,8 @@ import { renderNodeList } from 'utils/formatters'; import fiberyRenderer from 'utils/fibery/renderer'; import host from 'utils/host'; +import styles from './article.module.scss'; + import CollectionNote from './CollectionNote'; const b = bem(styles); @@ -63,7 +63,7 @@ const Article = ({
-
+
{subtitle}
{type === 'text' && ( diff --git a/components/articles/CollectionNote.js b/components/articles/CollectionNote.js index 6133f3bb..4a60f83e 100644 --- a/components/articles/CollectionNote.js +++ b/components/articles/CollectionNote.js @@ -1,5 +1,3 @@ -import styles from 'styles/pages/article.module.scss'; - import React from 'react'; import PropTypes from 'prop-types'; import bem from 'bem-css-modules'; @@ -12,6 +10,8 @@ import { CollectionShape, LangType } from 'utils/customPropTypes'; import { ROUTES_NAMES } from 'routes'; +import styles from './article.module.scss'; + const b = bem(styles); const CollectionNoteItem = ({ className, hideLink, text, slug }) => ( diff --git a/styles/pages/article.module.scss b/components/articles/article.module.scss similarity index 60% rename from styles/pages/article.module.scss rename to components/articles/article.module.scss index d83b82c6..13869558 100644 --- a/styles/pages/article.module.scss +++ b/components/articles/article.module.scss @@ -1,6 +1,5 @@ @import 'styles/responsiveness'; @import 'styles/variables'; -/* stylelint-disable no-descending-specificity */ $block-spacing: 60px; $paragraph-spacing: 24px; @@ -305,46 +304,6 @@ $content-line-height: ( } } -.article-page-interactive { - margin-top: 30px; - - @include screen-touch { - margin-top: 40px; - } - - @include screen-tablet { - margin-top: 50px; - } - - @include screen-tablet-large { - margin-top: 60px; - } - - @include screen-desktop { - margin-top: 72px; - } - - &__video { - height: 200px; - - @include screen-touch { - height: 200px; - } - - @include screen-tablet { - height: 300px; - } - - @include screen-tablet-large { - height: 400px; - } - - @include screen-desktop { - height: 600px; - } - } -} - .article-page-content { font-size: map-get($content-font-size, mobile); font-style: normal; @@ -425,239 +384,3 @@ $content-line-height: ( height: 48px; } } - -.article-ordered { - margin: 0; - - li { - margin-top: 24px; - } -} - -.right-element { - display: inline-block; - font-size: 14px; - line-height: 21px; - margin: 0; - margin-bottom: 10px; - margin-left: 30px; - width: 240px; - - @include screen-touch { - margin-left: 60px; - } - - @include screen-tablet { - float: right; - margin-left: 30px; - } - - @include screen-tablet-large { - float: right; - margin-left: 30px; - } - - @include screen-desktop { - float: right; - margin-left: 30px; - } - - .article-ordered { - padding-left: 24px; - - li { - margin-top: 0; - } - } - - &.article-table, - &.article-image { - margin-bottom: 0; - margin-top: 0; - - @include mobile { - margin-bottom: 20px; - margin-top: 20px; - } - - @include touch { - margin-bottom: 20px; - margin-top: 20px; - } - } -} - -.article-note { - line-height: 24px; - - th { - text-align: left; - } - - h1 { - font-size: 72px; - font-weight: bold; - line-height: 72px; - margin: 0; - } - - p { - margin: 0; - } - - li { - margin: 0; - } -} - -.article-image { - display: block; - margin-bottom: $block-spacing; - margin-top: $block-spacing; - - &__image { - object-position: 50% 0; - width: 100%; - } - - &__caption { - font-size: 14px; - line-height: 18px; - margin-top: 9px; - } -} - -.article-quote { - margin: $block-spacing 0; - - &__text { - border-left: 1px solid #000000; - font-size: 20px; - line-height: 32px; - padding-left: 20px; - - @include screen-touch { - font-size: 24px; - line-height: 36px; - padding-left: 24px; - } - - @include screen-tablet { - font-size: 24px; - line-height: 36px; - padding-left: 24px; - } - - @include screen-tablet-large { - font-size: 30px; - line-height: 42px; - padding-left: 30px; - } - - @include screen-desktop { - font-size: 30px; - line-height: 42px; - padding-left: 30px; - } - } - - &__caption { - font-size: 12px; - line-height: 20px; - margin-top: 8px; - - @include screen-touch { - font-size: 14px; - line-height: 22px; - margin-top: 10px; - } - - @include screen-tablet { - font-size: 14px; - line-height: 22px; - margin-top: 10px; - } - - @include screen-tablet-large { - font-size: 16px; - line-height: 24px; - margin-top: 12px; - } - - @include screen-desktop { - font-size: 16px; - line-height: 24px; - margin-top: 12px; - } - } -} - -.article-table { - display: flex; - margin: $block-spacing 0; - - th { - border-bottom: 0.25px solid $primary-grey-article-table; - padding-bottom: 17px; - text-align: left; - } - - td { - border-bottom: 0.25px solid $primary-grey-article-table; - padding: 17px 0; - } - - p { - margin: 0; - padding: 0; - } -} - -.article-unordered { - list-style: none; - margin: 0; - - li { - margin-top: 24px; - - &::before { - content: '— '; - margin-left: -25px; - } - } - - p { - display: inline; - margin: 0; - padding: 0; - } -} - -.article-poem { - margin-bottom: $block-spacing; - width: 100%; - - p { - margin: auto; - text-align: left; - width: 50%; - } -} - -.article-split { - margin: $block-spacing 0; - - tr { - display: flex; - justify-content: flex-start; - } - - td { - width: 50%; - } - - p { - margin: 0; - padding: 0; - } -} diff --git a/components/articles/blocks/ArticlesByTag2.js b/components/articles/blocks/ArticlesByTag2.js index 35be8713..579facd6 100644 --- a/components/articles/blocks/ArticlesByTag2.js +++ b/components/articles/blocks/ArticlesByTag2.js @@ -44,11 +44,11 @@ const ArticlesByTag2 = ({ block, data }) => {
- +
- +
diff --git a/components/articles/blocks/ArticlesByTag3.js b/components/articles/blocks/ArticlesByTag3.js index d7037da2..1e3fa2b5 100644 --- a/components/articles/blocks/ArticlesByTag3.js +++ b/components/articles/blocks/ArticlesByTag3.js @@ -32,7 +32,7 @@ const ArticlesByTag3 = ({ block, data }) => {
{articlesIds.map((id, index) => (
- +
))}
diff --git a/components/articles/blocks/BannerBlock.js b/components/articles/blocks/BannerBlock.js index e834d694..3d9029a2 100644 --- a/components/articles/blocks/BannerBlock.js +++ b/components/articles/blocks/BannerBlock.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import bem from 'bem-css-modules'; import cn from 'classnames'; -import Picture from 'components/common/Picture'; +import Picture from 'components/common/ui/Picture'; import ExternalLink from 'components/common/ExternalLink'; import { useLocalization } from 'components/common/Text'; import styles from './banner.module.scss'; diff --git a/components/articles/blocks/BlockWrapper.js b/components/articles/blocks/BlockWrapper.js index 7cd0581f..23774fa2 100644 --- a/components/articles/blocks/BlockWrapper.js +++ b/components/articles/blocks/BlockWrapper.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import cn from 'classnames'; import bem from 'bem-css-modules'; + import styles from './blockWrapper.module.scss'; const b = bem(styles); @@ -10,11 +11,11 @@ const BlockWrapper = ({ className, withBackground, negativeTop, children }) => (
diff --git a/components/articles/blocks/FeaturedBlock.js b/components/articles/blocks/FeaturedBlock.js index 470c2ce6..a75c7597 100644 --- a/components/articles/blocks/FeaturedBlock.js +++ b/components/articles/blocks/FeaturedBlock.js @@ -12,7 +12,7 @@ const FeaturedBlock = ({ block, data }) => { const articleData = frozen ? articles[articleId] : latestArticles[0]; return ( - + ); }; diff --git a/components/articles/blocks/TagPageBlockB.js b/components/articles/blocks/TagPageBlockB.js index b64a93c3..8a26b300 100644 --- a/components/articles/blocks/TagPageBlockB.js +++ b/components/articles/blocks/TagPageBlockB.js @@ -1,13 +1,18 @@ import React from 'react'; import PropTypes from 'prop-types'; +import bem from 'bem-css-modules'; import ArticleCard from 'components/articles/cards/ArticleCard'; import PlaceholderCard from 'components/articles/cards/PlaceholderCard'; import { ArticlesArray } from 'utils/customPropTypes'; +import styles from './tagPageBlockB.module.scss'; + import BlockWrapper from './BlockWrapper'; +const b = bem(styles); + const TagPageBlockB = ({ articles, layout }) => { const resolvedLayout = articles.length === 1 ? 'large-left' : layout; @@ -15,16 +20,22 @@ const TagPageBlockB = ({ articles, layout }) => { resolvedLayout === 'large-left' ? articles.slice(0, 2) : articles.slice(0, 2).reverse(); return ( - -
- + +
+
-
+
{second ? ( - + ) : ( - + )}
diff --git a/components/articles/blocks/TagPageBlockCD.js b/components/articles/blocks/TagPageBlockCD.js index ceeab231..403b90ed 100644 --- a/components/articles/blocks/TagPageBlockCD.js +++ b/components/articles/blocks/TagPageBlockCD.js @@ -1,27 +1,35 @@ import React from 'react'; import PropTypes from 'prop-types'; +import bem from 'bem-css-modules'; import ArticleCard from 'components/articles/cards/ArticleCard'; import PlaceholderCard from 'components/articles/cards/PlaceholderCard'; import { ArticlesArray } from 'utils/customPropTypes'; +import styles from './tagPageBlockCD.module.scss'; + import BlockWrapper from './BlockWrapper'; +const b = bem(styles); + const SIZE_BY_LAYOUT = { 'row-of-two': 2, 'row-of-three': 3, }; const TagPageBlockCD = ({ articles, layout }) => ( - + {Array.from({ length: SIZE_BY_LAYOUT[layout] }).map((_, i) => ( // eslint-disable-next-line react/no-array-index-key -
+
{articles[i] ? ( - + ) : ( - + )}
))} diff --git a/components/articles/blocks/TagsByTopic.js b/components/articles/blocks/TagsByTopic.js index 383222da..93bc7cbe 100644 --- a/components/articles/blocks/TagsByTopic.js +++ b/components/articles/blocks/TagsByTopic.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import bem from 'bem-css-modules'; import TagCard from 'components/articles/cards/TagCard'; @@ -8,26 +9,49 @@ import { getTopicLink } from 'utils/tags'; import { TOPICS } from 'constants'; +import styles from './tagsByTopic.module.scss'; + import BlockWrapper from './BlockWrapper'; +const b = bem(styles); + const TagsByTopic = ({ block, data: { tags } }) => { const { topicSlug, tagsIds, style } = block; const tagsData = tagsIds.map(id => tags[id]); const topicLink = getTopicLink({ topic: topicSlug }); return ( - -
{topicLink}
-
-
-
- + +
{topicLink}
+
+
+
+
-
- +
+
-
- +
+
diff --git a/components/articles/blocks/TwoArticlesInRow.js b/components/articles/blocks/TwoArticlesInRow.js index 0a830865..06ca1abd 100644 --- a/components/articles/blocks/TwoArticlesInRow.js +++ b/components/articles/blocks/TwoArticlesInRow.js @@ -14,11 +14,11 @@ const b = bem(styles); const TwoArticlesInRow = ({ className, first, second }) => (
- +
{/*
*/}
- +
); diff --git a/components/articles/blocks/blockWrapper.module.scss b/components/articles/blocks/blockWrapper.module.scss index 3192bc7a..cc54f4f3 100644 --- a/components/articles/blocks/blockWrapper.module.scss +++ b/components/articles/blocks/blockWrapper.module.scss @@ -2,22 +2,14 @@ @import 'styles/variables'; .block { - &:global(.wir-no-background) { - margin-top: 60px; - - // FIXME(@uladbohdan): refactor - // https://trello.com/c/NTBa9AE1/495-block-wrapper-margin-fix - // to eliminate this workaround by properly handling Block margins. + // Rule with no effect to force keep the .block class. + font-weight: normal; - @include screen-tablet-touch-mobile { - &.tag-page-block-b, - &.tag-page-block-cd { - margin-top: 0; - } - } + &--no-background { + margin-top: 60px; } - &:global(.wir-with-background) { + &--with-background { background-color: $primary-black; margin-bottom: 20px; margin-top: 80px; diff --git a/components/articles/blocks/tagPageBlockB.scss b/components/articles/blocks/tagPageBlockB.module.scss similarity index 90% rename from components/articles/blocks/tagPageBlockB.scss rename to components/articles/blocks/tagPageBlockB.module.scss index cb845bb7..6f5f77a4 100644 --- a/components/articles/blocks/tagPageBlockB.scss +++ b/components/articles/blocks/tagPageBlockB.module.scss @@ -5,13 +5,13 @@ flex-direction: row; justify-content: space-between; - &__style-large-left { + &--style--large-left { .small-card { order: 1; } } - &__style-large-right { + &--style--large-right { .large-card { order: 1; } @@ -21,6 +21,7 @@ @mixin shared-screen-tablet-touch-mobile { .tag-page-block-b { flex-direction: column; + margin-top: 0; .large-card { padding: 10px 0; diff --git a/components/articles/blocks/tagPageBlockCD.scss b/components/articles/blocks/tagPageBlockCD.module.scss similarity index 86% rename from components/articles/blocks/tagPageBlockCD.scss rename to components/articles/blocks/tagPageBlockCD.module.scss index 44050130..8b3203d7 100644 --- a/components/articles/blocks/tagPageBlockCD.scss +++ b/components/articles/blocks/tagPageBlockCD.module.scss @@ -8,7 +8,7 @@ @include screen-tablet-large { .tag-page-block-cd { - &__style-row-of-three { + &--layout--row-of-three { flex-direction: column; .tag-page-block-cd { @@ -17,12 +17,17 @@ } } } + + &--layout--row-of-two { + flex-direction: row; + } } } @mixin shared-screen-tablet-touch-mobile { .tag-page-block-cd { flex-direction: column; + margin-top: 0; &__card { padding: 10px 0; diff --git a/components/articles/blocks/tagsByTopic.scss b/components/articles/blocks/tagsByTopic.module.scss similarity index 84% rename from components/articles/blocks/tagsByTopic.scss rename to components/articles/blocks/tagsByTopic.module.scss index a330e5fc..4b644706 100644 --- a/components/articles/blocks/tagsByTopic.scss +++ b/components/articles/blocks/tagsByTopic.module.scss @@ -26,7 +26,7 @@ } } -.tags-by-topic--style-1-2 { +.tags-by-topic--style--1-2 { .tags-by-topic { &__2 { order: 1; @@ -34,6 +34,12 @@ } } +.tags-by-topic--style--2-1 { + // This is a default rule, but we need it + // for .tags-by-topic--style--2-1 class to force appear in js. + display: block; +} + @mixin shared-touch-mobile { .tags-by-topic { &__title-label { diff --git a/components/articles/cards/ArticleCard.js b/components/articles/cards/ArticleCard.js index 0144b350..205c69c3 100644 --- a/components/articles/cards/ArticleCard.js +++ b/components/articles/cards/ArticleCard.js @@ -1,13 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import cn from 'classnames'; +import bem from 'bem-css-modules'; import get from 'lodash/get'; import zip from 'lodash/zip'; import Text from 'components/common/Text'; import Image from 'components/common/Image'; -import Picture from 'components/common/Picture'; +import Picture from 'components/common/ui/Picture'; import Icon from 'components/common/ui/Icon'; import { @@ -19,14 +20,17 @@ import { } from 'utils/customPropTypes'; import { renderNodeList } from 'utils/formatters'; import { renderTag, getTagImageRenderer } from 'utils/tags'; -import { linkCn } from 'utils/ui'; +import { linkCn, colorLooksBlack, colorLooksWhite } from 'utils/ui'; import { ROUTES_NAMES } from 'routes'; +import styles from './articleCard.module.scss'; import { SCREENS, ARTICLE_CARD_SIZES_BY_CONTEXT } from './auto'; import CardWrapper, { SIZES } from './CardWrapper'; +const b = bem(styles); + const ICON_BY_TYPE = { audio: { pack: 's', name: 'volume-up' }, video: { pack: 'b', name: 'youtube' }, @@ -68,7 +72,7 @@ const COLLECTION_LOGO_WIDTH = 70; const ArticleCard = props => { const { size, - context, + blockContext, theme, subtitle, collection, @@ -78,6 +82,7 @@ const ArticleCard = props => { type, slug, tagsByTopic, + onBackground, } = props; const { brands = [], authors = [] } = tagsByTopic; const { short, full } = ACTION_BY_TYPE[type]; @@ -85,25 +90,28 @@ const ArticleCard = props => { return ( styles[`block-${ctx}`]).join(' ')} theme={theme} color={color} linkProps={{ route: ROUTES_NAMES.article, params: { slug } }} - className={cn('article-card', { - 'article-card--with-collection': collection, - 'article-card--with-brand': !!brands.length, - 'article-card--experiment-slavics': collection && collection.slug === 'slav-movy', - })} + className={cn( + b({ + 'with-collection': !!collection, + 'with-brand': !!brands.length, + 'theme-black': colorLooksBlack(color), + 'theme-white': colorLooksWhite(color), + 'experiment-slavics': !!collection && collection.slug === 'slav-movy', + }) + )} + onBackground={onBackground} > -
+
{(images.horizontal || images.vertical) && (size === 'auto' ? ( { acc[screenName] = getCoverLink(images, cardSize); return acc; @@ -114,7 +122,7 @@ const ArticleCard = props => { /> ) : ( {title} { /> ))}
-
+
{collection && ( -
-
-
+
+
+
{collection.articleIndex + 1}
-
{collection.name}
+
{collection.name}
{collection.cover && ( {collection.name} { )}
)} -
-
- {ICON_BY_TYPE[type] && ( - - )} +
+
+ {ICON_BY_TYPE[type] && } {title}
{!collection && ( -
-
{subtitle}
-
+
+
{subtitle}
+
)} -
-
+
+
{brands.map( getTagImageRenderer({ - className: 'article-card__brand', + className: b('brand'), theme, }) )} {renderNodeList(authors.map(renderTag))}
-
-
+
+
@@ -184,7 +188,7 @@ ArticleCard.propTypes = { size: PropTypes.oneOf(SIZES), // In case card size is set explicitly, no context needs to be provided. // In case card size is 'auto', the context (e.g. the block and position) must be provided. - context: PropTypes.arrayOf(PropTypes.string), + blockContext: PropTypes.arrayOf(PropTypes.string), color: PropTypes.string.isRequired, theme: ThemeType, title: PropTypes.string.isRequired, @@ -194,13 +198,15 @@ ArticleCard.propTypes = { collection: CollectionShape, type: ArticleType.isRequired, slug: PropTypes.string.isRequired, + onBackground: PropTypes.bool, }; ArticleCard.defaultProps = { size: 'auto', - context: [], + blockContext: [], theme: 'light', collection: null, + onBackground: false, }; export default ArticleCard; diff --git a/components/articles/cards/CardWrapper.js b/components/articles/cards/CardWrapper.js index 4d640f9e..835f1aab 100644 --- a/components/articles/cards/CardWrapper.js +++ b/components/articles/cards/CardWrapper.js @@ -1,28 +1,44 @@ import React from 'react'; import PropTypes from 'prop-types'; import cn from 'classnames'; +import bem from 'bem-css-modules'; import Link from 'components/common/Link'; import BgContainer from 'components/common/ui/BgContainer'; import { ThemeType } from 'utils/customPropTypes'; import { colorLooksBlack, colorLooksWhite } from 'utils/ui'; +import styles from './cardWrapper.module.scss'; + export const DEFAULT_SIZES = ['xxl', 'xl', 'l', 'm']; export const TAG_SIZES = ['s', 'xs', 'ms', 's-wide', 'xs-wide']; export const SQUARE_SIZES = ['square-m', 'square-s']; export const SIZES = DEFAULT_SIZES.concat(SQUARE_SIZES, TAG_SIZES, 'auto'); -const CardWrapper = ({ className, size, children, image, color, theme, linkProps }) => ( - +const b = bem(styles); + +const CardWrapper = ({ + blockContextClass, + className, + size, + sizeClass, + children, + image, + color, + theme, + linkProps, + onBackground, +}) => ( + @@ -32,21 +48,27 @@ const CardWrapper = ({ className, size, children, image, color, theme, linkProps ); CardWrapper.propTypes = { + blockContextClass: PropTypes.string, className: PropTypes.string, size: PropTypes.oneOf(SIZES), + sizeClass: PropTypes.string, children: PropTypes.node.isRequired, color: PropTypes.string, image: PropTypes.string, theme: ThemeType, linkProps: PropTypes.shape({}).isRequired, + onBackground: PropTypes.bool, }; CardWrapper.defaultProps = { + blockContextClass: '', className: '', size: 'auto', + sizeClass: '', color: null, image: null, theme: 'light', + onBackground: false, }; export default CardWrapper; diff --git a/components/articles/cards/PlaceholderCard.js b/components/articles/cards/PlaceholderCard.js index e14773f5..d4abf8dd 100644 --- a/components/articles/cards/PlaceholderCard.js +++ b/components/articles/cards/PlaceholderCard.js @@ -1,3 +1,20 @@ import React from 'react'; +import PropTypes from 'prop-types'; -export default () =>
; +import styles from './placeholderCard.module.scss'; + +const PlaceholderCard = ({ blockContext }) => ( +
styles[`block-${ctx}`]).join(' ')}> +
+
+); + +PlaceholderCard.propTypes = { + blockContext: PropTypes.arrayOf(PropTypes.string), +}; + +PlaceholderCard.defaultProps = { + blockContext: [], +}; + +export default PlaceholderCard; diff --git a/components/articles/cards/TagCard.js b/components/articles/cards/TagCard.js index 17c96438..f357a98b 100644 --- a/components/articles/cards/TagCard.js +++ b/components/articles/cards/TagCard.js @@ -1,5 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; +import cn from 'classnames'; +import bem from 'bem-css-modules'; import { TopicSlug, ThemeType } from 'utils/customPropTypes'; import { ROUTES_NAMES } from 'routes'; @@ -7,9 +9,17 @@ import { TOPIC } from 'constants/misc'; import Image from 'components/common/Image'; +import { colorLooksBlack, colorLooksWhite } from 'utils/ui'; + import CardWrapper, { SIZES } from './CardWrapper'; -const TagCard = ({ slug, topicSlug, content, size }) => { +import styles from './tagCard.module.scss'; + +const b = bem(styles); + +const TagCard = ({ slug, topicSlug, content, size, blockContext }) => { + const { theme, color } = content; + const wrapperProps = { size, linkProps: { @@ -19,33 +29,38 @@ const TagCard = ({ slug, topicSlug, content, size }) => { tag: slug, }, }, + theme, + color, + blockContextClass: blockContext.map(ctx => styles[`block-${ctx}`]).join(' '), }; if (topicSlug === TOPIC.locations) { - const { title, image, theme, color } = content; + const { title, image } = content; return ( - -
{title}
+ +
{title}
 ); } if (topicSlug === TOPIC.personalities) { - const { name, description, subtitle, image, theme, color } = content; + const { name, description, subtitle, image } = content; return ( - + {' '} -
+
{image && ( {name} { /> )}
-
-
{subtitle}
-
{name}
-
{description}
+
+
{subtitle}
+
{name}
+
{description}
); @@ -68,6 +83,7 @@ const TagCard = ({ slug, topicSlug, content, size }) => { TagCard.propTypes = { slug: PropTypes.string.isRequired, size: PropTypes.oneOf(SIZES), + blockContext: PropTypes.arrayOf(PropTypes.string), topicSlug: TopicSlug.isRequired, content: PropTypes.shape({ title: PropTypes.string, @@ -82,6 +98,7 @@ TagCard.propTypes = { TagCard.defaultProps = { size: 'auto', + blockContext: [], }; export default TagCard; diff --git a/components/articles/cards/article.scss b/components/articles/cards/articleCard.module.scss similarity index 94% rename from components/articles/cards/article.scss rename to components/articles/cards/articleCard.module.scss index c1ab7cd9..be0cc671 100644 --- a/components/articles/cards/article.scss +++ b/components/articles/cards/articleCard.module.scss @@ -32,8 +32,8 @@ $title-line-height: ( position: relative; } - &.theme-black > &__cover-container, - &.theme-white > &__cover-container { + &--theme-black > &__cover-container, + &--theme-white > &__cover-container { margin-left: $border-width-default; margin-top: $border-width-default; } @@ -150,14 +150,14 @@ $title-line-height: ( // The may be fixed using @at-root. Same applies for mixins below. /* stylelint-disable */ - .article-card.theme-black > .article-card__cover-container, - .article-card.theme-white > .article-card__cover-container { + .article-card--theme-black > .article-card__cover-container, + .article-card--theme-white > .article-card__cover-container { height: $cover-height - 2 * $border-width-default; width: $cover-width - $border-width-default; } - .article-card.theme-black > .article-card__cover-container > .article-card__cover, - .article-card.theme-white > .article-card__cover-container > .article-card__cover { + .article-card--theme-black > .article-card__cover-container > .article-card__cover, + .article-card--theme-white > .article-card__cover-container > .article-card__cover { left: -($border-width-default); top: -($border-width-default); } @@ -573,15 +573,15 @@ $title-line-height: ( } /* stylelint-disable */ - .article-card.theme-black > .article-card__cover-container, - .article-card.theme-white > .article-card__cover-container { + .article-card--theme-black > .article-card__cover-container, + .article-card--theme-white > .article-card__cover-container { max-height: $cover-max-height - $border-width-default; min-height: $cover-min-height - $border-width-default; width: $cover-width - 2 * $border-width-default; } - .article-card.theme-black > .article-card__cover-container > .article-card__cover, - .article-card.theme-white > .article-card__cover-container > .article-card__cover { + .article-card--theme-black > .article-card__cover-container > .article-card__cover, + .article-card--theme-white > .article-card__cover-container > .article-card__cover { left: -($border-width-default); top: calc(50% - #{$border-width-default / 2}); } @@ -664,7 +664,7 @@ $title-line-height: ( // Below are the rules for cards to be auto adjustable. // TODO(?): to wrap with .card-size-auto class. -.featured { +.block-featured { @include screen-desktop { @include shared-size-xxl; } @@ -686,7 +686,7 @@ $title-line-height: ( } } -.two-in-row { +.block-two-in-row { @include screen-desktop { @include shared-size-m; } @@ -716,7 +716,7 @@ $title-line-height: ( } } -.articles-by-tag-2 { +.block-articles-by-tag-2 { @include screen-desktop { @include shared-size-square-m; } @@ -738,7 +738,7 @@ $title-line-height: ( } } -.articles-by-tag-3 { +.block-articles-by-tag-3 { @include screen-desktop { @include shared-size-square-s; } @@ -760,8 +760,8 @@ $title-line-height: ( } } -.tag-page-block-b { - .large-card { +.block-tag-page-block-b { + &__large-card { @include screen-desktop { @include shared-size-l; } @@ -783,7 +783,7 @@ $title-line-height: ( } } - .small-card { + &__small-card { @include screen-desktop { @include shared-size-square-m; } @@ -806,8 +806,8 @@ $title-line-height: ( } } -.tag-page-block-cd { - &__style-row-of-two { +.block-tag-page-block-cd { + &__row-of-two { @include screen-desktop { @include shared-size-m; } @@ -829,7 +829,7 @@ $title-line-height: ( } } - &__style-row-of-three { + &__row-of-three { @include screen-desktop { @include shared-size-square-s; } diff --git a/components/articles/cards/auto.js b/components/articles/cards/auto.js index 3492e52d..797c9d4b 100644 --- a/components/articles/cards/auto.js +++ b/components/articles/cards/auto.js @@ -1,25 +1,29 @@ -// This data must be in sync with article.scss file. +// This data must be in sync with article.module.scss file. // TODO: to generate SCSS rules based on this file. export const SCREENS = ['mobile', 'touch', 'tablet', 'tablet-large', 'desktop']; -// Each leaf array represents card sizes for [mobile, touch, tablet, tablet-large, dekstop] screen sizes respectively. +// Each leaf array represents card sizes for +// [mobile, touch, tablet, tablet-large, dekstop] screen sizes respectively. + +// Paths in a dict below must be the same as blockContexts passed to ArticleCards. export const ARTICLE_CARD_SIZES_BY_CONTEXT = { featured: ['square-s', 'm', 'l', 'xl', 'xxl'], + // TODO: how to to pass prefixes explicitly ? 'two-in-row': { - first: ['square-s', 'm', 'l', 'm', 'm'], - second: ['square-s', 'm', 'l', 'square-s', 'm'], + 'two-in-row__first': ['square-s', 'm', 'l', 'm', 'm'], + 'two-in-row__second': ['square-s', 'm', 'l', 'square-s', 'm'], }, 'articles-by-tag-2': ['square-s', 'm', 'square-m', 'l', 'square-m'], 'articles-by-tag-3': ['square-s', 'm', 'square-s', 'square-m', 'square-s'], 'tag-page-block-b': { - 'large-card': ['square-s', 'm', 'l', 'm', 'l'], - 'small-card': ['square-s', 'm', 'l', 'square-s', 'square-m'], + 'tag-page-block-b__large-card': ['square-s', 'm', 'l', 'm', 'l'], + 'tag-page-block-b__small-card': ['square-s', 'm', 'l', 'square-s', 'square-m'], }, 'tag-page-block-cd': { - 'row-of-two': ['square-s', 'm', 'l', 'square-m', 'm'], - 'row-of-three': ['square-s', 'm', 'l', 'l', 'square-s'], + 'tag-page-block-cd__row-of-two': ['square-s', 'm', 'l', 'square-m', 'm'], + 'tag-page-block-cd__row-of-three': ['square-s', 'm', 'l', 'l', 'square-s'], }, }; diff --git a/components/articles/cards/cardWrapper.scss b/components/articles/cards/cardWrapper.module.scss similarity index 51% rename from components/articles/cards/cardWrapper.scss rename to components/articles/cards/cardWrapper.module.scss index 2bffac02..f6aca233 100644 --- a/components/articles/cards/cardWrapper.scss +++ b/components/articles/cards/cardWrapper.module.scss @@ -6,10 +6,15 @@ .wir-card-wrapper { color: $primary-white; - &.theme-light { + &--theme-light { color: $primary-black; } + &--with-border { + box-shadow: inset $border-width-default $border-width-default $primary-widescreen-background, + inset (-$border-width-default) (-$border-width-default) $primary-widescreen-background; + } + &:hover { @media (hover: hover) { // stylelint-disable-next-line declaration-no-important @@ -18,20 +23,3 @@ } } } - -@mixin card-border { - box-shadow: inset $border-width-default $border-width-default $primary-widescreen-background, - inset (-$border-width-default) (-$border-width-default) $primary-widescreen-background; -} - -.wir-no-background { - .wir-card-wrapper.theme-white { - @include card-border; - } -} - -.wir-with-background { - .wir-card-wrapper.theme-black { - @include card-border; - } -} diff --git a/components/articles/cards/cards.scss b/components/articles/cards/cards.scss index b9c85e32..3523caa7 100644 --- a/components/articles/cards/cards.scss +++ b/components/articles/cards/cards.scss @@ -1,6 +1,8 @@ $border-width-default: 1px; $border-width-hover: 6px; +// TODO(uladbohdan): to refactor the file + // @mixin xxl-sizes { // height: 630px; // width: 1020px; diff --git a/components/articles/cards/location.scss b/components/articles/cards/location.scss deleted file mode 100644 index de301604..00000000 --- a/components/articles/cards/location.scss +++ /dev/null @@ -1,198 +0,0 @@ -@import 'styles/responsiveness'; -@import 'styles/variables'; - -@import './cards'; - -.location { - background-size: cover; - box-sizing: border-box; - display: flex; - flex-direction: column; - justify-content: flex-end; - position: relative; - - &__title { - font-weight: bold; - } -} - -@mixin shared-size-l { - .location { - @include l-sizes; - - padding: 0 39px 43px; - - &__title { - font-size: 72px; - line-height: 72px; - } - } -} - -.card-size-l { - @include shared-size-l; -} - -@mixin shared-size-square-m { - .location { - @include square-m-sizes; - - padding: 0 30px 42px; - - &__title { - font-size: 48px; - line-height: 60px; - } - } -} - -.card-size-square-m { - @include shared-size-square-m; -} - -@mixin shared-size-square-s { - .location { - @include square-s-sizes; - - padding: 0 30px 42px; - - &__title { - font-size: 48px; - line-height: 60px; - } - } -} - -.card-size-square-s { - @include shared-size-square-s; -} - -@mixin shared-sizes-ms-s-wide { - .location { - padding: 0 30px 42px; - - &__title { - font-size: 30px; - line-height: 36px; - } - } -} - -@mixin shared-size-ms { - @include shared-sizes-ms-s-wide; - - .location { - @include ms-sizes; - } -} - -.card-size-ms { - @include shared-size-ms; -} - -@mixin shared-size-s-wide { - @include shared-sizes-ms-s-wide; - - .location { - @include s-wide-sizes; - } -} - -.card-size-s-wide { - @include shared-size-s-wide; -} - -@mixin shared-size-s { - .location { - @include s-sizes; - - padding: 0 30px 42px; - - &__title { - font-size: 60px; - line-height: 72px; - } - } -} - -.card-size-s { - @include shared-size-s; -} - -@mixin shared-size-xs-wide { - .location { - @include xs-wide-sizes; - - padding: 0 30px 42px; - - &__title { - font-size: 30px; - line-height: 36px; - } - } -} - -.card-size-xs-wide { - @include shared-size-xs-wide; -} - -@mixin shared-size-xs { - .location { - @include xs-sizes; - - padding: 0 30px 42px; - - &__title { - font-size: 30px; - line-height: 36px; - } - } -} - -.card-size-xs { - @include shared-size-xs; -} - -// Below are the rules for cards to be auto adjustable. - -.tags-by-topic { - &__1 { - @include screen-desktop { - @include shared-size-l; - } - - @include screen-tablet-large { - @include shared-size-square-m; - } - - @include screen-tablet { - @include shared-size-square-m; - } - - @include screen-mobile { - @include shared-size-l; - } - } - - &__2 { - @include screen-desktop { - @include shared-size-s; - } - - @include screen-tablet-large { - @include shared-size-s-wide; - } - - @include screen-tablet { - @include shared-size-xs; - } - - @include screen-touch { - @include shared-size-ms; - } - - @include screen-mobile { - @include shared-size-xs-wide; - } - } -} diff --git a/components/articles/cards/person.scss b/components/articles/cards/person.scss deleted file mode 100644 index 9b73d659..00000000 --- a/components/articles/cards/person.scss +++ /dev/null @@ -1,375 +0,0 @@ -@import 'styles/responsiveness'; -@import 'styles/variables'; - -@import './cards'; - -.person { - background-color: $primary-black; - display: flex; - flex-direction: row-reverse; - position: relative; - - &__cover-container { - height: 100%; - overflow: hidden; - position: relative; - } - - &.theme-black > &__cover-container, - &.theme-white > &__cover-container { - margin-right: $border-width-default; - margin-top: $border-width-default; - } - - &:hover > &__cover-container { - @media (hover: hover) { - margin-right: $border-width-hover; - margin-top: $border-width-hover; - } - } - - &__cover { - height: 100%; - object-fit: cover; - position: absolute; - width: 100%; - } - - &.theme-black > &__cover-container > &__cover, - &.theme-white > &__cover-container > &__cover { - right: -($border-width-default); - top: -($border-width-default); - } - - &:hover > &__cover-container > &__cover { - @media (hover: hover) { - right: -($border-width-hover); - top: -($border-width-hover); - } - } - - &__content { - display: flex; - flex-direction: column; - justify-content: flex-end; - } - - &__subtitle { - font-size: 14px; - line-height: 18px; - } - - &__title { - font-weight: bold; - } -} - -@mixin shared-cover-rules($cover-size) { - .person { - &__cover-container { - height: $cover-size; - width: $cover-size; - } - - &__cover { - height: $cover-size; - width: $cover-size; - } - } - - /* stylelint-disable */ - .person.theme-black > .person__cover-container, - .person.theme-white > .person__cover-container { - height: $cover-size - 2 * $border-width-default; - width: $cover-size - $border-width-default; - } - - .person:hover > .person__cover-container { - @media (hover: hover) { - height: $cover-size - 2 * $border-width-hover; - width: $cover-size - $border-width-hover; - } - } - /* stylelint-enable */ -} - -@mixin shared-size-l { - @include shared-cover-rules(390px); - - .person { - @include l-sizes; - - &__content { - bottom: 42px; - left: 30px; - position: absolute; - width: 240px; - } - - &__title { - font-size: 72px; - line-height: 72px; - margin-top: 18px; - max-height: 72px * 2; - max-width: 420px; - } - - &__description { - font-size: 14px; - line-height: 21px; - margin-top: 19px; - } - } -} - -.card-size-l { - @include shared-size-l; -} - -@mixin shared-size-square-m { - @include shared-cover-rules(390px); - - .person { - @include square-m-sizes; - - &__content { - bottom: 42px; - left: 30px; - position: absolute; - right: 48px; - width: 100%; - } - - &__title { - font-size: 48px; - line-height: 60px; - margin-top: 18px; - max-height: 60px * 2; - max-width: 312px; - } - - &__description { - display: none; - } - } -} - -.card-size-square-m { - @include shared-size-square-m; -} - -@mixin shared-size-square-s { - @include shared-cover-rules(300px); - - .person { - @include square-s-sizes; - - &__content { - bottom: 42px; - left: 23px; - position: absolute; - right: 37px; - width: 100%; - } - - &__title { - font-size: 30px; - line-height: 36px; - max-height: 36px * 2; - max-width: 240px; - } - - &__description { - display: none; - } - } -} - -.card-size-square-s { - @include shared-size-square-s; -} - -@mixin shared-sizes-ms-s-wide { - @include shared-cover-rules(194px); - - .person { - &__content { - bottom: 42px; - left: 30px; - position: absolute; - width: 230px; - } - - &__title { - font-size: 30px; - line-height: 36px; - max-height: 36px * 2; - } - - &__description { - display: none; - } - } -} - -@mixin shared-size-ms { - @include shared-sizes-ms-s-wide; - - .person { - @include ms-sizes; - - &__title { - max-width: 400px; - } - } -} - -.card-size-ms { - @include shared-size-ms; -} - -@mixin shared-size-s-wide { - @include shared-sizes-ms-s-wide; - - .person { - @include s-wide-sizes; - - &__title { - max-width: 320px; - } - } -} - -.card-size-s-wide { - @include shared-size-s-wide; -} - -@mixin shared-size-s { - @include shared-cover-rules(194px); - - .person { - @include s-sizes; - - &__content { - bottom: 42px; - left: 30px; - position: absolute; - width: 230px; - } - - &__title { - font-size: 30px; - line-height: 36px; - max-height: 36px * 2; - max-width: 270px; - } - - &__description { - display: none; - } - } -} - -.card-size-s { - @include shared-size-s; -} - -@mixin shared-sizes-xs-wide-xs { - @include shared-cover-rules(194px); - - .person { - &__content { - bottom: 42px; - left: 30px; - position: absolute; - width: 150px; - } - - &__title { - font-size: 30px; - line-height: 36px; - margin-top: 7px; - max-height: 36px * 2; - } - - &__description { - display: none; - } - } -} - -@mixin shared-size-xs-wide { - @include shared-sizes-xs-wide-xs; - - .person { - @include xs-wide-sizes; - - &__title { - max-width: 240px; - } - } -} - -.card-size-xs-wide { - @include shared-size-xs-wide; -} - -@mixin shared-size-xs { - @include shared-sizes-xs-wide-xs; - - .person { - @include xs-sizes; - - &__title { - max-width: 174px; - } - } -} - -.card-size-xs { - @include shared-size-xs; -} - -// Below are the rules for cards to be auto adjustable. - -.tags-by-topic { - &__1 { - @include screen-desktop { - @include shared-size-l; - } - - @include screen-tablet-large { - @include shared-size-square-m; - } - - @include screen-tablet { - @include shared-size-square-m; - } - - @include screen-mobile { - @include shared-size-l; - } - } - - &__2 { - @include screen-desktop { - @include shared-size-s; - } - - @include screen-tablet-large { - @include shared-size-s-wide; - } - - @include screen-tablet { - @include shared-size-xs; - } - - @include screen-touch { - @include shared-size-ms; - } - - @include screen-mobile { - @include shared-size-xs-wide; - } - } -} diff --git a/components/articles/cards/placeholder.scss b/components/articles/cards/placeholderCard.module.scss similarity index 85% rename from components/articles/cards/placeholder.scss rename to components/articles/cards/placeholderCard.module.scss index 1aa2de44..443edcb8 100644 --- a/components/articles/cards/placeholder.scss +++ b/components/articles/cards/placeholderCard.module.scss @@ -14,8 +14,8 @@ } } -.tag-page-block-cd { - &__style-row-of-three { +.block-tag-page-block-cd { + &__row-of-three { @include screen-desktop { @include shared-size-square-s; } diff --git a/components/articles/cards/tagCard.module.scss b/components/articles/cards/tagCard.module.scss new file mode 100644 index 00000000..a32a69b7 --- /dev/null +++ b/components/articles/cards/tagCard.module.scss @@ -0,0 +1,595 @@ +@import 'styles/responsiveness'; +@import 'styles/variables'; + +@import './cards'; + +.tag-card { + display: flex; + position: relative; + + &__location { + background-size: cover; + box-sizing: border-box; + flex-direction: column; + justify-content: flex-end; + + &-title { + font-weight: bold; + } + } + + &__person { + background-color: $primary-black; + display: flex; + flex-direction: row-reverse; + position: relative; + + &-cover-container { + height: 100%; + overflow: hidden; + position: relative; + } + + &--theme-black > &-cover-container, + &--theme-white > &-cover-container { + margin-right: $border-width-default; + margin-top: $border-width-default; + } + + &:hover > &-cover-container { + @media (hover: hover) { + margin-right: $border-width-hover; + margin-top: $border-width-hover; + } + } + + &-cover { + height: 100%; + object-fit: cover; + position: absolute; + width: 100%; + } + + &--theme-black > &-cover-container > &-cover, + &--theme-white > &-cover-container > &-cover { + right: -($border-width-default); + top: -($border-width-default); + } + + &:hover > &-cover-container > &-cover { + @media (hover: hover) { + right: -($border-width-hover); + top: -($border-width-hover); + } + } + + &-content { + display: flex; + flex-direction: column; + justify-content: flex-end; + } + + &-subtitle { + font-size: 14px; + line-height: 18px; + } + + &-title { + font-weight: bold; + } + } +} + +@mixin shared-cover-rules($cover-size) { + .tag-card { + &__person { + &-cover-container { + height: $cover-size; + width: $cover-size; + } + + &-cover { + height: $cover-size; + width: $cover-size; + } + } + } + + /* stylelint-disable */ + .tag-card__person--theme-black > .tag-card__person-cover-container, + .tag-card__person--theme-white > .tag-card__person-cover-container { + height: $cover-size - 2 * $border-width-default; + width: $cover-size - $border-width-default; + } + + .tag-card__person:hover > .tag-card__person-cover-container { + @media (hover: hover) { + height: $cover-size - 2 * $border-width-hover; + width: $cover-size - $border-width-hover; + } + } + /* stylelint-enable */ +} + +@mixin shared-size-l { + @include shared-cover-rules(390px); + + .tag-card { + @include l-sizes; + + &__location { + padding: 0 39px 43px; + + &-title { + font-size: 72px; + line-height: 72px; + } + } + + &__person { + &-content { + bottom: 42px; + left: 30px; + position: absolute; + width: 240px; + } + + &-title { + font-size: 72px; + line-height: 72px; + margin-top: 18px; + max-height: 72px * 2; + max-width: 420px; + } + + &-description { + font-size: 14px; + line-height: 21px; + margin-top: 19px; + } + } + } +} + +@mixin shared-size-square-m { + @include shared-cover-rules(390px); + + .tag-card { + @include square-m-sizes; + + &__location { + padding: 0 30px 42px; + + &-title { + font-size: 48px; + line-height: 60px; + } + } + + &__person { + &-content { + bottom: 42px; + left: 30px; + position: absolute; + right: 48px; + width: 100%; + } + + &-title { + font-size: 48px; + line-height: 60px; + margin-top: 18px; + max-height: 60px * 2; + max-width: 312px; + } + + &-description { + display: none; + } + } + } +} + +@mixin shared-size-square-s { + @include shared-cover-rules(300px); + + .tag-card { + @include square-s-sizes; + + &__location { + padding: 0 30px 42px; + + &-title { + font-size: 48px; + line-height: 60px; + } + } + + &__person { + &-content { + bottom: 42px; + left: 23px; + position: absolute; + right: 37px; + width: 100%; + } + + &-title { + font-size: 30px; + line-height: 36px; + max-height: 36px * 2; + max-width: 240px; + } + + &-description { + display: none; + } + } + } +} + +@mixin shared-sizes-ms-s-wide { + @include shared-cover-rules(194px); + + .tag-card { + &__location { + padding: 0 30px 42px; + + &-title { + font-size: 30px; + line-height: 36px; + } + } + + &__person { + &-content { + bottom: 42px; + left: 30px; + position: absolute; + width: 230px; + } + + &-title { + font-size: 30px; + line-height: 36px; + max-height: 36px * 2; + } + + &-description { + display: none; + } + } + } +} + +@mixin shared-size-ms { + @include shared-sizes-ms-s-wide; + + .tag-card { + @include ms-sizes; + + &__location { + // + } + + &__person { + &-title { + max-width: 400px; + } + } + } +} + +@mixin shared-size-s-wide { + @include shared-sizes-ms-s-wide; + + .tag-card { + @include s-wide-sizes; + + &__location { + // + } + + &__person { + &-title { + max-width: 320px; + } + } + } +} + +@mixin shared-size-s { + @include shared-cover-rules(194px); + + .tag-card { + @include s-sizes; + + &__location { + padding: 0 30px 42px; + + &-title { + font-size: 60px; + line-height: 72px; + } + } + + &__person { + &-content { + bottom: 42px; + left: 30px; + position: absolute; + width: 230px; + } + + &-title { + font-size: 30px; + line-height: 36px; + max-height: 36px * 2; + max-width: 270px; + } + + &-description { + display: none; + } + } + } +} + +@mixin shared-sizes-xs-wide-xs { + @include shared-cover-rules(194px); + + .tag-card { + &__person { + &-content { + bottom: 42px; + left: 30px; + position: absolute; + width: 150px; + } + + &-title { + font-size: 30px; + line-height: 36px; + margin-top: 7px; + max-height: 36px * 2; + } + + &-description { + display: none; + } + } + } +} + +@mixin shared-size-xs-wide { + @include shared-sizes-xs-wide-xs; + + .tag-card { + @include xs-wide-sizes; + + &__location { + padding: 0 30px 42px; + + &-title { + font-size: 30px; + line-height: 36px; + } + } + + &__person { + &-title { + max-width: 240px; + } + } + } +} + +@mixin shared-size-xs { + @include shared-sizes-xs-wide-xs; + + .tag-card { + @include xs-sizes; + + &__location { + padding: 0 30px 42px; + + &-title { + font-size: 30px; + line-height: 36px; + } + } + + &__person { + &-title { + max-width: 174px; + } + } + } +} + +@mixin tag-card-radius( + $bottom-left: false, + $bottom-right: false, + $top-left: false, + $top-right: false +) { + $tag-card-border-radius: 3px; + + .tag-card { + @if $bottom-left { + border-bottom-left-radius: $tag-card-border-radius; + } + + @if $bottom-right { + border-bottom-right-radius: $tag-card-border-radius; + } + + @if $top-left { + border-top-left-radius: $tag-card-border-radius; + } + + @if $top-right { + border-top-right-radius: $tag-card-border-radius; + } + + &__person { + &-cover { + @if $bottom-right { + border-bottom-right-radius: $tag-card-border-radius; + } + + @if $top-right { + border-top-right-radius: $tag-card-border-radius; + } + } + } + } +} + +// Below are the rules for cards to be auto adjustable. +// +// This module only lets 'auto' mode for TagCards. +// In order to enable explicit set of card sizes, you should add +// 'card-size' wrappers for existing mixins just as it's done in articleCard. +// scss module. For example: +// +// .card-size-xs { +// @include shared-size-xs; +// } + +.block-tags-by-topic { + &__1 { + @include screen-desktop { + @include shared-size-l; + } + + @include screen-tablet-large { + @include shared-size-square-m; + } + + @include screen-tablet { + @include shared-size-square-m; + } + + @include screen-mobile { + @include shared-size-l; + } + } + + &__2 { + @include screen-desktop { + @include shared-size-s; + } + + @include screen-tablet-large { + @include shared-size-s-wide; + } + + @include screen-tablet { + @include shared-size-xs; + } + + @include screen-touch { + @include shared-size-ms; + } + + @include screen-mobile { + @include shared-size-xs-wide; + } + } + + // On 'mobile' and 'touch' screens there is no difference + // between '1-2' and '2-1' block styles. + + &__2-top { + @include screen-touch { + @include tag-card-radius($top-left: true, $top-right: true); + } + + @include screen-mobile { + @include tag-card-radius($top-left: true, $top-right: true); + } + } + + &__2-bottom { + @include screen-touch { + @include tag-card-radius($bottom-left: true, $bottom-right: true); + } + + @include screen-mobile { + @include tag-card-radius($bottom-left: true, $bottom-right: true); + } + } +} + +.block-tags-by-topic--style--1-2 { + &.block-tags-by-topic { + &__1 { + @include tag-card-radius($bottom-left: true, $top-left: true); + } + + &__2-top { + @include screen-desktop { + @include tag-card-radius($top-right: true); + } + + @include screen-tablet-large { + @include tag-card-radius($top-right: true); + } + + @include screen-tablet { + @include tag-card-radius($top-right: true); + } + } + + &__2-bottom { + @include screen-desktop { + @include tag-card-radius($bottom-right: true); + } + + @include screen-tablet-large { + @include tag-card-radius($bottom-right: true); + } + + @include screen-tablet { + @include tag-card-radius($bottom-right: true); + } + } + } +} + +.block-tags-by-topic--style--2-1 { + &.block-tags-by-topic { + &__1 { + @include tag-card-radius($bottom-right: true, $top-right: true); + } + + &__2-top { + @include screen-desktop { + @include tag-card-radius($top-left: true); + } + + @include screen-tablet-large { + @include tag-card-radius($top-left: true); + } + + @include screen-tablet { + @include tag-card-radius($top-left: true); + } + } + + &__2-bottom { + @include screen-desktop { + @include tag-card-radius($bottom-left: true); + } + + @include screen-tablet-large { + @include tag-card-radius($bottom-left: true); + } + + @include screen-tablet { + @include tag-card-radius($bottom-left: true); + } + } + } +} diff --git a/components/articles/cards/tagCard.scss b/components/articles/cards/tagCard.scss deleted file mode 100644 index c7d007c9..00000000 --- a/components/articles/cards/tagCard.scss +++ /dev/null @@ -1,141 +0,0 @@ -@import 'styles/responsiveness'; -@import 'styles/variables'; - -.tag-card { - // -} - -@mixin tag-card-radius( - $bottom-left: false, - $bottom-right: false, - $top-left: false, - $top-right: false -) { - $tag-card-border-radius: 3px; - - .tag-card { - @if $bottom-left { - border-bottom-left-radius: $tag-card-border-radius; - } - - @if $bottom-right { - border-bottom-right-radius: $tag-card-border-radius; - } - - @if $top-left { - border-top-left-radius: $tag-card-border-radius; - } - - @if $top-right { - border-top-right-radius: $tag-card-border-radius; - } - - .person { - &__cover { - @if $bottom-right { - border-bottom-right-radius: $tag-card-border-radius; - } - - @if $top-right { - border-top-right-radius: $tag-card-border-radius; - } - } - } - } -} - -.tags-by-topic { - // On 'mobile' and 'touch' screens there is no difference between '1-2' and '2-1' block styles. - - &__2-top { - @include screen-touch { - @include tag-card-radius($top-left: true, $top-right: true); - } - - @include screen-mobile { - @include tag-card-radius($top-left: true, $top-right: true); - } - } - - &__2-bottom { - @include screen-touch { - @include tag-card-radius($bottom-left: true, $bottom-right: true); - } - - @include screen-mobile { - @include tag-card-radius($bottom-left: true, $bottom-right: true); - } - } -} - -.tags-by-topic--style-1-2 { - .tags-by-topic { - &__1 { - @include tag-card-radius($bottom-left: true, $top-left: true); - } - - &__2-top { - @include screen-desktop { - @include tag-card-radius($top-right: true); - } - - @include screen-tablet-large { - @include tag-card-radius($top-right: true); - } - - @include screen-tablet { - @include tag-card-radius($top-right: true); - } - } - - &__2-bottom { - @include screen-desktop { - @include tag-card-radius($bottom-right: true); - } - - @include screen-tablet-large { - @include tag-card-radius($bottom-right: true); - } - - @include screen-tablet { - @include tag-card-radius($bottom-right: true); - } - } - } -} - -.tags-by-topic--style-2-1 { - .tags-by-topic { - &__1 { - @include tag-card-radius($bottom-right: true, $top-right: true); - } - - &__2-top { - @include screen-desktop { - @include tag-card-radius($top-left: true); - } - - @include screen-tablet-large { - @include tag-card-radius($top-left: true); - } - - @include screen-tablet { - @include tag-card-radius($top-left: true); - } - } - - &__2-bottom { - @include screen-desktop { - @include tag-card-radius($bottom-left: true); - } - - @include screen-tablet-large { - @include tag-card-radius($bottom-left: true); - } - - @include screen-tablet { - @include tag-card-radius($bottom-left: true); - } - } - } -} diff --git a/components/common/AudioPlayer.js b/components/common/AudioPlayer.js index d146f1fd..1453a65d 100644 --- a/components/common/AudioPlayer.js +++ b/components/common/AudioPlayer.js @@ -4,6 +4,8 @@ import qs from 'qs'; import { SOUNDCLOUD_EMBED_PREFIX } from 'constants/social'; +import styles from './audioVideoPlayer.module.scss'; + /* eslint-disable camelcase */ const getUrl = ({ url, @@ -30,10 +32,9 @@ const getUrl = ({ /* eslint-enable */ const AudioPlayer = ({ trackId, type, width, height, color }) => ( -
- +
+