Skip to content

Commit

Permalink
[fix] some CSS interface details of User Rank component
Browse files Browse the repository at this point in the history
  • Loading branch information
@TechQuery
TechQuery committed Oct 18, 2024
1 parent cb69f54 commit f212b60
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 34 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "idea-react",
"version": "2.0.0-rc.5",
"version": "2.0.0-rc.6",
"license": "LGPL-3.0-or-later",
"author": "[email protected]",
"description": "A React advanced components library based on TypeScript & Bootstrap, built by idea2app remote developers team.",
Expand Down
34 changes: 17 additions & 17 deletions source/UserRank/index.module.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,21 @@
}
}

.topUserRow {
.rankBox {
--logo-image: url('https://github.com/idea2app.png');
--title-background-image: url('https://hackathon-api.static.kaiyuanshe.cn/6342619375fa1817e0f56ce1/2022/10/09/rrrr.png');
a {
color: inherit;
text-decoration: none;
}
.imgBox {
.image {
width: 2.1rem;
&:hover img {
transform: scale(1.1);
transition: all 0.3s;
}
}
.showTitle {
.title {
position: relative;
z-index: 4;
margin-top: 1.5rem;
Expand All @@ -47,7 +47,7 @@
height: 100%;
content: '';
}
.showMedal {
.medal {
position: absolute;
top: -1.2rem;
left: 5%;
Expand Down Expand Up @@ -111,25 +111,25 @@
}
}
}
.topUserUl {
.topUsers {
z-index: 5;
li {
cursor: default;
text-align: center;
.showBox {
.topUser {
z-index: 3;
min-height: 6rem;
letter-spacing: 1px;
}
.imgBox {
.image {
z-index: 2;
animation: 3.5s suspension ease-in-out infinite;
transition: all 0.6s;
}
&:nth-child(1) {
order: 2;
padding-top: 0.3rem;
.showBox {
.topUser {
border-bottom: 1.5rem solid #ffd83a;
color: #ffd83a;
text-shadow:
Expand All @@ -146,15 +146,15 @@
height: 2.6rem;
}
}
.imgBox {
.image {
animation-delay: 3.5s;
width: 6.4rem;
}
}
&:nth-child(2) {
order: 1;
padding-top: 1rem;
.showBox {
.topUser {
border-bottom: 1.2rem solid #d8d8d8;
color: #d8d8d8;
text-shadow: 0px 1px 0px #d9cdcd 0px 2px 5px
Expand All @@ -164,15 +164,15 @@
linear-gradient(#d8d8d8, #eeeeee);
}
}
.imgBox {
.image {
animation-delay: 1.4s;
width: 6rem;
}
}
&:nth-child(3) {
order: 3;
padding-top: 1.5rem;
.showBox {
.topUser {
border-bottom: 1rem solid #fab36e;
color: #fab36e;
text-shadow:
Expand All @@ -183,17 +183,17 @@
linear-gradient(#fab36e, #fbe7d3);
}
}
.imgBox {
.image {
animation-delay: 2.4s;
width: 5.6rem;
}
}
&:hover .imgBox {
&:hover .image {
animation-play-state: paused;
}
}
}
.topUserList {
.restUsers {
tr {
&::before {
display: block;
Expand All @@ -214,10 +214,10 @@
td {
cursor: default;
background-color: transparent;
.usernameBox {
.name {
font-size: 0;
&:hover {
.imgBox > img {
.image > img {
transform: scale(1.2);
}
}
Expand Down
32 changes: 16 additions & 16 deletions source/UserRank/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { PureComponent } from 'react';
import { Badge, Col, Image, Row, Table } from 'react-bootstrap';
import { Badge, Col, Image, Row, RowProps, Table } from 'react-bootstrap';

import { UserAddress, UserAddressProps } from './Address';
import * as style from './index.module.less';
Expand All @@ -11,22 +11,22 @@ export interface UserRank extends UserAddressProps {
score: number;
}

export interface UserRankViewProps {
export interface UserRankViewProps extends RowProps {
title: string;
rank: UserRank[];
linkOf?: (user: UserRank) => string;
}

export class UserRankView extends PureComponent<UserRankViewProps> {
renderMedal = (user: UserRank) => (
<Col as="li" key={user.id}>
<Col key={user.id} as="li">
<div
className={`shadow-lg overflow-hidden rounded-circle m-auto ${style.imgBox}`}
className={`shadow-lg overflow-hidden rounded-circle m-auto ${style.image}`}
>
<Image fluid src={user.avatar} alt={user.name} loading="lazy" />
<Image src={user.avatar} alt={user.name} loading="lazy" fluid />
</div>
<div
className={`position-relative overflow-hidden ${style.showBox}`}
className={`position-relative overflow-hidden ${style.topUser}`}
>
<div className="position-relative">
<i className="d-block overflow-hidden m-auto mb-1 rounded-circle" />
Expand All @@ -47,20 +47,20 @@ export class UserRankView extends PureComponent<UserRankViewProps> {
<tr key={user.id} className="position-relative">
<td className="align-middle">
<Badge className="fw-bold fst-italic">
{(index + 4 + '').padStart(length, '0')}
{(index + 4 + '').padStart((length + '').length, '0')}
</Badge>
</td>
<td
className={`position-relative mw-50 text-truncate ${style.usernameBox}`}
className={`position-relative mw-50 text-truncate ${style.name}`}
>
<div
className={`d-inline-block overflow-hidden align-middle rounded-circle ${style.imgBox}`}
className={`d-inline-block overflow-hidden align-middle rounded-circle ${style.image}`}
>
<Image
fluid
src={user.avatar}
alt={user.name}
loading="lazy"
fluid
/>
</div>
<a
Expand All @@ -81,13 +81,13 @@ export class UserRankView extends PureComponent<UserRankViewProps> {
);

render() {
const { title, rank = [] } = this.props;
const { className = '', title, rank = [], ...props } = this.props;

return (
<Row className={style.topUserRow}>
<Row className={`${style.rankBox} ${className}`} {...props}>
<Col sm={12} xs={12} lg={7}>
<div className={`shadow rounded-3 ${style.showTitle}`}>
<div className={style.showMedal}>
<div className={`shadow rounded-3 ${style.title}`}>
<div className={style.medal}>
<i className="d-inline-block ms-1 overflow-hidden rounded-circle" />
<i className="d-inline-block ms-1 overflow-hidden rounded-circle" />
<i className="d-inline-block ms-1 overflow-hidden rounded-circle" />
Expand All @@ -101,15 +101,15 @@ export class UserRankView extends PureComponent<UserRankViewProps> {
</div>
<Row
as="ul"
className={`mt-2 g-0 align-items-end text-center ps-0 pt-2 list-unstyled ${style.topUserUl}`}
className={`mt-2 g-0 align-items-end text-center ps-0 pt-2 list-unstyled ${style.topUsers}`}
>
{rank.slice(0, 3).map(this.renderMedal)}
</Row>
</Col>
<Col xs={12} sm={12} lg={5}>
<Table
className={`my-3 pt-2 ${style.restUsers}`}
responsive
className={`my-3 pt-2 ${style.topUserList}`}
>
<tbody>{rank.slice(3, 10).map(this.renderRow)}</tbody>
</Table>
Expand Down

1 comment on commit f212b60

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for idea-react ready!

✅ Preview
https://idea-react-qbkze4ij6-stevending1sts-projects.vercel.app

Built with commit f212b60.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.