Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Fixed post items getting cut off on iOS (#17189)

Browse source 
- This PR is a fixed version of #16765. I took a different approach for this to work around some of the issues that were found after that one got merged. In that PR's description, I mentioned that there were multiple scroll areas for the post editor that were somehow displaying at different sizes. The reason appears to be that the CSS vh unit includes some areas that are obscured by Safari's toolbars, since those toolbars may disappear if the <body> element is scrolled. However, since Ghost's admin area uses <div> elements for all scrolling, those toolbars never disappear, and so the space becomes unused. We can work around this by changing to the CSS dvh unit, which always represents the current size of the viewport.
- Most pages have enough padding that the vh unit doesn't cause any problems. In this PR, I've changed it for two places that do break, the post editor and the post settings menu (which can get the "Delete" button cut off). I also included the sidebar width fix from the previous PR.
- Video of the fixed behavior (compare with the old behavior video linked in #16765): https://github.com/TryGhost/Ghost/assets/12983479/eceda43a-23c3-4cf6-9de2-8eda54a98100
This commit is contained in:
Jonathan Browne 2023-10-06 03:58:08 -05:00 • committed by GitHub
parent 5b46f246ef
commit e8840510fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/components/gh-koenig-editor-lexical.hbs
View file

@ -1,4 +1,4 @@
<div class="gh-koenig-editor relative w-100 vh-100 overflow-x-hidden overflow-y-auto z-0" {{did-insert this.registerElement}} ...attributes>
<div class="gh-koenig-editor relative z-0" {{did-insert this.registerElement}} ...attributes>
{{!-- full height content pane --}}
{{!-- template-lint-disable no-invalid-interactive no-passed-in-event-handlers --}}
<div

2
ghost/admin/app/components/gh-koenig-editor.hbs
View file

@ -1,4 +1,4 @@
<div class="gh-koenig-editor relative w-100 vh-100 overflow-x-hidden overflow-y-auto z-0" {{did-insert this.registerElement}} ...attributes>
<div class="gh-koenig-editor relative z-0" {{did-insert this.registerElement}} ...attributes>
{{!-- full height content pane --}}
{{!-- template-lint-disable no-invalid-interactive no-passed-in-event-handlers --}}
<div

8
ghost/admin/app/styles/components/koenig.css
View file

@ -930,6 +930,14 @@
height: 1.6rem;
}
/* Scroll container for the editor canvas */
.gh-koenig-editor {
width: 100%;
height: 100dvh;
overflow-x: hidden;
overflow-y: auto;
}
/* Padded container housing title + editor canvas, scrollable content */
.gh-koenig-editor-pane {
padding: 11vw 92px;

24
ghost/admin/app/styles/components/settings-menu.css
View file

@ -45,7 +45,7 @@
.settings-menu-container {
z-index: 999;
height: 100vh;
height: 100dvh;
min-width: 420px;
overflow-x: visible;
overflow-y: auto;
@ -70,6 +70,19 @@
}
}
@media (max-width: 800px) {
.settings-menu-container {
padding-bottom: 64px;
}
}
@media (max-width: 500px) {
.settings-menu-container {
width: 100vw;
min-width: 100vw;
}
}
.settings-menu-container .settings-menu-pane {
position: absolute;
top: 0;
@ -93,7 +106,14 @@
top: auto;
right: auto;
bottom: auto;
height: 100vh;
height: 100dvh;
}
@media (max-width: 500px) {
.settings-menu-container .settings-menu-pane {
width: 100vw;
min-width: 100vw;
}
}
/* Header