Merge pull request #1547 from asaadmahmoodspin/ui-improvements

Ui improvements

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)) {

web/react/components/view_image.jsx

@@ -424,6 +424,9 @@ export default class ViewImageModal extends React.Component {
                 >
                     <div
                         className={'image-wrapper ' + bgClass}
+                        onClick={this.props.onModalDismissed}
+                    >
+                        <div
                             onMouseEnter={this.onMouseEnterImage}
                             onMouseLeave={this.onMouseLeaveImage}
                             onClick={(e) => e.stopPropagation()}
@@ -442,6 +445,7 @@ export default class ViewImageModal extends React.Component {
                                 getPublicLink={this.getPublicLink}
                             />
                         </div>
+                    </div>
                     {leftArrow}
                     {rightArrow}
                 </Modal.Body>

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;
+			display: table-cell;
-			margin: 0 auto;
+			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;
+				display: inline-block;
-				vertical-align: middle;
 				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;

web/sass-files/sass/partials/_responsive.scss

@@ -621,8 +621,10 @@
     .modal {
         .modal-image {
             .image-wrapper {
+                > div {
                     font-size: 12px;
                     min-width: 250px;
+                }
                 .modal-close {
                     @include opacity(1);
                 }