From 2901b0965eedb8e9cbdf016d967e73a8d39b08f1 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Sun, 29 May 2016 21:50:55 +0200 Subject: [PATCH] Overhauled user profile design --- com.woltlab.wcf/templates/userHeader.tpl | 303 ++++++++------- .../lib/data/user/avatar/UserAvatar.class.php | 17 +- .../install/files/style/ui/userProfile.scss | 344 +++++++++++++----- 3 files changed, 433 insertions(+), 231 deletions(-) diff --git a/com.woltlab.wcf/templates/userHeader.tpl b/com.woltlab.wcf/templates/userHeader.tpl index f3ce51e4ad..3c3ea77176 100644 --- a/com.woltlab.wcf/templates/userHeader.tpl +++ b/com.woltlab.wcf/templates/userHeader.tpl @@ -1,155 +1,182 @@ +{capture assign='__userProfileDescription'} + + + {if $user->canViewOnlineStatus() && $user->getLastActivityTime()} + + {/if} +{/capture} +
-
- -
session->getPermission('admin.user.canBanUser')} - data-banned="{@$user->banned}" - {/if} - {if $__wcf->session->getPermission('admin.user.canDisableAvatar')} - data-disable-avatar="{@$user->disableAvatar}" - {/if} - {if $__wcf->session->getPermission('admin.user.canDisableSignature')} - data-disable-signature="{@$user->disableSignature}" - {/if} - {/if}> +
+
-
-
- {if $user->userID == $__wcf->user->userID} - {@$user->getAvatar()->getImageTag(128)} - {else} - {@$user->getAvatar()->getImageTag(128)} - {/if} - -
-

- {$user->username}{if $user->banned} {/if} -

- {if MODULE_USER_RANK} - {if $user->getUserTitle()} - {$user->getUserTitle()} - {/if} - {if $user->getRank() && $user->getRank()->rankImage} - {@$user->getRank()->getImage()} - {/if} +
session->getPermission('admin.user.canBanUser')} + data-banned="{@$user->banned}" + {/if} + {if $__wcf->session->getPermission('admin.user.canDisableAvatar')} + data-disable-avatar="{@$user->disableAvatar}" + {/if} + {if $__wcf->session->getPermission('admin.user.canDisableSignature')} + data-disable-signature="{@$user->disableSignature}" + {/if} + {/if}> + +
+
+ {if $user->userID == $__wcf->user->userID} + {@$user->getAvatar()->getImageTag(160)} + {else} + {@$user->getAvatar()->getImageTag(160)} {/if} -
- -
- {event name='buttonMenu'} - -
+ + +
-
+ +
-
    - {if $user->isVisibleOption('gender') && $user->gender}
  • {lang}wcf.user.gender.{if $user->gender == 1}male{else}female{/if}{/lang}
    • {/if} - {if $user->isVisibleOption('birthday') && $user->getAge()}
  • {@$user->getAge()}
    • {/if} - {if $user->isVisibleOption('location') && $user->location}
  • {lang}wcf.user.membersList.location{/lang}
    • {/if} - {if $user->getOldUsername()}
  • {lang}wcf.user.profile.oldUsername{/lang}
    • {/if} -
  • {lang}wcf.user.membersList.registrationDate{/lang}
    • - {event name='userDataRow1'} -
- - {if $user->canViewOnlineStatus() && $user->getLastActivityTime()} -
    -
  • {lang}wcf.user.usersOnline.lastActivity{/lang}: {@$user->getLastActivityTime()|time}
    • - {if $user->getCurrentLocation()}
  • {@$user->getCurrentLocation()}
    • {/if} -
