diff --git a/src/components/user-profile/GroupsContainerView.tsx b/src/components/user-profile/GroupsContainerView.tsx index b4e75a9..43181a2 100644 --- a/src/components/user-profile/GroupsContainerView.tsx +++ b/src/components/user-profile/GroupsContainerView.tsx @@ -1,6 +1,6 @@ import { GroupInformationComposer, GroupInformationEvent, GroupInformationParser, HabboGroupEntryData } from '@nitrots/nitro-renderer'; import { FC, useEffect, useState } from 'react'; -import { LocalizeText, SendMessageComposer, ToggleFavoriteGroup } from '../../api'; +import { LocalizeText, SanitizeHtml, SendMessageComposer, ToggleFavoriteGroup } from '../../api'; import { Column, GridProps, LayoutBadgeImageView, LayoutGridItem } from '../../common'; import { useMessageEvent } from '../../hooks'; import { GroupInformationView } from '../groups/views/GroupInformationView'; @@ -68,9 +68,7 @@ export const GroupsContainerView: FC = props => return (
-
- { LocalizeText('extendedprofile.groups.count', [ 'count' ], [ groups.length.toString() ]) } -
+
{ groups.map((group, index) => { diff --git a/src/components/user-profile/UserContainerView.tsx b/src/components/user-profile/UserContainerView.tsx index e4e6b43..1e60e39 100644 --- a/src/components/user-profile/UserContainerView.tsx +++ b/src/components/user-profile/UserContainerView.tsx @@ -1,6 +1,6 @@ import { CreateLinkEvent, GetSessionDataManager, RelationshipStatusInfoMessageParser, RequestFriendComposer, UserProfileParser } from '@nitrots/nitro-renderer'; import { FC, useEffect, useMemo, useState } from 'react'; -import { FriendlyTime, LocalizeText, SendMessageComposer } from '../../api'; +import { FriendlyTime, LocalizeText, SanitizeHtml, SendMessageComposer } from '../../api'; import { LayoutAvatarImageView, LayoutBadgeImageView, Text, UserIdentityView } from '../../common'; import { badgeEmblemDefault } from '../../assets/images/leaderboard_badge'; import { level as profileLevelIcon, rooms as profileRoomsIcon } from '../../assets/images/user-profile'; @@ -61,10 +61,10 @@ export const UserContainerView: FC = props => username={ userProfile.username } />

{ userProfile.motto || '\u00A0' }

- { LocalizeText('extendedprofile.created').replace(/%\w+%/g, '').trim() } { userProfile.registration } + { userProfile.registration }

- { LocalizeText('extendedprofile.last.login').replace(/%\w+%/g, '').trim() } { FriendlyTime.format(userProfile.secondsSinceLastVisit, '.ago', 2) } + { FriendlyTime.format(userProfile.secondsSinceLastVisit, '.ago', 2) }

{ LocalizeText('extendedprofile.achievementscore') } { userProfile.achievementPoints } @@ -117,11 +117,11 @@ export const UserContainerView: FC = props =>

{ LocalizeText('extendedprofile.relstatus') }

diff --git a/src/components/user-profile/UserProfileView.tsx b/src/components/user-profile/UserProfileView.tsx index 801fd4d..cf51142 100644 --- a/src/components/user-profile/UserProfileView.tsx +++ b/src/components/user-profile/UserProfileView.tsx @@ -30,8 +30,6 @@ export const UserProfileView: FC<{}> = () => { if(!userProfile) return; - // Open the navigator AND run the owner search (the composer alone never - // showed the navigator window, so the button looked dead). CreateLinkEvent(`navigator/search/hotel_view/owner:${ userProfile.username }`); }; @@ -100,12 +98,15 @@ export const UserProfileView: FC<{}> = () => if(!userProfile) return null; + const cardBackgroundId = userProfile.cardBackgroundId ?? 0; + const cardBackgroundClass = cardBackgroundId ? `profile-card-background card-background-${ cardBackgroundId }` : ''; + return ( - + - +
p, +[class*="card-background-"] .nitro-extended-profile__right > p b { + color: var(--profile-card-text, #fff) !important; + text-shadow: var(--profile-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.55)); +} + +.profile-card-background[class*="card-background-"]:not(.nitro-extended-profile-window__content) { + color: var(--profile-card-text, #fff); + text-shadow: var(--profile-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.55)); +} + +.profile-card-background[class*="card-background-"]:not(.nitro-extended-profile-window__content) .text-white { + color: var(--profile-card-text, #fff) !important; +} + diff --git a/src/css/user-profile/UserProfileView.css b/src/css/user-profile/UserProfileView.css index 30463a4..5084b0e 100644 --- a/src/css/user-profile/UserProfileView.css +++ b/src/css/user-profile/UserProfileView.css @@ -250,6 +250,7 @@ transform: translateY(-50%); overflow: hidden; } + .nitro-extended-profile__relationship-head .avatar-image { position: absolute !important; inset: 0 !important; @@ -330,6 +331,10 @@ background: #ece8dc; } +.nitro-extended-profile-window__content.profile-card-background .nitro-extended-profile-window__body { + background: transparent; +} + .nitro-extended-profile-window__body--groups { min-height: 249px; } @@ -377,10 +382,8 @@ .nitro-extended-profile-groups__details { min-width: 0; min-height: 236px; - border: 1px solid #9e9e9e; - border-radius: 14px; - background: #bdbbbb; - padding: 11px; + max-height: 100%; + overflow-y: auto; } .nitro-extended-profile-group-info { @@ -389,7 +392,7 @@ gap: 12px; min-height: 100%; border: 1px solid #9f9f9f; - border-radius: 10px; + border-radius: 12px; background: #efede4; padding: 12px 14px; } @@ -407,6 +410,7 @@ display: flex; align-items: center; justify-content: center; + overflow: hidden; } .nitro-extended-profile-group-info__meta { @@ -457,9 +461,14 @@ margin-top: auto; } -.nitro-extended-profile-group-info .group-badge .badge-image { - transform: scale(2.1); - transform-origin: center; +.nitro-extended-profile-group-info__badge-wrap .group-badge { + width: 100% !important; + height: 100% !important; + transform: none !important; + background-size: contain !important; + background-position: center !important; + background-repeat: no-repeat !important; + image-rendering: pixelated; } .nitro-extended-profile-window .layout-grid-item.active { @@ -479,7 +488,94 @@ justify-content: center; } -.nitro-extended-profile-window .layout-grid-item .badge-image.group-badge { - width: auto !important; - height: auto !important; +.nitro-extended-profile-groups__item { + overflow: hidden; +} + +.nitro-extended-profile-groups__item .group-badge { + width: 40px !important; + height: 40px !important; + transform: none !important; + background-size: contain !important; + background-position: center !important; + background-repeat: no-repeat !important; + image-rendering: pixelated; +} + +@media (max-width: 575.98px) { + .nitro-extended-profile-window__content { + overflow-y: auto; + } + + .nitro-extended-profile-window__body--groups { + flex: 0 0 auto; + overflow: visible; + } + + .nitro-extended-profile-window__panel { + height: auto; + } + + .nitro-extended-profile__top { + grid-template-columns: minmax(0, 1fr); + min-height: 0; + } + + .nitro-extended-profile__separator { + display: none; + } + + .nitro-extended-profile-groups { + display: flex; + flex-direction: column; + gap: 8px; + height: auto; + min-height: 0; + } + + .nitro-extended-profile-groups__sidebar { + min-width: 0; + flex: 0 0 auto; + } + + .nitro-extended-profile-groups__list { + display: flex; + flex: 0 0 auto; + flex-direction: row; + flex-wrap: nowrap; + gap: 6px; + max-width: 100%; + overflow-x: auto; + overflow-y: hidden; + padding-right: 0; + padding-bottom: 6px; + scrollbar-width: thin; + } + + .nitro-extended-profile-groups__item { + flex: 0 0 auto; + margin-bottom: 0; + } + + .nitro-extended-profile-groups__details { + min-height: 0; + max-height: none; + overflow: visible; + } + + .nitro-extended-profile-group-info { + grid-template-columns: 72px minmax(0, 1fr); + gap: 10px; + padding: 10px; + } + + .nitro-extended-profile-group-info__badge-wrap { + width: 64px; + height: 64px; + } + + .nitro-extended-profile-group-info__button { + min-width: 0; + width: 100%; + } }