Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mobile Apps: Crop Google Play badge image #38940

Merged
merged 2 commits into from
Jan 20, 2020
Merged

Mobile Apps: Crop Google Play badge image #38940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
69a5a0d
Crop Google Play image
mmtr Jan 20, 2020
b8843e7
Mobile Apps: Crop Google Play badge image
mmtr Jan 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 12 additions & 8 deletions client/blocks/get-apps/apps-badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
.get-apps__app-badge {
display: inline-block;
display: flex;
max-width: 135px;
max-height: 40px;
overflow: hidden;
margin-left: 0.5rem;

img {
max-height: 41px;
margin: 9px 0;
width: auto;
&:first-child {
margin-left: 0;
}

// Crops the Android badge in order to remove the transparent space around it and generate a size-equivalent image
// to the iOS badge.
&.android-app-badge img {
max-height: 60px;
margin-left: 0;
transform: scale( 1.13 ) translate( -7px, -5.1px );
transform-origin: left;
}
}
}
16 changes: 13 additions & 3 deletions client/my-sites/customer-home/main.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { localize } from 'i18n-calypso';
import page from 'page';
import { flowRight } from 'lodash';
import moment from 'moment';
import classnames from 'classnames';

/**
* Internal dependencies
Expand Down Expand Up @@ -332,10 +333,19 @@ class Home extends Component {
const isIos = isiPad || isiPod || isiPhone;
const showIosBadge = isDesktop() || isIos || ! isAndroid;
const showAndroidBadge = isDesktop() || isAndroid || ! isIos;
const showOnlyOneBadge = showIosBadge !== showAndroidBadge;
return (
<Card className="customer-home__go-mobile">
<CardHeading>{ translate( 'Go Mobile' ) }</CardHeading>
<h6 className="customer-home__card-subheader">{ translate( 'Make updates on the go' ) }</h6>
<Card
className={ classnames( 'customer-home__go-mobile', {
'is-single-store': showOnlyOneBadge,
} ) }
>
<div>
<CardHeading>{ translate( 'Go Mobile' ) }</CardHeading>
<h6 className="customer-home__card-subheader">
{ translate( 'Make updates on the go' ) }
</h6>
</div>
<div className="customer-home__card-button-pair customer-home__card-mobile">
{ showIosBadge && (
<AppsBadge
Expand Down
25 changes: 24 additions & 1 deletion client/my-sites/customer-home/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,16 +194,39 @@
display: flex;
flex-direction: row;
align-items: center;

.get-apps__app-badge {
width: 50%;
}
}
&__card-subheader {
color: var( --color-text-subtle );
font-size: 0.85rem;
margin: -0.5rem 0 1rem;
}
&__go-mobile,
&__grow-earn {
padding-bottom: 12px;
}
&__go-mobile.is-single-store {
display: flex;
padding-bottom: 1rem;

.customer-home__card-subheader,
.get-apps__app-badge img {
margin: 0;
}

.get-apps__app-badge {
width: auto;
}

.customer-home__card-mobile {
margin-left: auto;
align-self: center;
flex-shrink: 0;
padding-left: 1rem;
}
}
&__layout {
@include grid-row( 3, 1 );
@include breakpoint( '>1040px' ) {
Expand Down