From a073b70d2c88d9a10a11c07b806ea877802ecc79 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 14 Mar 2016 18:07:58 +0100
Subject: [PATCH] Improved visuals for avatar edit form

---
 com.woltlab.wcf/templates/avatarEdit.tpl    | 10 ++--
 wcfsetup/install/files/style/ui/avatar.scss | 55 +++++++++++++++++++++
 2 files changed, 60 insertions(+), 5 deletions(-)
 create mode 100644 wcfsetup/install/files/style/ui/avatar.scss

diff --git a/com.woltlab.wcf/templates/avatarEdit.tpl b/com.woltlab.wcf/templates/avatarEdit.tpl
index b5a31e7ac0..0d08e8678d 100644
--- a/com.woltlab.wcf/templates/avatarEdit.tpl
+++ b/com.woltlab.wcf/templates/avatarEdit.tpl
@@ -41,10 +41,10 @@
 </div>
 
 <form method="post" action="{link controller='AvatarEdit'}{/link}" id="avatarForm">
-	<section class="section">
+	<section class="section avatarEdit">
 		<h2 class="sectionTitle">{lang}wcf.user.avatar{/lang}</h2>
 			
-		<dl>
+		<dl class="avatarType">
 			<dt></dt>
 			<dd>
 				<label><input type="radio" name="avatarType" value="none" {if $avatarType == 'none'}checked="checked" {/if}/> {lang}wcf.user.avatar.type.none{/lang}</label>
@@ -53,7 +53,7 @@
 		</dl>
 		
 		{if $__wcf->getSession()->getPermission('user.profile.avatar.canUploadAvatar')}
-			<dl class="jsOnly{if $errorField == 'custom'} formError{/if}" id="avatarUpload">
+			<dl class="avatarType jsOnly{if $errorField == 'custom'} formError{/if}" id="avatarUpload">
 				<dt>
 					{if $avatarType == 'custom'}
 						{if $__wcf->getUserProfileHandler()->getAvatar()->canCrop()}
@@ -70,7 +70,7 @@
 					<small>{lang}wcf.user.avatar.type.custom.description{/lang}</small>
 					
 					{* placeholder for upload button: *}
-					<div></div>
+					<div class="avatarUploadButtonContainer"></div>
 					
 					{if $errorField == 'custom'}
 						<small class="innerError">
@@ -82,7 +82,7 @@
 		{/if}
 		
 		{if MODULE_GRAVATAR}
-			<dl{if $errorField == 'gravatar'} class="formError"{/if}>
+			<dl class="avatarType{if $errorField == 'gravatar'} formError{/if}">
 				<dt><img src="https://secure.gravatar.com/avatar/{@$__wcf->user->email|strtolower|md5}?s=96{if GRAVATAR_DEFAULT_TYPE != '404'}&amp;d={@GRAVATAR_DEFAULT_TYPE}{/if}" alt="" class="userAvatarImage icon96" /></dt>
 				<dd>
 					<label><input type="radio" name="avatarType" value="gravatar" {if $avatarType == 'gravatar'}checked="checked" {/if}/> {lang}wcf.user.avatar.type.gravatar{/lang}</label>
diff --git a/wcfsetup/install/files/style/ui/avatar.scss b/wcfsetup/install/files/style/ui/avatar.scss
new file mode 100644
index 0000000000..99da71eef4
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/avatar.scss
@@ -0,0 +1,55 @@
+.avatarEdit .avatarType {
+	display: flex;
+	
+	> dt {
+		flex: 0 0 auto;
+		order: 2;
+	}
+	
+	> dd {
+		order: 1;
+	}
+	
+	.avatarUploadButtonContainer {
+		margin-top: 10px;
+	}
+	
+	@include large-screen-only {
+		/* use fixed height to ensure a constant gap between <dl> with and without an image */
+		height: 100px;
+		
+		> dt:not(:empty) {
+			margin: 0 0 0 30px;
+		}
+		
+		> dd {
+			flex: 1 1 auto;
+		}
+		
+		& + .avatarType {
+			margin-top: 30px;
+		}
+		
+		.avatarUploadButtonContainer {
+			margin-left: 24px;
+		}
+	}
+	
+	@include small-screen-only {
+		flex-wrap: wrap;
+		
+		> dt:not(:empty) {
+			flex: 0 0 100%;
+			margin-top: 20px;
+			text-align: center;
+		}
+		
+		> dd {
+			flex: 0 0 100%;
+		}
+		
+		.avatarUploadButtonContainer {
+			text-align: center;
+		}
+	}
+}
-- 
2.20.1