WordPress.org
Get WordPress

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#49951 closed defect (bug) (fixed)

Plugin and Theme upload form issue in responsive

Reported by: mukesh27's profile mukesh27 Owned by: afercia's profile afercia
Milestone: 5.5 Priority: normal
Severity: normal Version: 5.4
Component: Upload Keywords: has-screenshots has-patch
Focuses: ui, css Cc:

Description

In responsive design plugin and theme upload form design issue.

Attachments (6)

Add Plugins.png​ (27.6 KB) - added by mukesh27 4 years ago.
Add Themes.png​ (23.8 KB) - added by mukesh27 4 years ago.
49951.diff​ (427 bytes) - added by DarkoG 4 years ago.
49951.2.diff​ (679 bytes) - added by afercia 4 years ago.
49951 large.png​ (54.9 KB) - added by afercia 4 years ago.
Patch applied: large screens
49951 small.png​ (67.5 KB) - added by afercia 4 years ago.
Patch applied: smaller screens

Download all attachments as: .zip

Change History (12)

@mukesh27
4 years ago

@mukesh27
4 years ago

#1 @mukesh27
4 years ago

#49981 was marked as a duplicate.

#2 @afercia
4 years ago

  • Component changed from Themes to Upload
  • Focuses administration removed
  • Milestone changed from Awaiting Review to 5.5

Introduced in [47271], see #48859. Looks like the addition of display: flex broke the upload form in the responsive view.

@DarkoG
4 years ago

#3 @DarkoG
4 years ago

  • Keywords has-patch added; needs-patch removed

49951.diff fixes the problem in plugin and theme installation

#4 @afercia
4 years ago

See also [47599] / #49914 , where justify-content: space-between; was added. However, looks like on large screens the vertical alignment may still be improved. Historically, styling file inputs was almost impossible. Adding align-items: center; for large screens may help.

Switching back to display: block for smaller screens as proposed in 49951.diff​ looks good to me.

@afercia
4 years ago

#5 @afercia
4 years ago

49951.2.diff​:

  • adds align-items: center; for large screens
  • moves the ruleset to switch to display: block to the already existing 782px @media query group

@afercia
4 years ago

Patch applied: large screens

@afercia
4 years ago

Patch applied: smaller screens

#6 @afercia
4 years ago

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

In 47750:

Upload: Improve file input and button alignment in plugin/theme upload form.

Resets flexbox on smaller screens. Improves vertical alignment on large screens.
Follow-up to [47599] and [47271].

Props mukesh27, DarkoG.
See #48859, #49914.
Fixes #49951.

Note: See TracTickets for help on using tickets.