Improve styling for the review modal and when editing articles/metadata & Make kbox responsive to window resizing and overflow#7613
Conversation
| } | ||
|
|
||
| label { | ||
| .field label { |
There was a problem hiding this comment.
Won't this make any label without a field to default to bold?
There was a problem hiding this comment.
It will, but only inside #approve-modal, and that's actually what we want. Currently, the non-bold font weight applies to #id-approve-comment with textarea. The change will exclude this case from the rule. Given that the modal is quite limited, I don't see any other effect of this change, so it should be fine.
| self.render(); | ||
| } | ||
| self.$kbox.addClass('kbox-open'); | ||
| self.handleOverflow(); |
There was a problem hiding this comment.
won't this be applied to all kboxes?
There was a problem hiding this comment.
yes, but that's what I'm trying to achieve
| self.$kbox.addClass('kbox-open'); | ||
| self.handleOverflow(); | ||
| self.setPosition(); | ||
| self.addResizeHandler(); |
There was a problem hiding this comment.
Should we throttle this so to limit the amount of resizing that takes place?
There was a problem hiding this comment.
that's not something I'm very familiar with, let me look into
| self.resetOverflow(); | ||
|
|
||
| let modalWidth = self.$kbox.outerWidth(); | ||
| let modalHeight = self.$kbox.outerHeight(); |
There was a problem hiding this comment.
probably the 2 vars above are not used
There was a problem hiding this comment.
they are used:
let left = Math.max((windowWidth - modalWidth) / 2, minMargin);
let top = Math.max((windowHeight - modalHeight) / 2, minMargin);
2 participants
Resolves #2190, #3106, #3108. Maybe there are other issues filed?
setPosition()on window resize.max-width/max-heightfor it to fit the viewport (with minimal margins) and allow scrolling.