From: Alexander Ebert Date: Mon, 14 Mar 2016 17:07:58 +0000 (+0100) Subject: Improved visuals for avatar edit form X-Git-Tag: 3.0.0_Beta_1~2030^2~8 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=a073b70d2c88d9a10a11c07b806ea877802ecc79;p=GitHub%2FWoltLab%2FWCF.git Improved visuals for avatar edit form --- 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 @@
-
+

{lang}wcf.user.avatar{/lang}

-
+
@@ -53,7 +53,7 @@
{if $__wcf->getSession()->getPermission('user.profile.avatar.canUploadAvatar')} -
+
{if $avatarType == 'custom'} {if $__wcf->getUserProfileHandler()->getAvatar()->canCrop()} @@ -70,7 +70,7 @@ {lang}wcf.user.avatar.type.custom.description{/lang} {* placeholder for upload button: *} -
+
{if $errorField == 'custom'} @@ -82,7 +82,7 @@ {/if} {if MODULE_GRAVATAR} - +
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
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; + } + } +}