edu/card-layouts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: paginate React cards like print

Browse Source
This commit is contained in:
user
2026-07-17 09:49:21 +02:00
parent b8b122abb9
commit 0816f27053
5 changed files with 115 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/src/main.tsx
+17 -12
View File
@@ -163,6 +163,7 @@ type Section = {
id: string;
index: number;
title: string;
show_heading: boolean;
header_html: string;
left_margin_html: string;
right_margin_html: string;
@@ -182,7 +183,7 @@ type CardModel = {
total_pages: number;
front: any;
sections: Section[];
dictionary: { header_html: string; content_html: string };
dictionary: { header_html: string; content_html: string } | null;
toc: { id: string; label: string }[];
};
type NvimPanelSummary = {
@@ -2714,10 +2715,12 @@ function SectionPage({
className="section-sheet"
>
<div id={section.id} className="section-anchor" />
<h2 className="section-heading">
<span className="section-index">{section.index}</span>
<span className="section-title">{section.title}</span>
</h2>
{section.show_heading && (
<h2 className="section-heading">
<span className="section-index">{section.index}</span>
<span className="section-title">{section.title}</span>
</h2>
)}
<StepMap steps={section.steps} progress={progress} onCycle={onCycle} />
{section.content_html && <Html html={section.content_html} />}
<div className="tasks">
@@ -3117,13 +3120,15 @@ function App({ model }: { model: CardModel }) {
/>
);
})}
<Sheet
header={model.dictionary.header_html}
className="dictionary-sheet"
>
<h2>Słownik WE/EN/EK/KW</h2>
<Html html={model.dictionary.content_html} />
</Sheet>
{model.dictionary && (
<Sheet
header={model.dictionary.header_html}
className="dictionary-sheet"
>
<h2>Słownik WE/EN/EK/KW</h2>
<Html html={model.dictionary.content_html} />
</Sheet>
)}
</main>
<ProgressDock progress={progress} error={progressError} />
<ShortcutHelp open={shortcutsOpen} onClose={() => setShortcutsOpen(false)} />
react/src/react.css
+31
View File
@@ -1,3 +1,23 @@
.paper {
display: flex;
flex-direction: column;
gap: 5cm;
}
.paper > .sheet {
height: 297mm;
min-height: 297mm;
max-height: 297mm;
margin: 0 auto;
overflow: hidden;
}
.paper > .sheet > .sheet-content {
height: 297mm;
min-height: 297mm;
max-height: 297mm;
overflow-x: hidden;
overflow-y: auto;
scrollbar-gutter: stable;
}
.viewer-chrome {
position: sticky;
top: 0;
@@ -1471,6 +1491,17 @@ text.uml-step-element-active {
}
}
@media print {
.paper {
display: block;
gap: 0;
}
.paper > .sheet,
.paper > .sheet > .sheet-content {
height: auto;
min-height: 0;
max-height: none;
overflow: visible;
}
.viewer-chrome {
display: none !important;
}