From 0a54cc6f1a5ac1492013f12edaeb0600a08f3f38 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Sat, 8 Jul 2023 18:28:10 +0000 Subject: [PATCH] improve mobile mode for `account` page --- packages/app/src/pages/account/index.less | 78 ++--------- .../app/src/pages/account/index.mobile.jsx | 74 +++++++++- .../app/src/pages/account/index.mobile.less | 6 +- .../app/src/pages/account/tabs/details.jsx | 129 +++++++++++++----- .../app/src/pages/account/tabs/details.less | 78 +++++++++++ .../app/src/pages/account/tabs/followers.jsx | 2 + .../app/src/pages/account/tabs/followers.less | 3 + packages/app/src/pages/index.jsx | 6 + 8 files changed, 272 insertions(+), 104 deletions(-) create mode 100644 packages/app/src/pages/account/tabs/details.less create mode 100644 packages/app/src/pages/account/tabs/followers.less diff --git a/packages/app/src/pages/account/index.less b/packages/app/src/pages/account/index.less index ef83acf5..e062130b 100755 --- a/packages/app/src/pages/account/index.less +++ b/packages/app/src/pages/account/index.less @@ -2,59 +2,6 @@ @borderRadius: 12px; -#root { - &.mobile { - .accountProfile { - display: flex; - flex-direction: column; - - .panels { - display: flex; - flex-direction: column; - - .tabMenuWrapper { - position: fixed; - - top: 0px; - left: 0px; - - z-index: 300; - - width: 100%; - - height: @top_bar_height; - - padding: @top_bar_padding; - - box-shadow: @card-shadow-top; - - display: flex; - flex-direction: row; - - align-items: center; - - opacity: 0; - - .ant-menu { - display: flex; - flex-direction: row; - - .ant-menu-item { - width: fit-content; - } - } - } - } - - &.topHidden { - .tabMenuWrapper { - opacity: 1; - } - } - } - } -} - .accountProfile { display: flex; @@ -123,15 +70,18 @@ .panels { position: relative; - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: 1fr; - grid-column-gap: 20px; - grid-row-gap: 0px; + display: flex; + // grid-template-columns: repeat(3, 1fr); + // grid-template-rows: 1fr; + // grid-column-gap: 20px; + // grid-row-gap: 0px; + + gap: 20px; padding-top: 20px; height: 100%; + width: 100%; .leftPanel { position: sticky; @@ -178,6 +128,7 @@ .content { height: 100%; + width: 90%; .fade-opacity-active { height: 100%; @@ -196,19 +147,14 @@ padding: 20px; height: fit-content; - width: 20vw; - min-width: 400px; + width: fit-content; + //width: 20vw; + // min-width: 400px; justify-self: center; } } - .details { - background-color: var(--background-color-accent); - padding: 20px; - border-radius: @borderRadius; - } - .followersList { background-color: var(--background-color-accent); padding: 20px; diff --git a/packages/app/src/pages/account/index.mobile.jsx b/packages/app/src/pages/account/index.mobile.jsx index a5738c3f..975f0e3b 100644 --- a/packages/app/src/pages/account/index.mobile.jsx +++ b/packages/app/src/pages/account/index.mobile.jsx @@ -4,11 +4,12 @@ import classnames from "classnames" import { Translation } from "react-i18next" -import { createIconRender, Icons } from "components/Icons" -import { Skeleton, FollowButton, UserCard } from "components" +import { Skeleton } from "components" import { SessionModel, UserModel, FollowsModel } from "models" import { PagePanelWithNavMenu } from "components/PagePanels" +import { MobileUserCard } from "components/UserCard" + import DetailsTab from "./tabs/details" import PostsTab from "./tabs/posts" import FollowersTab from "./tabs/followers" @@ -58,6 +59,59 @@ export default class Account extends React.Component { } componentDidMount = async () => { + app.layout.toggleCenteredContent(true) + + this.loadUser() + } + + componentWillUnmount = () => { + app.layout.toggleCenteredContent(false) + } + + toggleLike = async () => { + const accept = await new Promise((resolve, reject) => { + antd.Modal.confirm({ + title: + {t => t("Confirm")} + , + content: + {t => t("Are you sure you want to unfollow this user?")} + , + okText: + {t => t("Yes")} + , + cancelText: + {t => t("No")} + , + onOk: () => { + resolve(true) + }, + onCancel: () => { + resolve(false) + } + }) + }) + + if (!accept) { + return false + } + + const result = await FollowsModel.toggleFollow({ + username: this.state.requestedUser, + }).catch((error) => { + console.error(error) + antd.message.error(error.message) + + return false + }) + + await this.setState({ + isFollowed: result.following, + followers: result.followers, + }) + } + + loadUser = async () => { const token = await SessionModel.getDecodedToken() const location = window.app.history.location const query = new URLSearchParams(location.search) @@ -137,18 +191,28 @@ export default class Account extends React.Component { "_mobile_account-profile", )} > - - {/* */} + onTabChange={() => { + app.layout.scrollTo({ + top: 0, + }) + }} + no_top_padding + /> } } \ No newline at end of file diff --git a/packages/app/src/pages/account/index.mobile.less b/packages/app/src/pages/account/index.mobile.less index ccd26813..ca7c44d7 100644 --- a/packages/app/src/pages/account/index.mobile.less +++ b/packages/app/src/pages/account/index.mobile.less @@ -1,10 +1,12 @@ +@import "theme/vars.less"; + ._mobile_account-profile { display: flex; flex-direction: column; - padding: 0 10px; - width: 100%; + padding-top: calc(@topBar_height + @top_bar_padding); + gap: 20px; } \ No newline at end of file diff --git a/packages/app/src/pages/account/tabs/details.jsx b/packages/app/src/pages/account/tabs/details.jsx index 7d7aa3ea..7c7b9e24 100755 --- a/packages/app/src/pages/account/tabs/details.jsx +++ b/packages/app/src/pages/account/tabs/details.jsx @@ -1,46 +1,113 @@ import React from "react" -import moment from "moment" +import { DateTime } from "luxon" +import { Skeleton } from "antd" +import { UserBadges } from "components" + +import "./details.less" import { Icons } from "components/Icons" -export default React.memo((props) => { +function getJoinLabel(jsDate) { + const date = DateTime.fromJSDate(new Date(jsDate)) + + const month = String(date.toLocaleString({ month: "long" })).toTitleCase() + const year = String(date.year) + + return `${month} ${year}` +} + +export default (props) => { return
{ - props.state.user.fullName && -
-

{props.state.user.fullName}

+ props.state.user.roles.includes("admin") &&
+
+
+ +
+ + + Administrators Team + +
} -
-

