From 2673722af70b0a5e323e2baa6e6b812d13747678 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sat, 12 Oct 2019 18:35:02 +0700 Subject: [PATCH] added date --- package-lock.json | 11 ----------- .../containers/CommentWrapper/styles.scss | 2 ++ src/components/node/Comment/index.tsx | 4 +++- src/components/node/Comment/styles.scss | 13 ++++++++++++- src/components/node/CommentForm/styles.scss | 4 ++-- src/styles/variables.scss | 2 ++ src/utils/dom.ts | 5 +++++ 7 files changed, 26 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 14ef7a9b..4cffdd1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -963,12 +963,6 @@ "integrity": "sha512-cS5owqtwzLN5kY+l+KgKdRJ/Cee8tlmQoGQuIE9tWnSmS3JMKzmxo2HIAk2wODMifGwO20d62xZQLYz+RLfXmw==", "dev": true }, - "@types/howler": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@types/howler/-/howler-2.1.1.tgz", - "integrity": "sha512-YLwc9L853r85WqZk4xCiROGGodmlAYlKb0rQWABt4opLd6QHn2QLXIApa6vRNqjZxkzbiPs6eZskaRGOw5fDAA==", - "dev": true - }, "@types/json-schema": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.3.tgz", @@ -7337,11 +7331,6 @@ "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz", "integrity": "sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg==" }, - "howler": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/howler/-/howler-2.1.2.tgz", - "integrity": "sha512-oKrTFaVXsDRoB/jik7cEpWKTj7VieoiuzMYJ7E/EU5ayvmpRhumCv3YQ3823zi9VTJkSWAhbryHnlZAionGAJg==" - }, "hpack.js": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", diff --git a/src/components/containers/CommentWrapper/styles.scss b/src/components/containers/CommentWrapper/styles.scss index ed45802b..f5d073e8 100644 --- a/src/components/containers/CommentWrapper/styles.scss +++ b/src/components/containers/CommentWrapper/styles.scss @@ -2,6 +2,8 @@ background: $comment_bg; min-height: $comment_height; display: flex; + position: relative; + box-shadow: none; // box-shadow: $comment_shadow; &:global(.is_empty) { diff --git a/src/components/node/Comment/index.tsx b/src/components/node/Comment/index.tsx index 6983ec56..f5406a55 100644 --- a/src/components/node/Comment/index.tsx +++ b/src/components/node/Comment/index.tsx @@ -2,7 +2,7 @@ import React, { FC, HTMLAttributes, useMemo } from 'react'; import { CommentWrapper } from '~/components/containers/CommentWrapper'; import { IComment, IFile } from '~/redux/types'; import * as styles from './styles.scss'; -import { formatCommentText, getURL } from '~/utils/dom'; +import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom'; import { Group } from '~/components/containers/Group'; import assocPath from 'ramda/es/assocPath'; import append from 'ramda/es/append'; @@ -50,6 +50,8 @@ const Comment: FC = ({ comment, is_empty, is_same, is_loading, className /> )} +
{getPrettyDate(comment.created_at)}
+ {groupped.image && (
{groupped.image.map(file => ( diff --git a/src/components/node/Comment/styles.scss b/src/components/node/Comment/styles.scss index a66f1d28..2cee176b 100644 --- a/src/components/node/Comment/styles.scss +++ b/src/components/node/Comment/styles.scss @@ -1,19 +1,30 @@ @import 'flexbin/flexbin.scss'; .text { - @include outer_shadow(); + // @include outer_shadow(); padding: $gap; font-weight: 300; font: $font_16_regular; min-height: $comment_height; box-sizing: border-box; + position: relative; b { font-weight: 600; } } +.date { + position: absolute; + bottom: 0; + right: 0; + font: $font_12_regular; + color: transparentize($color: white, $amount: 0.8); + padding: 2px 4px; + border-radius: 0 0 $radius 0; +} + .images { @include flexbin(240px, 5px); diff --git a/src/components/node/CommentForm/styles.scss b/src/components/node/CommentForm/styles.scss index dc99d1cc..622ed74a 100644 --- a/src/components/node/CommentForm/styles.scss +++ b/src/components/node/CommentForm/styles.scss @@ -9,7 +9,7 @@ .input { flex: 1; - padding: $gap / 2; + padding: ($gap / 2) ($gap / 2 + 1px); } .buttons { @@ -24,5 +24,5 @@ fill: transparentize(white, 0.9); } - @include outer_shadow(); + // @include outer_shadow(); } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 9bc1c575..834d1937 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -48,6 +48,8 @@ $font_12_semibold: $semibold 12px $font; $font_12_regular: $regular 12px $font; $font_10_regular: $regular 10px $font; $font_10_semibold: $semibold 10px $font; +$font_8_regular: $regular 8px $font; +$font_8_semibold: $semibold 8px $font; $font_cell_title: $font_24_bold; $font_hero_title: $font_48_semibold; diff --git a/src/utils/dom.ts b/src/utils/dom.ts index b041a5f1..b1bb0baa 100644 --- a/src/utils/dom.ts +++ b/src/utils/dom.ts @@ -1,4 +1,6 @@ import { IFile } from '~/redux/types'; +import formatDistanceToNow from 'date-fns/formatDistanceToNow'; +import { ru } from 'date-fns/locale'; export const getStyle = (oElm: any, strCssRule: string) => { if (document.defaultView && document.defaultView.getComputedStyle) { @@ -75,3 +77,6 @@ export const formatCommentText = (author, text: string) => index === 0 ? `${author ? `

${author}: ` : ''}${el}

` : `

${el}

` ) .join(''); + +export const getPrettyDate = (date: string): string => + formatDistanceToNow(new Date(date), { locale: ru, includeSeconds: true, addSuffix: true });