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

Merge pull request #610 from sharetribe/position-sticky-fix

Browse source 
position sticky and h1 margin-top fixes
This commit is contained in:
Vesa Luusua 2017-12-20 18:57:23 +02:00 • committed by GitHub
commit cccce886c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/TransactionPanel/TransactionPanel.css
View file

@ -86,14 +86,19 @@
}
}
.avatarDesktop {
.avatarWrapperProviderDesktop {
display: none;
@media (--viewportLarge) {
display: flex;
display: block;
margin-top: 119px;
}
}
.avatarDesktop {
@media (--viewportLarge) {
display: flex;
}
}
.headingOrder {
margin: 29px 24px 0 24px;
@ -105,7 +110,7 @@
@media (--viewportLarge) {
max-width: 100%;
margin: 177px 0 0 0;
margin: 152px 0 0 0;
}
}
@ -166,7 +171,7 @@
display: none;
position: sticky;
top: -272px; /* This is a hack to showcase how the component would look when the image isn't sticky */
top: -200px; /* This is a hack to showcase how the component would look when the image isn't sticky */
width: 409px;
background-color: var(--matterColorLight);
border: 1px solid var(--matterColorNegative);

2
src/components/TransactionPanel/TransactionPanel.js
View file

@ -240,7 +240,7 @@ export class TransactionPanelComponent extends Component {
<AvatarMedium user={currentProvider} />
</div>
{isProvider ? (
<div className={css.avatarWrapper}>
<div className={css.avatarWrapperProviderDesktop}>
<AvatarLarge user={currentCustomer} className={css.avatarDesktop} />
</div>
) : null}