From 86f6daf32168d391c820e2d5994aad21826acd89 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Sat, 8 Jul 2023 18:27:30 +0000 Subject: [PATCH] added `MobileUserCard` --- .../app/src/components/UserCard/index.jsx | 162 +++++++++++- .../app/src/components/UserCard/index.less | 239 ++++++++++++++++++ 2 files changed, 393 insertions(+), 8 deletions(-) diff --git a/packages/app/src/components/UserCard/index.jsx b/packages/app/src/components/UserCard/index.jsx index 4081d35a..5e4bf6d6 100755 --- a/packages/app/src/components/UserCard/index.jsx +++ b/packages/app/src/components/UserCard/index.jsx @@ -1,8 +1,9 @@ import React from "react" import * as antd from "antd" +import classnames from "classnames" import { Icons, createIconRender } from "components/Icons" -import { Image, UserBadges } from "components" +import { Image, UserBadges, FollowButton } from "components" import linksDecorators from "schemas/userLinksDecorators" @@ -18,6 +19,27 @@ function processValue(value, decorator) { return value } +const UserLinkViewer = (props) => { + const { link, decorator } = props + + return
+
+ { + createIconRender(decorator.icon ?? "MdLink") + } +
+ +
+

+ { + link.value + } +

+
+
+ +} + const UserLink = (props) => { let { index, link } = props @@ -31,6 +53,14 @@ const UserLink = (props) => { const handleOnClick = () => { if (!hasHref) { + if (app.isMobile) { + app.DrawerController.open("link_viewer", UserLinkViewer, { + componentProps: { + link: link, + decorator: decorator + } + }) + } return false } @@ -55,15 +85,17 @@ const UserLink = (props) => { createIconRender(decorator.icon ?? "MdLink") } -

- { - renderName() - } -

+ { + !app.isMobile &&

+ { + renderName() + } +

+ } } -export default React.forwardRef((props, ref) => { +export const UserCard = React.forwardRef((props, ref) => { const [user, setUser] = React.useState(props.user) // TODO: Support API user data fetching @@ -137,4 +169,118 @@ export default React.forwardRef((props, ref) => { } -}) \ No newline at end of file +}) + +export const MobileUserCard = React.forwardRef((props, ref) => { + return
+
+ { + props.user.cover &&
+
+ +
+
+ +
+
+
+ } + + { + !props.user.cover &&
+ +
+ } + +
+
+

+ { + props.user.fullName ?? `@${props.user.username}` + } + { + props.user.verified && + } +

+ + { + props.user.fullName && + @{props.user.username} + + } +
+ +
+

+ { + props.user.description + } +

+
+
+ + { + props.user.links + && Array.isArray(props.user.links) + && props.user.links.length > 0 + &&
+ { + props.user.links.map((link, index) => { + return + }) + } +
+ } +
+ +
+ { + props.followers && + } + + } + disabled + /> + + } + /> +
+
+}) + +export default UserCard \ No newline at end of file diff --git a/packages/app/src/components/UserCard/index.less b/packages/app/src/components/UserCard/index.less index 1e63f609..f6eef450 100755 --- a/packages/app/src/components/UserCard/index.less +++ b/packages/app/src/components/UserCard/index.less @@ -1,3 +1,5 @@ +@import "theme/vars.less"; + #root { &.mobile { .userCard { @@ -5,6 +7,211 @@ filter: none; box-shadow: none; min-width: 0; + + .avatar { + width: 20%; + height: fit-content; + } + } + } +} + +._mobile_card { + background-color: var(--background-color-accent); + + border-radius: 12px; + + box-shadow: @card-shadow; +} + +._mobile_userCard { + display: flex; + flex-direction: column; + + width: 100%; + height: fit-content; + + gap: 10px; + + &.no-cover { + ._mobile_userCard_top { + flex-direction: row; + + ._mobile_userCard_top_avatar { + padding: 10px; + } + + ._mobile_userCard_top_texts { + margin-left: 0; + } + } + } + + ._mobile_userCard_top { + position: relative; + + display: flex; + flex-direction: column; + + width: 100%; + height: auto; + + background-color: var(--background-color-accent); + + border-radius: 12px; + + box-shadow: @card-shadow; + + ._mobile_userCard_top_cover { + position: relative; + + display: flex; + flex-direction: row; + + align-items: center; + justify-content: center; + + width: 100%; + + max-height: 25vh; + + z-index: 100; + + .cover { + width: 100%; + height: 25vh; + + background-size: 100%; + background-repeat: no-repeat; + background-position: center; + + border-radius: 12px; + } + } + + ._mobile_userCard_top_avatar_wrapper { + position: absolute; + + display: flex; + flex-direction: row; + + align-items: flex-end; + + bottom: 0; + left: 0; + + padding: 0 10px; + + gap: 20px; + + z-index: 110; + + transform: translateY(80%); + } + + ._mobile_userCard_top_avatar { + display: flex; + flex-direction: row; + + align-items: center; + justify-content: center; + + width: 25vw; + height: 25vw; + + border-radius: 12px; + + img { + width: 100%; + height: 100%; + + object-fit: contain; + background-color: black; + + box-shadow: @card-shadow; + + border-radius: 12px; + } + } + + ._mobile_userCard_top_texts { + display: flex; + + flex-direction: column; + justify-content: center; + + margin-left: 30%; + padding: 10px; + padding-left: 15px; + + ._mobile_userCard_top_username { + font-family: "Space Grotesk", sans-serif; + + h1 { + color: var(--layout-background-contrast); + margin: 0; + } + + svg { + color: var(--colorPrimary) + } + + margin-bottom: 10px; + } + + ._mobile_userCard_top_description { + color: var(--text-color); + + p { + margin: 0; + } + + // max-height: 30vh; + + // overflow: hidden; + + // p { + // text-overflow: ellipsis; + // overflow: hidden; + // white-space: nowrap; + // } + } + } + } + + ._mobile_userCard_actions { + display: flex; + flex-direction: row; + + gap: 20px; + + padding: 10px; + } + + ._mobile_userCard_links { + display: flex; + flex-direction: row; + + justify-content: flex-start; + + gap: 15px; + + padding: 10px 20px; + + padding-top: 0; + + .userLink { + display: flex; + flex-direction: column; + + align-items: center; + justify-content: center; + + font-size: 1.3rem; + + p { + margin: 0; + } } } } @@ -179,4 +386,36 @@ } } } +} + +.userLinkViewer { + display: flex; + flex-direction: column; + + align-items: center; + justify-content: center; + + width: 100%; + height: fit-content; + + padding: 30px 0; + + .userLinkViewer_icon { + font-size: 3rem; + } + + .userLinkViewer_value { + font-size: 1.5rem; + font-family: "DM Mono", monospace; + + background-color: var(--background-color-accent); + + padding: 10px; + + border-radius: 12px; + + p { + margin: 0; + } + } } \ No newline at end of file