Merge pull request #19 from tmshv/fix/page-collective-update
Collective page update
This commit is contained in:
6 files changed
+118
-149
No files matched your search
+16
-13
@@ -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 = {
|
||||
@@ -46,23 +48,24 @@ const Page: NextPage<Props> = props => {
|
||||
<CollectiveImage
|
||||
data={props.image}
|
||||
style={{
|
||||
marginBottom: 'var(--double-margin)',
|
||||
marginBottom: 'var(--size-l)',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<CardList
|
||||
items={props.data}
|
||||
renderItem={(person, index) => (
|
||||
<CardGrid style={{
|
||||
marginBottom: 'var(--size-xl)',
|
||||
}}>
|
||||
{props.data.map((item, index) => (
|
||||
<PersonCard
|
||||
key={index}
|
||||
profile={person}
|
||||
picture={person.picture}
|
||||
url={person.url}
|
||||
name={person.name}
|
||||
profile={item}
|
||||
picture={item.picture}
|
||||
url={item.url}
|
||||
name={item.name}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</CardGrid>
|
||||
</App>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
export const CardList = props => (
|
||||
<div className="CardList">
|
||||
<style jsx>{`
|
||||
.CardList {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
justify-content: space-between;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
{props.items.map(
|
||||
(item, index) => props.renderItem(item, index)
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
@@ -15,7 +15,7 @@ export const CollectiveImage = (props) => (
|
||||
}}
|
||||
imgStyle={{
|
||||
width: '100%',
|
||||
borderRadius: '10px',
|
||||
borderRadius: 'var(--radius)',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,116 +0,0 @@
|
||||
import React from 'react'
|
||||
import cx from 'classnames'
|
||||
import { Image } from './Image'
|
||||
|
||||
export const PersonCard = ({ picture, name, url, profile }) => (
|
||||
<div className="PersonCard">
|
||||
<style jsx>{`
|
||||
.PersonCard {
|
||||
--person-card-width: 30%;
|
||||
--person-card-height: 24em;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin-bottom: var(--double-margin);
|
||||
|
||||
width: var(--person-card-width);
|
||||
min-width: 10em;
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
.PersonCard > a {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.PersonCard-Picture {
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
|
||||
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%;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<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>
|
||||
)
|
||||
@@ -0,0 +1,29 @@
|
||||
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>
|
||||
)
|
||||
@@ -0,0 +1,72 @@
|
||||
.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) {
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user