WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#29556 closed defect (bug) (fixed)

Layout bugs in "Add New" Theme section

Reported by: jesin Owned by: SergeyBiryukov
Milestone: 4.1 Priority: normal
Severity: normal Version: 4.0
Component: Themes Keywords: make-flow has-patch
Focuses: ui, administration Cc:

Description

  1. On 320px wide screens the search bar overflows and the menu above it (15, Features, Popular...) doesn't look neat.

https://i.imgur.com/5aDIPij.png

  1. Under the Feature Filter section the Features division is at 33% width.

https://i.imgur.com/2k5LhVz.png

  1. The theme popup (that appears when a theme is clicked) has a large Install button on screens lesser than 768px.

https://i.imgur.com/FTbsXlm.png

Patch fixes the search bar by creating a new media query section for 320px and the Feature Filter.

Attachments (8)

29556.diff (581 bytes) - added by jesin 5 years ago.
Screen Shot 2014-10-14 at 5.57.46 PM.png (76.5 KB) - added by obenland 5 years ago.
Filters on large screen
29556.2.diff (2.8 KB) - added by obenland 5 years ago.
29556.3.diff (3.5 KB) - added by obenland 5 years ago.
29556.4.diff (3.9 KB) - added by TacoVerdo 5 years ago.
29556.5.diff (3.8 KB) - added by jesin 5 years ago.
Themes_search_box.png (166.8 KB) - added by pavelevap 5 years ago.
29556.6.diff (515 bytes) - added by jesin 5 years ago.

Download all attachments as: .zip

Change History (25)

@jesin
5 years ago

@obenland
5 years ago

Filters on large screen

@obenland
5 years ago

#1 @obenland
5 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 4.1

29556.2.diff:

  • removes the theme count on small screens (>320px).
  • Reverts some of the crazy of r28037
  • Gives all columns an equal width. On large screens the boxes still have two columns.
  • Readjusts the alignment of the install button on small screens.

A review by someone with experience writing CSS for the whole admin would be appreciated, as I'm sure I didn't catch all uses of the CSS I changed.

#2 @obenland
5 years ago

  • Keywords flow added

#3 @obenland
5 years ago

  • Keywords make-flow added; flow removed

#4 @obenland
5 years ago

Also reported on make/flow.

#5 @helen
5 years ago

That filter bar CSS is used in the media library and plugin install, if somebody would like to check. I don't believe the drawer part is used anywhere else right now, though.

@obenland
5 years ago

#6 @obenland
5 years ago

Tested 29556.3.diff with media library, theme install, and plugin install. Helen, would you mind double-checking it?

This would also fix the short search bar, reported in #29495.

#7 @obenland
5 years ago

#30027 was marked as a duplicate.

#8 @SergeyBiryukov
5 years ago

  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

#9 @SergeyBiryukov
5 years ago

In 29959:

Theme install:

  • Move the "based on" string below the rating to avoid wrapping to a second line.
  • Reduce the gap between the theme screenshot and description.
  • Fix Install button height on mobile.

props obenland, ocean90.
fixes #28148. see #29556.

@TacoVerdo
5 years ago

#10 @TacoVerdo
5 years ago

Made a minor change to 29556.3.diff, as it would still have the search bar overflow (issue 1) with screensizes just over 320px.

I also tested 29556.4.diff in media library, theme install, and plugin install.

#11 @helen
5 years ago

  • Keywords needs-refresh added

TacoVerdo - can you make a new patch for the issues you saw? This one isn't applying.

@jesin
5 years ago

#12 @jesin
5 years ago

  • Keywords needs-refresh removed

Patch 29556.5.diff refreshes TacoVerdo's 29556.4.diff. Patch has not been tested.

#13 @helen
5 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 30740:

Filter bar: Better field display on smaller screens.

props TacoVerdo, jesin.
fixes #29556 and #29495.

#14 follow-up: @pavelevap
5 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Chrome, monitor 1920 x 1080 px, search box broken in current trunk...

@jesin
5 years ago

#15 in reply to: ↑ 14 @jesin
5 years ago

Replying to pavelevap:

Chrome, monitor 1920 x 1080 px, search box broken in current trunk...

It happens on smaller resolutions too. Patch 29556.6.diff removes .wp-filter-search's max-width, reverts width to 280px and sets a max-width for screens smaller than 650px.

#16 @pavelevap
5 years ago

Patch works well for me. There is another small issue, bubble with number of themes is a little stripped from the top and bottom. I am not sure, if it is expected beahaviour.

#17 @azaozz
5 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 30747:

Themes screen: fix the position of the search field. Props jesin, fixes #29556.

Note: See TracTickets for help on using tickets.