article, person cards removed; use common component

pages/articles/[slug].tsx

@@ -1,7 +1,7 @@
 import Head from 'next/head'
 import { range } from 'lodash'
 import { App } from 'src/components/App'
-import { ArticleCardList } from 'src/components/ArticleCardList'
+import { ArticleGrid } from 'src/components/ArticleGrid'
 import menuModel from 'src/models/menu'
 import { buildMenu } from 'src/lib/menu'
 import { meta } from 'src/lib/meta'
@@ -39,7 +39,7 @@ const Page: NextPage<Props> = props => {
                 <title>{props.title}</title>
                 <Meta meta={props.meta} />
             </Head>
-            <ArticleCardList
+            <ArticleGrid
                 articles={props.data}
                 prevPage={props.prevPage}
                 nextPage={props.nextPage}

pages/collective.tsx

@@ -3,7 +3,6 @@ import { get } from 'lodash'
 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 menuModel from 'src/models/menu'
 import { buildMenu } from 'src/lib/menu'
 import { meta } from 'src/lib/meta'
@@ -11,10 +10,12 @@ 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'
+import { Card } from 'src/components/Card'
 
 interface IPerson {
     url: string
     name: string
+    position: string
     picture: IImage
 }
 
@@ -59,13 +60,24 @@ const Page: NextPage<Props> = props => {
                 marginBottom: 'var(--size-xl)',
             }}>
                 {props.data.map((item, index) => (
-                    <PersonCard
+                    <Card
                         key={index}
-                        profile={item}
-                        picture={item.picture}
-                        url={item.url}
-                        name={item.name}
-                    />
+                        layout={'featured'}
+                        img={{
+                            src: item.picture.src,
+                            alt: item.name,
+                            srcSet: '',//item.name.sr,
+                        }}
+                        href={item.url}
+                    >
+                        <h2 style={{
+                            margin: '0 0 var(--size-s)',
+                            fontSize: '14pt',
+                        }}>
+                            {item.name[0]} {item.name[1]} {item.name[2]}
+                        </h2>
+                        {item.position}
+                    </Card>
                 ))}
             </CardGrid>
         </App>

pages/index.tsx

@@ -1,7 +1,7 @@
 import Head from 'next/head'
 import { App } from 'src/components/App'
 import { Meta } from 'src/components/Meta'
-import { ArticleCardList } from 'src/components/ArticleCardList'
+import { ArticleGrid } from 'src/components/ArticleGrid'
 import { HudozkaTitle } from 'src/components/HudozkaTitle'
 import menuModel from 'src/models/menu'
 import { meta } from 'src/lib/meta'
@@ -39,7 +39,7 @@ const Page: NextPage<IProps> = props => (
             }}
         />
 
-        <ArticleCardList
+        <ArticleGrid
             articles={props.articles}
             prevPage={props.prevPage}
             nextPage={props.nextPage}
@@ -53,6 +53,10 @@ export const unstable_getStaticProps = async () => {
     const pageSize = process.env.APP_ARTICLES_PAGE_SIZE
     const res = await requestGet<IResponseItems<IArticle>>(createApiUrl(`/api/articles?page=${page}&pageSize=${pageSize}`), null)
     const articles = (res.items || [])
+        .map(x => ({
+            ...x,
+            featured: ['2019-kotiki', 'veloparking'].includes(x.id)
+        }))
     const nextPage = res.nextPage
     const prevPage = res.prevPage
     const title = 'Шлиссельбургская ДХШ'

src/components/ArticleCard/index.tsx

@@ -1,43 +0,0 @@
-import './styles.css'
-
-import cx from 'classnames'
-import { Date } from './Date'
-import { IImage } from 'src/types'
-import Link from 'next/link'
-
-export interface IArticleCardProps {
-    style?: React.CSSProperties
-    article: any
-    preview?: IImage
-}
-
-export const ArticleCard: React.FC<IArticleCardProps> = ({ article, ...props }) => (
-    <div className="ArticleCard" style={props.style}>
-        <Link href={article.url}>
-            <a className="invisible">
-                <div className="ArticleCard-image">
-                    {!props.preview ? null : (
-                        <picture>
-                            <img
-                                className={cx({ opa: false })}
-                                alt={props.preview.alt}
-                                src={props.preview.src}
-                                srcSet={props.preview.srcSet.map(({ url, density }) => `${url} ${density}x`).join(' ')}
-                            />
-                        </picture >
-                    )}
-                </div>
-
-                <div className="ArticleCard-body">
-                    {article.title}
-
-                    {!article.date ? null : (
-                        <Date>
-                            {article.date}
-                        </Date>
-                    )}
-                </div>
-            </a>
-        </Link>
-    </div>
-)

src/components/ArticleCard/styles.css

@@ -1,91 +0,0 @@
-.ArticleCard {
-    --article-card-image-height: 15em;
-
-    display: flex;
-    flex-direction: column;
-
-    border-radius: var(--radius);
-    box-shadow: var(--shadow);
-    /* box-shadow: 0 0 0 1px var(--color-shadow); */
-
-    overflow: hidden;
-    
-    transition: box-shadow 150ms;
-}
-
-.ArticleCard:hover {
-    box-shadow: var(--shadow-active);
-}
-
-.ArticleCard > a {
-    display: block;
-    position: relative;
-}
-
-.ArticleCard-image {
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-    height: var(--article-card-image-height);
-}
-
-.ArticleCard-image img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-
-    transition: all 150ms ease-out;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-.ArticleCard-body {
-    position: relative;
-
-    z-index: 1000;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-start;
-
-    height: 5em;
-
-    background-color: white;
-
-    padding: 0 var(--size-m) var(--size-m);
-}
-
-.ArticleCard-body:before {
-    position: absolute;
-    content: '';
-    background-color: white;
-
-    border-radius: var(--radius) var(--radius) 0 0 ;
-    width: 100%;
-    height: var(--radius);
-    top: calc(var(--radius) * -1);
-    left: 0;
-}
-
-.ArticleCard:hover img {
-    width: 104%;
-    height: 104%;
- 
-    top: -2%;
-    left: -2%;
-}
-
-/* Tablet */
-@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
-    .ArticleCard {
-        --article-card-image-height: 12em;
-    }
-}
-
-/* Mobile */
-@media (max-width: 31.25em) {
-    .ArticleCard {
-    }
-}

