From e8e08899dd5423a61918c875b40be73bc04f1615 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Fri, 13 May 2022 09:55:43 +0100 Subject: [PATCH 1/2] WIP testing a css grid layout for the main app --- app/routes/cssGridTest.tsx | 18 ++++++++++++++++++ tailwind.config.js | 4 ++++ 2 files changed, 22 insertions(+) create mode 100644 app/routes/cssGridTest.tsx diff --git a/app/routes/cssGridTest.tsx b/app/routes/cssGridTest.tsx new file mode 100644 index 00000000..7dc2e5ec --- /dev/null +++ b/app/routes/cssGridTest.tsx @@ -0,0 +1,18 @@ +export default function Index() { + return ( +
+
+ banner +
+
+ header +
+
+
+
+
+ footer +
+
+ ); +} diff --git a/tailwind.config.js b/tailwind.config.js index 690bc79e..877b14ea 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -24,6 +24,10 @@ module.exports = { inspectorHeight: "calc(100vh - 70px)", jsonViewerHeight: "calc(100vh - 106px)", }, + gridTemplateRows: { + 'app': '40px 40px auto 40px', + 'app-banner': '40px auto 40px', + }, fontFamily: { sans: ["Source Sans Pro", "sans-serif"], mono: ["MonoLisa", "monospace"], From 2a3219989f6f53cddb3d9db408b9bca80766e681 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Fri, 13 May 2022 14:00:50 +0100 Subject: [PATCH 2/2] WIP Reconfiguring the app layout to not use calculated heights --- app/components/Banner.tsx | 9 ++++++ app/components/CodeEditor.tsx | 5 +--- app/components/Column.tsx | 6 ++-- app/components/Columns.tsx | 13 +++++++-- app/components/Footer.tsx | 2 +- app/components/InfoPanel.tsx | 2 +- app/components/JsonColumnView.tsx | 12 ++++---- app/components/JsonView.tsx | 2 +- app/routes/cssGridTest.tsx | 48 ++++++++++++++++++++++++++++++- app/routes/j/$id.tsx | 2 ++ tailwind.config.js | 11 ++++--- 11 files changed, 86 insertions(+), 26 deletions(-) create mode 100644 app/components/Banner.tsx diff --git a/app/components/Banner.tsx b/app/components/Banner.tsx new file mode 100644 index 00000000..b9708f6e --- /dev/null +++ b/app/components/Banner.tsx @@ -0,0 +1,9 @@ +import { Body } from "./Primitives/Body"; + +export function Banner() { + return ( +
+ Test Banner +
+ ); +} diff --git a/app/components/CodeEditor.tsx b/app/components/CodeEditor.tsx index 314f8e74..95e43e52 100644 --- a/app/components/CodeEditor.tsx +++ b/app/components/CodeEditor.tsx @@ -94,10 +94,7 @@ export function CodeEditor(opts: CodeEditorProps) { return (
-
+
); } diff --git a/app/components/Column.tsx b/app/components/Column.tsx index 5d476284..2d5dc453 100644 --- a/app/components/Column.tsx +++ b/app/components/Column.tsx @@ -20,16 +20,14 @@ function ColumnElement(column: ColumnProps) { return (
{column.icon && } {title}
-
- {children} -
+
{children}
); } diff --git a/app/components/Columns.tsx b/app/components/Columns.tsx index 823f3ebe..3d5c44b5 100644 --- a/app/components/Columns.tsx +++ b/app/components/Columns.tsx @@ -10,7 +10,13 @@ import { BlankColumn } from "./BlankColumn"; import { Column } from "./Column"; import { ColumnItem } from "./ColumnItem"; -function ColumnsElement({ columns }: { columns: ColumnDefinition[] }) { +function ColumnsElement({ + columns, + props, +}: { + columns: ColumnDefinition[]; + props?: any; +}) { const [json] = useJson(); const { selectedPath, highlightedPath, highlightedNodeId } = useJsonColumnViewState(); @@ -27,7 +33,10 @@ function ColumnsElement({ columns }: { columns: ColumnDefinition[] }) { }, [highlightedPath, json]); return ( -
+
{columns.map((column) => { return ( +