mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-27 15:22:56 +08:00
seperate styles
This commit is contained in:
AykutSarac
parent
53997c7568
commit
08c9553119
@ -1,14 +1,11 @@
|
||||
import React from "react";
|
||||
import Head from "next/head";
|
||||
import { useRouter } from "next/router";
|
||||
import styled from "styled-components";
|
||||
import SplitPane from "react-split-pane";
|
||||
|
||||
import { Button } from "src/components/Button";
|
||||
import { defaultJson } from "src/constants/data";
|
||||
import dynamic from "next/dynamic";
|
||||
import { LiveEditor } from "src/containers/LiveEditor";
|
||||
import { Loading } from "src/components/Loading";
|
||||
import { Incompatible } from "src/containers/Incompatible";
|
||||
import * as Styles from "src/pages/editor/styles";
|
||||
|
||||
const JsonEditor = dynamic(() => import("src/containers/JsonEditor"), {
|
||||
ssr: false,
|
||||
@ -20,116 +17,8 @@ const Sidebar = dynamic(() => import("src/components/Sidebar"), {
|
||||
loading: () => <Loading message="Loading Sidebar..." />,
|
||||
});
|
||||
|
||||
const StyledPageWrapper = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
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;
|
||||
|
||||
button {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "Uh, oh!";
|
||||
font-weight: 700;
|
||||
font-size: 60px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledEditorWrapper = styled.div`
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@media only screen and (max-width: 568px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledTools = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 15px;
|
||||
border-bottom: 1px solid ${({ theme }) => theme.BLACK};
|
||||
padding: 4px 16px;
|
||||
background: ${({ theme }) => theme.BLACK_SECONDARY};
|
||||
color: ${({ theme }) => theme.SILVER};
|
||||
`;
|
||||
|
||||
const StyledEditor = styled(SplitPane)`
|
||||
position: relative !important;
|
||||
display: flex;
|
||||
background: ${({ theme }) => theme.BLACK_LIGHT};
|
||||
height: calc(100vh - 26px) !important;
|
||||
|
||||
.Resizer {
|
||||
background: #000;
|
||||
opacity: 0.2;
|
||||
box-sizing: border-box;
|
||||
background-clip: padding-box;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.Resizer:hover {
|
||||
transition: all 2s ease;
|
||||
}
|
||||
|
||||
.Resizer.horizontal {
|
||||
height: 11px;
|
||||
margin: -5px 0;
|
||||
border-top: 5px solid rgba(255, 255, 255, 0);
|
||||
border-bottom: 5px solid rgba(255, 255, 255, 0);
|
||||
cursor: row-resize;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Resizer.horizontal:hover {
|
||||
border-top: 5px solid rgba(0, 0, 0, 0.5);
|
||||
border-bottom: 5px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.Resizer.vertical {
|
||||
width: 16px;
|
||||
margin: 0 -5px;
|
||||
border-left: 5px solid rgba(255, 255, 255, 0);
|
||||
border-right: 5px solid rgba(255, 255, 255, 0);
|
||||
cursor: col-resize;
|
||||
z-index: 0 !important;
|
||||
}
|
||||
|
||||
.Resizer.vertical:hover {
|
||||
border-left: 5px solid rgba(0, 0, 0, 0.5);
|
||||
border-right: 5px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.Resizer.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.Resizer.disabled:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
`;
|
||||
|
||||
const Editor: React.FC = () => {
|
||||
const [json, setJson] = React.useState(JSON.stringify(defaultJson));
|
||||
const route = useRouter();
|
||||
|
||||
React.useEffect(() => {
|
||||
const jsonStored = localStorage.getItem("json");
|
||||
@ -137,30 +26,27 @@ const Editor: React.FC = () => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<StyledPageWrapper>
|
||||
<>
|
||||
<Head>
|
||||
<title>Editor | JSON Visio</title>
|
||||
</Head>
|
||||
<Sidebar setJson={setJson} />
|
||||
<StyledEditorWrapper>
|
||||
<StyledTools></StyledTools>
|
||||
<StyledEditor
|
||||
maxSize={800}
|
||||
minSize={300}
|
||||
defaultSize={450}
|
||||
split="vertical"
|
||||
>
|
||||
<JsonEditor json={json} setJson={setJson} />
|
||||
<LiveEditor json={json} setJson={setJson} />
|
||||
</StyledEditor>
|
||||
</StyledEditorWrapper>
|
||||
<StyledIncompatible>
|
||||
This app is not compatible with your device!
|
||||
<Button className="incompatible" onClick={() => route.push("/")}>
|
||||
Go Back
|
||||
</Button>
|
||||
</StyledIncompatible>
|
||||
</StyledPageWrapper>
|
||||
<Styles.StyledPageWrapper>
|
||||
<Sidebar setJson={setJson} />
|
||||
<Styles.StyledEditorWrapper>
|
||||
<Styles.StyledTools></Styles.StyledTools>
|
||||
<Styles.StyledEditor
|
||||
maxSize={800}
|
||||
minSize={300}
|
||||
defaultSize={450}
|
||||
split="vertical"
|
||||
>
|
||||
<JsonEditor json={json} setJson={setJson} />
|
||||
<LiveEditor json={json} setJson={setJson} />
|
||||
</Styles.StyledEditor>
|
||||
</Styles.StyledEditorWrapper>
|
||||
<Incompatible />
|
||||
</Styles.StyledPageWrapper>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
80
src/pages/editor/styles.tsx
Normal file
80
src/pages/editor/styles.tsx
Normal file
@ -0,0 +1,80 @@
|
||||
import SplitPane from "react-split-pane";
|
||||
import styled from "styled-components";
|
||||
|
||||
export const StyledPageWrapper = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
export const StyledEditorWrapper = styled.div`
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@media only screen and (max-width: 568px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledTools = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 15px;
|
||||
border-bottom: 1px solid ${({ theme }) => theme.BLACK};
|
||||
padding: 4px 16px;
|
||||
background: ${({ theme }) => theme.BLACK_SECONDARY};
|
||||
color: ${({ theme }) => theme.SILVER};
|
||||
`;
|
||||
|
||||
export const StyledEditor = styled(SplitPane)`
|
||||
position: relative !important;
|
||||
display: flex;
|
||||
background: ${({ theme }) => theme.BLACK_LIGHT};
|
||||
height: calc(100vh - 26px) !important;
|
||||
|
||||
.Resizer {
|
||||
background: #000;
|
||||
opacity: 0.2;
|
||||
box-sizing: border-box;
|
||||
background-clip: padding-box;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.Resizer:hover {
|
||||
transition: all 2s ease;
|
||||
}
|
||||
|
||||
.Resizer.horizontal {
|
||||
height: 11px;
|
||||
margin: -5px 0;
|
||||
border-top: 5px solid rgba(255, 255, 255, 0);
|
||||
border-bottom: 5px solid rgba(255, 255, 255, 0);
|
||||
cursor: row-resize;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Resizer.horizontal:hover {
|
||||
border-top: 5px solid rgba(0, 0, 0, 0.5);
|
||||
border-bottom: 5px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.Resizer.vertical {
|
||||
width: 16px;
|
||||
margin: 0 -5px;
|
||||
border-left: 5px solid rgba(255, 255, 255, 0);
|
||||
border-right: 5px solid rgba(255, 255, 255, 0);
|
||||
cursor: col-resize;
|
||||
z-index: 0 !important;
|
||||
}
|
||||
|
||||
.Resizer.vertical:hover {
|
||||
border-left: 5px solid rgba(0, 0, 0, 0.5);
|
||||
border-right: 5px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.Resizer.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.Resizer.disabled:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
`;
|
||||
Loading…
x
Reference in New Issue
Block a user