Remove save file button + print layout

tweedegolf · Sep 9, 2024 · dccb71d · dccb71d
1 parent 4ff2365
commit dccb71d
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 55 deletions.
diff --git 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"
           ></path>
         </symbol>
+        <symbol id="icon-printer" viewBox="0 0 32 32">
+          <path fill="#fff" d="M8 2h16v4h-16v-4z"></path>
+          <path fill="#fff" d="M30 8h-28c-1.1 0-2 0.9-2 2v10c0 1.1 0.9 2 2 2h6v8h16v-8h6c1.1 0 2-0.9 2-2v-10c0-1.1-0.9-2-2-2zM4 14c-1.105 0-2-0.895-2-2s0.895-2 2-2 2 0.895 2 2-0.895 2-2 2zM22 28h-12v-10h12v10z"></path>
+        </symbol>
       </defs>
     </svg>
     <div id="root"></div>

diff --git a/src/App.tsx b/src/App.tsx
@@ -43,66 +43,39 @@ export default function App() {
         </p>
       </div>
 
-      <p className="save">
-        <label htmlFor="load">
-          <span>
-            <svg>
-              <use xlinkHref="#icon-folder-open" />
-            </svg>
-            Eerdere versie laden
-          </span>
-          <input
-            type="file"
-            id="load"
-            onChange={(e) => upload(e.target as HTMLInputElement, setState)}
-          />
-        </label>
-      </p>
-
       <Table state={state} select={select} mark={mark} />
       <hr />
       <Results state={state} mark={mark} note={note} />
-      <hr />
-      <h2>Opslaan</h2>
-      <p>
-        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.
-      </p>
-      <p className="save">
-        <button onClick={() => saveStateLocal(state)}>
-          <svg>
-            <use xlinkHref="#icon-floppy-disk" />
-          </svg>
-          Opslaan in de browser
-        </button>
-        <button onClick={() => copyLink(state)}>
-          <svg>
-            <use xlinkHref="#icon-link" />
-          </svg>
-          Unieke link kopiëren
-        </button>
-        <button onClick={() => downloadFile(state)}>
-          <svg>
-            <use xlinkHref="#icon-download" />
-          </svg>
-          Bestand opslaan op computer
-        </button>
-        <label htmlFor="upload">
-          <span>
+      <div className="save-section">
+        <hr />
+        <h2>Opslaan</h2>
+        <p>
+          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.
+        </p>
+        <p className="save">
+          <button onClick={() => saveStateLocal(state)}>
             <svg>
-              <use xlinkHref="#icon-folder-open" />
+              <use xlinkHref="#icon-floppy-disk" />
             </svg>
-            Eerdere versie laden
-          </span>
-          <input
-            type="file"
-            id="upload"
-            onChange={(e) => upload(e.target as HTMLInputElement, setState)}
-          />
-        </label>
-      </p>
+            Opslaan in de browser
+          </button>
+          <button onClick={() => copyLink(state)}>
+            <svg>
+              <use xlinkHref="#icon-link" />
+            </svg>
+            Unieke link kopiëren
+          </button>
+          <button onClick={() => window.print()}>
+            <svg>
+              <use xlinkHref="#icon-printer" />
+            </svg>
+            Printen
+          </button>
+        </p>
+      </div>
     </>
   );
 }
diff --git 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}
       />
+      <div className="print-notes">
+        {state.notes.split('\n').map((item, key) => (
+          <p key={key}>
+            {item}
+          </p>
+        ))}
+      </div>
     </>
   );
 }
diff --git 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;
+  }
+}