mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-23 06:40:50 +01:00
profile changes
This commit is contained in:
Layne
parent
27d7083440
commit
f0af5c8ead
@ -1,10 +1,10 @@
|
||||
.user-profile {
|
||||
width: 560px;
|
||||
.content-area {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.user-container
|
||||
{
|
||||
.user-container {
|
||||
border-right: 1px solid gray;
|
||||
|
||||
.avatar-image {
|
||||
@ -17,23 +17,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
.badge-container
|
||||
{
|
||||
.badge-container {
|
||||
min-height: 50px;
|
||||
background: rgba(0, 0, 0, .1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
margin: 0px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.rooms-button-container
|
||||
{
|
||||
.rooms-button-container {
|
||||
border-top: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
padding: 1px;
|
||||
|
||||
.rooms-button {
|
||||
display:inline-block;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
text-decoration: underline;
|
||||
@ -41,10 +39,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.friends-container
|
||||
{
|
||||
.friends-container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@import './views/relationships-container/RelationshipsContainerView';
|
||||
@import "./views/relationships-container/RelationshipsContainerView";
|
||||
|
||||
@ -60,23 +60,22 @@ export const UserProfileView: FC = props =>
|
||||
if(!userProfile) return null;
|
||||
|
||||
return (
|
||||
<div className="user-profile">
|
||||
<NitroCardView>
|
||||
<NitroCardView simple={ true } className="user-profile">
|
||||
<NitroCardHeaderView headerText={LocalizeText('extendedprofile.caption')} onCloseClick={OnClose} />
|
||||
<NitroCardContentView>
|
||||
<div className="row">
|
||||
<div className="col-sm-6 user-container">
|
||||
<div className="col-sm-7 user-container">
|
||||
<UserContainerView id={userProfile.id} username={userProfile.username} motto={userProfile.motto} figure={userProfile.figure} secondsSinceLastLogin={userProfile.secondsSinceLastVisit} creation={userProfile.registration} achievementScore={userProfile.achievementPoints} isFriend={userProfile.isMyFriend} isOnline={userProfile.isOnline} requestSent={userProfile.requestSent} />
|
||||
<BadgesContainerView badges={userBadges} />
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<div className="col-sm-5">
|
||||
{
|
||||
userRelationships && <FriendsContainerView relationships={userRelationships} friendsCount={userProfile.friendsCount} />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row rooms-button-container align-items-center">
|
||||
<div className="col-sm-12 d-flex align-content-center w-100">
|
||||
<div className="d-flex rooms-button-container align-items-center py-1">
|
||||
<div className="d-flex align-items-center w-100">
|
||||
<i className="icon icon-rooms" /><span className="rooms-button">{LocalizeText('extendedprofile.rooms')}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -88,8 +87,7 @@ export const UserProfileView: FC = props =>
|
||||
group info goes here
|
||||
</div>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
)
|
||||
}
|
||||
|
||||
@ -8,10 +8,12 @@ export const FriendsContainerView: FC<FriendsContainerViewProps> = props =>
|
||||
const { relationships = null, friendsCount = null } = props;
|
||||
|
||||
return (
|
||||
<div className="friends-container h-100">
|
||||
<div className="friends-container h-100 d-flex flex-column">
|
||||
<div className="mb-1" dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.friends.count', ['count'], [friendsCount.toString()]) }} />
|
||||
<div className="mb-1"><b>{LocalizeText('extendedprofile.relstatus')}</b></div>
|
||||
<RelationshipsContainerView relationships={relationships} />
|
||||
<div className="h-100 d-flex flex-column justify-content-between">
|
||||
<RelationshipsContainerView relationships={relationships} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -24,37 +24,38 @@ export const RelationshipsContainerView: FC<RelationshipsContainerViewProps> = p
|
||||
const relationshipName = RelationshipStatusEnum.RELATIONSHIP_NAMES[type].toLocaleLowerCase();
|
||||
|
||||
return (
|
||||
<div className="relationship-container row row-cols-2 d-flex align-items-center">
|
||||
<i className={`icon icon-relationship-${relationshipName} col-2`} />
|
||||
<span className={'relationship col-10' + (!simple ? ' advanced' : '')}>
|
||||
<span className="cursor-pointer relationship-text" onClick={() => OnUserClick(relationshipInfo)}>
|
||||
<div className="relationship-container d-flex flex-row align-items-center w-100">
|
||||
<i className={`icon icon-relationship-${relationshipName} flex-shrink-0 align-self-baseline mt-2`} />
|
||||
<div className="w-100 d-flex flex-column">
|
||||
<span className={'relationship w-100' + (!simple ? ' advanced' : '')}>
|
||||
<span className="cursor-pointer relationship-text" onClick={() => OnUserClick(relationshipInfo)}>
|
||||
{
|
||||
(relationshipInfo && relationshipInfo.friendCount > 0) ? relationshipInfo.randomFriendName : LocalizeText('extendedprofile.add.friends')
|
||||
}
|
||||
</span>
|
||||
{
|
||||
(relationshipInfo && relationshipInfo.friendCount > 0) ? relationshipInfo.randomFriendName : LocalizeText('extendedprofile.add.friends')
|
||||
(simple && relationshipInfo && relationshipInfo.friendCount > 1) &&
|
||||
<span>
|
||||
{' ' + LocalizeText(`extendedprofile.relstatus.others.${relationshipName}`, ['count'], [(relationshipInfo.friendCount - 1).toString()])}
|
||||
</span>
|
||||
}
|
||||
</span>
|
||||
{
|
||||
(simple && relationshipInfo && relationshipInfo.friendCount > 1) &&
|
||||
<span>
|
||||
{' ' + LocalizeText(`extendedprofile.relstatus.others.${relationshipName}`, ['count'], [(relationshipInfo.friendCount - 1).toString()])}
|
||||
</span>
|
||||
}
|
||||
{
|
||||
(!simple && relationshipInfo && relationshipInfo.friendCount > 0) &&
|
||||
<AvatarImageView figure={relationshipInfo.randomFriendFigure} headOnly={true} direction={4} />
|
||||
}
|
||||
</span>
|
||||
|
||||
{
|
||||
!simple && <div className="others-text">
|
||||
{
|
||||
(relationshipInfo && relationshipInfo.friendCount > 1) ? LocalizeText(`extendedprofile.relstatus.others.${relationshipName}`, ['count'], [(relationshipInfo.friendCount - 1).toString()]) : ''
|
||||
}
|
||||
{
|
||||
(relationshipInfo && relationshipInfo.friendCount < 1) ? LocalizeText('extendedprofile.no.friends.in.this.category') : ''
|
||||
}
|
||||
</div>
|
||||
}
|
||||
{
|
||||
(!simple && relationshipInfo && relationshipInfo.friendCount > 0) &&
|
||||
<AvatarImageView figure={relationshipInfo.randomFriendFigure} headOnly={true} direction={4} />
|
||||
}
|
||||
</span>
|
||||
|
||||
{
|
||||
!simple && <div className="others-text">
|
||||
{
|
||||
(relationshipInfo && relationshipInfo.friendCount > 1) ? LocalizeText(`extendedprofile.relstatus.others.${relationshipName}`, ['count'], [(relationshipInfo.friendCount - 1).toString()]) : ''
|
||||
}
|
||||
{
|
||||
(relationshipInfo && relationshipInfo.friendCount < 1) ? LocalizeText('extendedprofile.no.friends.in.this.category') : ''
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}, [OnUserClick, relationships, simple]);
|
||||
|
||||
@ -27,18 +27,20 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-sm-4">
|
||||
<div className="col-sm-3 px-0 d-flex align-items-center">
|
||||
<AvatarImageView figure={figure} direction={2} />
|
||||
</div>
|
||||
<div className="col-sm-8">
|
||||
<div className="user-info-container">
|
||||
<h5>{username}</h5>
|
||||
<div className="mb-1">{motto}</div>
|
||||
<div className="fw-bold">{username}</div>
|
||||
<div className="mb-1 fst-italic">{motto}</div>
|
||||
<div className="mb-1" dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.created', ['created'], [creation]) }} />
|
||||
<div className="mb-1" dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.last.login', ['lastlogin'], [FriendlyTime.format(secondsSinceLastLogin, '.ago', 2)]) }} />
|
||||
<div className="mb-1"><b>{LocalizeText('extendedprofile.achievementscore')}</b> {achievementScore}</div>
|
||||
<OnlineIcon />
|
||||
<FriendRequestComponent />
|
||||
<div className="d-flex flex-row align-items-center">
|
||||
<OnlineIcon />
|
||||
<FriendRequestComponent />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user