Skip to content

Commit

Permalink
More tweaks for the post page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattwoberts
mattwoberts committed Jan 29, 2025
1 parent e232051 commit 0fbce8d
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 52 deletions.
4 changes: 4 additions & 0 deletions public/assets/styles/utility/text.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,10 @@ pre:last-child {
font-size: get("font.size.lg");
}

.text-2xl {
font-size: get("font.size.2xl");
}

.text-category {
font-size: get("font.size.xs");
font-weight: get("font.weight.semibold");
Expand Down
29 changes: 10 additions & 19 deletions public/components/ShowPostResponse.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@ import HeroIconCheck from "@fider/assets/images/heroicons-check-circle.svg"
import HeroIconSparkles from "@fider/assets/images/heroicons-sparkles-outline.svg"
import HeroIconThumbsUp from "@fider/assets/images/heroicons-thumbsup.svg"
import HeroIconThumbsDown from "@fider/assets/images/heroicons-thumbsdown.svg"
import { t } from "@lingui/macro"

import { HStack } from "./layout"
import { HStack, VStack } from "./layout"
import { timeSince } from "@fider/services"

interface PostResponseProps {
Expand All @@ -18,36 +16,29 @@ interface PostResponseProps {

export const ResponseDetails = (props: PostResponseProps): JSX.Element | null => {
const status = PostStatus.Get(props.status)
const id = `enum.poststatus.${status.value}`
const statusLabel = t({ id, message: status.title })

if (!props.response || status === PostStatus.Open) {
return null
}

const title = t({
id: "showpost.response.date",
message: "Status changed to {status} on {statusDate}",
values: { status: statusLabel, statusDate: timeSince("en", new Date(), props.response.respondedAt, "date") },
})

return (
<div className="bg-blue-50 p-2 border border-blue-200 rounded">
<div>{title}</div>
<VStack align="start" spacing={4} className="bg-blue-50 p-3 border border-blue-200 rounded">
<ResponseLozenge response={props.response} status={props.status} />
<div className="text-semibold text-lg">{timeSince("en", new Date(), props.response.respondedAt, "date")}</div>
{props.response?.text && status !== PostStatus.Duplicate && (
<div className="content pt-1">
<div className="content">
<Markdown text={props.response.text} style="full" />
</div>
)}

{status === PostStatus.Duplicate && props.response.original && (
<div className="content pt-1">
<div className="content">
<a className="text-link" href={`/posts/${props.response.original.number}/${props.response.original.slug}`}>
{props.response.original.title}
</a>
</div>
)}
</div>
</VStack>
)
}

Expand Down Expand Up @@ -75,11 +66,11 @@ export const ResponseLozenge = (props: PostResponseProps): JSX.Element | null =>
}

return (
<>
<HStack align="start" className={`align-self-start ${color} ${bg} border ${border} rounded-full p-1 px-3`}>
<div>
<HStack align="start" className={`${color} ${bg} border ${border} rounded-full p-1 px-3`}>
<Icon sprite={icon} className={`h-5 c-status-col--${status.value}`} />
<span className={`text-semibold c-status-col--${status.value}`}>{status.title}</span>
</HStack>
</>
</div>
)
}
56 changes: 29 additions & 27 deletions public/pages/ShowPost/ShowPost.page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { actions, clearUrlHash, Failure, Fider, notify, timeAgo } from "@fider/s
import IconDotsHorizontal from "@fider/assets/images/heroicons-dots-horizontal.svg"

import {
ResponseLozenge,
ResponseDetails,
Button,
UserName,
Expand Down Expand Up @@ -193,23 +192,17 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
<VStack spacing={8}>
<HStack justify="between">
<VStack align="start">
{this.props.post.status !== "open" && (
<div className="mb-4">
<ResponseLozenge status={this.props.post.status} response={this.props.post.response} />
</div>
{!this.state.editMode && (
<HStack>
<Avatar user={this.props.post.user} />
<VStack spacing={1}>
<UserName user={this.props.post.user} />
<Moment className="text-muted" locale={Fider.currentLocale} date={this.props.post.createdAt} />
</VStack>
</HStack>
)}
<div className="flex-grow">
{this.state.editMode ? (
<Form error={this.state.error}>
<Input field="title" maxLength={100} value={this.state.newTitle} onChange={this.setNewTitle} />
</Form>
) : (
<>
<h1 className="text-large">{this.props.post.title}</h1>
</>
)}
</div>
</VStack>

{!this.state.editMode && (
<Dropdown position="left" renderHandle={<Icon sprite={IconDotsHorizontal} width="24" height="24" />}>
<Dropdown.ListItem onClick={this.onActionSelected("copy")}>
Expand All @@ -235,21 +228,28 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
</Dropdown>
)}
</HStack>
<ResponseDetails status={this.props.post.status} response={this.props.post.response} />

{/* {this.props.post.status !== "open" && (
<div className="mb-4">
<ResponseLozenge status={this.props.post.status} response={this.props.post.response} />
</div>
)} */}
<div className="flex-grow">
{this.state.editMode ? (
<Form error={this.state.error}>
<Input field="title" maxLength={100} value={this.state.newTitle} onChange={this.setNewTitle} />
</Form>
) : (
<>
<h1 className="text-large">{this.props.post.title}</h1>
</>
)}
</div>

<DeletePostModal onModalClose={() => this.setShowDeleteModal(false)} showModal={this.state.showDeleteModal} post={this.props.post} />
{Fider.session.isAuthenticated && Fider.session.user.isCollaborator && (
<ResponseModal onCloseModal={() => this.setShowResponseModal(false)} showModal={this.state.showResponseModal} post={this.props.post} />
)}
{!this.state.editMode && (
<HStack>
<Avatar user={this.props.post.user} />
<VStack spacing={1}>
<UserName user={this.props.post.user} />
<Moment className="text-muted" locale={Fider.currentLocale} date={this.props.post.createdAt} />
</VStack>
</HStack>
)}
<VStack>
{this.state.editMode ? (
<Form error={this.state.error}>
Expand All @@ -276,7 +276,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho

<VStack spacing={4}>
{!this.state.editMode ? (
<HStack justify="between">
<HStack justify="between" align="start">
<VoteSection post={this.props.post} votes={this.props.votes} />
<FollowButton post={this.props.post} subscribed={this.props.subscribed} />
</HStack>
Expand All @@ -298,6 +298,8 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
)}
<div className="border-4 border-blue-500" />
</VStack>

<ResponseDetails status={this.props.post.status} response={this.props.post.response} />
</VStack>
</div>

Expand Down
10 changes: 4 additions & 6 deletions public/pages/ShowPost/components/VoteSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,13 +59,11 @@ export const VoteSection = (props: VoteSectionProps) => {
</HStack>
</Button>
</div>
<HStack>
<span className="text-display">
{votes.length} {votes.length === 1 ? "Vote" : "Votes"}
<HStack align="center">
<span className="text-semibold text-2xl" style={{ fontSize: "32px", minHeight: "48px" }}>
{votes.length}
</span>
{/* <div className="pl-4">
<VotesPanel post={post} votes={votes} hideTitle={true} />
</div> */}
<span className="text-semibold text-lg">{votes.length === 1 ? "Vote" : "Votes"}</span>
</HStack>
</VStack>
)
Expand Down

0 comments on commit 0fbce8d

Please sign in to comment.