From aa75f7449697a3830749512786c94636828319d5 Mon Sep 17 00:00:00 2001 From: AykutSarac Date: Tue, 30 Aug 2022 14:16:43 +0300 Subject: [PATCH 1/4] fix incompatible device warning --- src/containers/Incompatible/index.tsx | 1 + src/pages/Editor/index.tsx | 4 ---- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/containers/Incompatible/index.tsx b/src/containers/Incompatible/index.tsx index 582fe7ccddc..bcd91a8f007 100644 --- a/src/containers/Incompatible/index.tsx +++ b/src/containers/Incompatible/index.tsx @@ -18,6 +18,7 @@ export const StyledIncompatible = styled.div` height: 100vh; justify-content: center; align-items: center; + z-index: 200; button { margin-top: 60px; diff --git a/src/pages/Editor/index.tsx b/src/pages/Editor/index.tsx index d4030683c94..6311ed92c2a 100644 --- a/src/pages/Editor/index.tsx +++ b/src/pages/Editor/index.tsx @@ -13,10 +13,6 @@ export const StyledPageWrapper = styled.div` export const StyledEditorWrapper = styled.div` width: 100%; overflow: hidden; - - @media only screen and (max-width: 568px) { - display: none; - } `; const EditorPage: React.FC = () => { From 50f803d0180c650b243e47f584ee68ab382c3f4a Mon Sep 17 00:00:00 2001 From: AykutSarac Date: Tue, 30 Aug 2022 15:39:06 +0300 Subject: [PATCH 2/4] add mobile support --- src/components/Sidebar/index.tsx | 56 ++++++++++++++++++++++++--- src/components/Tooltip/index.tsx | 9 ++++- src/constants/globalStyle.ts | 1 + src/containers/Editor/Panes.tsx | 13 ++++--- src/containers/Editor/Tools.tsx | 5 ++- src/containers/Home/index.tsx | 7 +--- src/containers/Incompatible/index.tsx | 47 ---------------------- src/pages/Editor/index.tsx | 11 +++++- 8 files changed, 80 insertions(+), 69 deletions(-) delete mode 100644 src/containers/Incompatible/index.tsx diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx index 21361e29120..95e7305935d 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -12,6 +12,7 @@ import { AiOutlineSave, AiOutlineFileAdd, AiOutlineLink, + AiOutlineEdit, } from "react-icons/ai"; import { Tooltip } from "src/components/Tooltip"; @@ -23,7 +24,7 @@ import useConfig from "src/hooks/store/useConfig"; import { getNextLayout } from "src/containers/Editor/LiveEditor/helpers"; import { HiHeart } from "react-icons/hi"; import shallow from "zustand/shallow"; -import { IoAlertCircleSharp } from "react-icons/io5"; +import { MdCenterFocusWeak } from "react-icons/md"; const StyledSidebar = styled.div` display: flex; @@ -34,6 +35,11 @@ const StyledSidebar = styled.div` background: ${({ theme }) => theme.BACKGROUND_TERTIARY}; padding: 4px; border-right: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT}; + + @media only screen and (max-width: 568px) { + flex-direction: row; + width: 100%; + } `; const StyledElement = styled.div<{ beta?: boolean }>` @@ -80,6 +86,26 @@ const StyledTopWrapper = styled.nav` & > div:nth-child(n + 1) { border-bottom: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT}; } + + .mobile { + display: none; + } + + @media only screen and (max-width: 568px) { + flex-direction: row; + + & > div:nth-child(n + 1) { + border-bottom: none; + } + + .mobile { + display: initial; + } + + .desktop { + display: none; + } + } `; const StyledBottomWrapper = styled.nav` @@ -93,6 +119,10 @@ const StyledBottomWrapper = styled.nav` a:nth-child(0) { border-top: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT}; } + + @media only screen and (max-width: 568px) { + display: none; + } `; const StyledLogo = styled.div` @@ -109,13 +139,14 @@ function rotateLayout(layout: CanvasDirection) { export const Sidebar: React.FC = () => { const getJson = useConfig((state) => state.getJson); const setConfig = useConfig((state) => state.setConfig); + const centerView = useConfig((state) => state.centerView); const [uploadVisible, setUploadVisible] = React.useState(false); const [clearVisible, setClearVisible] = React.useState(false); const [shareVisible, setShareVisible] = React.useState(false); const { push } = useRouter(); - const [expand, layout] = useConfig( - (state) => [state.expand, state.layout], + const [expand, layout, hideEditor] = useConfig( + (state) => [state.expand, state.layout, state.hideEditor], shallow ); @@ -149,6 +180,11 @@ export const Sidebar: React.FC = () => { + + setConfig("hideEditor", !hideEditor)}> + + + setUploadVisible(true)}> @@ -159,7 +195,15 @@ export const Sidebar: React.FC = () => { - + + + + + + { {expand ? : } - + @@ -177,7 +221,7 @@ export const Sidebar: React.FC = () => { - + setShareVisible(true)}> diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx index e9fff30e8b8..fa8b53ff1a1 100644 --- a/src/components/Tooltip/index.tsx +++ b/src/components/Tooltip/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import styled from "styled-components"; -interface TooltipProps { +interface TooltipProps extends React.ComponentPropsWithoutRef<"div"> { title?: string; } @@ -41,6 +41,10 @@ const StyledTooltip = styled.div<{ visible: boolean }>` border-color: transparent ${({ theme }) => theme.BACKGROUND_PRIMARY} transparent transparent; } + + @media only screen and (max-width: 568px) { + display: none; + } `; const StyledChildren = styled.div``; @@ -48,11 +52,12 @@ const StyledChildren = styled.div``; export const Tooltip: React.FC> = ({ children, title, + ...props }) => { const [visible, setVisible] = React.useState(false); return ( - + {title && {title}} import("src/containers/Editor/LiveEditor"), { const Panes: React.FC = () => { const hideEditor = useConfig((state) => state.hideEditor); + const isMobile = window.innerWidth <= 568; return ( - + - + diff --git a/src/containers/Editor/Tools.tsx b/src/containers/Editor/Tools.tsx index 0d1b61a36dc..5431986e10b 100644 --- a/src/containers/Editor/Tools.tsx +++ b/src/containers/Editor/Tools.tsx @@ -25,8 +25,11 @@ export const StyledTools = styled.div` padding: 4px 16px; background: ${({ theme }) => theme.BACKGROUND_PRIMARY}; color: ${({ theme }) => theme.SILVER}; - box-shadow: 0 1px 0px ${({ theme }) => theme.BACKGROUND_TERTIARY}; + + @media only screen and (max-width: 568px) { + display: none; + } `; const StyledToolElement = styled.button` diff --git a/src/containers/Home/index.tsx b/src/containers/Home/index.tsx index fd4fd60210c..8aaf6155e92 100644 --- a/src/containers/Home/index.tsx +++ b/src/containers/Home/index.tsx @@ -60,11 +60,8 @@ const Home: React.FC = () => { Paste - Import - Fetch! - window.location.replace("/editor")} - disabled={isMobile} - > - {isMobile ? "Incompatible Device" : "GO TO EDITOR"} + window.location.replace("/editor")}> + GO TO EDITOR {!isMobile && ( diff --git a/src/containers/Incompatible/index.tsx b/src/containers/Incompatible/index.tsx deleted file mode 100644 index bcd91a8f007..00000000000 --- a/src/containers/Incompatible/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { useRouter } from "next/router"; -import React from "react"; -import { Button } from "src/components/Button"; -import styled from "styled-components"; - -export const StyledIncompatible = styled.div` - display: none; - - @media only screen and (max-width: 568px) { - position: fixed; - top: 0; - left: 0; - display: flex; - flex-direction: column; - background: ${({ theme }) => theme.BLACK_LIGHT}; - color: ${({ theme }) => theme.SILVER}; - width: 100%; - height: 100vh; - justify-content: center; - align-items: center; - z-index: 200; - - button { - margin-top: 60px; - } - - &::before { - content: "Uh, oh!"; - font-weight: 600; - font-size: 60px; - opacity: 0.6; - } - } -`; - -export const Incompatible: React.FC = () => { - const { push } = useRouter(); - - return ( - - This app is not compatible with your device! - - - ); -}; diff --git a/src/pages/Editor/index.tsx b/src/pages/Editor/index.tsx index 6311ed92c2a..66874bb71df 100644 --- a/src/pages/Editor/index.tsx +++ b/src/pages/Editor/index.tsx @@ -3,15 +3,23 @@ import Head from "next/head"; import styled from "styled-components"; import Panes from "src/containers/Editor/Panes"; import { Sidebar } from "src/components/Sidebar"; -import { Incompatible } from "src/containers/Incompatible"; export const StyledPageWrapper = styled.div` display: flex; + flex-direction: row; height: 100vh; + width: 100%; + + @media only screen and (max-width: 568px) { + position: fixed; + height: -webkit-fill-available; + flex-direction: column; + } `; export const StyledEditorWrapper = styled.div` width: 100%; + height: 100%; overflow: hidden; `; @@ -30,7 +38,6 @@ const EditorPage: React.FC = () => { - ); From b7e365dc24f07488631df613d5ef10111b3d30e0 Mon Sep 17 00:00:00 2001 From: AykutSarac Date: Tue, 30 Aug 2022 15:46:14 +0300 Subject: [PATCH 3/4] update producthunt links --- README.md | 2 +- src/components/Producthunt/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a9ffb717df3..108afaa3ab2 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@

Simple json visualization tool for your data.

- JSON Crack - Simple visualization tool for your JSON data. | Product Hunt + JSON Crack - Simple visualization tool for your JSON data. | Product Hunt

diff --git a/src/components/Producthunt/index.tsx b/src/components/Producthunt/index.tsx index 035793dec50..4ec0798a16d 100644 --- a/src/components/Producthunt/index.tsx +++ b/src/components/Producthunt/index.tsx @@ -16,7 +16,7 @@ export const Producthunt = () => { return ( From ef1b9fb6f645a132b04a262bea9b787ac0829e42 Mon Sep 17 00:00:00 2001 From: AykutSarac Date: Tue, 30 Aug 2022 15:48:38 +0300 Subject: [PATCH 4/4] update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ab73cdbf397..3bac0d48fb7 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "json-crack", "private": true, - "version": "v2.0.0", + "version": "v2.0.1", "author": "https://github.com/AykutSarac", "homepage": "https://jsoncrack.com", "scripts": {