- {/if} - - {hascontent} -
+ {@$__userProfileDescription} +
+
+ + {hascontent} +
+
+ +
-
+ {/hascontent}
-
diff --git a/wcfsetup/install/files/lib/data/user/avatar/UserAvatar.class.php b/wcfsetup/install/files/lib/data/user/avatar/UserAvatar.class.php index 714ea6da8f..a463f9a113 100644 --- a/wcfsetup/install/files/lib/data/user/avatar/UserAvatar.class.php +++ b/wcfsetup/install/files/lib/data/user/avatar/UserAvatar.class.php @@ -29,7 +29,7 @@ class UserAvatar extends DatabaseObject implements IUserAvatar { * needed avatar thumbnail sizes * @var integer[] */ - public static $avatarThumbnailSizes = [32, 96, 128]; + public static $avatarThumbnailSizes = [32, 96, 128, 256]; /** * @inheritDoc @@ -85,6 +85,15 @@ class UserAvatar extends DatabaseObject implements IUserAvatar { $size = null; } break; + + case 160: + if ($this->width > 256 || $this->height > 256) { + $size = 256; + } + else { + $size = null; + } + break; } return substr($this->fileHash, 0, 2) . '/' . ($this->avatarID) . '-' . $this->fileHash . ($size !== null ? ('-' . $size) : '') . '.' . $this->avatarExtension; @@ -144,6 +153,12 @@ class UserAvatar extends DatabaseObject implements IUserAvatar { $retinaSize = 128; } break; + + case 128: + if ($this->width >= 128 && $this->height >= 128) { + $retinaSize = 256; + } + break; } return ''; diff --git a/wcfsetup/install/files/style/ui/userProfile.scss b/wcfsetup/install/files/style/ui/userProfile.scss index 2733b1f531..2f38489b91 100644 --- a/wcfsetup/install/files/style/ui/userProfile.scss +++ b/wcfsetup/install/files/style/ui/userProfile.scss @@ -11,63 +11,142 @@ box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, .6), inset 0 -10px 10px -10px rgba(0, 0, 0, .6); @include screen-md-up { - height: 200px; + height: 300px; } @include screen-sm-down { - height: 100px; + height: 200px; } -} - -.userProfileUser { - background-color: $wcfHeaderMenuBackground; - > .layoutBoundary { - align-items: center; - display: flex; - padding: 0 10px 0 160px; - position: relative; + &::after { + bottom: 0; + content: ''; + left: 0; + position: absolute; + right: 0; + top: 0; + + @include screen-md-up { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .7) 100%); + } @include screen-sm-down { - padding-left: 90px; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .7) 100%); } } +} + +.userProfileHeaderContainer { + position: relative; +} + +.userProfileUser { + position: absolute; + width: 100%; + + @include screen-md-up { + bottom: 0; + } + + @include screen-sm-down { + bottom: 10px; + } .contentHeader { - align-items: center; - color: $wcfHeaderText; - width: 100%; + @include screen-md-up { + align-items: flex-end; + } + + @include screen-sm-down { + align-items: center; + display: flex; + } } .contentHeaderIcon { - background-color: $wcfHeaderMenuBackground; + align-items: center; + background-color: #fff; border-radius: 50%; - left: 0; - padding: 10px; - position: absolute; - top: 50%; - transform: translateY(-50%); + box-sizing: content-box; + box-shadow: 0 3px 6px rgba(0 ,0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + display: flex; + justify-content: center; + + @include screen-md-up { + border: 4px solid transparent; + flex: 0 0 160px; + height: 160px; + margin-right: 20px; + transform: translateY(50%); + width: 160px; + } @include screen-sm-down { - .userAvatarImage { - height: 64px !important; + border: 2px solid transparent; + flex: 0 0 64px; + height: 64px; + margin-right: 10px; + width: 64px; + } + + img { + @include screen-sm-down { width: 64px !important; + height: 64px !important; } } } .contentHeaderTitle { align-items: center; - display: flex; + color: #fff; + text-shadow: 0 1px 4px rgba(0, 0, 0, .5); - > .contentTitle { - flex: 0 0 auto; + @include screen-md-up { + display: flex; + flex-wrap: wrap; + padding-bottom: 10px; + + > .contentTitle { + flex: 0 0 auto; + margin-right: 10px; + } + + > .userTitleBadge { + flex: 0 0 auto; + } + } + @include screen-sm-down { + flex: 1 1 auto; } - > span { - border: 1px solid rgba(255, 255, 255, 1); - flex: 0 0 auto; - margin-left: 10px; + a { + color: #fff; + } + + > .userTitleBadge { + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + + @include screen-sm-down { + margin-top: 5px; + } + } + } + + .contentDescription { + @include screen-md-up { + flex: 0 0 100%; + margin-top: 5px; + + .inlineList:not(:first-child) { + margin-top: 2px; + + @include wcfFontSmall; + } + } + + @include screen-sm-down { + display: none; } } @@ -75,96 +154,178 @@ @include screen-md-up { display: flex; flex: 0 0 auto; + margin-bottom: 20px; + } + @include screen-sm-down { + display: block; + position: absolute; + right: 10px; + bottom: 0; + } + + > li { margin-left: 10px; + position: relative; - > li { + @include screen-md-up { flex: 0 0 auto; - position: relative; + } + @include screen-sm-down { + margin-top: 10px; + } + + > a { + background-color: $wcfHeaderMenuBackground; + border-radius: 50%; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); + color: $wcfHeaderMenuLink; + display: block; + padding: 10px; - > a { - background-color: $wcfHeaderMenuBackground; - color: $wcfHeaderMenuLink; - display: block; + @include screen-md-up { padding: 10px; + } + @include screen-sm-down { + padding: 5px; + } + + .icon { + color: inherit; - .icon { - color: inherit; + @include screen-sm-down { + font-size: 18px; + height: 24px; + line-height: 24px; + width: 24px; } } + } + + > .userProfileButtonMenu { + background-color: $wcfHeaderMenuDropdownBackground; + box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); + border-radius: 0 0 3px 3px; + padding: 5px 0; + position: absolute; + visibility: hidden; - > .userProfileButtonMenu { - background-color: $wcfHeaderMenuDropdownBackground; - box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); - border-radius: 0 0 3px 3px; - padding: 5px 0; - position: absolute; + @include screen-md-up { right: 0; - visibility: hidden; - - > li { - &.divider:not(:first-child) { - border-top: 1px solid $wcfHeaderMenuDropdownBackgroundActive; - margin-top: 5px; - padding-top: 5px; - } - - > a { - color: $wcfHeaderMenuDropdownLink; - } - - > a, - > span { - display: block; - padding: 7px 20px; - white-space: nowrap; - text-align: right; - } - - &.active > a, - > a:hover { - background-color: $wcfHeaderMenuDropdownBackgroundActive; - color: $wcfHeaderMenuDropdownLinkActive; - text-decoration: none; - } - } + } + @include screen-sm-down { + right: 40px; + top: 0; } - &:hover { + > li { + &.divider:not(:first-child) { + border-top: 1px solid $wcfHeaderMenuDropdownBackgroundActive; + margin-top: 5px; + padding-top: 5px; + } + > a { - background-color: $wcfHeaderMenuBackgroundActive; - color: $wcfHeaderMenuLinkActive; + color: $wcfHeaderMenuDropdownLink; + } + + > a, + > span { + display: block; + padding: 7px 20px; + white-space: nowrap; + text-align: right; } - > .userProfileButtonMenu { - visibility: visible; + &.active > a, + > a:hover { + background-color: $wcfHeaderMenuDropdownBackgroundActive; + color: $wcfHeaderMenuDropdownLinkActive; + text-decoration: none; } } } + + &:hover { + > a { + background-color: $wcfHeaderMenuBackgroundActive; + color: $wcfHeaderMenuLinkActive; + } + + > .userProfileButtonMenu { + visibility: visible; + } + } } + } +} + +.userProfileDescriptionMobile { + @include screen-md-up { + display: none; + } + + @include screen-sm-down { + border-bottom: 1px solid $wcfContentBorderInner; - @include screen-sm-down { - display: none; + > .layoutBoundary { + padding: 20px 10px; } } } .userProfileDetails { - background-color: $wcfSidebarBackground; - color: $wcfSidebarText; - - a { - color: $wcfSidebarLink; - - &:hover { - color: $wcfSidebarLinkActive; + > .layoutBoundary { + @include screen-md-up { + padding: 20px 20px 20px 208px; + } + @include screen-sm-down { + padding: 20px 0; } } - > .layoutBoundary { - padding: 10px 10px 10px 160px; + .userStats { + display: flex; + flex-wrap: wrap; + margin-bottom: -20px; - @include screen-sm-down { - padding: 20px 10px 10px; + li { + flex: 0 0 auto; + margin-bottom: 20px; + padding: 0 10px; + text-align: center; + white-space: nowrap; + + @include screen-lg { + width: 12%; + } + @include screen-sm-md { + width: 25%; + } + @include screen-xs { + width: 33%; + } + + a { + display: block; + } + } + + .userStatsValue { + overflow: hidden; + + @include wcfFontTitle; + } + + .userStatsTitle { + color: $wcfContentDimmedText; + display: block; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + + @include screen-sm-down { + @include wcfFontSmall; + } } } } @@ -179,7 +340,6 @@ } .userAvatarImage { - background-color: rgba(255, 255, 255, 1); border-radius: 50%; } -- 2.20.1