maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-29 05:00:43 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #454 from sharetribe/orderdetails-correct-imagewrappers

Browse source 
Orderdetails correct imagewrappers
This commit is contained in:
Vesa Luusua 2017-10-03 12:24:30 +03:00 • committed by GitHub
commit 12e0531d25
6 changed files with 504 additions and 432 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/OrderDetailsPanel/OrderDetailsPanel.css
View file

@ -17,18 +17,19 @@
}
}
/* Firefox doesn't support image aspect ratio inside flexbox */
.aspectWrapper {
padding-bottom: 66.6667%; /* 3:2 Aspect Ratio */
background-color: var(--matterColorNegative); /* Loading BG color */
.imageWrapperMobile {
/* Layout */
display: block;
width: 100%;
position: relative;
@media (--viewportLarge) {
display: none;
}
}
.breakdownAspectWrapper {
position: relative;
/* Firefox doesn't support image aspect ratio inside flexbox */
.aspectWrapper {
padding-bottom: 66.6667%; /* 3:2 Aspect Ratio */
background-color: var(--matterColorNegative); /* Loading BG color */
}
@ -128,6 +129,13 @@
}
}
.breakdownImageWrapper {
/* Layout */
display: block;
width: 100%;
position: relative;
}
.bookingBreakdownContainer {
margin: 1px 0 0 0;

48
src/components/OrderDetailsPanel/OrderDetailsPanel.js
View file

@ -171,17 +171,19 @@ export const OrderDetailsPanelComponent = props => {
return (
<div className={classes}>
<div className={css.container}>
<div className={css.aspectWrapper}>
<ResponsiveImage
rootClassName={css.rootForImage}
alt={listingTitle}
image={firstImage}
nameSet={[
{ name: 'landscape-crop', size: '400w' },
{ name: 'landscape-crop2x', size: '800w' },
]}
sizes="100vw"
/>
<div className={css.imageWrapperMobile}>
<div className={css.aspectWrapper}>
<ResponsiveImage
rootClassName={css.rootForImage}
alt={listingTitle}
image={firstImage}
nameSet={[
{ name: 'landscape-crop', size: '400w' },
{ name: 'landscape-crop2x', size: '800w' },
]}
sizes="100vw"
/>
</div>
</div>
<div className={classNames(css.avatarWrapper, css.avatarMobile)}>
<AvatarMedium user={currentProvider} />
@ -200,17 +202,19 @@ export const OrderDetailsPanelComponent = props => {
{bookingInfo}
</div>
<div className={css.breakdownDesktop}>
<div className={css.breakdownAspectWrapper}>
<ResponsiveImage
rootClassName={css.rootForImage}
alt={listingTitle}
image={firstImage}
nameSet={[
{ name: 'landscape-crop', size: '400w' },
{ name: 'landscape-crop2x', size: '800w' },
]}
sizes="100%"
/>
<div className={css.breakdownImageWrapper}>
<div className={css.aspectWrapper}>
<ResponsiveImage
rootClassName={css.rootForImage}
alt={listingTitle}
image={firstImage}
nameSet={[
{ name: 'landscape-crop', size: '400w' },
{ name: 'landscape-crop2x', size: '800w' },
]}
sizes="100%"
/>
</div>
</div>
<div className={css.avatarWrapper}>
<AvatarMedium user={currentProvider} />

400
src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
View file

@ -3,25 +3,27 @@ exports[`OrderDetailsPanel accepted matches snapshot 1`] = `
className="">
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
</div>
</div>
<div
className="">
@ -216,25 +218,27 @@ exports[`OrderDetailsPanel accepted matches snapshot 1`] = `
</div>
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
</div>
</div>
<div>
<AvatarMedium
@ -401,25 +405,27 @@ exports[`OrderDetailsPanel autorejected matches snapshot 1`] = `
className="">
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
</div>
</div>
<div
className="">
@ -603,25 +609,27 @@ exports[`OrderDetailsPanel autorejected matches snapshot 1`] = `
</div>
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
</div>
</div>
<div>
<AvatarMedium
@ -788,25 +796,27 @@ exports[`OrderDetailsPanel delivered matches snapshot 1`] = `
className="">
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
</div>
</div>
<div
className="">
@ -990,25 +1000,27 @@ exports[`OrderDetailsPanel delivered matches snapshot 1`] = `
</div>
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
</div>
</div>
<div>
<AvatarMedium
@ -1175,25 +1187,27 @@ exports[`OrderDetailsPanel preauthorized matches snapshot 1`] = `
className="">
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
</div>
</div>
<div
className="">
@ -1381,25 +1395,27 @@ exports[`OrderDetailsPanel preauthorized matches snapshot 1`] = `
</div>
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
</div>
</div>
<div>
<AvatarMedium
@ -1566,25 +1582,27 @@ exports[`OrderDetailsPanel rejected matches snapshot 1`] = `
className="">
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
</div>
</div>
<div
className="">
@ -1768,25 +1786,27 @@ exports[`OrderDetailsPanel rejected matches snapshot 1`] = `
</div>
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
</div>
</div>
<div>
<AvatarMedium

20
src/components/SaleDetailsPanel/SaleDetailsPanel.css
View file

@ -20,9 +20,18 @@
white-space: nowrap;
}
.aspectWrapperMobile,
.aspectWrapperDesktop {
.imageWrapperMobile {
/* Layout */
display: block;
width: 100%;
position: relative;
@media (--viewportLarge) {
display: none;
}
}
.aspectWrapper {
padding-bottom: 66.6667%; /* 3:2 Aspect Ratio */
background-color: var(--matterColorNegative); /* Loading BG color */
}
@ -154,6 +163,13 @@
}
}
.breakdownImageWrapper {
/* Layout */
display: block;
width: 100%;
position: relative;
}
.breakdownTitleMobile {
/* Font */
color: var(--matterColorAnti);

48
src/components/SaleDetailsPanel/SaleDetailsPanel.js
View file

@ -195,17 +195,19 @@ export const SaleDetailsPanelComponent = props => {
return (
<div className={classes}>
<div className={css.container}>
<div className={css.aspectWrapperMobile}>
<ResponsiveImage
rootClassName={css.rootForImage}
alt={listingTitle}
image={firstImage}
nameSet={[
{ name: 'landscape-crop', size: '400w' },
{ name: 'landscape-crop2x', size: '800w' },
]}
sizes="100vw"
/>
<div className={css.imageWrapperMobile}>
<div className={css.aspectWrapper}>
<ResponsiveImage
rootClassName={css.rootForImage}
alt={listingTitle}
image={firstImage}
nameSet={[
{ name: 'landscape-crop', size: '400w' },
{ name: 'landscape-crop2x', size: '800w' },
]}
sizes="100vw"
/>
</div>
</div>
<div className={css.avatarWrapper}>
<AvatarMedium user={currentCustomer} className={css.avatarMobile} />
@ -229,17 +231,19 @@ export const SaleDetailsPanelComponent = props => {
{bookingInfo}
</div>
<div className={css.breakdownContainerDesktop}>
<div className={css.aspectWrapperDesktop}>
<ResponsiveImage
rootClassName={css.rootForImage}
alt={listingTitle}
image={firstImage}
nameSet={[
{ name: 'landscape-crop', size: '400w' },
{ name: 'landscape-crop2x', size: '800w' },
]}
sizes="100%"
/>
<div className={css.breakdownImageWrapper}>
<div className={css.aspectWrapper}>
<ResponsiveImage
rootClassName={css.rootForImage}
alt={listingTitle}
image={firstImage}
nameSet={[
{ name: 'landscape-crop', size: '400w' },
{ name: 'landscape-crop2x', size: '800w' },
]}
sizes="100%"
/>
</div>
</div>
<h3 className={css.breakdownTitleDesktop}>
<FormattedMessage id="SaleDetailsPanel.bookingBreakdownTitle" />

400
src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap
View file

@ -3,25 +3,27 @@ exports[`SaleDetailsPanel accepted matches snapshot 1`] = `
className="">
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
</div>
</div>
<div>
<AvatarMedium
@ -211,25 +213,27 @@ exports[`SaleDetailsPanel accepted matches snapshot 1`] = `
</div>
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
</div>
</div>
<h3>
<FormattedMessage
@ -353,25 +357,27 @@ exports[`SaleDetailsPanel autorejected matches snapshot 1`] = `
className="">
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
</div>
</div>
<div>
<AvatarMedium
@ -561,25 +567,27 @@ exports[`SaleDetailsPanel autorejected matches snapshot 1`] = `
</div>
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
</div>
</div>
<h3>
<FormattedMessage
@ -703,25 +711,27 @@ exports[`SaleDetailsPanel delivered matches snapshot 1`] = `
className="">
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
</div>
</div>
<div>
<AvatarMedium
@ -911,25 +921,27 @@ exports[`SaleDetailsPanel delivered matches snapshot 1`] = `
</div>
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
</div>
</div>
<h3>
<FormattedMessage
@ -1053,25 +1065,27 @@ exports[`SaleDetailsPanel preauthorized matches snapshot 1`] = `
className="">
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
</div>
</div>
<div>
<AvatarMedium
@ -1273,25 +1287,27 @@ exports[`SaleDetailsPanel preauthorized matches snapshot 1`] = `
</div>
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
</div>
</div>
<h3>
<FormattedMessage
@ -1415,25 +1431,27 @@ exports[`SaleDetailsPanel rejected matches snapshot 1`] = `
className="">
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100vw" />
</div>
</div>
<div>
<AvatarMedium
@ -1623,25 +1641,27 @@ exports[`SaleDetailsPanel rejected matches snapshot 1`] = `
</div>
<div>
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
<div>
<ResponsiveImage
alt="listing1 title"
className={null}
image={null}
nameSet={
Array [
Object {
"name": "landscape-crop",
"size": "400w",
},
Object {
"name": "landscape-crop2x",
"size": "800w",
},
]
}
noImageMessage={null}
rootClassName={null}
sizes="100%" />
</div>
</div>
<h3>
<FormattedMessage