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

Badge updates

Browse Source
This commit is contained in:
Bill 2021-09-24 04:49:30 -04:00
parent 27ef76610b
commit 06f17080ce
2 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/shared/badge-image/BadgeImage.scss
View File

@ -1,7 +1,7 @@
.badge-image { .badge-image {
position: relative; position: relative;
width: 100%; width: 45px;
height: 100%; height: 45px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;

48
src/views/user-profile/views/badges-container/BadgesContainerView.tsx
View File

@ -1,4 +1,5 @@
import { FC } from 'react'; import { FC } from 'react';
import { NitroCardGridItemView, NitroCardGridView } from '../../../../layout';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView'; import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { BadgesContainerViewProps } from './BadgesContainerView.types'; import { BadgesContainerViewProps } from './BadgesContainerView.types';
@ -7,21 +8,36 @@ export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>
const { badges = null } = props; const { badges = null } = props;
return ( return (
<div className="row badge-container d-flex mt-1"> <div className="row">
<div className="nitro-card-grid theme-default"> <NitroCardGridView columns={ 5 }>
<div className="row row-cols-5 align-content-start"> { badges && (badges.length > 0) && badges.map((badge, index) =>
{ {
badges.map( (badge, index) => return (
{ <NitroCardGridItemView key={ index }>
return ( <BadgeImageView badgeCode={ badge }/>
<div className="grid-item-container" key={index}> </NitroCardGridItemView>
<BadgeImageView badgeCode={badge}/> )
</div> }) }
) </NitroCardGridView>
})
}
</div>
</div>
</div> </div>
); )
// return (
// <div className="row badge-container d-flex mt-1">
// <div className="nitro-card-grid theme-default">
// <div className="row row-cols-5 align-content-start">
// {
// badges.map( (badge, index) =>
// {
// return (
// <div className="grid-item-container" key={index}>
// <BadgeImageView badgeCode={badge}/>
// </div>
// )
// })
// }
// </div>
// </div>
// </div>
// );
} }