diff --git a/src/components/annoucements/Announcement.jsx b/src/components/annoucements/Announcement.jsx index 0852cad74098905a0bd68f0217500038ddc181ec..728af7616405a15deb6a673e64882d3a824e6fcc 100644 --- a/src/components/annoucements/Announcement.jsx +++ b/src/components/annoucements/Announcement.jsx @@ -1,7 +1,7 @@ import React, { useEffect } from "react"; import { useInView } from "react-intersection-observer"; import classNames from "classnames"; -import { format } from "date-fns"; +import { format, isToday } from "date-fns"; import Chip from "components/Chip"; import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu"; @@ -79,7 +79,9 @@ const Announcement = ({ <div className={wrapperClassName} ref={ref}> <div className="flex items-center justify-between mb-2"> <div className="space-x-2 flex items-center"> - <div className="font-bold text-sm">{format(datetime, "H:mm")}</div> + <div className="font-bold text-sm"> + {format(datetime, isToday(datetime) ? "H:mm" : "dd. MM. H:mm")} + </div> <Chip color={chipColor} condensed> {chipLabel} </Chip> diff --git a/src/components/mde/MarkdownEditor.css b/src/components/mde/MarkdownEditor.css index 970a2c9409f1b8793a59a97a7d5891fa5479d4d5..a15b4722268f4b5f8b8da7f03f04348b9092c7d5 100644 --- a/src/components/mde/MarkdownEditor.css +++ b/src/components/mde/MarkdownEditor.css @@ -19,7 +19,7 @@ } .mde-header .mde-tabs button { - padding: .5rem 1rem; + padding: .25rem 0.25rem; font-family: Bebas Neue,Helvetica,Arial,sans-serif; font-weight: 400; font-size: 1.1rem; @@ -34,6 +34,11 @@ outline: 0; } +.mde-header { + /* grey-50 */ + background-color: #f7f7f7; +} + .mde-header .mde-tabs button.selected { /* blue-300 */ background: #027da8; @@ -69,9 +74,29 @@ .mde-header ul.mde-header-group { - padding: 0 0.5rem; + padding: 0; +} + +.mde-header ul.mde-header-group:first-of-type { + padding-left: .5rem; } .mde-header ul.mde-header-group + .mde-header-group { - margin-left: .5rem; + margin-left: 0; +} + +@media (min-width: 992px) { + .mde-header .mde-tabs button { + padding: .5rem 1rem; + } +} + +@media (min-width: 1200px) { + .mde-header ul.mde-header-group { + padding: 0 0.5rem; + } + + .mde-header ul.mde-header-group + .mde-header-group { + margin-left: .5rem; + } } diff --git a/src/components/mde/MarkdownEditor.jsx b/src/components/mde/MarkdownEditor.jsx index 266cc1cb7ccfc915c83024f5c594976a1c1f210b..d0a9c9f4a958094c5d3800e9cd4c05a1c42430bb 100644 --- a/src/components/mde/MarkdownEditor.jsx +++ b/src/components/mde/MarkdownEditor.jsx @@ -17,8 +17,8 @@ const MarkdownEditor = ({ const [selectedTab, setSelectedTab] = useState("write"); const classes = { - preview: "p-2 content-block text-input", - textArea: "p-2 text-input text-base", + preview: "p-2 content-block text-input text-sm md:text-base", + textArea: "p-2 text-input text-sm md:text-base", }; const l18n = { diff --git a/src/components/posts/Post.jsx b/src/components/posts/Post.jsx index 3a57d1e219f75140f2b2e9d0084dd7d13f6663ca..137217fa64bbbebb48b20ff117a07aaa144db457 100644 --- a/src/components/posts/Post.jsx +++ b/src/components/posts/Post.jsx @@ -1,7 +1,7 @@ import React, { useEffect } from "react"; import { useInView } from "react-intersection-observer"; import classNames from "classnames"; -import { format } from "date-fns"; +import { format, isToday } from "date-fns"; import Chip from "components/Chip"; import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu"; @@ -155,7 +155,11 @@ const Post = ({ <div className="mt-1 xl:mt-0 xl:ml-2 leading-tight"> <span className="text-grey-200 text-sm">{author.group}</span> <span className="text-grey-200 ml-1 text-sm"> - @ {format(datetime, "H:mm")} + @{" "} + {format( + datetime, + isToday(datetime) ? "H:mm" : "dd. MM. H:mm" + )} {modified && ( <span className="text-grey-200 text-sm block md:inline md:ml-2 underline"> (upraveno) diff --git a/src/utils.js b/src/utils.js index a35571edb8d2ee1e42907d0f81dff022295c8ea4..2a80f37a67439a17e825df3eac284f58e9a13064 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,3 +1,4 @@ +import { parse } from "date-fns"; import filter from "lodash/filter"; import pick from "lodash/pick"; import property from "lodash/property"; @@ -123,7 +124,7 @@ export const parseRawPost = (rawPost) => { const post = { ...pick(rawPost, ["id", "content", "author"]), contentHtml: markdownConverter.makeHtml(rawPost.content), - datetime: new Date(rawPost.datetime), + datetime: parse(rawPost.datetime, "yyyy-MM-dd HH:mm:ss", new Date()), historyLog: rawPost.history_log, ranking: { dislikes: rawPost.ranking.dislikes, @@ -154,7 +155,11 @@ export const parseRawPost = (rawPost) => { export const parseRawAnnouncement = (rawAnnouncement) => { const announcement = { ...pick(rawAnnouncement, ["id", "content", "link"]), - datetime: new Date(rawAnnouncement.datetime), + datetime: parse( + rawAnnouncement.datetime, + "yyyy-MM-dd HH:mm:ss", + new Date() + ), type: announcementTypeMapping[rawAnnouncement.type], seen: false, };