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.

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

Expand date filter select box width #8335

Merged
merged 2 commits into from
Aug 8, 2018
Merged

Expand date filter select box width #8335

merged 2 commits into from
Aug 8, 2018

Conversation

ianbelanger79
Copy link
Contributor

Widens the "All Dates" select box in the "Add Media" modal window, so that the full placeholder text is shown. Fix for #2202

Description

Added width: auto; and max-width: 100%; to edit-post/assets/stylesheets/main.scss

How has this been tested?

Browser tested in Chrome 67.0.3396.99 and FF 61.0.1, Windows 10

Screenshots

Before changes
gutenberg-2202-before

After changes
gutenberg-2202-after

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.

@ianbelanger79 ianbelanger79 self-assigned this Jul 31, 2018
Copy link
Contributor

@earnjam earnjam left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Thanks!

@jasmussen
Copy link
Contributor

Ship it.

@mtias mtias added this to the 3.5 milestone Aug 8, 2018
ianbelanger79 and others added 2 commits August 8, 2018 15:54
Widens the "All Dates" select box in the "Add Media" modal window, so that the full placeholder text is shown. Fix for #2202
@youknowriad youknowriad added the [Type] Bug An existing feature does not function as intended label Aug 8, 2018
@@ -73,6 +73,11 @@ body.gutenberg-editor-page {
ul#adminmenu > li.current > a.current::after {
border-right-color: $white;
}

.media-frame select.attachment-filters:last-of-type {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if this is a Core Bug and if it should be backported to Core somehow?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I initially thought about submitting a ticket to trac for this, but I have never seen the issue outside of Gutenberg. I can test it a little later today to see if this is a core issue.

Copy link
Member

@ajitbohra ajitbohra Aug 8, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on WordPress install with & without Gutenberg, dropdown width issue seems to be only on media modal triggered by Gutenberg blocks.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So the question is:

  • What gutenberg styles are conflicting with this? Maybe we can fix it differently in that case.
  • Another possibility is that it's a Core bug surfaced by Gutenberg

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just an issue because core (non-gutenberg media modal) has two dropdowns there, with the other being for filetype. It uses two declarations for them to appear side by side:

.media-modal-content .media-frame select.attachment-filters {
    margin-top: 11px;
    margin-right: 2%;
    width: 42%;
    width: (48% - 12px);
.media-frame select.attachment-filters {
    margin-top: 11px;
    margin-right: 2%;
    max-width: 42%;
    max-width: calc(48% - 12px);

In our case, we only have one, so those rules are basically chopping it in half. We need to override those.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's a core issue then. Because we're relying on wp.media APIs to open the modal, we're not hiding the second select with CSS which means if the wp.media allows us to show the media modal in that shape, it should also show it properly.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will submit a ticket on trac for this and reference the original issue #2202

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants