RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 19:44:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve badges display

Browse Source
This commit is contained in:
SrGooglo 2023-07-08 19:39:47 +00:00
parent a2b2634f57
commit e13ab54398
4 changed files with 153 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/app/src/components/UserBadges/index.jsx
View File

@ -24,19 +24,23 @@ export default React.memo((props) => {
return null
}
return () => badgesData.map((badge, index) => {
return <antd.Tooltip placement="bottom" title={badge.description ?? "An badge"}>
<antd.Tag
color={badge.color ?? "default"}
key={index}
id={badge.name}
icon={createIconRender(badge.icon)}
className="badge"
>
<span>{badge.label}</span>
</antd.Tag>
</antd.Tooltip>
})
return () => <div className="badges">
{
badgesData.map((badge, index) => {
return <antd.Tooltip placement="bottom" title={badge.description ?? "An badge"}>
<antd.Tag
color={badge.color ?? "default"}
key={index}
id={badge.name}
icon={createIconRender(badge.icon)}
className="badge"
>
<span>{badge.label}</span>
</antd.Tag>
</antd.Tooltip>
})
}
</div>
},
loading: antd.Skeleton,
}))

28
packages/app/src/components/UserBadges/index.less
View File

@ -1,8 +1,32 @@
#root {
&.mobile {
.badges {
.ant-tag {
padding: 10px;
font-size: 0.9rem;
width: 100%;
svg {
font-size: 1.2rem;
}
}
}
}
}
.badges {
display: flex;
flex-direction: column;
padding: 10px;
gap: 7px;
.ant-tag {
display: inline-flex;
flex-direction: row;
align-items: center;
margin: 0 !important;
}
}

78
packages/app/src/pages/account/tabs/details.jsx
View File

@ -1,12 +1,14 @@
import React from "react"
import classnames from "classnames"
import { DateTime } from "luxon"
import { Skeleton } from "antd"
import { UserBadges } from "components"
import "./details.less"
import { Icons } from "components/Icons"
import "./details.less"
function getJoinLabel(jsDate) {
const date = DateTime.fromJSDate(new Date(jsDate))
@ -16,6 +18,38 @@ function getJoinLabel(jsDate) {
return `${month} ${year}`
}
const DroppableField = (props) => {
const [collapsed, setCollapsed] = React.useState(true)
return <div
className={classnames(
"droppableField",
{
["collapsed"]: collapsed
}
)}
>
<div className="collapse_btn" onClick={() => setCollapsed(!collapsed)}>
{
collapsed
? <Icons.ChevronDown />
: <Icons.ChevronUp />
}
</div>
<div className="inline_field">
{
props.header
}
</div>
<div className="field_body">
{
props.children
}
</div>
</div>
}
export default (props) => {
return <div id="details" className="details">
{
@ -88,26 +122,28 @@ export default (props) => {
</div>
</div>
<div className="inline_field">
<div className="field_header">
<div className="field_icon">
<Icons.Award />
<DroppableField
header={<>
<div className="field_header">
<div className="field_icon">
<Icons.Award />
</div>
<span>
Badges collected
</span>
</div>
<span>
Badges collected
</span>
</div>
<div className="field_value">
<p>
{props.state.user?.badges.length}
</p>
</div>
</div>
<React.Suspense fallback={<Skeleton />}>
<UserBadges user_id={props.state.user?._id} />
</React.Suspense>
<div className="field_value">
<p>
{props.state.user?.badges.length}
</p>
</div>
</>}
>
<React.Suspense fallback={<Skeleton />}>
<UserBadges user_id={props.state.user?._id} />
</React.Suspense>
</DroppableField>
</div>
}

53
packages/app/src/pages/account/tabs/details.less
View File

@ -66,6 +66,7 @@
font-size: 1rem;
svg {
color: var(--text-color);
margin: 0;
}
}
@ -73,6 +74,58 @@
.field_value {
font-family: "DM Mono", monospace;
user-select: text;
}
}
}
.droppableField {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
background-color: var(--background-color-primary);
border-radius: 12px;
transition: all 150ms ease-in-out;
&.collapsed {
.field_body {
height: 0;
opacity: 0;
padding: 0;
pointer-events: none;
}
}
.inline_field {
margin-left: 20px;
}
.field_body {
display: flex;
flex-direction: column;
padding: 10px;
transition: all 150ms ease-in-out;
}
.collapse_btn {
position: absolute;
top: 0;
left: 0;
transform: translate(100%, 90%);
svg {
color: var(--text-color);
margin: 0 !important;
}
}
}