src/components/ArticleCardList.tsx

@@ -1,46 +0,0 @@
-import { ArticleCard } from './ArticleCard'
-import { Pager } from './Pager'
-import { CardGrid } from './CardGrid'
-import { IArticle } from 'src/types'
-
-export interface IArticleCardListProps {
-    articles: IArticle[]
-    nextPage: number | null
-    prevPage: number | null
-}
-
-export const ArticleCardList: React.FC<IArticleCardListProps> = ({ articles, nextPage, prevPage, ...props }) => (
-    <>
-        <CardGrid
-            style={{
-                marginBottom: 'var(--size-m)',
-            }}
-        >
-            {articles.map((article, i) => {
-                const preview = {
-                    alt: article.title,
-                    src: article.preview.src,
-                    srcSet: article.preview.set,
-                }
-
-                const gridColumn = article.featured ? 'span 2' : 'auto'
-
-                return (
-                    <ArticleCard
-                        key={i}
-                        article={article}
-                        preview={preview as any}
-                        style={{
-                            gridColumn
-                        }}
-                    />
-                )
-            })}
-        </CardGrid>
-
-        <Pager
-            nextHref={nextPage ? `/articles/${nextPage}` : null}
-            prevHref={prevPage ? `/articles/${prevPage}` : null}
-        />
-    </>
-)

src/components/ArticleGrid/index.tsx

@@ -0,0 +1,62 @@
+import { Pager } from '../Pager'
+import { CardGrid } from '../CardGrid'
+import { IArticle } from 'src/types'
+import { Card, CardLayout } from '../Card'
+import { Date } from './Date'
+
+export interface IArticleGridProps {
+    articles: IArticle[]
+    nextPage: number | null
+    prevPage: number | null
+}
+
+export const ArticleGrid: React.FC<IArticleGridProps> = ({ articles, nextPage, prevPage, ...props }) => (
+    <>
+        <CardGrid
+            style={{
+                marginBottom: 'var(--size-m)',
+            }}
+        >
+            {articles.map((article, i) => {
+                const gridColumn = article.featured ? 'span 2' : 'auto'
+                const layout: CardLayout = article.featured ? 'featured' : 'simple'
+                const srcSet = article.preview.set.map(({ url, density }) => `${url} ${density}x`).join(' ')
+
+                return (
+                    <Card
+                        key={i}
+                        href={article.url}
+                        img={{
+                            alt: article.title,
+                            src: article.preview.src,
+                            srcSet,
+                        }}
+                        layout={layout}
+                        style={{
+                            gridColumn,
+                        }}
+                    >
+                        <div style={{
+                            minHeight: '5em',
+                        }}>
+                            <h2 style={{
+                                // margin: '0 0 var(--size-s)',
+                                margin: 0,
+                                fontSize: '18pt'
+                            }}>
+                                {article.title}
+                            </h2>
+
+                            {/* <Date>{article.date}</Date> */}
+                        </div>
+                    </Card>
+                )
+            })}
+        </CardGrid>
+
+        <Pager
+            nextHref={nextPage ? `/articles/${nextPage}` : null}
+            prevHref={prevPage ? `/articles/${prevPage}` : null}
+        />
+    </>
+)

src/components/CardGrid/styles.css

@@ -3,7 +3,7 @@
     display: grid;
     /* grid-template-columns: 1fr 1fr 1fr; */
     grid-template-columns: repeat(auto-fill, minmax(var(--min-cell-size), 1fr));
-    grid-auto-rows: 20em;
+    grid-auto-rows: 25em;
     grid-gap: var(--size-xl) var(--size-l);
 }
 

src/components/PersonCard/index.tsx

@@ -1,29 +0,0 @@
-import './styles.css'
-
-import cx from 'classnames'
-import { Image } from '../Image'
-
-export const PersonCard = ({ picture, name, url, profile }) => (
-    <div className={'personCard'}>
-        <a className={'invisible'} href={url}>
-            <div className={'personCard-Picture'}>
-                <picture>
-                    <img
-                        className={cx({ opa: false })}
-                        alt={''}
-                        src={picture.src}
-                        srcSet={picture.set.map(({ url, density }) => `${url} ${density}x`)}
-                    />
-                </picture>
-            </div>
-
-            <div className={'personCard-Title'}>
-                {name[0]} {name[1]} {name[2]}
-            </div>
-
-            <div className={'personCard-Body'}>
-                {profile.position}
-            </div>
-        </a>
-    </div>
-)

src/components/PersonCard/styles.css

@@ -1,72 +0,0 @@
-.personCard {
-    --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) {
-    }
-}

src/style.css

@@ -65,14 +65,14 @@
     --color-back-opposite: var(--darker-color);
 
     /* SIZE */
-    --size-sx: 0.2em;
+    --size-xs: 0.25em;
     --size-s: 0.5em;
     --size-m: 1em;
     --size-l: 2em;
     --size-xl: 3em;
 
     /* EFFECTS */
-    --radius: 15px;
+    --radius: 16px;
     --shadow: 0 0 8px var(--color-shadow);
     --shadow-active: 0 4px 16px var(--color-shadow);