Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix Activity Panel layout on mobile (https://github.com/woocommerce/woocommerce-admin/pull/2405)

This commit is contained in:
Albert Juhé Lluveras 2019-06-12 23:51:08 +02:00 committed by GitHub
parent 698c373a67
commit 2d4b7b9938
6 changed files with 67 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
plugins/woocommerce-admin/client/header/activity-panel/activity-card/style.scss
View File

@ -35,15 +35,6 @@
.woocommerce-activity-card__icon {
grid-area: icon;
fill: $core-grey-light-600;
@include breakpoint( '<782px' ) {
.gridicon,
img {
height: 24px;
width: 24px;
margin-left: $gap-small;
}
}
}
.woocommerce-activity-card__header {
@ -163,14 +154,14 @@
height: 48px;
width: 48px;
}
}
@include breakpoint( '<782px' ) {
.gridicon,
img,
&.woocommerce-stock-activity-card,
&.woocommerce-review-activity-card {
.woocommerce-activity-card__icon {
.is-placeholder {
height: 24px;
width: 24px;
margin-left: $gap-small;
height: 60px;
width: 60px;
}
}
}
@ -247,6 +238,16 @@
}
.woocommerce-review-activity-card {
.woocommerce-activity-card__body > span > p {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.woocommerce-review-activity-card__verified {
margin-left: $gap-small;
display: inline-flex;
@ -262,33 +263,15 @@
}
.woocommerce-review-activity-card__image-overlay {
margin-left: -$gap-large;
position: relative;
img.woocommerce-gravatar {
left: $gap-large;
position: relative;
top: -42px;
border: 2px solid $white;
left: 0;
position: absolute;
top: -6px;
z-index: 2;
}
.woocommerce-review-activity-card__image-overlay__product {
display: inline-block;
height: 60px;
position: relative;
width: 60px;
&.is-placeholder::before {
background-color: $core-grey-dark-500;
border-radius: 50%;
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
opacity: 0.1;
}
}
}
@include breakpoint( '<782px' ) {
@ -304,12 +287,25 @@
top: -28px;
z-index: 1;
}
}
}
.woocommerce-review-activity-card__image-overlay__product,
.woocommerce-review-activity-card__image-overlay__product .woocommerce-product-image {
width: 38px;
height: 38px;
}
.woocommerce-review-activity-card__image-overlay__product,
.woocommerce-stock-activity-card__image-overlay__product {
height: 60px;
position: relative;
width: 60px;
&.is-placeholder::before {
background-color: $core-grey-dark-500;
border-radius: 50%;
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
opacity: 0.1;
}
}
@ -358,6 +354,10 @@
}
}
.woocommerce-empty-review-activity-card {
.woocommerce-empty-activity-card {
grid-template-columns: 72px 1fr;
@include breakpoint( '<782px' ) {
grid-template-columns: 64px 1fr;
}
}

2
plugins/woocommerce-admin/client/header/activity-panel/panels/inbox.js
View File

@ -36,7 +36,7 @@ class InboxPanel extends Component {
renderEmptyCard() {
return (
<ActivityCard
className="woocommerce-empty-review-activity-card"
className="woocommerce-empty-activity-card"
title={ __( 'Your inbox is empty', 'woocommerce-admin' ) }
icon={ <Gridicon icon="checkmark" size={ 48 } /> }
>

4
plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js
View File

@ -42,7 +42,7 @@ class OrdersPanel extends Component {
if ( hasNonActionableOrders ) {
return (
<ActivityCard
className="woocommerce-empty-review-activity-card"
className="woocommerce-empty-activity-card"
title={ __( 'You have no orders to fulfill', 'woocommerce-admin' ) }
icon={ <Gridicon icon="checkmark" size={ 48 } /> }
>
@ -53,7 +53,7 @@ class OrdersPanel extends Component {
return (
<ActivityCard
className="woocommerce-empty-review-activity-card"
className="woocommerce-empty-activity-card"
title={ __( 'You have no orders to fulfill', 'woocommerce-admin' ) }
icon={ <Gridicon icon="time" size={ 48 } /> }
actions={

2
plugins/woocommerce-admin/client/header/activity-panel/panels/reviews.js
View File

@ -209,7 +209,7 @@ class ReviewsPanel extends Component {
return (
<ActivityCard
className="woocommerce-empty-review-activity-card"
className="woocommerce-empty-activity-card"
title={ title }
icon={ <Gridicon icon="time" size={ 48 } /> }
actions={

19
plugins/woocommerce-admin/client/header/activity-panel/panels/stock/card.js
View File

@ -4,8 +4,10 @@
*/
import { __, sprintf } from '@wordpress/i18n';
import { BaseControl, Button } from '@wordpress/components';
import classnames from 'classnames';
import { Component, Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { get } from 'lodash';
import { withDispatch } from '@wordpress/data';
/**
@ -131,12 +133,27 @@ class ProductStockCard extends Component {
.join( ', ' );
}
const productImage = get( product, [ 'images', 0 ] ) || get( product, [ 'image' ] );
const productImageClasses = classnames(
'woocommerce-stock-activity-card__image-overlay__product',
{
'is-placeholder': ! productImage || ! productImage.src,
}
);
const icon = (
<div className="woocommerce-stock-activity-card__image-overlay">
<div className={ productImageClasses }>
<ProductImage product={ product } />
</div>
</div>
);
return (
<ActivityCard
className="woocommerce-stock-activity-card"
title={ title }
subtitle={ subtitle }
icon={ <ProductImage product={ product } /> }
icon={ icon }
actions={ this.getActions() }
>
{ this.getBody() }

2
plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js
View File

@ -26,7 +26,7 @@ class StockPanel extends Component {
renderEmptyCard() {
return (
<ActivityCard
className="woocommerce-empty-review-activity-card"
className="woocommerce-empty-activity-card"
title={ __( 'Your stock is in good shape.', 'woocommerce-admin' ) }
icon={ <Gridicon icon="checkmark" size={ 48 } /> }
>