From 365f3c0f6d309f44015cb50b349c1af8d8fe91b6 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Tue, 22 Dec 2020 19:16:15 +0100
Subject: [PATCH] fix: safari rendering issues
---
src/components/annoucements/Announcement.jsx | 6 ++--
src/components/mde/MarkdownEditor.css | 31 ++++++++++++++++++--
src/components/mde/MarkdownEditor.jsx | 4 +--
src/components/posts/Post.jsx | 8 +++--
src/utils.js | 9 ++++--
5 files changed, 47 insertions(+), 11 deletions(-)
diff --git a/src/components/annoucements/Announcement.jsx b/src/components/annoucements/Announcement.jsx
index 0852cad..728af76 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 970a2c9..a15b472 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 266cc1c..d0a9c9f 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 3a57d1e..137217f 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 a35571e..2a80f37 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,
};
--
GitLab