diff --git a/index.html b/index.html index 4a0601e..c1ed82c 100644 --- a/index.html +++ b/index.html @@ -59,6 +59,10 @@ d="M8 31.625c-2.037 0-3.952-0.793-5.392-2.233-2.973-2.973-2.973-7.81 0-10.783l2.743-2.743c0.635-0.635 1.664-0.635 2.298 0s0.635 1.663 0 2.298l-2.743 2.743c-1.706 1.706-1.706 4.481 0 6.187 0.826 0.826 1.925 1.281 3.094 1.281s2.267-0.455 3.094-1.281l6-6c1.706-1.706 1.706-4.481 0-6.187-0.635-0.635-0.635-1.663 0-2.298s1.663-0.635 2.298 0c2.973 2.973 2.973 7.81 0 10.783l-6 6c-1.44 1.44-3.355 2.233-5.392 2.233z" > + + + +
diff --git a/src/App.tsx b/src/App.tsx index 19084f9..fb71955 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -43,66 +43,39 @@ export default function App() {

-

- -

-
-
-

Opslaan

-

- Om je ingevulde gegevens te bewaren heb je drie opties. - Als je op een persoonlijk apparaat werkt kun je de huidige toestand opslaan in je browser. - Je kunt ook een link kopiëren en deze ergens veilige bewaren, - of een bestand downloaden en deze op een veilige plek opslaan. -

-

- - - -

+
+

Opslaan

+

+ Om je ingevulde gegevens te bewaren heb je drie opties. + Als je op een persoonlijk apparaat werkt kun je de huidige toestand opslaan in je browser. + Je kunt ook een link kopiëren en deze ergens veilige bewaren, + of een bestand downloaden en deze op een veilige plek opslaan. +

+

+ + + +

+
); } diff --git a/src/Results.tsx b/src/Results.tsx index e7103e9..fdc9ece 100644 --- a/src/Results.tsx +++ b/src/Results.tsx @@ -35,7 +35,15 @@ export default function Results({ state, mark, note }: ResultProps) { value={state.notes} onChange={(event) => note((event.target as HTMLTextAreaElement).value)} aria-label="Notities" + rows={state.notes.split(/\r\n|\r|\n/).length} /> +
+ {state.notes.split('\n').map((item, key) => ( +

+ {item} +

+ ))} +
); } diff --git a/src/index.css b/src/index.css index ebac993..071109b 100644 --- a/src/index.css +++ b/src/index.css @@ -417,3 +417,29 @@ table.form tr.selectable:hover { [data-tooltip]:hover::before { opacity: 1 } + +.print-notes { + display: none; +} + +@media print { + table.form thead { + display: none; + } + table.form th { + background: none !important; + } + table.form h3 { + color: #05164c; + text-shadow: none; + } + .save-section { + display: none; + } + textarea { + display: none; + } + .print-notes { + display: block; + } +} \ No newline at end of file