Improved visuals for avatar edit form

diff --git a/com.woltlab.wcf/templates/avatarEdit.tpl b/com.woltlab.wcf/templates/avatarEdit.tpl
index b5a31e7ac070c1b43c05d03a26162af1f9a3a165..0d08e8678d86b1b07d2d5f3e0d5d6553ea053fd9 100644 (file)
--- 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 (file)
index 0000000..99da71e
--- /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;
+               }
+       }
+}