Fixed inset for mobile devices on MediaModal

• Fixed:
- inset for mobile devices on MediaModal
This commit is contained in:
mgabdev 2020-08-12 18:13:02 -05:00
parent 562fe0de57
commit 1f977d5a44

View File

@ -130,29 +130,6 @@ class MediaModal extends ImmutablePureComponent {
const index = this.getIndex() const index = this.getIndex()
const leftNav = media.size > 1 && (
<Button
tabIndex='0'
backgroundColor='black'
className={[_s.py15, _s.posFixed, _s.top50PC, _s.left0, _s.mt10, _s.ml10].join(' ')}
onClick={this.handlePrevClick}
aria-label={intl.formatMessage(messages.previous)}
icon='arrow-left'
iconSize='18px'
/>
)
const rightNav = media.size > 1 && (
<Button
tabIndex='0'
backgroundColor='black'
className={[_s.py15, _s.posFixed, _s.top50PC, _s.right0, _s.mt10, _s.mr10].join(' ')}
onClick={this.handleNextClick}
aria-label={intl.formatMessage(messages.next)}
icon='arrow-right'
iconSize='18px'
/>
)
const content = media.map((image) => { const content = media.map((image) => {
const width = image.getIn(['meta', 'original', 'width']) || null const width = image.getIn(['meta', 'original', 'width']) || null
const height = image.getIn(['meta', 'original', 'height']) || null const height = image.getIn(['meta', 'original', 'height']) || null
@ -218,10 +195,6 @@ class MediaModal extends ImmutablePureComponent {
const navigationClasses = CX({ const navigationClasses = CX({
default: 1, default: 1,
saveAreaInsetPT: 1,
saveAreaInsetPR: 1,
saveAreaInsetPB: 1,
saveAreaInsetPL: 1,
displayNone: navigationHidden, displayNone: navigationHidden,
}) })
@ -251,17 +224,42 @@ class MediaModal extends ImmutablePureComponent {
</div> </div>
<div className={navigationClasses}> <div className={navigationClasses}>
<Button <div className={[_s.posFixed, _s.top0, _s.right0, _s.mt10, _s.mr10, _s.saveAreaInsetPT, _s.saveAreaInsetPR].join(' ')}>
title={intl.formatMessage(messages.close)} <Button
icon='close' title={intl.formatMessage(messages.close)}
backgroundColor='black' icon='close'
onClick={onClose} backgroundColor='black'
iconSize='14px' onClick={onClose}
className={[_s.py15, _s.posFixed, _s.top0, _s.right0, _s.mt10, _s.mr10].join(' ')} iconSize='14px'
/> className={_s.py15}
/>
</div>
{leftNav} {
{rightNav} media.size > 1 &&
<Button
tabIndex='0'
backgroundColor='black'
className={[_s.py15, _s.posFixed, _s.top50PC, _s.left0, _s.mt10, _s.ml10].join(' ')}
onClick={this.handlePrevClick}
aria-label={intl.formatMessage(messages.previous)}
icon='arrow-left'
iconSize='18px'
/>
}
{
media.size > 1 &&
<Button
tabIndex='0'
backgroundColor='black'
className={[_s.py15, _s.posFixed, _s.top50PC, _s.right0, _s.mt10, _s.mr10].join(' ')}
onClick={this.handleNextClick}
aria-label={intl.formatMessage(messages.next)}
icon='arrow-right'
iconSize='18px'
/>
}
{ /** : todo : { /** : todo :
status && status &&
@ -277,12 +275,14 @@ class MediaModal extends ImmutablePureComponent {
{ {
media.size > 1 && media.size > 1 &&
<div className={[_s.default, _s.posAbs, _s.bottom0, _s.mb15, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15].join(' ')}> <div className={[_s.default, _s.posAbs, _s.bottom0, _s.mb15].join(' ')}>
<Pagination <div className={[_s.default, _s.saveAreaInsetMB, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15].join(' ')}>
count={media.size} <Pagination
activeIndex={index} count={media.size}
onClick={this.handleChangeIndex} activeIndex={index}
/> onClick={this.handleChangeIndex}
/>
</div>
</div> </div>
} }
</div> </div>