From 1e86f288574fe6e0258988b7e7e2e218e8bbb02c Mon Sep 17 00:00:00 2001 From: Robert Sesek Date: Mon, 16 Mar 2020 23:36:38 -0400 Subject: [PATCH] Drop instead of flex for layout. This lets the trace viewer be larger than the form width. --- src/App.css | 5 ----- src/App.tsx | 2 +- src/FormView.css | 28 +++++++++++++++++++++++++--- src/FormView.tsx | 30 ++++++++++++++++-------------- src/TaxReturnView.css | 3 +++ 5 files changed, 45 insertions(+), 23 deletions(-) diff --git a/src/App.css b/src/App.css index b6f0c98..3c096f3 100644 --- a/src/App.css +++ b/src/App.css @@ -7,8 +7,3 @@ body { font-family: Helvetica, Arial, sans-serif; } - -.container { - width: 750px; - margin: 0 auto; -} diff --git a/src/App.tsx b/src/App.tsx index 2f234b7..027aa18 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,5 +14,5 @@ interface Props { } export default function App(props: Props) { - return (
); + return (
); } diff --git a/src/FormView.css b/src/FormView.css index 944984c..fbd10ac 100644 --- a/src/FormView.css +++ b/src/FormView.css @@ -4,21 +4,39 @@ * SPDX-License-Identifier: GPL-3.0-only */ +:root { + --form-width: 750px; +} + +.form { +} + .form-name { - margin: 0; + width: var(--form-width); + margin: 0 auto; + border: 3px solid black; border-bottom-width: 2px; + box-sizing: border-box; padding: 5px; } .table { - border: 1px solid black; - border-collapse: collapse; width: 100%; + display: flex; + flex-direction: column; } .line { + width: var(--form-width); + margin: 0 auto; + border: 1px solid black; + box-sizing: border-box; + + display: flex; + flex-direction: row; + align-items: center; } .line:hover { @@ -31,10 +49,13 @@ font-weight: bold; padding: 0 5px; text-align: center; + width: 10%; + padding: 3px 0; } .description { padding: 3px 10px 3px 3px; + flex: 2; } .value { @@ -51,6 +72,7 @@ .trace-viewer { background-color: #fffdf1; padding: 10px; + border: 1px solid red; } .trace-viewer h2 { diff --git a/src/FormView.tsx b/src/FormView.tsx index 3f4ceed..823b14b 100644 --- a/src/FormView.tsx +++ b/src/FormView.tsx @@ -24,15 +24,15 @@ export default function FormView(props: FormProps) { }); return ( - <> +

Form {props.form.name}

-
+
{line => } -
- + + ); } @@ -61,17 +61,19 @@ function LineView(props: LineProps) { const toggleTrace = () => setState('showTrace', !state.showTrace); return ( - - {line.id} - - {line.description} + <> +
+
{line.id}
+
+ {line.description} - - - - - {value()} - +
+
{value()}
+
+ + + + ); } diff --git a/src/TaxReturnView.css b/src/TaxReturnView.css index ec913a6..56cf8cd 100644 --- a/src/TaxReturnView.css +++ b/src/TaxReturnView.css @@ -7,6 +7,9 @@ .header { display: flex; align-items: center; + + width: 750px; + margin: 0 auto; } .header h1 { -- 2.43.5