fixed the chat modal

public/css/style.less

@@ -141,15 +141,10 @@ footer.footer {
 }
 
 #chat-content {
-	width:95%;
 	height:200px;
 	resize:none;
 }
 
-#chat-message-input {
-	width:95%;
-}
-
 #content{
 	padding-bottom:20px;
 }

public/src/forum/accountedit.js

@@ -4,52 +4,53 @@ var gravatarPicture = templates.get('gravatarpicture');
 var uploadedPicture = templates.get('uploadedpicture');
 
 $(document).ready(function() {
- 
+
 
 
 	$('#uploadForm').submit(function() {
 		status('uploading the file ...');
-		
+
 		$('#upload-progress-bar').css('width', '0%');
 		$('#upload-progress-box').show();
-		
+		$('#upload-progress-box').removeClass('hide');
+
 		if(!$('#userPhotoInput').val()) {
 			error('select an image to upload!');
-			return false;			
+			return false;
 		}
-		
+
 		$(this).find('#imageUploadCsrf').val($('#csrf_token').val());
-		
+
 
 		$(this).ajaxSubmit({
- 
+
 			error: function(xhr) {
 				error('Error: ' + xhr.status);
 			},
-			
+
 			uploadProgress : function(event, position, total, percent) {
 				$('#upload-progress-bar').css('width', percent+'%');
 			},
-			
+
- 
+
 			success: function(response) {
 				if(response.error) {
 					error(response.error);
 					return;
 				}
- 
+
 				var imageUrlOnServer = response.path;
-				
+
 				$('#user-current-picture').attr('src', imageUrlOnServer);
 				$('#user-uploaded-picture').attr('src', imageUrlOnServer);
-				
+
-				uploadedPicture = imageUrlOnServer;        
+				uploadedPicture = imageUrlOnServer;
-								
+
 				setTimeout(function() {
 					hideAlerts();
 					$('#upload-picture-modal').modal('hide');
 				}, 750);
-				
+
 				socket.emit('api:updateHeader', { fields: ['username', 'picture', 'userslug'] });
 				success('File uploaded successfully!');
 			}
@@ -57,45 +58,45 @@ $(document).ready(function() {
 
 		return false;
 	});
- 
+
 	function hideAlerts() {
 		$('#alert-status').hide();
 		$('#alert-success').hide();
 		$('#alert-error').hide();
 		$('#upload-progress-box').hide();
 	}
- 
+
 	function status(message) {
 		hideAlerts();
 		$('#alert-status').text(message).show();
 	}
-	
+
 	function success(message) {
 		hideAlerts();
 		$('#alert-success').text(message).show();
 	}
-	
+
 	function error(message) {
 		hideAlerts();
 		$('#alert-error').text(message).show();
 	}
-	
+
-	function changeUserPicture(type) { 
+	function changeUserPicture(type) {
 		var userData = {
 			type: type
 		};
-			
+
 		socket.emit('api:user.changePicture', userData, function(success) {
 			if(!success) {
 				app.alertError('There was an error changing picture!');
 			}
 		});
 	}
-		
+
 	var selectedImageType = '';
-	
+
 	$('#submitBtn').on('click',function(){
-		
+
 	   var userData = {
 			uid:$('#inputUID').val(),
 			email:$('#inputEmail').val(),
@@ -116,14 +117,14 @@ $(document).ready(function() {
 				if(data.gravatarpicture) {
 					$('#user-gravatar-picture').attr('src', data.gravatarpicture);
 					gravatarPicture = data.gravatarpicture;
-				}				
+				}
 			} else {
 				app.alertError('There was an error updating your profile!');
 			}
 		});
 		return false;
 	});
-	
+
 	function updateImages() {
 		var currentPicture = $('#user-current-picture').attr('src');
 
@@ -140,73 +141,75 @@ $(document).ready(function() {
 		}
 		else
 			$('#uploaded-box').hide();
-			
+
-			
+
 		 if(currentPicture == gravatarPicture)
 			$('#gravatar-box .icon-ok').show();
 		else
 			$('#gravatar-box .icon-ok').hide();
-			
+
 		if(currentPicture == uploadedPicture)
 			$('#uploaded-box .icon-ok').show();
 		else
 			$('#uploaded-box .icon-ok').hide();
 	}
-	
+
-	
+
 	$('#changePictureBtn').on('click', function() {
 		selectedImageType = '';
 		updateImages();
-		
+
 		$('#change-picture-modal').modal('show');
-		
+		$('#change-picture-modal').removeClass('hide');
+
 		return false;
 	});
-	
+
 	$('#gravatar-box').on('click', function(){
 		$('#gravatar-box .icon-ok').show();
 		$('#uploaded-box .icon-ok').hide();
 		selectedImageType = 'gravatar';
 	});
-	
+
 	$('#uploaded-box').on('click', function(){
 		$('#gravatar-box .icon-ok').hide();
 		$('#uploaded-box .icon-ok').show();
 		selectedImageType = 'uploaded';
 	});
-	
+
 	$('#savePictureChangesBtn').on('click', function() {
 		$('#change-picture-modal').modal('hide');
 
 		if(selectedImageType) {
 			changeUserPicture(selectedImageType);
-			
+
 			if(selectedImageType == 'gravatar')
-				$('#user-current-picture').attr('src', gravatarPicture);		
+				$('#user-current-picture').attr('src', gravatarPicture);
 			else if(selectedImageType == 'uploaded')
-				$('#user-current-picture').attr('src', uploadedPicture);						
+				$('#user-current-picture').attr('src', uploadedPicture);
 		}
-		
+
 	});
-	
+
 	$('#upload-picture-modal').on('hide', function() {
 		$('#userPhotoInput').val('');
 	});
-	
+
 	$('#uploadPictureBtn').on('click', function(){
-		
+
 		$('#change-picture-modal').modal('hide');
 		$('#upload-picture-modal').modal('show');
+		$('#upload-picture-modal').removeClass('hide');
 
 		hideAlerts();
-		
+
 		return false;
 	});
-	
+
 	$('#pictureUploadSubmitBtn').on('click', function() {
 		$('#uploadForm').submit();
 	});
-	
+
 	(function handlePasswordChange() {
 		var currentPassword = $('#inputCurrentPassword');
 		var password_notify = $('#password-notify');
@@ -229,7 +232,7 @@ $(document).ready(function() {
 				password_notify.html('OK!');
 				password_notify.attr('class', 'label label-success');
 			}
-			
+
 			onPasswordConfirmChanged();
 		}
 
@@ -249,10 +252,10 @@ $(document).ready(function() {
 		password_confirm.on('keyup', onPasswordConfirmChanged);
 
 		$('#changePasswordBtn').on('click', function() {
-			
+
 			if(passwordvalid && passwordsmatch && currentPassword.val()) {
 				socket.emit('api:user.changePassword', {'currentPassword': currentPassword.val(),'newPassword': password.val()	}, function(data) {
-					
+
 					currentPassword.val('');
 					password.val('');
 					password_confirm.val('');
@@ -260,18 +263,18 @@ $(document).ready(function() {
 					password_confirm_notify.html('');
 					passwordsmatch = false;
 					passwordvalid = false;
-					
+
 					if(data.err) {
 						app.alertError(data.err);
 						return;
 					}
-					
+
 					app.alertSuccess('Your password is updated!');
-					
+
 				});
 			}
 			return false;
 		});
-	
+
 	}());
 });

public/src/forum/topic.js

@@ -281,17 +281,16 @@
 	});
 
 	$('.topic-buttons').delegate('.chat', 'click', function(e) {
-		var username = $(this).parents('li').attr('data-username');
+		var username = $(this).parents('li.row').attr('data-username');
-		var touid = $(this).parents('li').attr('data-uid');
+		var touid = $(this).parents('li.row').attr('data-uid');
 
 		if(username === app.username || !app.username)
 			return;
 
-
 		require(['chat'], function(chat) {
 			var chatModal = chat.createModalIfDoesntExist(username, touid);
-			chatModal.show();
+			chatModal.modal();
-			chat.bringModalToTop(chatModal);
+			chat.bringModalToTop(chatModal); // I don't think this is necessary
 		});
 	});
 

public/templates/footer.tpl

@@ -14,17 +14,26 @@
 		</div>
 	</div>
 
-	<div id="chat-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+
-		<div class="modal-header">
+	<div id="chat-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+		<div class="modal-dialog">
-			<h3 id="myModalLabel">Chat with <span id="chat-with-name"></span></h3>
+			<div class="modal-content">
-		</div>
+				<div class="modal-header">
-		<div class="modal-body">
+					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-			<textarea id="chat-content" cols="40" rows="10" readonly></textarea><br/>
+					<h3 id="myModalLabel">Chat with <span id="chat-with-name"></span></h3>
-			<input id="chat-message-input" type="text" name="chat-message" placeholder="type chat message here press enter to send"/><br/>
+				</div>
-			<button type="button" id="chat-message-send-btn" href="#" class="btn btn-primary">Send</button>
+				<div class="modal-body">
-		</div>
+					<textarea class="form-control" id="chat-content" cols="40" rows="10" readonly></textarea><br/>
-	</div>
+					<input id="chat-message-input" type="text" class="form-control" name="chat-message" placeholder="type chat message, here press enter to send"/>
+				</div>
+				<div class="modal-footer">
+					<button type="button" id="chat-message-send-btn" href="#" class="btn btn-primary btn-lg btn-block
+					">Send</button>
+				</div>
+			</div><!-- /.modal-content -->
+		</div><!-- /.modal-dialog -->
+	</div><!-- /.modal -->
+
 
 	<div id="alert_window"></div>