From 6eeabc09bfd7849e0984d47f1915435c380615dc Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Mon, 24 Oct 2016 10:13:28 -0400
Subject: [PATCH] nodebb/nodebb#5151

---
 less/account.less                             |   6 +
 .../partials/modals/change_picture_modal.tpl  | 119 +++++++++---------
 2 files changed, 65 insertions(+), 60 deletions(-)

diff --git a/less/account.less b/less/account.less
index abd2568..ff94fa2 100644
--- a/less/account.less
+++ b/less/account.less
@@ -332,6 +332,12 @@
 		.user-icon-style(46px, 2.4rem, 50%);
 	}
 
+	@media (max-width: @screen-sm) {
+		img, .user-icon {
+			display: none;
+		}
+	}
+
 	h4 {
 		line-height: 46px;
 		margin: 0;
diff --git a/templates/partials/modals/change_picture_modal.tpl b/templates/partials/modals/change_picture_modal.tpl
index 443c87d..9ec85c9 100644
--- a/templates/partials/modals/change_picture_modal.tpl
+++ b/templates/partials/modals/change_picture_modal.tpl
@@ -1,63 +1,62 @@
-<div class="list-group media">
-	<button type="button" class="list-group-item" data-type="default">
-		<div class="media-left">
-			<div class="user-icon media-object"></div>
+<div class="row">
+	<div class="col-xs-6 col-sm-8 col-md-6">
+		<div class="list-group media">
+			<button type="button" class="list-group-item" data-type="default">
+				<div class="media-left">
+					<div class="user-icon media-object"></div>
+				</div>
+				<div class="media-body">
+					<h4 class="media-heading">[[user:default_picture]]</h4>
+				</div>
+			</button>
+			<!-- BEGIN pictures -->
+			<button type="button" class="list-group-item" data-type="{pictures.type}">
+				<div class="media-left">
+					<img class="media-object" src="{pictures.url}" title="{pictures.text}" />
+				</div>
+				<div class="media-body">
+					<h4 class="media-heading">{pictures.text}</h4>
+				</div>
+			</button>
+			<!-- END pictures -->
 		</div>
-		<div class="media-body">
-			<h4 class="media-heading">[[user:default_picture]]</h4>
-		</div>
-	</button>
-	<!-- BEGIN pictures -->
-	<button type="button" class="list-group-item" data-type="{pictures.type}">
-		<div class="media-left">
-			<img class="media-object" src="{pictures.url}" title="{pictures.text}" />
-		</div>
-		<div class="media-body">
-			<h4 class="media-heading">{pictures.text}</h4>
-		</div>
-	</button>
-	<!-- END pictures -->
-</div>
-
-<div class="btn-group btn-group-justified" role="group">
-	<!-- IF allowProfileImageUploads -->
-	<div class="btn-group" role="group">
-		<button type="button" class="btn btn-default" data-action="upload">
-			<span class="hidden-xs hidden-sm">
-				[[user:upload_new_picture]]
-			</span>
-			<span class="visible-xs-inline visible-sm-inline">
-				<i class="fa fa-plus"></i>
-				<i class="fa fa-upload"></i>
-			</span>
-		</button>
 	</div>
-	<!-- ENDIF allowProfileImageUploads -->
-	<!-- IF config.hasImageUploadPlugin -->
-	<div class="btn-group" role="group">
-		<button type="button" class="btn btn-default" data-action="upload-url">
-			<span class="hidden-xs hidden-sm">
-				[[user:upload_new_picture_from_url]]
-			</span>
-			<span class="visible-xs-inline visible-sm-inline">
-				<i class="fa fa-plus"></i>
-				<i class="fa fa-link"></i>
-			</span>
-		</button>
-	</div>
-	<!-- ENDIF config.hasImageUploadPlugin -->
-	<!-- IF uploaded -->
-	<div class="btn-group" role="group">
-		<button type="button" class="btn btn-default" data-action="remove-uploaded">
-			<span class="hidden-xs hidden-sm">
-				[[user:remove_uploaded_picture]]
-			</span>
-			<span class="visible-xs-inline visible-sm-inline">
-				<i class="fa fa-picture-o"></i>
-				<i class="fa fa-long-arrow-right"></i>
-				<i class="fa fa-trash-o"></i>
-			</span>
-		</button>
+	<div class="col-xs-6 col-sm-4 col-md-6">
+		<div class="btn-group-vertical btn-block" role="group">
+			<!-- IF allowProfileImageUploads -->
+			<button type="button" class="btn btn-default" data-action="upload">
+				<span class="hidden-xs hidden-sm">
+					[[user:upload_new_picture]]
+				</span>
+				<span class="visible-xs-inline visible-sm-inline">
+					<i class="fa fa-plus"></i>
+					<i class="fa fa-upload"></i>
+				</span>
+			</button>
+			<!-- ENDIF allowProfileImageUploads -->
+			<!-- IF config.hasImageUploadPlugin -->
+			<button type="button" class="btn btn-default" data-action="upload-url">
+				<span class="hidden-xs hidden-sm">
+					[[user:upload_new_picture_from_url]]
+				</span>
+				<span class="visible-xs-inline visible-sm-inline">
+					<i class="fa fa-plus"></i>
+					<i class="fa fa-link"></i>
+				</span>
+			</button>
+			<!-- ENDIF config.hasImageUploadPlugin -->
+			<!-- IF uploaded -->
+			<button type="button" class="btn btn-default" data-action="remove-uploaded">
+				<span class="hidden-xs hidden-sm">
+					[[user:remove_uploaded_picture]]
+				</span>
+				<span class="visible-xs-inline visible-sm-inline">
+					<i class="fa fa-picture-o"></i>
+					<i class="fa fa-long-arrow-right"></i>
+					<i class="fa fa-trash-o"></i>
+				</span>
+			</button>
+			<!-- ENDIF uploaded -->
+		</div>
 	</div>
-	<!-- ENDIF uploaded -->
-</div>
+</div>
\ No newline at end of file