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.

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

Exports: Change card type for media export to match export/download buttons alignment #28280

Merged
merged 6 commits into from Nov 15, 2018

Conversation

Projects
None yet
3 participants
@arunsathiya
Contributor

arunsathiya commented Nov 5, 2018

This PR attempts to fix #28247.

Description:

In its current format, the export/download buttons on the two cards (content export and media export) are not aligned.

This PR replaces the card type used for the media export, that enables the buttons positioning to align.

Changes proposed in this Pull Request

  • The current media export card is a ActionCard card type. This PR replaces the card with a FoldableCard type, to match the type used for the content export card.
  • Also styles used for the export card are reused for the new FoldableCard for the media export.
  • It also makes use of a new Button component, like how the first export card has a SpinnerButton

Testing instructions

  • Visit the live branch link below and pick a WordPress.com site of your choice.
  • Open the Settings section and open the Export section.
  • Ensure that the buttons on the export card and the media export card are aligned.
  • Ensure that they are aligned for multiple browsers, and resolutions.
  • Also ensure that the button is disabled when there are no media library files on the site.

Before:

screenshot 2018-11-05 at 18 26 44

Image indicating that the buttons on the two export cards are not aligned

After:

screenshot 2018-11-05 at 18 06 46
screenshot 2018-11-05 at 18 10 35
screenshot 2018-11-05 at 18 10 45

View when no media library files exist on a WordPress.com site

screenshot 2018-11-05 at 18 08 41

Image indicating that the download button is disabled
@matticbot

This comment has been minimized.

@arunsathiya

This comment has been minimized.

Contributor

arunsathiya commented Nov 5, 2018

The ci/circleci: icfy-stats failure could be a timeout similar to what happened here on another PR. I am unable to trigger a new run due to permission issues.

@southp

southp approved these changes Nov 15, 2018

Tested and LGTM! Thanks for the janitorial diligence :)

@arunsathiya

This comment has been minimized.

Contributor

arunsathiya commented Nov 15, 2018

Thank you for the review, @southp!

@arunsathiya arunsathiya merged commit 33411f7 into master Nov 15, 2018

15 checks passed

a8c/valid-pr This check is used to prevent accidental commits to master.
Details
ci/circleci: build-jetpack-blocks Your tests passed on CircleCI!
Details
ci/circleci: build-notifications Your tests passed on CircleCI!
Details
ci/circleci: danger Your tests passed on CircleCI!
Details
ci/circleci: icfy-stats Your tests passed on CircleCI!
Details
ci/circleci: lint-and-translate Your tests passed on CircleCI!
Details
ci/circleci: prime-calypso-live Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: test-client Your tests passed on CircleCI!
Details
ci/circleci: test-server Your tests passed on CircleCI!
Details
ci/i18n Total: 3 strings. Everything already translated!
Details
ci/wp-desktop Your PR passed the wp-desktop tests on CircleCI!
Details
ci/wp-e2e-tests-canary Your PR passed the e2e tests on CircleCI!
Details
ci/wp-e2e-tests-canary-ie11 Your PR passed the e2e tests on CircleCI!
Details
ci/wp-e2e-tests-canary-safari10 Your PR passed the e2e tests on CircleCI!
Details

@arunsathiya arunsathiya deleted the update/28247-change-media-export-card-type branch Nov 15, 2018

jkmassel added a commit that referenced this pull request Nov 28, 2018

Exports: Change card type for media export to match export/download b…
…uttons alignment (#28280)

* Add foldable card for media export

* Add padding to new foldable card (media card) to match export card's

* Remove previous action card and associated dependencies

* Add title and subtitle styling for media card, to match export card's

* Remove previous action card's styles as they are not required anymore

* Remove unnecessary actionButtonIcon reference
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment