diff options
| -rw-r--r-- | web/react/components/sidebar.jsx | 5 | ||||
| -rw-r--r-- | web/react/components/view_image.jsx | 31 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_modal.scss | 40 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 6 |
4 files changed, 55 insertions, 27 deletions
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index 30422ff7d..73733b6c1 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -173,6 +173,10 @@ export default class Sidebar extends React.Component { this.updateScrollbar(); window.addEventListener('resize', this.handleResize); + + if ($(window).width() > 768) { + $('.nav-pills__container').perfectScrollbar(); + } } shouldComponentUpdate(nextProps, nextState) { if (!Utils.areObjectsEqual(nextState, this.state)) { @@ -199,6 +203,7 @@ export default class Sidebar extends React.Component { windowWidth: Utils.windowWidth(), windowHeight: Utils.windowHeight() }); + console.log('sad'); } updateScrollbar() { } diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index 91f4b3bdc..50befb41f 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -424,23 +424,26 @@ export default class ViewImageModal extends React.Component { > <div className={'image-wrapper ' + bgClass} - onMouseEnter={this.onMouseEnterImage} - onMouseLeave={this.onMouseLeaveImage} onClick={(e) => e.stopPropagation()} > <div - className={closeButtonClass} - onClick={this.props.onModalDismissed} - /> - {content} - <ViewImagePopoverBar - show={this.state.showFooter} - fileId={this.state.imgId} - totalFiles={this.props.filenames.length} - filename={name} - fileURL={fileUrl} - getPublicLink={this.getPublicLink} - /> + onMouseEnter={this.onMouseEnterImage} + onMouseLeave={this.onMouseLeaveImage} + > + <div + className={closeButtonClass} + onClick={this.props.onModalDismissed} + /> + {content} + <ViewImagePopoverBar + show={this.state.showFooter} + fileId={this.state.imgId} + totalFiles={this.props.filenames.length} + filename={name} + fileURL={fileUrl} + getPublicLink={this.getPublicLink} + /> + </div> </div> {leftArrow} {rightArrow} diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 6270c8608..4a56bc6c7 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -3,6 +3,7 @@ } .modal-body { padding: 20px 15px; + overflow: auto; } .modal { width: 100%; @@ -47,9 +48,6 @@ margin-left: auto; margin-right: auto; } - .modal-body { - overflow: auto; - } .modal-push-down { margin-top: 5%; } @@ -195,21 +193,35 @@ width:100%; height: 100%; margin: 0 auto; + max-width: 100%; + + .modal-body { + @include clearfix; + height: 100%; + display: table; + table-layout: fixed; + width: 100%; + max-height: 100%; + } + .image-wrapper { position: relative; max-width: 90%; - min-height: 100px; - min-width: 320px; @include border-radius(3px); - display: table; - margin: 0 auto; + display: table-cell; + vertical-align: middle; + text-align: center; + width: 100%; + &:hover { @include border-radius(3px 3px 0 0); } + &.default { width: 100%; height: 80%; } + .modal-close { background: url("../images/close.png") no-repeat; @include background-size(100% 100%); @@ -225,24 +237,31 @@ transition: opacity 0.6s; cursor: pointer; z-index: 9999; + &.modal-close--show { @include opacity(1); } + } - > a { + + > div { + min-height: 100px; + min-width: 320px; background: #FFF; - display: table-cell; - vertical-align: middle; + display: inline-block; position: relative; &:hover .file-playback-controls.stop { @include opacity(1); } + } + img { max-width: 100%; max-height: 100%; } + .spinner.file__loading { z-index: 2; position: absolute; @@ -259,7 +278,6 @@ height: 100%; padding: 0; border: none; - display: table; } .image-body { vertical-align: middle; diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 00fa7d817..5f5cca89b 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -621,8 +621,10 @@ .modal { .modal-image { .image-wrapper { - font-size: 12px; - min-width: 250px; + > div { + font-size: 12px; + min-width: 250px; + } .modal-close { @include opacity(1); } |