WordPress.org

Make WordPress Core

Opened 7 months ago

Last modified 3 months ago

#40130 reopened enhancement

On mobile make media search full width

Reported by: karmatosed Owned by: adamsilverstein
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Media Keywords: good-first-bug has-patch needs-testing
Focuses: ui Cc:

Description (last modified by karmatosed)

Visually this could be made full width.

https://cldup.com/lShPIi60NO.PNG

Note: the header here full stop needs some work but that is something to iterate on, lets start with this.

Attachments (3)

40130.patch (383 bytes) - added by abhishekfdd 7 months ago.
Patch to fix the issue
40130.2.patch (485 bytes) - added by m1tk00 5 months ago.
Attached the css for the form in the media query for mobile devices only.
40130.3.patch (674 bytes) - added by viralsampat 4 months ago.
Fixed

Download all attachments as: .zip

Change History (17)

#1 @karmatosed
7 months ago

  • Description modified (diff)

#2 @adamsilverstein
7 months ago

  • Keywords good-first-bug added

@abhishekfdd
7 months ago

Patch to fix the issue

#3 @abhishekfdd
7 months ago

  • Keywords has-patch added; needs-patch removed

Made media search full width

#4 @adamsilverstein
7 months ago

  • Keywords has-screenshots reporter-feedback added

Looks good @abhishekfdd. At full width, the search box stays smaller and pinned to the right side of the screen:

https://d3vv6lp55qjaqc.cloudfront.net/items/1Y061G2R2S0W0w1U2k1A/Image%202017-03-21%20at%2010.41.55%20AM.png

At smaller sizes the width snaps to 100%:

https://cl.ly/1P0d0f3h2j3F/Media_Library__wpdev__WordPress_2017-03-21_10-44-01.jpg

#5 @karmatosed
5 months ago

  • Keywords reporter-feedback removed

Looks great to me. Are we good to get a commit? Thanks @abhishekfdd and @adamsilverstein.

#6 @karmatosed
5 months ago

  • Keywords commit added

#7 @adamsilverstein
5 months ago

  • Owner set to adamsilverstein
  • Resolution set to fixed
  • Status changed from new to closed

In 40792:

Media: make search input full width on mobile.

Props abhishekfdd.
Fixes #40130.

#8 @ocean90
5 months ago

  • Milestone changed from Awaiting Review to 4.8

#9 @adamsilverstein
5 months ago

In 40840:

Plugins: fix regression in search input field size.

Fix a formatting regression introduced in [40792] which attempted to resize the input for mobile, see #40130.

Props leemon, juhise, voldemortensen.
Fixes #40857.

#10 @adamsilverstein
5 months ago

  • Keywords needs-patch added; has-patch has-screenshots commit removed
  • Milestone changed from 4.8 to Future Release
  • Resolution fixed deleted
  • Status changed from closed to reopened

@karmatosed & @abhishekfdd - We had to revert this change in [40840] because of unintended side effects. Reopening for 4.9, this still seems like a good idea if we can get the targeting right.

#11 follow-up: @karmatosed
5 months ago

@adamsilverstein any information more on what this impacted so we can avoid that? Could we get an update on this ticket?

#12 in reply to: ↑ 11 @adamsilverstein
5 months ago

Replying to karmatosed:

@adamsilverstein any information more on what this impacted so we can avoid that? Could we get an update on this ticket?

@karmatosed The plugin search bar is mentioned on the other ticket- #40857, not sure if other areas were affected.

Last edited 5 months ago by adamsilverstein (previous) (diff)

@m1tk00
5 months ago

Attached the css for the form in the media query for mobile devices only.

#13 @allisonplus
4 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

@viralsampat
4 months ago

Fixed

This ticket was mentioned in Slack in #core by viralsampat. View the logs.


3 months ago

Note: See TracTickets for help on using tickets.