mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-29 05:00:43 +10:00
Remove wireframe class (design has changed from original idea))
This commit is contained in:
Vesa Luusua
parent
48dbe8bf77
commit
8048d99ef2
6 changed files with 0 additions and 196 deletions
|
|
@ -1,53 +0,0 @@
|
|||
.listing {
|
||||
width: 130px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
margin-right: 1rem;
|
||||
flex-basis: 130px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.threeToTwoWrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Firefox doesn't support image aspect ratio inside flexbox */
|
||||
.aspectWrapper {
|
||||
padding-bottom: 66.6667%; /* 3:2 Aspect Ratio */
|
||||
}
|
||||
|
||||
.noImageContainer,
|
||||
.thumbnail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.noImageContainer,
|
||||
.noImageWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.noImageText {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
border: solid 1px #ccc;
|
||||
}
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
import React from 'react';
|
||||
import { intlShape, injectIntl } from 'react-intl';
|
||||
import { NamedLink } from '../../components';
|
||||
import * as propTypes from '../../util/propTypes';
|
||||
import { convertMoneyToNumber } from '../../util/currency';
|
||||
import css from './ListingCardSmall.css';
|
||||
import noImageIcon from './images/noImageIcon.svg';
|
||||
|
||||
const priceData = (price, currencyConfig, intl) => {
|
||||
if (price && price.currency === currencyConfig.currency) {
|
||||
const priceAsNumber = convertMoneyToNumber(price, currencyConfig.subUnitDivisor);
|
||||
const formattedPrice = intl.formatNumber(priceAsNumber, currencyConfig);
|
||||
return { formattedPrice, priceTitle: formattedPrice };
|
||||
} else if (price) {
|
||||
return {
|
||||
formattedPrice: `(${price.currency})`,
|
||||
priceTitle: `Unsupported currency (${price.currency})`,
|
||||
};
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
export const ListingCardSmallComponent = props => {
|
||||
const { currencyConfig, intl, listing } = props;
|
||||
const { price = null, title = '' } = listing.attributes || {};
|
||||
const id = listing.id.uuid;
|
||||
const slug = encodeURIComponent(title.split(' ').join('-'));
|
||||
|
||||
// TODO: these are not yet present in the API data, figure out what
|
||||
// to do with them
|
||||
// TODO: Currently, API can return currencies that are not supported by starter app.
|
||||
const { formattedPrice, priceTitle } = priceData(price, currencyConfig, intl);
|
||||
|
||||
const images = listing.images
|
||||
? listing.images.map(i => ({ id: i.id, sizes: i.attributes.sizes }))
|
||||
: [];
|
||||
const mainImage = images.length > 0 ? images[0] : null;
|
||||
const imageURL = mainImage ? mainImage.sizes.find(i => i.name === 'landscape-crop').url : null;
|
||||
const image2XURL = mainImage
|
||||
? mainImage.sizes.find(i => i.name === 'landscape-crop2x').url
|
||||
: null;
|
||||
const higherRes = image2XURL ? { srcSet: `${image2XURL} 2x` } : null;
|
||||
|
||||
// TODO: svg should have own loading strategy
|
||||
// Now noImageIcon is imported with default configuration (gives url)
|
||||
/* eslint-disable jsx-a11y/img-redundant-alt */
|
||||
const noListingImage = (
|
||||
<div className={css.noImageContainer}>
|
||||
<div className={css.noImageWrapper}>
|
||||
<img className={css.noImageIcon} src={noImageIcon} alt="No image" />
|
||||
<div className={css.noImageText}>No image</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
/* eslint-enable jsx-a11y/img-redundant-alt */
|
||||
const listingImage = (
|
||||
<img className={css.thumbnail} src={imageURL} alt="Listing Title" {...higherRes} />
|
||||
);
|
||||
|
||||
const imageOrPlaceholder = imageURL ? listingImage : noListingImage;
|
||||
|
||||
return (
|
||||
<div className={css.listing}>
|
||||
<div className={css.threeToTwoWrapper}>
|
||||
<div className={css.aspectWrapper}>
|
||||
{imageOrPlaceholder}
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.info}>
|
||||
<NamedLink className={css.title} name="ListingPage" params={{ id, slug }}>
|
||||
{title}
|
||||
</NamedLink>
|
||||
<div className={css.price} title={priceTitle}>
|
||||
{formattedPrice}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ListingCardSmallComponent.propTypes = {
|
||||
currencyConfig: propTypes.currencyConfig.isRequired,
|
||||
intl: intlShape.isRequired,
|
||||
listing: propTypes.listing.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(ListingCardSmallComponent);
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import React from 'react';
|
||||
import { renderShallow } from '../../util/test-helpers';
|
||||
import { createUser, createListing, currencyConfig, fakeIntl } from '../../util/test-data';
|
||||
import { ListingCardSmallComponent } from './ListingCardSmall';
|
||||
|
||||
describe('ListingCardSmall', () => {
|
||||
it('matches snapshot', () => {
|
||||
const author = createUser('user1');
|
||||
const listing = { ...createListing('listing1'), author };
|
||||
const tree = renderShallow(
|
||||
<ListingCardSmallComponent
|
||||
listing={listing}
|
||||
intl={fakeIntl}
|
||||
currencyConfig={currencyConfig}
|
||||
/>
|
||||
);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
exports[`ListingCardSmall matches snapshot 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
alt="No image"
|
||||
src="noImageIcon.svg" />
|
||||
<div>
|
||||
No image
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<withFlattenedRoutes(withRouter(NamedLink))
|
||||
name="ListingPage"
|
||||
params={
|
||||
Object {
|
||||
"id": "listing1",
|
||||
"slug": "listing1-title",
|
||||
}
|
||||
}>
|
||||
listing1 title
|
||||
</withFlattenedRoutes(withRouter(NamedLink))>
|
||||
<div
|
||||
title={55}>
|
||||
55
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg width="48" height="49" viewBox="0 -1 48 49" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 47.2h48V0H0z"/></defs><g fill="none" fill-rule="evenodd"><path stroke="#525961" stroke-width="2" stroke-linejoin="round" d="M13.6 9.6L24 .8l10.4 8.8z"/><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path stroke="#525961" stroke-width="2" mask="url(#b)" d="M.8 46.4h46.4V9.6H.8z"/><path stroke="#525961" stroke-width="2" mask="url(#b)" d="M5.6 41.6h36.8V14.4H5.6z"/><path d="M19.998 31.636l.835-.835a4.035 4.035 0 0 1 2.853-1.183h.693c1.07 0 2.097.426 2.853 1.183l.835.835" stroke="#525961" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" mask="url(#b)"/><path d="M21.599 23.983a1.009 1.009 0 1 0 0 2.018 1.009 1.009 0 0 0 0-2.018M26.402 23.983a1.009 1.009 0 1 0 0 2.018 1.009 1.009 0 0 0 0-2.018" fill="#525961" mask="url(#b)"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 915 B |
|
|
@ -17,7 +17,6 @@ import ExternalLink from './ExternalLink/ExternalLink';
|
|||
import FilterPanel from './FilterPanel/FilterPanel';
|
||||
import HeroSection from './HeroSection/HeroSection';
|
||||
import ListingCard from './ListingCard/ListingCard';
|
||||
import ListingCardSmall from './ListingCardSmall/ListingCardSmall';
|
||||
import LocationAutocompleteInput, {
|
||||
LocationAutocompleteInputField,
|
||||
} from './LocationAutocompleteInput/LocationAutocompleteInput';
|
||||
|
|
@ -79,7 +78,6 @@ export {
|
|||
HeroSection,
|
||||
InlineTextButton,
|
||||
ListingCard,
|
||||
ListingCardSmall,
|
||||
LocationAutocompleteInput,
|
||||
LocationAutocompleteInputField,
|
||||
Map,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue