Commit 32f07a98 authored by Andy Lamb's avatar Andy Lamb
Browse files

Test listing page working and styled using image API

parent 6fb458df
Pipeline #40633 passed with stage
in 2 minutes and 47 seconds
This diff is collapsed.
......@@ -21,6 +21,15 @@ export default [
loading: Loading,
}),
},
{
contentTypeID: 'andyLambTest',
component: Loadable({
loader: () => {
return import('~/pages/AndyTestPage/AndyTestPage');
},
loading: Loading,
}),
},
{
contentTypeID: 'thEvent',
component: Loadable({
......
......@@ -26,7 +26,7 @@ export default [
}),
},
{
path: '/andy-test',
path: '/andy-test-listing',
exact: true,
component: Loadable({
loader: () => import('~/pages/Listings/AndyTestListing.page'),
......
import styled, { css } from 'styled-components';
const AndyListingCardStyled = styled.article`
${() => {
const AndyListingCardStyled = styled.div`
${({ bg }) => {
return css`
display: block;
width: 100%;
max-width: 550px;
margin-bottom: 80px;
padding: 30px;
margin-bottom: 30px;
background-image: ${bg};
background-size: cover;
border-radius: 40px;
&:hover {
cursor: pointer;
}
.inner {
display: flex;
padding: 30px;
flex: 1 1 auto;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 20px;
}
.imgWrapper {
display: flex;
min-width: 150px;
max-height: 150px;
}
.textWrapper {
}
h3 {
margin: 10px 0;
font-size: 24px;
margin: 0 0 20px 20px;
font-size: 28px;
font-weight: 700;
line-height: 1.3;
line-height: 1.6;
}
p {
margin: 0;
margin-bottom: 30px;
font-size: 16px;
line-height: 1.7;
margin: 0 0 20px 20px;
font-size: 18px;
line-height: 1.6;
}
img {
width: 100%;
......
......@@ -16,16 +16,7 @@ const AndyTestListingStyled = styled.div`
a {
text-decoration: none;
width: 100%;
margin: 20px;
@media only screen and (min-width: 550px) {
margin: 0;
width: calc(50% - 15px);
}
@media only screen and (min-width: 1100px) {
margin: 0;
width: calc(33% - 15px);
}
margin: 0;
p {
text-decoration: none;
......
......@@ -2,22 +2,27 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import AndyListingCardStyled from '../components.styled/AndyListingCard.styled';
import AndyListingCardStyled from '~/features/andyTest/components.styled/AndyListingCard.styled';
const AndyListingCard = ({ title, description, image, uri, className }) => {
const AndyListingCard = ({ title, image, uri, excerpt, className }) => {
const blurredBg = `url(${image.asset.sys.uri}?width=800&blur=40)`;
return (
<Link to={uri}>
<AndyListingCardStyled className={className}>
{image && (
<img
src={`${image.asset.sys.uri}?width=500&height=300&fit=crop`}
alt={image.asset.altText}
/>
)}
<h3>{title}</h3>
{description && <p>{description}</p>}
<AndyListingCardStyled className={className} bg={blurredBg}>
<div className="inner">
<div className="imgWrapper">
{image && (
<img
src={`${image.asset.sys.uri}?width=150&height=150&fit=crop`}
alt={image.asset.altText}
/>
)}
</div>
<div className="textWrapper">
<h3>{title}</h3>
{excerpt && <p>{excerpt}</p>}
</div>
</div>
</AndyListingCardStyled>
</Link>
);
......@@ -26,7 +31,7 @@ const AndyListingCard = ({ title, description, image, uri, className }) => {
AndyListingCard.propTypes = {
className: PropTypes.string,
title: PropTypes.string,
description: PropTypes.string,
excerpt: PropTypes.string,
image: PropTypes.object,
uri: PropTypes.string,
};
......
......@@ -14,11 +14,11 @@ const fetchEntries = async versionStatus => {
try {
//DELIVERY API QUERY START//
let query = new Query(
Op.equalTo('sys.contentTypeId', 'blogPost'),
Op.equalTo('sys.contentTypeId', 'andyLambTest'),
Op.equalTo('sys.versionStatus', versionStatus)
);
query.pageSize = 3;
query.fields = ['title', 'summary', 'image', 'sys'];
query.fields = ['title', 'exerpt', 'image', 'sys'];
//DELIVERY API QUERY END//
//DELIVERY API SEARCH START//
......@@ -33,7 +33,7 @@ const fetchEntries = async versionStatus => {
return entries;
};
const BlogListing = ({ className }) => {
const AndyTestListing = ({ className }) => {
const [results, setResults] = useState();
//GET VERSION STATUS
const versionStatus = useSelector(selectVersionStatus);
......@@ -72,7 +72,7 @@ const BlogListing = ({ className }) => {
return (
<AndyListingCard
title={entry.title}
description={entry.summary}
excerpt={entry.exerpt}
image={entry.image}
uri={entry.sys && entry.sys.uri}
key={idx}
......@@ -85,8 +85,8 @@ const BlogListing = ({ className }) => {
);
};
BlogListing.propTypes = {
AndyTestListing.propTypes = {
className: PropTypes.string,
};
export default BlogListing;
export default AndyTestListing;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment