{hascontent}
<div class="boxesBottom">
- <div class="layoutBoundary">
- <div class="boxContainer">
- {content}
- {foreach from=$__wcf->getBoxHandler()->getBoxes('bottom') item=box}
- {@$box->render()}
- {/foreach}
- {/content}
- </div>
+ <div class="boxContainer">
+ {content}
+ {if !$boxesBottom|empty}
+ {@$boxesBottom}
+ {/if}
+
+ {foreach from=$__wcf->getBoxHandler()->getBoxes('bottom') item=box}
+ {@$box->render()}
+ {/foreach}
+ {/content}
</div>
</div>
{/hascontent}
{hascontent}
<div class="boxesTop">
- <div class="layoutBoundary">
- <div class="boxContainer">
- {content}
- {foreach from=$__wcf->getBoxHandler()->getBoxes('top') item=box}
- {@$box->render()}
- {/foreach}
- {/content}
- </div>
- </div>
+ <div class="boxContainer">
+ {content}
+ {if !$boxesTop|empty}
+ {@$boxesTop}
+ {/if}
+
+ {foreach from=$__wcf->getBoxHandler()->getBoxes('top') item=box}
+ {@$box->render()}
+ {/foreach}
+ {/content}
+ </div>
</div>
{/hascontent}
<body id="tpl{$templateName|ucfirst}" data-template="{$templateName}" data-application="{$templateNameApplication}" class="userProfile">
+{include file='userHeader' assign='boxesTop'}
+
{include file='userSidebar' assign='sidebarRight'}
{include file='header'}
{/hascontent}
</div>
- <section id="profileContent" class="marginTop tabMenuContainer" data-active="{$__wcf->getUserProfileMenu()->getActiveMenuItem()->getIdentifier()}">
+ <section id="profileContent" class="tabMenuContainer" data-active="{$__wcf->getUserProfileMenu()->getActiveMenuItem()->getIdentifier()}">
<nav class="tabMenu">
<ul>
{foreach from=$__wcf->getUserProfileMenu()->getMenuItems() item=menuItem}
--- /dev/null
+
+<div class="box userProfileHeader">
+ <div class="boxContent">
+ <div class="layoutBoundary">
+ <div class="box128">
+ <div class="userAvatar">
+ {if $user->userID == $__wcf->user->userID}
+ <a href="{link controller='AvatarEdit'}{/link}" class="framed jsTooltip" title="{lang}wcf.user.avatar.edit{/lang}">{@$user->getAvatar()->getImageTag(128)}</a>
+ {else}
+ <span class="framed">{@$user->getAvatar()->getImageTag(128)}</span>
+ {/if}
+ </div>
+
+ <section class="userDetails"{if $isAccessible}
+ data-object-id="{@$user->userID}"
+ {if $__wcf->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}>
+ <header class="contentHeader">
+ <h1 class="contentTitle">
+ {$user->username}{if $user->banned} <span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang}wcf.user.banned{/lang}"></span>{/if}
+ {if MODULE_USER_RANK}
+ {if $user->getUserTitle()}
+ <span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
+ {/if}
+ {if $user->getRank() && $user->getRank()->rankImage}
+ <span class="userRankImage">{@$user->getRank()->getImage()}</span>
+ {/if}
+ {/if}
+ </h1>
+ </header>
+
+ <ul class="inlineList commaSeparated">
+ {if $user->isVisibleOption('gender') && $user->gender}<li>{lang}wcf.user.gender.{if $user->gender == 1}male{else}female{/if}{/lang}</li>{/if}
+ {if $user->isVisibleOption('birthday') && $user->getAge()}<li>{@$user->getAge()}</li>{/if}
+ {if $user->isVisibleOption('location') && $user->location}<li>{lang}wcf.user.membersList.location{/lang}</li>{/if}
+ {if $user->getOldUsername()}<li>{lang}wcf.user.profile.oldUsername{/lang}</li>{/if}
+ <li>{lang}wcf.user.membersList.registrationDate{/lang}</li>
+ {event name='userDataRow1'}
+ </ul>
+
+ {if $user->canViewOnlineStatus() && $user->getLastActivityTime()}
+ <ul class="inlineList commaSeparated">
+ <li>{lang}wcf.user.usersOnline.lastActivity{/lang}: {@$user->getLastActivityTime()|time}</li>
+ {if $user->getCurrentLocation()}<li>{@$user->getCurrentLocation()}</li>{/if}
+ </ul>
+ {/if}
+
+ {hascontent}
+ <dl class="plain inlineDataList">
+ {content}
+ {event name='statistics'}
+
+ {if MODULE_LIKE && $user->likesReceived}
+ <dt>{if !$user->isProtected()}<a href="{link controller='User' object=$user}{/link}#likes" class="jsTooltip" title="{lang}wcf.like.showLikesReceived{/lang}">{lang}wcf.like.likesReceived{/lang}</a>{else}{lang}wcf.like.likesReceived{/lang}{/if}</dt>
+ <dd>{#$user->likesReceived}</dd>
+ {/if}
+
+ {if $user->activityPoints}
+ <dt><a href="#" class="activityPointsDisplay jsTooltip" title="{lang}wcf.user.activityPoint.showActivityPoints{/lang}" data-user-id="{@$user->userID}">{lang}wcf.user.activityPoint{/lang}</a></dt>
+ <dd>{#$user->activityPoints}</dd>
+ {/if}
+
+ {if $user->profileHits}
+ <dt>{lang}wcf.user.profileHits{/lang}</dt>
+ <dd{if $user->getProfileAge() > 1} title="{lang}wcf.user.profileHits.hitsPerDay{/lang}"{/if}>{#$user->profileHits}</dd>
+ {/if}
+ {/content}
+ </dl>
+ {/hascontent}
+
+ <nav class="buttonGroupNavigation">
+ <ul id="profileButtonContainer" class="buttonGroup">
+ {hascontent}
+ <li class="dropdown">
+ <a href="#" class="button dropdownToggle jsTooltip" title="{lang}wcf.user.searchUserContent{/lang}"><span class="icon icon16 fa-search"></span> <span class="invisible">{lang}wcf.user.searchUserContent{/lang}</span></a>
+ <ul class="dropdownMenu">
+ {content}
+ {event name='quickSearchItems'}
+ {/content}
+ </ul>
+ </li>
+ {/hascontent}
+
+ {if $__wcf->session->getPermission('user.profile.canReportContent')}
+ <li class="jsReportUser jsOnly" data-object-id="{@$user->userID}"><a href="#" title="{lang}wcf.user.profile.report{/lang}" class="button jsTooltip"><span class="icon icon16 fa-exclamation-triangle"></span> <span class="invisible">{lang}wcf.user.profile.report{/lang}</span></a></li>
+ {/if}
+
+ {if $user->userID != $__wcf->user->userID}
+ {if $user->isAccessible('canViewEmailAddress') || $__wcf->session->getPermission('admin.user.canEditMailAddress')}
+ <li><a class="button jsTooltip" href="mailto:{@$user->getEncodedEmail()}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 fa-envelope-o"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
+ {elseif $user->isAccessible('canMail') && $__wcf->session->getPermission('user.profile.canMail')}
+ <li><a class="button jsTooltip" href="{link controller='Mail' object=$user}{/link}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 fa-envelope-o"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
+ {/if}
+ {/if}
+
+ {event name='buttons'}
+
+ {if $isAccessible && $__wcf->user->userID != $user->userID && ($__wcf->session->getPermission('admin.user.canBanUser') || $__wcf->session->getPermission('admin.user.canDisableAvatar') || $__wcf->session->getPermission('admin.user.canDisableSignature') || ($__wcf->session->getPermission('admin.general.canUseAcp') && $__wcf->session->getPermission('admin.user.canEditUser')){event name='moderationDropdownPermissions'})}
+ <li class="dropdown">
+ <a href="{link controller='UserEdit' object=$user isACP=true}{/link}" class="button jsTooltip jsUserInlineEditor" title="{lang}wcf.user.moderate{/lang}"><span class="icon icon16 fa-wrench"></span> <span class="invisible">{lang}wcf.user.moderate{/lang}</span></a>
+ <ul class="dropdownMenu"></ul>
+ </li>
+ {/if}
+ </ul>
+ </nav>
+ </section>
+ </div>
+ </div>
+ </div>
+
+</div>
+
-<section class="userDetails"
- {if $isAccessible}
- data-object-id="{@$user->userID}"
- {if $__wcf->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}
->{*todo*}
- <div class="userAvatar">
- {if $user->userID == $__wcf->user->userID}
- <a href="{link controller='AvatarEdit'}{/link}" class="framed jsTooltip" title="{lang}wcf.user.avatar.edit{/lang}">{@$user->getAvatar()->getImageTag()}</a>
- {else}
- <span class="framed">{@$user->getAvatar()->getImageTag()}</span>
- {/if}
- </div>
-
- <h1>{$user->username}{if $user->banned} <span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang}wcf.user.banned{/lang}"></span>{/if}</h1>
-
- {if MODULE_USER_RANK}
- <div class="userRank">
- {if $user->getUserTitle()}
- <span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
- {/if}
- {if $user->getRank() && $user->getRank()->rankImage}
- <span class="userRankImage">{@$user->getRank()->getImage()}</span>
- {/if}
- </div>
- {/if}
-
- <ul class="inlineList commaSeparated">
- {if $user->isVisibleOption('gender') && $user->gender}<li>{lang}wcf.user.gender.{if $user->gender == 1}male{else}female{/if}{/lang}</li>{/if}
- {if $user->isVisibleOption('birthday') && $user->getAge()}<li>{@$user->getAge()}</li>{/if}
- {if $user->isVisibleOption('location') && $user->location}<li>{lang}wcf.user.membersList.location{/lang}</li>{/if}
- {if $user->getOldUsername()}<li>{lang}wcf.user.profile.oldUsername{/lang}</li>{/if}
- <li>{lang}wcf.user.membersList.registrationDate{/lang}</li>
- {event name='userDataRow1'}
- </ul>
- {if $user->canViewOnlineStatus() && $user->getLastActivityTime()}
- <p class="userActivity">
- <span>{lang}wcf.user.usersOnline.lastActivity{/lang}: {@$user->getLastActivityTime()|time}</span>
- {if $user->getCurrentLocation()}<span>{@$user->getCurrentLocation()}</span>{/if}
- </p>
- {/if}
- {hascontent}
- <dl class="plain inlineDataList">
- {content}
- {event name='statistics'}
-
- {if MODULE_LIKE && $user->likesReceived}
- <dt>{if !$user->isProtected()}<a href="{link controller='User' object=$user}{/link}#likes" class="jsTooltip" title="{lang}wcf.like.showLikesReceived{/lang}">{lang}wcf.like.likesReceived{/lang}</a>{else}{lang}wcf.like.likesReceived{/lang}{/if}</dt>
- <dd>{#$user->likesReceived}</dd>
- {/if}
-
- {if $user->activityPoints}
- <dt><a href="#" class="activityPointsDisplay jsTooltip" title="{lang}wcf.user.activityPoint.showActivityPoints{/lang}" data-user-id="{@$user->userID}">{lang}wcf.user.activityPoint{/lang}</a></dt>
- <dd>{#$user->activityPoints}</dd>
- {/if}
-
- {if $user->profileHits}
- <dt>{lang}wcf.user.profileHits{/lang}</dt>
- <dd{if $user->getProfileAge() > 1} title="{lang}wcf.user.profileHits.hitsPerDay{/lang}"{/if}>{#$user->profileHits}</dd>
- {/if}
- {/content}
- </dl>
- {/hascontent}
-
- <nav class="jsMobileNavigation buttonGroupNavigation">
- <ul id="profileButtonContainer" class="buttonGroup">
- {hascontent}
- <li class="dropdown">
- <a href="#" class="button dropdownToggle jsTooltip" title="{lang}wcf.user.searchUserContent{/lang}"><span class="icon icon16 fa-search"></span> <span class="invisible">{lang}wcf.user.searchUserContent{/lang}</span></a>
- <ul class="dropdownMenu">
- {content}
- {event name='quickSearchItems'}
- {/content}
- </ul>
- </li>
- {/hascontent}
-
- {if $__wcf->session->getPermission('user.profile.canReportContent')}
- <li class="jsReportUser jsOnly" data-object-id="{@$user->userID}"><a href="#" title="{lang}wcf.user.profile.report{/lang}" class="button jsTooltip"><span class="icon icon16 fa-exclamation-triangle"></span> <span class="invisible">{lang}wcf.user.profile.report{/lang}</span></a></li>
- {/if}
-
- {if $user->userID != $__wcf->user->userID}
- {if $user->isAccessible('canViewEmailAddress') || $__wcf->session->getPermission('admin.user.canEditMailAddress')}
- <li><a class="button jsTooltip" href="mailto:{@$user->getEncodedEmail()}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 fa-envelope-o"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
- {elseif $user->isAccessible('canMail') && $__wcf->session->getPermission('user.profile.canMail')}
- <li><a class="button jsTooltip" href="{link controller='Mail' object=$user}{/link}" title="{lang}wcf.user.button.mail{/lang}"><span class="icon icon16 fa-envelope-o"></span> <span class="invisible">{lang}wcf.user.button.mail{/lang}</span></a></li>
- {/if}
- {/if}
-
- {event name='buttons'}
-
- {if $isAccessible && $__wcf->user->userID != $user->userID && ($__wcf->session->getPermission('admin.user.canBanUser') || $__wcf->session->getPermission('admin.user.canDisableAvatar') || $__wcf->session->getPermission('admin.user.canDisableSignature') || ($__wcf->session->getPermission('admin.general.canUseAcp') && $__wcf->session->getPermission('admin.user.canEditUser')){event name='moderationDropdownPermissions'})}
- <li class="dropdown">
- <a href="{link controller='UserEdit' object=$user isACP=true}{/link}" class="button jsTooltip jsUserInlineEditor" title="{lang}wcf.user.moderate{/lang}"><span class="icon icon16 fa-wrench"></span> <span class="invisible">{lang}wcf.user.moderate{/lang}</span></a>
- <ul class="dropdownMenu"></ul>
- </li>
- {/if}
- </ul>
- </nav>
-</section>
-
{if !$user->isProtected()}
{if $followingCount}
<section class="box">
/* styling for boxes in <top>/<bottom> position */
.boxesTop,
.boxesBottom {
- border-bottom: 1px solid $wcfContentBorderInner;
-
- .layoutBoundary {
- padding: 40px 0;
- }
-
.box {
- &:not(:first-child) {
- margin-top: 40px;
- }
+ margin-bottom: 40px;
+ margin-top: 40px;
}
.boxWithImage {
.box32 { @include box(32px, 8px); }
.box48 { @include box(48px, 10px); }
.box64 { @include box(64px, 10px); }
-.box96 { @include box(96px, 12px); }
-.box128 { @include box(128px, 12px); }
-.box256 { @include box(256px, 21px); }
+.box96 { @include box(96px, 15px); }
+.box128 { @include box(128px, 20px); }
+.box256 { @include box(256px, 20px); }
.wcfFontDefault {
font-size: $wcfFontSizeDefault;
-/* todo
-.userProfile .sidebar {
- > .userDetails {
+.box.userProfileHeader {
+ 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;
+ }
+
+ .userDetails {
position: relative;
- text-align: center;
-
- > .buttonGroupNavigation > .buttonGroup,
- > .dataList {
- justify-content: center;
- }
-
- > .buttonGroupNavigation,
- > .dataList,
- > .userActivity {
- margin-top: 10px;
+ }
+
+ .userAvatar {
+ > a {
+ display: block;
}
- > .dataList {
- margin-top: 25px;
-
- &:before {
- // TODO: border-top: 2px solid $wcfContentBorderAccent;
- content: "";
- left: 0;
- margin-top: -10px;
- position: absolute;
- right: 0;
- }
- }
-
- > .userActivity > span {
- display: block;
-
- @extend .wcfFontSmall;
+ img {
+ box-sizing: content-box;
+ border: 2px solid $wcfContentBackground;
}
}
-}
-
-.userProfile #profileContent {
- > .tabMenu {
- //margin-bottom: 30px;
+
+ a {
+ color: rgba(255, 255, 255, 1);
- > ul > li {
- &:not(:last-child) {
- margin-right: 30px;
- }
-
- > a {
- padding: 0;
- text-transform: uppercase;
-
- @extend .wcfFontHeadline;
- }
+ &:hover {
+ color: rgba(255, 255, 255, 1);
+ text-decoration: underline;
}
}
-}
-
-#profileButtonContainer > li {
- border-width: 0;
- > a {
- background-color: transparent;
- border-width: 0;
- // TODO: color: $wcfContentTextAccent !important;
- padding: 5px;
+ dt {
+ color: rgba(255, 255, 255, 1);
+ }
+
+ /* todo */
+ .buttonGroupNavigation {
+ position: absolute;
+ right: 0;
+ top: 12px;
- > .icon {
- // TODO: color: $wcfContentTextAccent;
+ .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;
+ }
+ }
+ }
}
}
}
-*/
.userAvatarList {
display: flex;
projects / GitHub / WoltLab / WCF.git / commitdiff