added checkbox to not print certain cards

This commit is contained in:
NilsUeter
2023-05-08 20:28:01 +02:00
parent a4977812af
commit 1a741769a3
5 changed files with 16 additions and 6 deletions
+4 -2
View File
@@ -93,7 +93,9 @@ function App() {
return ( return (
<div className="App"> <div className="App">
<div className="header print-display-none"> <div className="header print-display-none">
FancyScribe <a href="/" style={{ color: "#fff", fontWeight: 800 }}>
FancyScribe
</a>
<div className="subheader"> <div className="subheader">
A fancy way to view your Warhammer 40k BattleScribe rosters A fancy way to view your Warhammer 40k BattleScribe rosters
</div> </div>
@@ -139,7 +141,7 @@ function App() {
type="checkbox" type="checkbox"
onChange={(e) => setOnePerPage(e.target.checked)} onChange={(e) => setOnePerPage(e.target.checked)}
/> />
One Datacard per Page when printing One Datacard per Page when Printing
</label> </label>
</div> </div>
<div className="print-display-none" style={{ color: "red" }}> <div className="print-display-none" style={{ color: "red" }}>
+9 -1
View File
@@ -1,3 +1,4 @@
import { useState } from "react";
import factionBackground from "./assets/factionBackground.png"; import factionBackground from "./assets/factionBackground.png";
import adeptusAstartesIcon from "./assets/adeptusAstartesIcon.png"; import adeptusAstartesIcon from "./assets/adeptusAstartesIcon.png";
import rangedIcon from "./assets/rangedIcon.png"; import rangedIcon from "./assets/rangedIcon.png";
@@ -109,6 +110,7 @@ const Force = ({ force, onePerPage }) => {
}; };
const Unit = ({ unit, index, catalog, onePerPage }) => { const Unit = ({ unit, index, catalog, onePerPage }) => {
const [hide, setHide] = useState(false);
let { let {
name, name,
weapons, weapons,
@@ -160,7 +162,9 @@ const Unit = ({ unit, index, catalog, onePerPage }) => {
return ( return (
<div <div
className={ className={
"avoid-page-break " + (onePerPage && index !== 0 ? "page-break" : "") "avoid-page-break" +
(onePerPage ? " page-break" : "") +
(hide ? " print-display-none" : "")
} }
style={{ style={{
fontWeight: 500, fontWeight: 500,
@@ -169,6 +173,10 @@ const Unit = ({ unit, index, catalog, onePerPage }) => {
marginBottom: 32, marginBottom: 32,
}} }}
> >
<label className="print-display-none">
<input type="checkbox" onChange={() => setHide(!hide)} />
Don't print this card.
</label>
<div <div
style={{ style={{
padding: "24px 0", padding: "24px 0",
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 607 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 692 B

+3 -3
View File
@@ -159,9 +159,9 @@ button:focus-visible {
break-inside: avoid; break-inside: avoid;
} }
.page-break { .page-break:not(.print-display-none) {
page-break-before: page; page-break-after: page;
break-before: page; break-after: page;
} }
@media print { @media print {