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

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

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

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;
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) =>
{
return <HallOfFameItemView key={ index } data={ entry } level={ (index + 1) } />;