Skip to content

Commit 0fa1497

Browse files
committed
Media: Fix media modal positioning and spacing on mobile with infinite scroll.
On small screens, the attachment grid in the media modal collapsed to a single narrow column when infinite scrolling was enabled. The responsive rules for size and position of attachments grid, toolbar, and wrapper did not account for the taller media toolbar present when the "load more" button is absent. Add a `.attachments-browser:not(.has-load-more)` selector to the affected mobile breakpoints and adjust the toolbar height and grid offset so the attachment grid fills the modal width and displays multiple items per row, matching the layout used when infinite scroll is disabled. Props tyxla, mukesh27, joedolson. See https://core.trac.wordpress.org/ticket/65564. git-svn-id: https://develop.svn.wordpress.org/trunk@62955 602fd350-edb4-49c9-b593-d223f7449a82
1 parent e4cb98d commit 0fa1497

1 file changed

Lines changed: 5 additions & 2 deletions

File tree

‎src/wp-includes/css/media-views.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2635,6 +2635,7 @@ select#media-attachment-filters ~ select#media-attachment-date-filters {
26352635
}
26362636

26372637
.attachments-browser .attachments,
2638+
.attachments-browser:not(.has-load-more) .attachments,
26382639
.attachments-browser .uploader-inline,
26392640
.attachments-browser .media-toolbar,
26402641
.attachments-browser .attachments-wrapper,
@@ -2643,13 +2644,14 @@ select#media-attachment-filters ~ select#media-attachment-date-filters {
26432644
}
26442645

26452646
.attachments-browser .media-toolbar {
2646-
height: 74px;
2647+
height: 117px;
26472648
}
26482649

26492650
.attachments-browser .attachments,
2651+
.attachments-browser:not(.has-load-more) .attachments,
26502652
.attachments-browser .uploader-inline,
26512653
.media-frame-content .attachments-browser .attachments-wrapper {
2652-
top: 90px;
2654+
top: 131px;
26532655
}
26542656

26552657
.media-sidebar .setting,
@@ -2956,6 +2958,7 @@ select#media-attachment-filters ~ select#media-attachment-date-filters {
29562958
}
29572959

29582960
.attachments-browser .attachments,
2961+
.attachments-browser:not(.has-load-more) .attachments,
29592962
.attachments-browser .uploader-inline,
29602963
.attachments-browser .media-toolbar,
29612964
.media-frame-content .attachments-browser .attachments-wrapper {

0 commit comments

Comments
 (0)