| @@ -14,4 +14,63 @@ | ||
| 14 | 14 | html[frame-adminify-iframe=true] #wpfooter { |
| 15 | 15 | margin-left: 0 !important; |
| 16 | 16 | margin-right: 0 !important; |
| 17 | 17 | } |
| 18 | + | |
| 19 | +/** | |
| 20 | + * Pre-publish panel in the block editor - duplicate Publish button. | |
| 21 | + * | |
| 22 | + * Core anchors the panel below the admin bar - `top: 46px` below 782px where the | |
| 23 | + * panel is full-bleed, `top: 32px` on desktop where it is the right-hand sidebar - | |
| 24 | + * so it lines up with the editor header it is meant to cover. Inside the Adminify | |
| 25 | + * frame the admin bar is hidden (above) and the editor header moves up to the top | |
| 26 | + * of the iframe, so that gap leaves the header - Publish button and all - showing | |
| 27 | + * above the panel's own Cancel / Publish row. Anchor the panel to the top of the | |
| 28 | + * iframe at every width so it covers the header the way it does in the default | |
| 29 | + * admin. Newer core builds drive the offset from `--wp-admin--admin-bar--height`, | |
| 30 | + * so zero that too for anything else keyed to it. | |
| 31 | + */ | |
| 32 | +html[frame-adminify-iframe=true] { | |
| 33 | + --wp-admin--admin-bar--height: 0px; | |
| 34 | +} | |
| 35 | + | |
| 36 | +html[frame-adminify-iframe=true] .editor-post-publish-panel { | |
| 37 | + top: 0; | |
| 38 | +} | |
| 39 | + | |
| 40 | +/** | |
| 41 | + * Media library popup on real mobile devices - breathing room at the bottom. | |
| 42 | + * | |
| 43 | + * WordPress renders the modal full-bleed below 640px and pins its toolbar flush | |
| 44 | + * to the modal's bottom edge, so the "Set featured image" / "Select" button ends | |
| 45 | + * up hard against the device edge - and on phones with a home indicator, partly | |
| 46 | + * under it. Lift the whole modal box instead of touching the toolbar, so the | |
| 47 | + * toolbar keeps the geometry core gives it (`.media-frame-toolbar` bottom 60px | |
| 48 | + * + `.media-toolbar` bottom -60px) and everything inside moves up together. | |
| 49 | + */ | |
| 50 | +@media screen and (max-width: 782px), screen and (max-height: 400px) { | |
| 51 | + html[frame-adminify-iframe=true] .media-modal, | |
| 52 | + html[frame-adminify-iframe=true] .image-details .media-modal { | |
| 53 | + bottom: calc(16px + env(safe-area-inset-bottom, 0px)); | |
| 54 | + } | |
| 55 | +} | |
| 56 | +/** | |
| 57 | + * Media library popup on real mobile devices - legacy browsers only. | |
| 58 | + * | |
| 59 | + * The shell sizes the iframe against the visible viewport (`100dvh`), so the | |
| 60 | + * media modal fits and its bottom toolbar - the "Set featured image" / "Select" | |
| 61 | + * button - is reachable. Browsers without `dvh` support (iOS < 15.4, | |
| 62 | + * Chrome < 108) fall back to `100vh`, which mobile browsers resolve against the | |
| 63 | + * LARGE viewport (URL bar hidden). There the iframe hangs below the visible | |
| 64 | + * area and takes the modal's toolbar with it. | |
| 65 | + * | |
| 66 | + * Shrink the modal by the Adminify topbar height for those browsers only, on | |
| 67 | + * top of the 16px gap above. | |
| 68 | + */ | |
| 69 | +@supports not (height: 100dvh) { | |
| 70 | + @media screen and (max-width: 782px), screen and (max-height: 400px) { | |
| 71 | + html[frame-adminify-iframe=true] .media-modal, | |
| 72 | + html[frame-adminify-iframe=true] .image-details .media-modal { | |
| 73 | + bottom: calc(72px + env(safe-area-inset-bottom, 0px)); | |
| 74 | + } | |
| 75 | + } | |
| 76 | +} | |
