diff --git a/graph-ui/.eslintrc.json b/graph-ui/.eslintrc.json index bffb357..255b3af 100644 --- a/graph-ui/.eslintrc.json +++ b/graph-ui/.eslintrc.json @@ -1,3 +1,7 @@ { - "extends": "next/core-web-vitals" -} + "extends": "next/core-web-vitals", + "rules": { + // Other rules + "@next/next/no-html-link-for-pages": "off" + } +} \ No newline at end of file diff --git a/graph-ui/pages/index.tsx b/graph-ui/pages/index.tsx index 377a754..1140a76 100644 --- a/graph-ui/pages/index.tsx +++ b/graph-ui/pages/index.tsx @@ -40,6 +40,7 @@ function useWindowDimensions() { export default function Home() { return ( < div style={{ height: '100vh', width: '100vw' }}> +
); @@ -64,12 +65,37 @@ import generated from '../generated/nodes'; import Page from '../components/page'; import Section from '../components/section'; +import Head from "next/head"; const nodeTypes = { page: Page, section: Section, }; +function Header() { + useEffect(() => { + document.body.classList.add("home"); + document.body.classList.add("dark"); + }); + return ( +
+ + ByoBG + + + + +
+
+
+ ByoBG +
+
+
+ + ); +} + const NestedFlow = () => { const [nodes, setNodes, onNodesChange] = useNodesState(generated.content); const [edges, setEdges, onEdgesChange] = useEdgesState(generated.dependencies); @@ -87,7 +113,7 @@ const NestedFlow = () => { onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} - className="react-flow-subflows-example" + className="bevy-graph" defaultViewport={{ x: size.width / 3, y: size.height / 4, zoom: 1.5 }} proOptions={proOptions} edgesUpdatable={false} diff --git a/graph-ui/styles/globals.css b/graph-ui/styles/globals.css index df30cfc..8404368 100644 --- a/graph-ui/styles/globals.css +++ b/graph-ui/styles/globals.css @@ -51,4 +51,59 @@ body { background-color: #555 !important; border-bottom: 1px solid #676768 !important; color: #dddddd !important; +} + +.bevy-graph { + position: static !important; +} + + +@media (min-width: 576px) { + + .container-sm, + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + + .container-md, + .container-sm, + .container { + max-width: 720px; + } +} + +@media (min-width: 992px) { + + .container-lg, + .container-md, + .container-sm, + .container { + max-width: 960px; + } +} + +@media (min-width: 1200px) { + + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container { + max-width: 1140px; + } +} + +@media (min-width: 1400px) { + + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container { + max-width: 1320px; + } } \ No newline at end of file