diff --git a/ui/package.json b/ui/package.json index 08443b14b..0d30805d0 100644 --- a/ui/package.json +++ b/ui/package.json @@ -22,7 +22,7 @@ "inferno-router": "^7.0.1", "js-cookie": "^2.2.0", "jwt-decode": "^2.2.0", - "moment": "^2.22.2", + "moment": "^2.24.0", "rxjs": "^6.4.0" }, "devDependencies": { diff --git a/ui/src/components/create-post.tsx b/ui/src/components/create-post.tsx index 3d5dceda3..2a39e96c6 100644 --- a/ui/src/components/create-post.tsx +++ b/ui/src/components/create-post.tsx @@ -4,6 +4,7 @@ import { retryWhen, delay, take } from 'rxjs/operators'; import { PostForm, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse } from '../interfaces'; import { WebSocketService, UserService } from '../services'; import { msgOp } from '../utils'; +import { MomentTime } from './moment-time'; interface State { postForm: PostForm; diff --git a/ui/src/components/moment-time.tsx b/ui/src/components/moment-time.tsx new file mode 100644 index 000000000..e0886cbc2 --- /dev/null +++ b/ui/src/components/moment-time.tsx @@ -0,0 +1,28 @@ +import { Component, linkEvent } from 'inferno'; +import * as moment from 'moment'; + +interface MomentTimeProps { + data: { + published: string; + updated?: string; + } +} + +export class MomentTime extends Component<MomentTimeProps, any> { + + constructor(props, context) { + super(props, context); + } + + render() { + if (this.props.data.updated) { + return ( + <span className="font-italics">modified {moment.utc(this.props.data.updated).fromNow()}</span> + ) + } else { + return ( + <span>{moment.utc(this.props.data.published).fromNow()}</span> + ) + } + } +} diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx index 5e383c09c..867e1a4a4 100644 --- a/ui/src/components/post.tsx +++ b/ui/src/components/post.tsx @@ -4,6 +4,7 @@ import { retryWhen, delay, take } from 'rxjs/operators'; import { UserOperation, Community, Post as PostI, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse } from '../interfaces'; import { WebSocketService, UserService } from '../services'; import { msgOp } from '../utils'; +import { MomentTime } from './moment-time'; interface CommentNodeI { comment: Comment; @@ -74,14 +75,17 @@ export class Post extends Component<any, State> { postHeader() { let title = this.state.post.url - ? <h5><a href={this.state.post.url}>{this.state.post.name}</a></h5> + ? <h5> + <a href={this.state.post.url}>{this.state.post.name}</a> + <small><a className="ml-2 text-muted font-italic" href={this.state.post.url}>{(new URL(this.state.post.url)).hostname}</a></small> + </h5> : <h5>{this.state.post.name}</h5>; return ( <div> - {title} - via {this.state.post.attributed_to} X hours ago - {this.state.post.body} - </div> + <div>{title}</div> + <div>via {this.state.post.attributed_to} <MomentTime data={this.state.post} /></div> + <div>{this.state.post.body}</div> + </div> ) } @@ -90,7 +94,7 @@ export class Post extends Component<any, State> { <div class="sticky-top"> <h4>New Comments</h4> {this.state.comments.map(comment => - <CommentNodes nodes={[{comment: comment}]} /> + <CommentNodes nodes={[{comment: comment}]} noIndent /> )} </div> ) @@ -163,6 +167,7 @@ interface CommentNodesState { interface CommentNodesProps { nodes: Array<CommentNodeI>; + noIndent?: boolean; } export class CommentNodes extends Component<CommentNodesProps, CommentNodesState> { @@ -177,7 +182,7 @@ export class CommentNodes extends Component<CommentNodesProps, CommentNodesState return ( <div className="comments"> {this.props.nodes.map(node => - <div className={`comment ${node.comment.parent_id ? 'ml-4' : ''}`}> + <div className={`comment ${node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''}`}> <div className="float-left small text-center"> <div className="pointer upvote">▲</div> <div>20</div> @@ -190,14 +195,14 @@ export class CommentNodes extends Component<CommentNodesProps, CommentNodesState </li> <li className="list-inline-item"> <span>( - <span className="text-info"> +1300</span> + <span className="text-info">+1300</span> <span> | </span> <span className="text-danger">-29</span> - <span> ) points</span> + <span>) </span> </span> </li> <li className="list-inline-item"> - <span>X hours ago</span> + <span><MomentTime data={node.comment} /></span> </li> </ul> <p className="mb-0">{node.comment.content}</p> diff --git a/ui/src/index.html b/ui/src/index.html index 2a3e41981..e02660cfd 100644 --- a/ui/src/index.html +++ b/ui/src/index.html @@ -9,6 +9,7 @@ <title>rust-reddit-fediverse</title> <link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css"> + <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,800" rel="stylesheet"> </head> <body> diff --git a/ui/src/main.css b/ui/src/main.css index 30fbc8dcc..d0cb8baf8 100644 --- a/ui/src/main.css +++ b/ui/src/main.css @@ -1,5 +1,6 @@ - - +body { + font-family: 'Open Sans', sans-serif; +} .pointer { cursor: pointer; diff --git a/ui/src/utils.ts b/ui/src/utils.ts index d3d9696eb..02c1afbff 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -7,3 +7,4 @@ export function msgOp(msg: any): UserOperation { let opStr: string = msg.op; return UserOperation[opStr]; } + diff --git a/ui/yarn.lock b/ui/yarn.lock index e668e7491..ff82991bb 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -1753,7 +1753,7 @@ mkdirp@^0.5.0, mkdirp@^0.5.1: dependencies: minimist "0.0.8" -moment@^2.22.2: +moment@^2.24.0: version "2.24.0" resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b" integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==