MM-1469 - Loading message in more channel modal

4 files changed, 12 insertions, 63 deletions

diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index dad0a644a..1af259853 100644
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -79,7 +79,7 @@ module.exports = React.createClass({
                             <button data-toggle="modal" data-target="#new_channel" data-channeltype={this.state.channel_type} type="button" className="btn btn-primary channel-create-btn" onClick={this.handleNewChannel}>Create New Channel</button>
                         </div>
                         <div className="modal-body">
-                            {moreChannels ? 
+                            {moreChannels ?
                                 (moreChannels.length ?
                                     <table className="more-channel-table table">
                                         <tbody>
@@ -100,14 +100,15 @@ module.exports = React.createClass({
                                             <p className="primary-message">No more channels to join</p>
                                             <p className="secondary-message">Click 'Create New Channel' to make a new one</p>
                                         </div>)
-                                :   <div ref="loadingscreen" className="channel-loading-message">
+                                :   <div ref="loadingscreen" className="loading-screen loading-screen--channel">
                                         <div className="loading__content">
                                         <h3>Loading</h3>
                                             <div id="round_1" className="round"></div>
                                             <div id="round_2" className="round"></div>
                                             <div id="round_3" className="round"></div>
                                         </div>
-                                    </div>}
+                                    </div>
+                                }
                             { server_error }
                         </div>
                         <div className="modal-footer">
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss
index 1268d8a07..79142176e 100644
--- a/web/sass-files/sass/partials/_files.scss
+++ b/web/sass-files/sass/partials/_files.scss
@@ -119,7 +119,7 @@
   width: 120px;
   height: 100px;
   float: left;
-  margin: 0 1em 1em 0;
+  margin: 5px 10px 5px 0;
   &.custom-file {
     width: 85px;
     height: 100px;
diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss
index a078d3563..b47594daf 100644
--- a/web/sass-files/sass/partials/_loading.scss
+++ b/web/sass-files/sass/partials/_loading.scss
@@ -5,10 +5,15 @@
 	position: absolute;
 	@include box-sizing(border-box);
 	text-align: center;
+	&.loading-screen--channel {
+		position: relative;
+		padding: 4em 0 3.5em;
+	}
 	.loading__content {
 		display: table-cell;
 		vertical-align: middle;
 		h3 {
+			font-size: 16px;
 			font-weight: 400;
 			margin: 0 0.2em 0;
 			display: inline-block;
@@ -23,64 +28,7 @@
 			width: 4px;
 			height: 4px;
 			display: inline-block;
-			margin: 0 1px;
-			opacity: 0.1;
-			@include border-radius(10px);
-			-moz-animation: move 0.75s infinite linear;
-			-webkit-animation: move 0.75s infinite linear;
-		}
-
-		#round_1 {
-			-moz-animation-delay: .2s;
-			-webkit-animation-delay: .2s;
-		}
-
-		#round_2 {
-			-moz-animation-delay: .4s;
-			-webkit-animation-delay: .4s;
-		}
-
-		#round_3 {
-			-moz-animation-delay: .6s;
-			-webkit-animation-delay: .6s;
-		}
-
-		@-moz-keyframes move {
-			0% {
-				opacity: 1;
-			}
-
-			100% {
-				opacity: 0.1;
-			};
-		}
-
-		@-webkit-keyframes move {
-			0% {
-				opacity: 1;
-			}
-
-			100% {
-				opacity: 0.1;
-			};
-		}
-	}
-}
-
-.channel-loading-screen {
-	position: absolute;
-	text-align: center;
-	padding: 2em 1em;
-}
-
-.channel-loading-message {
-	.loading__content {
-		.round {
-			background-color: #444;
-			width: 4px;
-			height: 4px;
-			display: inline-block;
-			margin: 0 1px;
+			margin: 0;
 			opacity: 0.1;
 			@include border-radius(10px);
 			-moz-animation: move 0.75s infinite linear;
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index f33cedd16..4891fe67f 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -306,7 +306,7 @@ body.ios {
 	}
 	.post-image__columns {
 		@include legacy-pie-clearfix;
-		margin-top: 1em;
+		padding-bottom: 5px;
 	}
 	.post-info--hidden {
 		display: none;