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

SaleDetailsPage needed correct imageWrappers (and aspect wrappers)

Browse source
This commit is contained in:
Vesa Luusua 2017-10-02 19:27:45 +03:00
parent de7d822a2e
commit 59d0f718cf
2 changed files with 44 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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" />