From c317d6631f1e1378efe6a1cdb82f7997ec59cbbb Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Thu, 20 Feb 2020 17:15:50 +0300 Subject: [PATCH 1/4] collective page uses card grid --- pages/collective.tsx | 27 ++++++++++--------- .../{PersonCard.jsx => PersonCard/index.tsx} | 6 +---- 2 files changed, 16 insertions(+), 17 deletions(-) rename src/components/{PersonCard.jsx => PersonCard/index.tsx} (94%) diff --git a/pages/collective.tsx b/pages/collective.tsx index ecfa2e74..ffd11d50 100644 --- a/pages/collective.tsx +++ b/pages/collective.tsx @@ -4,16 +4,18 @@ import { App } from 'src/components/App' import { Meta } from 'src/components/Meta' import { CollectiveImage } from 'src/components/CollectiveImage' import { PersonCard } from 'src/components/PersonCard' -import { CardList } from 'src/components/CardList' import menuModel from 'src/models/menu' import { buildMenu } from 'src/lib/menu' import { meta } from 'src/lib/meta' -import { IMeta } from 'src/types' +import { IMeta, IImage } from 'src/types' import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib' import { NextPage, NextPageContext } from 'next' +import { CardGrid } from 'src/components/CardGrid' interface IPerson { - + url: string + name: string + picture: IImage } type Props = { @@ -51,18 +53,19 @@ const Page: NextPage = props => { /> )} - ( + + {props.data.map((item, index) => ( - )} - /> + ))} + ) } diff --git a/src/components/PersonCard.jsx b/src/components/PersonCard/index.tsx similarity index 94% rename from src/components/PersonCard.jsx rename to src/components/PersonCard/index.tsx index 02d113cd..8c4518f6 100644 --- a/src/components/PersonCard.jsx +++ b/src/components/PersonCard/index.tsx @@ -1,6 +1,5 @@ -import React from 'react' import cx from 'classnames' -import { Image } from './Image' +import { Image } from '../Image' export const PersonCard = ({ picture, name, url, profile }) => (
@@ -12,9 +11,6 @@ export const PersonCard = ({ picture, name, url, profile }) => ( display: flex; flex-direction: column; - margin-bottom: var(--double-margin); - - width: var(--person-card-width); min-width: 10em; max-width: 30em; } From 3a425c25fe9ce190eed4c1968e9931ec9968ad21 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Thu, 20 Feb 2020 17:16:04 +0300 Subject: [PATCH 2/4] CardList removed --- src/components/CardList.jsx | 19 ------------------- 1 file changed, 19 deletions(-) delete mode 100644 src/components/CardList.jsx diff --git a/src/components/CardList.jsx b/src/components/CardList.jsx deleted file mode 100644 index ba033e41..00000000 --- a/src/components/CardList.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react' - -export const CardList = props => ( -
- - - {props.items.map( - (item, index) => props.renderItem(item, index) - )} -
-) From 4d0fb7a8f675f12ed318723b91a153e7471f6fe0 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Thu, 20 Feb 2020 17:17:22 +0300 Subject: [PATCH 3/4] collective page update: border radius, css refactoring --- pages/collective.tsx | 2 +- src/components/CollectiveImage.jsx | 2 +- src/components/PersonCard/index.tsx | 99 +++------------------------- src/components/PersonCard/styles.css | 81 +++++++++++++++++++++++ 4 files changed, 91 insertions(+), 93 deletions(-) create mode 100644 src/components/PersonCard/styles.css diff --git a/pages/collective.tsx b/pages/collective.tsx index ffd11d50..4b93652d 100644 --- a/pages/collective.tsx +++ b/pages/collective.tsx @@ -48,7 +48,7 @@ const Page: NextPage = props => { )} diff --git a/src/components/CollectiveImage.jsx b/src/components/CollectiveImage.jsx index 47fcf719..c6668b58 100644 --- a/src/components/CollectiveImage.jsx +++ b/src/components/CollectiveImage.jsx @@ -15,7 +15,7 @@ export const CollectiveImage = (props) => ( }} imgStyle={{ width: '100%', - borderRadius: '10px', + borderRadius: 'var(--radius)', }} />
diff --git a/src/components/PersonCard/index.tsx b/src/components/PersonCard/index.tsx index 8c4518f6..2b6aa494 100644 --- a/src/components/PersonCard/index.tsx +++ b/src/components/PersonCard/index.tsx @@ -1,95 +1,12 @@ +import './styles.css' + import cx from 'classnames' import { Image } from '../Image' export const PersonCard = ({ picture, name, url, profile }) => ( -
- - - -
+
+ +
( src={picture.src} srcSet={picture.set.map(({ url, density }) => `${url} ${density}x`)} /> - +
-
+
{name[0]} {name[1]} {name[2]}
-
+
{profile.position}
diff --git a/src/components/PersonCard/styles.css b/src/components/PersonCard/styles.css new file mode 100644 index 00000000..0795706b --- /dev/null +++ b/src/components/PersonCard/styles.css @@ -0,0 +1,81 @@ +.personCard { + --person-card-width: 30%; + --person-card-height: 24em; + + display: flex; + flex-direction: column; + + min-width: 10em; + max-width: 30em; +} + +.personCard > a { + display: block; + position: relative; +} + +.personCard-Picture { + position: relative; + border-radius: var(--radius); + + width: 100%; + height: var(--person-card-height); + + overflow: hidden; +} + +.personCard-Picture img { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + + object-fit: cover; + transition: all 150ms ease-out; +} + +.personCard-Title, +.personCard-Body { + position: absolute; + width: 100%; + padding: var(--single-margin); + box-sizing: border-box; + color: white; + text-align: center; + text-shadow: 0 0 3px #000; +} + +.personCard-Title { + top: 0; +} + +.personCard-Body { + bottom: 0; +} + +.personCard:hover img { + width: 105%; + height: 105%; + top: -2.5%; + left: -2.5%; +} + +/* Tablet */ + +@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) { + .personCard { + --person-card-height: 20em; + } + + @media screen and (orientation: portrait) { + } +} + +/* Mobile */ + +@media (max-width: 31.25em) { + .personCard { + --person-card-width: 100%; + } +} From 1ead6c44a01796ae455631f87caa5368aab71e78 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Thu, 20 Feb 2020 17:19:45 +0300 Subject: [PATCH 4/4] person card style clean --- src/components/PersonCard/styles.css | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/PersonCard/styles.css b/src/components/PersonCard/styles.css index 0795706b..b0052cfe 100644 --- a/src/components/PersonCard/styles.css +++ b/src/components/PersonCard/styles.css @@ -1,5 +1,4 @@ .personCard { - --person-card-width: 30%; --person-card-height: 24em; display: flex; @@ -71,11 +70,3 @@ @media screen and (orientation: portrait) { } } - -/* Mobile */ - -@media (max-width: 31.25em) { - .personCard { - --person-card-width: 100%; - } -}