Skip to content

Commit 170dd69

Browse files
AlexPalazAlexPalaz
committed
feat: add new full screen overflow design
1 parent b032365 commit 170dd69

7 files changed

Lines changed: 408 additions & 355 deletions

File tree

‎src/app/App.tsx‎

Lines changed: 54 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,19 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
77
import "react-widgets/styles.css";
88
import "../assets/main.css";
99
import Editor from "./components/Editor";
10-
import Head from "./components/Head";
1110
import Layout from "./components/Layout";
1211
import WarningBox, { Warning } from "./components/WarningBox";
1312
import YamlPreview from "./components/YamlPreview";
1413
import PublicCode, {
1514
PublicCodeWithDeprecatedFields,
1615
} from "./contents/publiccode";
17-
import { getYaml } from "./lib/utils";
16+
import { getYaml, useIsMobile } from "./lib/utils";
1817
import store from "./store";
18+
import Head from "./components/Head";
1919

2020
const NOTIFICATION_TIMEOUT = 4_000;
2121
export const App = () => {
22+
const isMobile = useIsMobile();
2223
const [isLoading] = useState(false);
2324
const [isPublicCodeImported, setPublicCodeImported] = useState(false);
2425
const [warnings, setWarnings] = useState<Warning[]>([]);
@@ -27,16 +28,46 @@ export const App = () => {
2728
>();
2829
const { t } = useTranslation();
2930

31+
const leftPanel = (
32+
<div className="content__wrapper">
33+
<div className="content__head">
34+
<Head />
35+
</div>
36+
<Editor
37+
setData={(d) => setData(d)}
38+
setWarnings={setWarnings}
39+
setPublicCodeImported={setPublicCodeImported}
40+
isPublicCodeImported={isPublicCodeImported}
41+
/>
42+
</div>
43+
);
44+
45+
const rightPanel = (
46+
<div className="content__sidebar" id="content-sidebar">
47+
{warnings && (
48+
<WarningBox
49+
warnings={warnings}
50+
setWarnings={(items) => setWarnings(items as Warning[])}
51+
/>
52+
)}
53+
{data && (
54+
<YamlPreview
55+
yaml={getYaml(data as PublicCode) as string}
56+
toggle={() => console.log("toggle")}
57+
/>
58+
)}
59+
</div>
60+
);
3061
return (
3162
<Provider store={store}>
3263
{isLoading && (
33-
<div className='d-flex align-items-center col-12 position-absolute h-100 w-100'>
34-
<div className='mr-auto ml-auto'>
64+
<div className="d-flex align-items-center col-12 position-absolute h-100 w-100">
65+
<div className="mr-auto ml-auto">
3566
<h3>{t("validation.inprogress")}</h3>
3667
<div
37-
className='spinner-grow text-primary'
38-
role='status'
39-
aria-hidden='true'
68+
className="spinner-grow text-primary"
69+
role="status"
70+
aria-hidden="true"
4071
/>
4172
</div>
4273
</div>
@@ -45,7 +76,7 @@ export const App = () => {
4576
<div>
4677
<NotificationManager
4778
duration={NOTIFICATION_TIMEOUT}
48-
fix='top'
79+
fix="top"
4980
closeOnClick={false}
5081
style={{ zIndex: 10 }}
5182
/>
@@ -60,37 +91,22 @@ export const App = () => {
6091
warnings={warnings}
6192
setWarnings={setWarnings}
6293
/> */}
63-
<div>
94+
{/* <div>
6495
<Head />
65-
</div>
66-
<div className='container-xxl content mt-4'>
67-
<PanelGroup direction='horizontal'>
68-
<Panel defaultSize={35}>
69-
<Editor
70-
setData={(d) => setData(d)}
71-
setWarnings={setWarnings}
72-
setPublicCodeImported={setPublicCodeImported}
73-
isPublicCodeImported={isPublicCodeImported}
74-
/>
75-
</Panel>
76-
<PanelResizeHandle className="panel-resize-handle" />
77-
<Panel defaultSize={25}>
78-
<div className='content__sidebar' id='content-sidebar'>
79-
{warnings && (
80-
<WarningBox
81-
warnings={warnings}
82-
setWarnings={(items) => setWarnings(items as Warning[])}
83-
/>
84-
)}
85-
{data && (
86-
<YamlPreview
87-
yaml={getYaml(data as PublicCode) as string}
88-
toggle={() => console.log("toggle")}
89-
/>
90-
)}
91-
</div>
92-
</Panel>
93-
</PanelGroup>
96+
</div> */}
97+
<div className="content">
98+
{isMobile ? (
99+
<div className="content__mobile">
100+
{leftPanel}
101+
{rightPanel}
102+
</div>
103+
) : (
104+
<PanelGroup direction="horizontal">
105+
<Panel defaultSize={100}>{leftPanel}</Panel>
106+
<PanelResizeHandle className="panel-resize-handle" />
107+
<Panel defaultSize={80}>{rightPanel}</Panel>
108+
</PanelGroup>
109+
)}
94110
</div>
95111
</div>
96112
</Layout>

0 commit comments

Comments
 (0)