Skip to content

Commit 16237f4

Browse files
nguyen-katienguyen-katie
committed
erased unnecessary components and finished metadata & og doc design
1 parent c6312f0 commit 16237f4

6 files changed

Lines changed: 263 additions & 349 deletions

File tree

‎website/src/page-image.css.ts‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,20 @@ export const pageImage = style({
3838
WebkitPrintColorAdjust: "exact",
3939
printColorAdjust: "exact",
4040
width: "482px",
41-
height: "732px",
42-
position: "relative",
43-
left: "167px",
44-
top: "232px",
41+
height: "auto",
42+
maxHeight: "600px",
43+
objectFit: "contain",
44+
display: "block",
45+
margin: "0 auto",
46+
breakAfter: "page",
47+
},
48+
},
49+
})
50+
51+
globalStyle(`.${pageImage}:last-of-type`, {
52+
"@media": {
53+
[mediaQueries.print]: {
54+
breakAfter: "auto",
4555
},
4656
},
4757
})

‎website/src/pages/documents/document-info.css.ts‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// New document info styles
22
import { style } from "@vanilla-extract/css"
3+
import { fonts } from "src/style/constants"
34

45
export const container = style({
56
backgroundColor: "#ffffff",
@@ -9,7 +10,7 @@ export const container = style({
910
"@media": {
1011
print: {
1112
padding: "16px",
12-
margin: "0 auto",
13+
margin: "24px auto 0 auto",
1314
},
1415
},
1516
})
@@ -82,7 +83,7 @@ export const infoSection = style({
8283
gap: "24px",
8384
"@media": {
8485
print: {
85-
gap: "12px",
86+
gap: "8px",
8687
},
8788
},
8889
})
@@ -95,8 +96,11 @@ export const field = style({
9596
borderBottom: "1px solid #ADADAD",
9697
"@media": {
9798
print: {
98-
gap: "4px",
99-
paddingBottom: "8px",
99+
flexDirection: "row",
100+
alignItems: "flex-start",
101+
gap: "8px",
102+
paddingBottom: "16px",
103+
paddingTop: "8px",
100104
},
101105
},
102106
})
@@ -109,7 +113,14 @@ export const label = style({
109113
letterSpacing: "0.5px",
110114
"@media": {
111115
print: {
112-
fontSize: "10px",
116+
width: "212px",
117+
height: "25px",
118+
flexShrink: 0,
119+
fontFamily: `"Quattrocento", serif`,
120+
fontStyle: "normal",
121+
fontWeight: 700,
122+
fontSize: "20px",
123+
lineHeight: 1.2,
113124
},
114125
},
115126
})
@@ -120,7 +131,13 @@ export const value = style({
120131
lineHeight: 1.5,
121132
"@media": {
122133
print: {
123-
fontSize: "8px",
134+
width: "424px",
135+
height: "20px",
136+
fontFamily: fonts.header,
137+
fontStyle: "normal",
138+
fontWeight: 400,
139+
fontSize: "18px",
140+
lineHeight: 1.2,
124141
},
125142
},
126143
})

‎website/src/pages/documents/document.css.ts‎

Lines changed: 142 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
1-
import { style } from "@vanilla-extract/css"
1+
import { globalStyle, style } from "@vanilla-extract/css"
22
import { flowRight } from "lodash-es"
33
import { important, position } from "polished"
44
import { button } from "src/components/button.css"
55
import { rightButton } from "src/components/carousel.css"
6+
import {
7+
annotationSection,
8+
documentBlock,
9+
inlineBlock,
10+
wordGroup,
11+
wordGroupInline,
12+
} from "src/segment.css"
613
import {
714
colors,
815
fonts,
@@ -380,3 +387,137 @@ export const printSectionHeadingRule = style({
380387
},
381388
},
382389
})
390+
391+
export const printImageSource = style({
392+
display: "none",
393+
"@media": {
394+
[mediaQueries.print]: {
395+
display: "block",
396+
fontFamily: "serif",
397+
fontStyle: "normal",
398+
fontWeight: 400,
399+
fontSize: "14px",
400+
lineHeight: 1.2,
401+
width: "636px",
402+
height: "17px",
403+
textAlign: "center",
404+
marginBottom: "16px",
405+
},
406+
},
407+
})
408+
409+
export const printBodyContent = style({
410+
display: "none",
411+
"@media": {
412+
[mediaQueries.print]: {
413+
display: "block",
414+
width: "100%",
415+
marginTop: 0,
416+
breakBefore: "avoid",
417+
},
418+
},
419+
})
420+
421+
export const printHideParagraphTranslation = style({
422+
"@media": {
423+
[mediaQueries.print]: { display: "block" },
424+
},
425+
})
426+
427+
globalStyle(`.${printHideParagraphTranslation} .${inlineBlock}`, {
428+
"@media": {
429+
[mediaQueries.print]: { display: "none" },
430+
},
431+
})
432+
433+
globalStyle(
434+
`.${printBodyContent} .${wordGroup}, .${printBodyContent} .${wordGroupInline}`,
435+
{
436+
"@media": {
437+
[mediaQueries.print]: {
438+
display: "block",
439+
marginRight: 0,
440+
marginBottom: vspace.quarter,
441+
paddingTop: 0,
442+
paddingBottom: 0,
443+
breakInside: "avoid",
444+
},
445+
},
446+
}
447+
)
448+
449+
globalStyle(
450+
`.${printBodyContent} .${annotationSection.story} .${wordGroupInline}`,
451+
{
452+
"@media": {
453+
[mediaQueries.print]: {
454+
display: "block",
455+
marginRight: 0,
456+
marginBottom: vspace.quarter,
457+
},
458+
},
459+
}
460+
)
461+
462+
globalStyle(
463+
`.${printBodyContent} .${documentBlock.story}, .${printBodyContent} .${documentBlock.wordByWord}`,
464+
{
465+
"@media": {
466+
[mediaQueries.print]: {
467+
marginTop: vspace.quarter,
468+
marginBottom: vspace.quarter,
469+
paddingBottom: 0,
470+
breakAfter: "avoid",
471+
breakBefore: "avoid",
472+
},
473+
},
474+
}
475+
)
476+
477+
globalStyle(
478+
`.${printBodyContent} .${annotationSection.story}, .${printBodyContent} .${annotationSection.wordParts}`,
479+
{
480+
"@media": {
481+
[mediaQueries.print]: {
482+
display: "grid",
483+
gridTemplateColumns: "repeat(3, 212px)",
484+
columnGap: vspace.one,
485+
rowGap: vspace.one,
486+
marginBottom: 0,
487+
},
488+
},
489+
}
490+
)
491+
492+
globalStyle(
493+
`.${printBodyContent} .${documentBlock.story}:first-child, .${printBodyContent} .${documentBlock.wordByWord}:first-child`,
494+
{
495+
"@media": {
496+
[mediaQueries.print]: {
497+
borderBottom: `1px solid ${colors.text}`,
498+
},
499+
},
500+
}
501+
)
502+
503+
globalStyle(
504+
`.${printBodyContent} .${wordGroup}:nth-child(3n+1):last-child, .${printBodyContent} .${wordGroupInline}:nth-child(3n+1):last-child`,
505+
{
506+
"@media": {
507+
[mediaQueries.print]: {
508+
breakAfter: "page",
509+
},
510+
},
511+
}
512+
)
513+
514+
globalStyle(
515+
`.${printBodyContent} .${wordGroup}:last-child, .${printBodyContent} .${wordGroupInline}:last-child`,
516+
{
517+
"@media": {
518+
[mediaQueries.print]: {
519+
breakAfter: "auto",
520+
},
521+
},
522+
}
523+
)

‎website/src/pages/documents/document.page.tsx‎

Lines changed: 76 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,10 @@ import { AnnotatedForm, DocumentPage } from "src/segment"
4848
import { mediaQueries } from "src/style/constants"
4949
import { BasicMorphemeSegment, LevelOfDetail } from "src/types"
5050
import PageImages from "../../page-image"
51+
import * as pageImageCss from "../../page-image.css"
5152
import * as css from "./document.css"
5253
import { EditingProvider } from "./editing-context"
53-
import {
54-
PrintMetadata,
55-
PrintOriginalText,
56-
PrintTranslation,
57-
printDocument,
58-
} from "./print-document"
54+
import { PrintLayout, PrintLegend, printDocument } from "./print-document"
5955

6056
enum Tabs {
6157
ANNOTATION = "annotation-tab",
@@ -136,13 +132,26 @@ export const TabSet = ({
136132
}, [])
137133

138134
const tabs = useScrollableTabState({ selectedId: Tabs.ANNOTATION })
135+
const { levelOfDetail, cherokeeRepresentation } = usePreferences()
139136
// const [{ data }] = Dailp.useDocumentDetailsQuery({
140137
// variables: { slug: doc.slug! },
141138
// })
142139
// const docData = data?.document
143140
// if (!docData) {
144141
// return null
145142
// }
143+
const pageImagesContent = doc.translatedPages ? (
144+
<PageImages
145+
pageImages={{
146+
urls:
147+
doc.translatedPages
148+
?.filter((p) => !!p.image)
149+
.map((p) => p.image!.url) ?? [],
150+
}}
151+
document={doc}
152+
/>
153+
) : null
154+
146155
let scrollTopClass = null
147156
switch (isScrollVisible) {
148157
case 0:
@@ -204,17 +213,7 @@ export const TabSet = ({
204213
id={`${Tabs.IMAGES}-panel`}
205214
tabId={Tabs.IMAGES}
206215
>
207-
{doc.translatedPages ? (
208-
<PageImages
209-
pageImages={{
210-
urls:
211-
doc.translatedPages
212-
?.filter((p) => !!p.image)
213-
.map((p) => p.image!.url) ?? [],
214-
}}
215-
document={doc}
216-
/>
217-
) : null}
216+
{pageImagesContent}
218217
</TabPanel>
219218

220219
<TabPanel
@@ -234,13 +233,70 @@ export const TabSet = ({
234233

235234
{/* Hidden Print Design Components */}
236235
{tabs.selectedId === Tabs.ANNOTATION && (
237-
<PrintTranslation doc={doc} breadcrumbString={breadcrumbString} />
236+
<PrintLayout doc={doc} breadcrumbString={breadcrumbString}>
237+
<PrintLegend levelOfDetail={levelOfDetail} />
238+
<h2 className={css.printSectionHeading}>
239+
Translation
240+
<span className={css.printSectionHeadingRule} />
241+
</h2>
242+
<div
243+
className={
244+
levelOfDetail >= LevelOfDetail.Segmentation
245+
? `${css.printBodyContent} ${css.printHideParagraphTranslation}`
246+
: css.printBodyContent
247+
}
248+
>
249+
<EditWordCheckProvider>
250+
<FormProvider>
251+
<FormProviderParagraph>
252+
<DocumentContents
253+
doc={doc}
254+
levelOfDetail={levelOfDetail}
255+
cherokeeRepresentation={cherokeeRepresentation}
256+
openDetails={() => {}}
257+
wordPanelDetails={{
258+
currContents: null,
259+
setCurrContents: () => {},
260+
}}
261+
/>
262+
</FormProviderParagraph>
263+
</FormProvider>
264+
</EditWordCheckProvider>
265+
</div>
266+
</PrintLayout>
238267
)}
239268
{tabs.selectedId === Tabs.IMAGES && (
240-
<PrintOriginalText doc={doc} breadcrumbString={breadcrumbString} />
269+
<PrintLayout doc={doc} breadcrumbString={breadcrumbString}>
270+
{doc.translatedPages
271+
?.filter((page) => !!page.image)
272+
.map((page, i) => (
273+
<React.Fragment key={i}>
274+
<h2 className={css.printSectionHeading}>
275+
Original Document
276+
<span className={css.printSectionHeadingRule} />
277+
</h2>
278+
<div className={css.printImageSource}>
279+
Image Source: {doc.sources[0]?.name ?? "Source unknown"}
280+
</div>
281+
<img
282+
className={pageImageCss.pageImage}
283+
src={`${page.image!.url}/full/max/0/default.jpg`}
284+
alt={`Manuscript Page ${i + 1}`}
285+
/>
286+
</React.Fragment>
287+
))}
288+
</PrintLayout>
241289
)}
242290
{tabs.selectedId === Tabs.INFO && (
243-
<PrintMetadata doc={doc} breadcrumbString={breadcrumbString} />
291+
<PrintLayout doc={doc} breadcrumbString={breadcrumbString}>
292+
<h2 className={css.printSectionHeading}>
293+
Document Information
294+
<span className={css.printSectionHeadingRule} />
295+
</h2>
296+
<EditingProvider>
297+
<DocumentInfo doc={doc} />
298+
</EditingProvider>
299+
</PrintLayout>
244300
)}
245301
</>
246302
)

0 commit comments

Comments
 (0)