Skip to content
Snippets Groups Projects
Commit 2a1ac2f9 authored by tspuller's avatar tspuller
Browse files

pictures!

parent 2fdd6441
No related branches found
No related tags found
No related merge requests found
src/assets/images/raj.jpg

37.9 KiB

src/assets/images/taylor.jpg

14.8 KiB

src/assets/images/tiger.jpg

13 KiB

src/assets/images/travis.jpg

14.7 KiB

......@@ -2,6 +2,9 @@ import React from 'react';
import { Row, Col } from 'antd';
import LayoutWrapper from '@imd/components/utility/layoutWrapper';
import basicStyle from '@imd/assets/styles/constants';
import { SingleCardWrapper } from './About.styles';
import { SortableCardWrapper } from './About.styles';
import people from './config';
const styles = {
wisgetPageStyle: {
......@@ -24,6 +27,8 @@ const styles = {
export default function() {
const { rowStyle, colStyle } = basicStyle;
const listClass = `isoSingleCard card grid`;
const style = { zIndex: 100 };
return (
<LayoutWrapper style={{marginTop: "15px"}}>
......@@ -42,6 +47,25 @@ export default function() {
We are a pro-privacy group with the interest of our users first. We do not store any information you import into our site. We do not look at the information. You maintain full control and complete privacy!
</Col>
</Row>
<SortableCardWrapper
id="shuffle"
className={`isomorphicSortableCardsHolder grid`}
>
<div className="isoSortableCardsContainer">
<ul>
{people.map((person, idx) => (
<SingleCardWrapper id={person.id} className={listClass} style={style}>
<div className="isoCardImage">
<img alt="#" src={person.img} />
</div>
<div className="isoCardContent">
<h3 className="isoCardTitle">{person.desc}</h3>
</div>
</SingleCardWrapper>
))};
</ul>
</div>
</SortableCardWrapper>
</div>
</LayoutWrapper>
);
......
import styled from 'styled-components';
import { palette } from 'styled-theme';
import {
transition,
borderRadius,
boxShadow,
} from '@imd/lib/helpers/style_utils';
import WithDirection from '@imd/lib/helpers/rtl';
const WDSingleCardWrapper = styled.li`
padding: 15px;
background-color: #ffffff;
position: relative;
margin-bottom: 5px;
${boxShadow('0 0 1px rgba(0,0,0,0.15)')};
.isoCardImage {
overflow: hidden;
flex-shrink: 0;
align-items: center;
justify-content: center;
background-color: ${palette('grayscale', 6)};
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.isoCardContent {
width: 100%;
display: flex;
flex-direction: column;
margin: 0 15px;
.isoCardTitle {
font-size: 14px;
font-weight: 500;
margin: 0 0 3px;
}
}
&.list {
width: 100%;
display: flex;
align-items: center;
.isoCardImage {
width: 20px;
height: 20px;
display: -webkit-inline-flex;
display: -ms-inline-flex;
display: inline-flex;
${borderRadius('50%')};
}
}
&.grid {
width: calc(100% / 3 - 15px);
display: flex;
flex-direction: column;
margin: 0 7px 15px;
padding: 0;
@media only screen and (max-width: 767px) {
width: calc(100% / 2 - 10px);
margin: 0 5px 10px;
}
@media only screen and (max-width: 480px) {
width: 100%;
margin-right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')};
margin-left: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'inherit')};
}
@media only screen and (min-width: 1400px) {
width: calc(100% / 4 - 15px);
margin: 0 7px 15px;
}
.isoCardImage {
width: 100%;
height: 260px;
display: flex;
@media only screen and (min-width: 960px) {
height: 330px;
}
}
.isoCardContent {
padding: 15px;
margin: 0;
}
.isoDeleteBtn {
position: absolute;
top: 0;
right: ${props => (props['data-rtl'] === 'rtl' ? 'inherit' : '0')};
left: ${props => (props['data-rtl'] === 'rtl' ? '0' : 'inherit')};
}
}
`;
const WDSortableCardWrapper = styled.div`
padding: 50px 35px;
@media only screen and (max-width: 767px) {
padding: 30px 20px;
}
&.grid {
.isoSortableCardsContainer {
width: 100%;
ul {
list-style: none;
width: 100%;
display: flex;
flex-flow: row wrap;
li {
float: left;
}
}
}
}
`;
const SingleCardWrapper = WithDirection(WDSingleCardWrapper);
const SortableCardWrapper = WithDirection(WDSortableCardWrapper);
export { SingleCardWrapper, SortableCardWrapper };
import React from 'react';
import Travis from '@imd/assets/images/travis.jpg';
import Taylor from '@imd/assets/images/taylor.jpg';
import Tiger from '@imd/assets/images/tiger.jpg';
import Raj from '@imd/assets/images/raj.jpg';
const people = [
{
id: 'a',
desc: 'Karthik Mohan Raj',
img: Raj,
},
{
id: 'b',
desc: 'Taylor Lansey',
img: Taylor,
},
{
id: 'c',
desc: 'Tiger Shi',
img: Tiger,
},
{
id: 'd',
desc: 'Travis Spuller',
img: Travis,
}
];
export default people;
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment