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

OrderDetailsPage needed correct imageWrappers (and aspect wrappers)

Browse source
This commit is contained in:
Vesa Luusua 2017-10-02 19:27:31 +03:00
parent e7adefbd8d
commit de7d822a2e
2 changed files with 40 additions and 28 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} />