mirror of
https://github.com/discourse/discourse.git
synced 2024-12-13 12:23:42 +08:00
20d344b5c6
Meta topic: https://meta.discourse.org/t/android-keyboard-overlaps-text-when-flagging-with-something-else/249687?u=osama On Android, it's currently not possible to scroll modals that take input from the user (such as the flagging modal) when the keyboard is open which means that the keyboard can cover up part of the modal with no way for the user to see the covered part without closing the keyboard. This commit adds some CSS to make these modals scrollable when the keyboard is open.
137 lines
2.2 KiB
SCSS
137 lines
2.2 KiB
SCSS
// base styles for every modal popup used in Discourse
|
|
|
|
.modal-open #main {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal-middle-container {
|
|
max-width: 100%;
|
|
margin-bottom: 30px; // For iOS Safari issues
|
|
}
|
|
|
|
// Hardcode to be the same as before for now. I would recommend not using bootbox, or finding a way so the html structure can be the same
|
|
.bootbox.modal {
|
|
top: 10%;
|
|
width: 100%;
|
|
}
|
|
|
|
.modal {
|
|
&.fade {
|
|
transition: opacity 0.3s linear, top 0.3s ease-out;
|
|
top: -25%;
|
|
}
|
|
&.fade.in {
|
|
top: 50%;
|
|
}
|
|
.modal-body {
|
|
padding: 0.667em;
|
|
overflow-y: scroll;
|
|
|
|
> * {
|
|
// adding box-sizing: border-box; to .modal-body causes iOS dropdown issues
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
|
|
// we need a little extra room on mobile for the
|
|
// stuff inside the footer to fit
|
|
.modal-footer {
|
|
padding: 10px;
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 10px;
|
|
h3 {
|
|
font-size: var(--font-up-2);
|
|
}
|
|
}
|
|
|
|
.close {
|
|
font-size: var(--font-up-4);
|
|
}
|
|
|
|
#choosing-topic {
|
|
p {
|
|
margin-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.category-chooser {
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
button {
|
|
margin-top: 10px;
|
|
display: block;
|
|
width: 300px;
|
|
}
|
|
|
|
form {
|
|
margin-top: 20px;
|
|
input:not(.filter-input)[type="text"] {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-device-width: 568px) {
|
|
.modal .flag-modal-body .flag-message {
|
|
height: 3em;
|
|
}
|
|
}
|
|
|
|
/* fixes for the new account confirm dialog on mobile */
|
|
|
|
.modal-inner-container {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* fix for tall modals */
|
|
|
|
.fixed-modal {
|
|
.modal-middle-container {
|
|
margin-bottom: 0;
|
|
}
|
|
.modal-inner-container {
|
|
max-height: 90vh;
|
|
overflow: auto;
|
|
}
|
|
|
|
&.insert-hyperlink-modal .modal-inner-container {
|
|
overflow: visible;
|
|
}
|
|
|
|
html.keyboard-visible:not(.ios-device) & {
|
|
height: calc(100% - env(keyboard-inset-height));
|
|
|
|
.modal-inner-container {
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal .modal-body.reorder-categories {
|
|
max-height: calc(100vh - 220px);
|
|
}
|
|
|
|
.discard-draft-modal {
|
|
.modal-inner-container {
|
|
width: 250px;
|
|
}
|
|
.modal-footer {
|
|
justify-content: center;
|
|
flex-flow: column nowrap;
|
|
align-items: stretch;
|
|
|
|
.btn {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|