- @{props.state.user.username} #{props.state.user._id} -

+ +
+
+
+ +
+ + + ID + +
+ +
+

+ {props.state.user._id} +

+
- { - props.state.user.description && -
-

- {props.state.user.description} -

+ +
+
+
+ +
+ + + Followers +
- } - { - props.state.user.roles.includes("admin") && -
- Administrators Team + +
+

+ {props.state.followers.length} +

- } -
- {props.state.followers.length} Followers
- { - props.state.user?.badges.length > 0 && -
- {props.state.user?.badges.length} Badges collected + +
+
+
+ +
+ + + Joined at + +
+ +
+

+ { + getJoinLabel(Number(props.state.user.createdAt)) + } +

- } -
- Joined at {moment(new Date(Number(props.state.user.createdAt))).format("YYYY")}
+ +
+
+
+ +
+ + + Badges collected + +
+ +
+

+ {props.state.user?.badges.length} +

+
+
+ + }> + +
-}) \ No newline at end of file +} \ No newline at end of file diff --git a/packages/app/src/pages/account/tabs/details.less b/packages/app/src/pages/account/tabs/details.less new file mode 100644 index 00000000..055ee9c8 --- /dev/null +++ b/packages/app/src/pages/account/tabs/details.less @@ -0,0 +1,78 @@ +@border-radius: 12px; + +.details { + display: flex; + flex-direction: column; + + justify-content: center; + + width: 100%; + + padding: 15px; + + gap: 10px; + + background-color: var(--background-color-accent); + + border-radius: @border-radius; + + h1, + h2, + h3, + h4, + h5, + h6, + p { + margin: 0; + } + + .inline_field { + display: inline-flex; + + flex-direction: row; + align-items: center; + + justify-content: space-between; + + padding: 10px; + + background-color: var(--background-color-primary); + + border-radius: 12px; + + .field_header { + display: inline-flex; + + flex-direction: row; + align-items: center; + + gap: 8px; + + font-size: 0.8rem; + + .field_icon { + display: inline-flex; + + flex-direction: row; + align-items: center; + justify-content: center; + + background-color: var(--background-color-primary); + + border-radius: 100%; + + padding: 5px; + + font-size: 1rem; + + svg { + margin: 0; + } + } + } + + .field_value { + font-family: "DM Mono", monospace; + } + } +} \ No newline at end of file diff --git a/packages/app/src/pages/account/tabs/followers.jsx b/packages/app/src/pages/account/tabs/followers.jsx index e9c8bec7..910e382c 100755 --- a/packages/app/src/pages/account/tabs/followers.jsx +++ b/packages/app/src/pages/account/tabs/followers.jsx @@ -2,6 +2,8 @@ import React from "react" import { FollowersList } from "components" +import "./followers.less" + export default React.memo((props) => { return { + app.layout.scrollTo({ + top: 0, + }) + }} useSetQueryType transition + masked /> } } \ No newline at end of file