From 27db335a090a81dd256230970f0c88d5e0c0dfb1 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Wed, 16 Mar 2016 10:28:34 +0100 Subject: [PATCH] Redesigned user profile page --- com.woltlab.wcf/templates/user.tpl | 2 +- com.woltlab.wcf/templates/userHeader.tpl | 205 +++++++++--------- .../install/files/style/ui/userProfile.scss | 114 +++++----- 3 files changed, 154 insertions(+), 167 deletions(-) diff --git a/com.woltlab.wcf/templates/user.tpl b/com.woltlab.wcf/templates/user.tpl index 3b491a3272..80fd8ffcae 100644 --- a/com.woltlab.wcf/templates/user.tpl +++ b/com.woltlab.wcf/templates/user.tpl @@ -143,7 +143,7 @@ {include file='userNotice'} {if !$user->isProtected()} -
+
+
+ +
+
+
    + {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()}
    - {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'} +
  • {lang}wcf.user.usersOnline.lastActivity{/lang}: {@$user->getLastActivityTime()|time}
    • + {if $user->getCurrentLocation()}
  • {@$user->getCurrentLocation()}
    • {/if}
- - {if $user->canViewOnlineStatus() && $user->getLastActivityTime()} -
    -
  • {lang}wcf.user.usersOnline.lastActivity{/lang}: {@$user->getLastActivityTime()|time}
    • - {if $user->getCurrentLocation()}
  • {@$user->getCurrentLocation()}
    • {/if} -
- {/if} - - {hascontent} -
- {content} - {event name='statistics'} - - {if MODULE_LIKE && $user->likesReceived} -
{if !$user->isProtected()}{lang}wcf.like.likesReceived{/lang}{else}{lang}wcf.like.likesReceived{/lang}{/if}
-
{#$user->likesReceived}
- {/if} - - {if $user->activityPoints} -
{lang}wcf.user.activityPoint{/lang}
-
{#$user->activityPoints}
- {/if} - - {if $user->profileHits} -
{lang}wcf.user.profileHits{/lang}
- getProfileAge() > 1} title="{lang}wcf.user.profileHits.hitsPerDay{/lang}"{/if}>{#$user->profileHits} - {/if} - {/content} -
- {/hascontent} - - - + {/if} + + {hascontent} +
+ {content} + {event name='statistics'} + + {if MODULE_LIKE && $user->likesReceived} +
{if !$user->isProtected()}{lang}wcf.like.likesReceived{/lang}{else}{lang}wcf.like.likesReceived{/lang}{/if}
+
{#$user->likesReceived}
+ {/if} + + {if $user->activityPoints} +
{lang}wcf.user.activityPoint{/lang}
+
{#$user->activityPoints}
+ {/if} + + {if $user->profileHits} +
{lang}wcf.user.profileHits{/lang}
+ getProfileAge() > 1} title="{lang}wcf.user.profileHits.hitsPerDay{/lang}"{/if}>{#$user->profileHits} + {/if} + {/content} +
+ {/hascontent}
diff --git a/wcfsetup/install/files/style/ui/userProfile.scss b/wcfsetup/install/files/style/ui/userProfile.scss index 46727f22ac..6dfb6cdad3 100644 --- a/wcfsetup/install/files/style/ui/userProfile.scss +++ b/wcfsetup/install/files/style/ui/userProfile.scss @@ -1,82 +1,70 @@ -.box.userProfileHeader { +.userProfileHeader.box { + margin: 0; +} +.userProfileCoverPhoto { background-image: url('../images/user-profile-header.jpg'); // todo background-size: cover; - color: rgba(255, 255, 255, 1); - margin: 0; - padding: 40px 0; - text-shadow: 1px 1px 1px #000; - - .boxContent { - background-color: rgba(0, 0, 0, .4); - padding: 20px 0; - } - - .contentHeader { - color: rgba(255, 255, 255, 1); - margin: 5px 0 10px 0; - } + height: 200px; +} + +.userProfileUser { + background-color: $wcfHeaderBackground; - .userDetails { + > .layoutBoundary { + align-items: center; + display: flex; + padding: 5px 0 10px 160px; position: relative; } .userAvatar { - > a { - display: block; - } - - img { - box-sizing: content-box; - border: 2px solid $wcfContentBackground; - } - } - - a { - color: rgba(255, 255, 255, 1); - - &:hover { - color: rgba(255, 255, 255, 1); - text-decoration: underline; - } + background-color: $wcfHeaderBackground; + border-radius: 50%; + left: 0; + padding: 10px; + position: absolute; + top: 50%; + transform: translateY(-50%); } - dt { - color: rgba(255, 255, 255, 1); + .contentHeader { + color: $wcfHeaderText; + flex: 1 1 auto; } - /* todo */ .buttonGroupNavigation { - position: absolute; - right: 0; - top: 12px; + flex: 0 0 auto; + margin-left: 10px; - .buttonGroup { - > li { - &:not(:last-child) { - margin-right: 1px; - } - - .button { - background-color: rgba(255, 255, 255, .4); - color: rgb(0, 0, 0); - text-shadow: 1px 1px 1px rgb(255, 255, 255); - - .icon { - color: rgb(0, 0, 0); - text-shadow: 1px 1px 1px rgb(255, 255, 255); - } - - &:hover, - &.active { - background-color: rgba(255, 255, 255, .8); - text-decoration: none; - } - } + .button { + background-color: $wcfHeaderMenuBackground; + color: $wcfHeaderMenuLink; + + &.active, + &:hover { + background-color: $wcfHeaderMenuBackgroundActive; + color: $wcfHeaderMenuLinkActive; } } } } +.userProfileDetails { + background-color: $wcfSidebarBackground; + + > .layoutBoundary { + padding: 10px 0 10px 160px; + } +} + +.userProfile .main { + padding-top: 0; +} + +.section.userProfileContent { + margin-top: 20px; +} + .userAvatarList { display: flex; flex-wrap: wrap; @@ -116,7 +104,3 @@ } } } - -.section.userProfile { - margin-top: 0; -} \ No newline at end of file -- 2.20.1