nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update Hall Of Fame

Browse Source
This commit is contained in:
MyNameIsBatman 2021-11-26 01:07:00 -03:00
parent 785b411889
commit 74670f40cc
3 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
View File

@ -1,5 +1,5 @@
import { FC } from 'react'; import { FC } from 'react';
import { LocalizeText } from '../../../../../api'; import { LocalizeFormattedNumber, LocalizeText } from '../../../../../api';
import { UserProfileIconView } from '../../../../../layout'; import { UserProfileIconView } from '../../../../../layout';
import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView'; import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
import { HallOfFameItemViewProps } from './HallOfFameItemView.types'; import { HallOfFameItemViewProps } from './HallOfFameItemView.types';
@ -9,12 +9,12 @@ export const HallOfFameItemView: FC<HallOfFameItemViewProps> = props =>
const { data = null, level = 0 } = props; const { data = null, level = 0 } = props;
return ( return (
<div className="hof-user-container cursor-pointer"> <div className="hof-user-container">
<div className="hof-tooltip"> <div className="hof-tooltip">
<div className="hof-tooltip-content"> <div className="hof-header">
<div className="fw-bold">{ level }. { data.userName } <UserProfileIconView userId={ data.userId } /></div> { level }. { data.userName } <UserProfileIconView userId={ data.userId } />
<div className="muted fst-italic small text-center">{ LocalizeText('landing.view.competition.hof.points', [ 'points' ], [ data.currentScore.toString() ])}</div>
</div> </div>
<div className="small text-center text-white">{ LocalizeText('landing.view.competition.hof.points', [ 'points' ], [ LocalizeFormattedNumber(data.currentScore).toString() ])}</div>
</div> </div>
<AvatarImageView figure={ data.figure } direction={ 2 } /> <AvatarImageView figure={ data.figure } direction={ 2 } />
</div> </div>

35
src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss
View File

@ -1,7 +1,7 @@
.hall-of-fame { .hall-of-fame {
background-color: rgba($black,.3); background-color: rgba($black,.3);
border-radius: $border-radius; border-radius: $border-radius;
display: inline-block; justify-content: center;
.hof-user-container { .hof-user-container {
display:inline-flex; display:inline-flex;
@ -16,22 +16,31 @@
.hof-tooltip { .hof-tooltip {
position: absolute; position: absolute;
display: inline;
z-index: 2;
display: none; display: none;
background-color: #1c323f; width: 125px;
max-width: 125px;
padding: 2px;
background-color: $gable-green;
border: 2px solid rgba($white, 0.5); border: 2px solid rgba($white, 0.5);
border-radius: $border-radius; border-radius: $border-radius;
bottom:calc(100% - 20px); font-size: $font-size-sm;
left: 0; z-index: $context-menu-zindex;
right: 0; pointer-events: all;
margin: auto; left: -15px;
padding:2px; bottom: calc(100% - 10px);
color: #fff;
.hof-tooltip-content { .hof-header {
padding:3px; display: flex;
background-color: #3d5f6e; align-items: center;
justify-content: center;
gap: 5px;
background-color: $william;
color: $white;
min-width: 117px;
height: 25px;
max-height: 25px;
font-size: 16px;
margin-bottom: 2px;
} }
&:after { &:after {

2
src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
View File

@ -26,7 +26,7 @@ export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
if(!data) return null; if(!data) return null;
return ( return (
<div className="hall-of-fame widget"> <div className="hall-of-fame d-flex">
{ data.hof && (data.hof.length > 0) && data.hof.map((entry, index) => { data.hof && (data.hof.length > 0) && data.hof.map((entry, index) =>
{ {
return <HallOfFameItemView key={ index } data={ entry } level={ (index + 1) } />; return <HallOfFameItemView key={ index } data={ entry } level={ (index + 1) } />;