diff --git a/components/home/FactorySelect/FactorySelect.module.css b/components/home/FactorySelect/FactorySelect.module.css index 0d5fc0a..3f7a073 100644 --- a/components/home/FactorySelect/FactorySelect.module.css +++ b/components/home/FactorySelect/FactorySelect.module.css @@ -1,3 +1,7 @@ +.option { + padding: 0.3em; +} + @media (prefers-color-scheme: dark) { .select :global(.factory-select__control) { background-color: #222; @@ -8,15 +12,11 @@ background-color: #444; } - .option { - padding: 0.3em; - } - .option:is(:hover, :focus-visible) { background-color: black; } .select :global(.factory-select__multi-value__label) { - color: #dddddd; + color: #ddd; } } diff --git a/components/home/Home.module.css b/components/home/Home.module.css index 9876e31..119dded 100644 --- a/components/home/Home.module.css +++ b/components/home/Home.module.css @@ -1,8 +1,8 @@ .grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(500px, max-content)); - gap: 1em; margin-top: 2em; + gap: 1em; + grid-template-columns: repeat(auto-fit, minmax(450px, max-content)); } .missingFactories { @@ -14,3 +14,9 @@ .missingFactories > * { width: max-content; } + +@media (max-width: 600px) { + .grid { + grid-template-columns: 1fr; + } +} diff --git a/components/visualize/NodeOverview/NodeOverview.module.css b/components/visualize/NodeOverview/NodeOverview.module.css index 047ab20..ae95cb1 100644 --- a/components/visualize/NodeOverview/NodeOverview.module.css +++ b/components/visualize/NodeOverview/NodeOverview.module.css @@ -1,11 +1,12 @@ .root { - height: fit-content; width: fit-content; + min-width: 15ch; + height: fit-content; } .tiny { - font-size: 0.5em; margin-top: -1.6em; + font-size: 0.5em; } .small { diff --git a/components/visualize/NodeOverview/NodeOverview.tsx b/components/visualize/NodeOverview/NodeOverview.tsx index a7ec886..fcdff3f 100644 --- a/components/visualize/NodeOverview/NodeOverview.tsx +++ b/components/visualize/NodeOverview/NodeOverview.tsx @@ -5,10 +5,11 @@ import styles from './NodeOverview.module.css' import Link from 'next/link' import { EntityIcon } from '../../home/EntityIcon/EntityIcon' import { GraphNode } from '../../../src/graph-untangle/types' +import { fixedEncodeURIComponent } from '../../../src/utils' +import { useRouter } from 'next/router' export type OverviewGraphNode = GraphNode<{ icons: (EnrichedEntity | string)[] - linkOut: string }> interface Props extends HTMLProps { @@ -16,11 +17,19 @@ interface Props extends HTMLProps { } export const NodeOverview: FC = ({ node, className, ...props }) => { + const router = useRouter() return (

- 🔗 + + 👁 + {node.name}

diff --git a/components/visualize/PageDetails.tsx b/components/visualize/PageDetails.tsx index b10f9dd..1b6711f 100644 --- a/components/visualize/PageDetails.tsx +++ b/components/visualize/PageDetails.tsx @@ -7,8 +7,8 @@ import { DetailGraphNode, NodeDetails } from './NodeDetails/NodeDetails' import { groupBy, isNonNullable, uniquify } from '../../src/utils' import { EnrichedEntity } from '../../src/types' import Head from 'next/head' -import { ScrollContainer } from '../shared/ScrollContainer/ScrollContainer' -import { ProducingGraph } from '../shared/ProducingGraph/ProducingGraph' +import { ScrollContainer } from './ScrollContainer/ScrollContainer' +import { ProducingGraph } from './ProducingGraph/ProducingGraph' export const PageDetails: FC = () => { const { diff --git a/components/visualize/PageOverview.tsx b/components/visualize/PageOverview.tsx index 263cd16..d48090a 100644 --- a/components/visualize/PageOverview.tsx +++ b/components/visualize/PageOverview.tsx @@ -2,10 +2,9 @@ import { useGroups } from '../contexts/GroupProvider' import { useFactories } from '../../src/hooks/useFactories' import { FC, useMemo } from 'react' import { calculateInputs } from '../../src/calculateInputs' -import { fixedEncodeURIComponent } from '../../src/utils' import Head from 'next/head' -import { ScrollContainer } from '../shared/ScrollContainer/ScrollContainer' -import { ProducingGraph } from '../shared/ProducingGraph/ProducingGraph' +import { ScrollContainer } from './ScrollContainer/ScrollContainer' +import { ProducingGraph } from './ProducingGraph/ProducingGraph' import { NodeOverview, OverviewGraphNode } from './NodeOverview/NodeOverview' export const PageOverview: FC = () => { @@ -22,8 +21,7 @@ export const PageOverview: FC = () => { )[0], outputs: group.exports, name: group.name, - icons: [...group.exports, ...group.malls], - linkOut: `./visualize/${fixedEncodeURIComponent(group.name)}` + icons: [...group.exports, ...group.malls] })) }, [baseFactories, exportedFactories, findFactory, groups]) diff --git a/components/shared/ProducingGraph/ProducingGraph.module.css b/components/visualize/ProducingGraph/ProducingGraph.module.css similarity index 55% rename from components/shared/ProducingGraph/ProducingGraph.module.css rename to components/visualize/ProducingGraph/ProducingGraph.module.css index d393e8e..8b94e9d 100644 --- a/components/shared/ProducingGraph/ProducingGraph.module.css +++ b/components/visualize/ProducingGraph/ProducingGraph.module.css @@ -1,26 +1,45 @@ .plane { - box-shadow: 0 0 0 1px red; /* Border left */ - padding: 2em; - width: fit-content; - display: flex; - flex-direction: column; - gap: 10em; position: relative; + display: flex; + width: fit-content; + flex-direction: column; + padding: 2em; + box-shadow: 0 0 0 1px red; /* Border left */ + gap: 10em; +} + +.svg { + position: absolute; + z-index: -10; + inset: 0; + pointer-events: none; + stroke: black; } .row { display: flex; - gap: 2em; justify-content: space-evenly; + gap: 2em; } .node { padding: 0.5em; - border-radius: 4px; - border: 1px solid #dddddd; + border: 1px solid #ddd; background-color: #eee; + border-radius: 4px; } .hidden { width: 0; } + +@media (prefers-color-scheme: dark) { + .svg { + stroke: white; + } + + .node { + border-color: #444; + background-color: #222; + } +} diff --git a/components/shared/ProducingGraph/ProducingGraph.tsx b/components/visualize/ProducingGraph/ProducingGraph.tsx similarity index 95% rename from components/shared/ProducingGraph/ProducingGraph.tsx rename to components/visualize/ProducingGraph/ProducingGraph.tsx index cb493b8..ba1054e 100644 --- a/components/shared/ProducingGraph/ProducingGraph.tsx +++ b/components/visualize/ProducingGraph/ProducingGraph.tsx @@ -35,11 +35,7 @@ export const ProducingGraph = >({ function createSvgElement() { const elem = document.createElementNS('http://www.w3.org/2000/svg', 'svg') elem.id = 'arrows' - elem.setAttribute( - 'style', - 'position: absolute; inset: 0 0 0 0; pointer-events: none; z-index: -10;' - ) - elem.setAttributeNS(null, 'stroke', 'black') + elem.setAttribute('class', styles.svg) elem.setAttributeNS(null, 'fill', 'none') plane.appendChild(elem) return elem diff --git a/components/shared/ScrollContainer/ScrollContainer.module.css b/components/visualize/ScrollContainer/ScrollContainer.module.css similarity index 100% rename from components/shared/ScrollContainer/ScrollContainer.module.css rename to components/visualize/ScrollContainer/ScrollContainer.module.css index 7d138ea..29143d4 100644 --- a/components/shared/ScrollContainer/ScrollContainer.module.css +++ b/components/visualize/ScrollContainer/ScrollContainer.module.css @@ -4,7 +4,7 @@ } .inner { - padding: 2em; width: fit-content; height: fit-content; + padding: 2em; } diff --git a/components/shared/ScrollContainer/ScrollContainer.tsx b/components/visualize/ScrollContainer/ScrollContainer.tsx similarity index 100% rename from components/shared/ScrollContainer/ScrollContainer.tsx rename to components/visualize/ScrollContainer/ScrollContainer.tsx