From cd37803045414f59ea037c2eff2a6c0881026fd5 Mon Sep 17 00:00:00 2001 From: Rebecca Black Date: Wed, 1 May 2024 16:02:43 -0400 Subject: [PATCH 1/3] fixed bug with infinite image request loop if image url undefined --- editioncrafter/src/action/DocumentActions.js | 63 ++++++++++--------- editioncrafter/src/component/ImageGridView.js | 2 +- 2 files changed, 35 insertions(+), 30 deletions(-) diff --git a/editioncrafter/src/action/DocumentActions.js b/editioncrafter/src/action/DocumentActions.js index 7187c52..21ac014 100644 --- a/editioncrafter/src/action/DocumentActions.js +++ b/editioncrafter/src/action/DocumentActions.js @@ -55,6 +55,9 @@ function parseImageURLs(canvas) { if (annotation.type !== 'Annotation') throwError(`Expected Annotation in items property of ${annotationPage.id}`); if (annotation.motivation === 'painting') { if (!annotation.body) throwError(`Expected body property in Annotation ${annotation.id}`); + if (!annotation.body.id) { + return null; + } return { bodyId: annotation.body.id, imageURL: `${annotation.body.id}/info.json`, @@ -139,36 +142,38 @@ function parseSingleManifest(manifest, transcriptionTypes, document) { const canvas = canvases[i]; if (canvas.type !== 'Canvas') throwError(`Expected items[${i}] to be of type 'Canvas'.`); if (!canvas.id) throwError(`Expected items[${i}] to have an id property.`); - const folioID = canvas.id.substr(canvas.id.lastIndexOf('/') + 1); - const canvasLabel = parseLabel(canvas); - const { bodyId, imageURL } = parseImageURLs(canvas); - const annotationURLs = parseAnnotationURLs(canvas, transcriptionTypes); - - const ratio = canvas.width / canvas.height; - - let thumbnailDimensions = []; - if (ratio > 1) { - thumbnailDimensions = [MAX_THUMBNAIL_DIMENSION, Math.round(MAX_THUMBNAIL_DIMENSION / ratio)]; - } else { - thumbnailDimensions = [Math.round(MAX_THUMBNAIL_DIMENSION * ratio), MAX_THUMBNAIL_DIMENSION]; + if (parseImageURLs(canvas)) { + const folioID = canvas.id.substr(canvas.id.lastIndexOf('/') + 1); + const canvasLabel = parseLabel(canvas); + const { bodyId, imageURL } = parseImageURLs(canvas); + const annotationURLs = parseAnnotationURLs(canvas, transcriptionTypes); + + const ratio = canvas.width / canvas.height; + + let thumbnailDimensions = []; + if (ratio > 1) { + thumbnailDimensions = [MAX_THUMBNAIL_DIMENSION, Math.round(MAX_THUMBNAIL_DIMENSION / ratio)]; + } else { + thumbnailDimensions = [Math.round(MAX_THUMBNAIL_DIMENSION * ratio), MAX_THUMBNAIL_DIMENSION]; + } + + const thumbnailURL = `${bodyId}/full/${thumbnailDimensions.join(',')}/0/default.jpg`; + + const folio = { + id: folioID, + doc_id: document || manifest.id, + name: canvasLabel, + pageNumber: i, + image_zoom_url: imageURL, + image_thumbnail_url: thumbnailURL, + annotationURLs, + annotations: canvas.annotations + ? canvas.annotations.filter(a => a.motivation === 'tagging') + : [], + }; + + folios.push(folio); } - - const thumbnailURL = `${bodyId}/full/${thumbnailDimensions.join(',')}/0/default.jpg`; - - const folio = { - id: folioID, - doc_id: document || manifest.id, - name: canvasLabel, - pageNumber: i, - image_zoom_url: imageURL, - image_thumbnail_url: thumbnailURL, - annotationURLs, - annotations: canvas.annotations - ? canvas.annotations.filter(a => a.motivation === 'tagging') - : [], - }; - - folios.push(folio); } return folios; } diff --git a/editioncrafter/src/component/ImageGridView.js b/editioncrafter/src/component/ImageGridView.js index ed7308a..7a2e677 100644 --- a/editioncrafter/src/component/ImageGridView.js +++ b/editioncrafter/src/component/ImageGridView.js @@ -136,7 +136,7 @@ class ImageGridView extends React.Component { const thumbs = folios.map((folio, index) => ( // eslint-disable-next-line react/no-array-index-key
  • -
    {folio.name} {currentTarget.onerror = null; currentTarget.src=`${folio.image_zoom_url.slice(0, -9)}full/full/0/default.jpg`; }} />
    +
    {folio.name} {currentTarget.onerror = null; if (folio.image_zoom_url && currentTarget.src !== `${folio.image_zoom_url.slice(0, -9)}full/full/0/default.jpg`) {currentTarget.src=`${folio.image_zoom_url.slice(0, -9)}full/full/0/default.jpg`;} }} />
    {(folio.id === currentID) ? (`*${folio.name}`) : folio.name}
    From 2ce2f0c72dc44dca6093f63047770232c5d0b08b Mon Sep 17 00:00:00 2001 From: Rebecca Black Date: Wed, 1 May 2024 23:24:04 -0400 Subject: [PATCH 2/3] added umbrella "editioncrafter" class to component and all stylesheets --- editioncrafter/src/component/DiploMatic.js | 2 +- editioncrafter/src/scss/_CETEIcean.scss | 1810 +++++++++-------- editioncrafter/src/scss/_base.scss | 311 +-- editioncrafter/src/scss/_diplomatic.scss | 8 +- .../src/scss/_globalNavigation.scss | 65 +- editioncrafter/src/scss/_glossary.scss | 190 +- editioncrafter/src/scss/_imageGridView.scss | 145 +- editioncrafter/src/scss/_imageView.scss | 71 +- .../src/scss/_imageZoomControl.scss | 102 +- editioncrafter/src/scss/_jumpbox.scss | 83 +- editioncrafter/src/scss/_navigation.scss | 369 ++-- editioncrafter/src/scss/_pagination.scss | 85 +- editioncrafter/src/scss/_ringSpinner.scss | 161 +- editioncrafter/src/scss/_singlePaneView.scss | 17 +- editioncrafter/src/scss/_spinner.scss | 108 +- editioncrafter/src/scss/_splitPaneView.scss | 94 +- editioncrafter/src/scss/_thumbnails.scss | 28 +- editioncrafter/src/scss/_transcriptView.scss | 385 ++-- editioncrafter/src/scss/_watermark.scss | 49 +- editioncrafter/src/scss/_xmlView.scss | 59 +- 20 files changed, 2100 insertions(+), 2042 deletions(-) diff --git a/editioncrafter/src/component/DiploMatic.js b/editioncrafter/src/component/DiploMatic.js index 25cc40a..8de6c82 100644 --- a/editioncrafter/src/component/DiploMatic.js +++ b/editioncrafter/src/component/DiploMatic.js @@ -30,7 +30,7 @@ const DiploMatic = (props) => { }, [containerRef]); const { fixedFrameMode } = props.diplomatic; - const fixedFrameModeClass = fixedFrameMode ? 'fixed' : 'sticky'; + const fixedFrameModeClass = fixedFrameMode ? 'editioncrafter' : 'editioncrafter sticky'; return ( diff --git a/editioncrafter/src/scss/_CETEIcean.scss b/editioncrafter/src/scss/_CETEIcean.scss index bbfe64e..3bdf754 100644 --- a/editioncrafter/src/scss/_CETEIcean.scss +++ b/editioncrafter/src/scss/_CETEIcean.scss @@ -4,909 +4,913 @@ /* language support */ /* render Arabic, Persian, Ottoman, Hebrew as rtl */ -[lang = "ar"], -[lang = "ota"], -[lang = "fa"], -[lang = "he"], -[lang *="-Arab-AR"]{ - direction:rtl; - text-align:right; -} -/* display latin scripts as ltr */ -[lang = "en"], -[lang = "fr"], -[lang = "de"], -[lang = "it"], -[lang *="ar-Latn-"], -[lang *="ota-Latn-"]{ - direction:ltr; - text-align:left; -} - -/* Choice elements */ -tei-choice tei-abbr + tei-expan:before, -tei-choice tei-expan + tei-abbr:before, -tei-choice tei-sic + tei-corr:before, -tei-choice tei-corr + tei-sic:before, -tei-choice tei-orig + tei-reg:before, -tei-choice tei-reg + tei-orig:before { - content: " ("; -} -tei-choice tei-abbr + tei-expan:after, -tei-choice tei-expan + tei-abbr:after, -tei-choice tei-sic + tei-corr:after, -tei-choice tei-corr + tei-sic:after, -tei-choice tei-orig + tei-reg:after, -tei-choice tei-reg + tei-orig:after { - content: ")"; -} -/* A */ -tei-ab { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-accMat { - display: block; -} -tei-accMat:before { - content: "accompanying materials: "; -} -tei-acquisition { - display: block; - margin-top: 0; - margin-bottom: 0; -} -tei-acquisition:before { - font-weight: bold; - content: "acquisition"; -} -tei-activity { - display: block; -} -tei-activity:before { - content: "activity: "; -} -tei-add[place=above] { - color: blue; - vertical-align: super; - font-size: 10pt; -} -tei-add[place=inline]:before { - content: "«"; -} -tei-add[place=inline]:after { - content: "»"; -} -tei-add[place=below] { - vertical-align: sub; -} -tei-additional { - display: block; -} -tei-additions { - display: block; -} -tei-additions:before { - content: "Significant additions within the document: "; -} -tei-addrLine { - display: block; -} -tei-address[data-tei-rend~="block"], addresss[data-tei-rendition~="#block"] { - display: block; -} -tei-adminInfo { - display: block; -} -tei-app tei-note { - display: none; -} -tei-appInfo { - display: block; -} -tei-appInfo:before { - content: "Application information: "; -} -tei-application { - display: block; -} -tei-application:after { - content: " " attr(version); -} -tei-argument { - display: block; -} -tei-att { - font-family: Courier,monospace; -} -tei-att:before { - content: "@"; -} -tei-titlestmt > tei-author { - display: block; - margin-bottom: 1em; -} -tei-publicationstmt > tei-availability { - font-size: 80%; -} -tei-publicationstmt > tei-availability:before { - font-weight: bold; - content: "Availability: "; -} -tei-publicationstmt > tei-availability[data-tei-status]:before { - font-weight: bold; - content: "Availability (" attr(status) "): "; -} -/* B */ -tei-back { - display: block; -} -tei-bibl[data-tei-rend~="block"], bibl[data-tei-rendition~="#block"] { - display: block; - padding-left: 2em; - text-indent: -2em; -} -tei-biblFull { - display: block; -} -tei-binding { - display: block; -} -tei-binding:before { - content: "Binding: \a"; - white-space: pre-wrap; -} -tei-binding[data-tei-contemporary]:before { - content: "Binding: \A" "Contemporary: " attr(contemporary) "\A"; - white-space: pre-wrap; -} -tei-bindingdesc { - display: block; -} -tei-bindngdesc:before { - content: "Binding description: \A"; -} -tei-birth { - display: block; -} -tei-birth:before { - content: "Birth: "; -} -/* c */ -tei-cRefPattern { - display: none; -} -tei-caption { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-case[data-tei-value]:before { - font-weight: bold; - content: attr(value) " "; -} -tei-castgroup { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-castitem { - display: list-item; -} -tei-castlist { - display: block; - list-style-type: none; - margin-top: 1em; - margin-bottom: 1em; - margin-left: 2em; -} -tei-cb { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-cb:before { - content: "[column break]"; -} -tei-cell { - border-right: thin solid black; - border-bottom: thin solid black; - padding: 2px; -} -/* for cell or row with @role = label */ -tei-cell[data-tei-role=label] { - font-weight: bold; -} -tei-climate { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-climate:before { - font-weight: bold; - content: "Climate: "; -} -tei-code { - font-family: Courier,monospace; -} -tei-collation { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-condition { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-constitution { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-constitution:before { - font-weight: bold; - content: "Constitution: "; -} -tei-constitution[data-tei-type] { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-constitution[data-tei-type]:before { - font-weight: bold; - content: "Constitution (" attr(type) "): "; -} -tei-constitution[data-tei-type=frags] { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-constitution[data-tei-type=frags]:before { - font-weight: bold; - content: "Constitution (fragments): "; -} -tei-custevent { - display: list-item; -} -tei-custodialhist { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -/* d */ -tei-date[data-tei-when]:empty:before { - content: attr(when); -} -tei-del { - color: red; -} -/* e */ -tei-editionstmt { - display:block; -} -teieg-egxml { - display: block; - font-size: 80%; - margin-left: 1em; - padding-left: 1em; - border-left: 1px solid #aaaaaa; - margin-top: .75em; - margin-bottom: .75em; - padding-top: .75em; - padding-bottom: .75em; - font-family: monospace; - white-space: pre; -} -tei-emph { - font-style: italic; -} -tei-encodingdesc { - display: none; -} -tei-epigraph { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-explicit { - font-style: italic; -} -tei-filedesc > tei-extent { - display: none; -} -/* f */ -tei-figure { - display: block; - text-align: center; - margin-left: auto; - margin-right: auto; -} -/* g */ -tei-gap[data-tei-reason='lost']:before { - content:'['; -} -tei-gap[data-tei-reason='lost']:after { - content: attr(data-content) ']'; -} -tei-gap[data-tei-reason='illegible']:after { - content: attr(data-content); -} -tei-gi { - font-family: Courier,monospace; -} -tei-gi:before { - content: "<"; -} -tei-gi:after { - content: ">"; -} -/* h */ -tei-head { - display: block; - font-family: 'OpenSans', sans-serif; - font-weight: 700; - font-size: 1.5em; - line-height: max(1.5rem, 24px); -} -tei-body > tei-head { - font-size: 180%; - text-indent: -0.5em; -} -tei-div.textpart { - display: none; -} -tei-div > tei-head { - font-size: 170%; - text-indent: -0.5em; -} -tei-div > tei-div > tei-head { - font-size: 155%; -} -tei-div > tei-div > tei-div > tei-head { - font-size: 140%; -} -tei-div > tei-div > tei-div > tei-div > tei-head, list > tei-head { - font-size: 130%; -} -tei-div > tei-div > tei-div > tei-div > tei-div > tei-head { - font-size: 120%; -} -tei-div > tei-div > tei-div > tei-div > tei-div > tei-div tei-head { - font-size: 110%; -} -tei-figure > tei-head { - display: block; - margin: 1.5em auto 1.5em auto; - padding: .5em 1.5em 1.5em 1.5em; - border: 1px solid black; - border-radius: 15px; - width: 325px; - position: relative; - border: 1px solid #aaaaaa; - background: #fafafa; - /* reset text-indent for note with ancestors. */ - text-indent: 0; - font-size: 85%; - text-align: justify; - -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); - -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); - box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); - width: 85%; - font-family: Georgia, Serif; - font-size: 13pt; -} -tei-hi[rend~="caps"] { - font-weight:bold; -} -tei-hi[rend~="italic"] { - font-style: italic; -} -tei-hi[rend~="underline"] { - text-decoration: underline; -} -tei-ident { - font-family: Courier,monospace; -} -tei-incipit { - font-style: italic; -} -tei-item { - display: list-item; - margin-left: 1em; -} -tei-cell item { - margin-left: 1em; -} - -/* j */ - -/* l */ -tei-l { - display: block; - //width: 35em; -} -tei-l[data-lineno]:before { - content: attr(data-lineno); - position: absolute; - left: 2em; -} -tei-lb:after { - content: '\a'; - white-space: pre; -} -tei-lg { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-list { - display: block; - margin-top: 1em; - margin-bottom: 1em; - list-style-type: none; -} -tei-item > tei-list { - margin-top: 0; -} -tei-sourcedesc tei-list { - list-style-type: none; -} -tei-sourcedesc > tei-list > tei-head { - font-size: 140%; - font-weight: bold; -} -tei-sourcedesc tei-list > tei-item { - display: list-item; -} -/* Match only lists that are descendants of -tei-text. Otherwise they show up in the header. */ -tei-text tei-list[type=simple] { - list-style-type: none; -} -tei-text tei-list[type=bulleted] { - list-style-type: disc; -} -tei-text tei-list[type=ordered] { - list-style-type: none; - counter-reset: items 0; -} -tei-text tei-list[type=ordered] > tei-item { - display: list-item; - margin-left: 0; -} -tei-item > tei-list[type=ordered] { - margin-left: 1em; -} -tei-text tei-list[type=ordered] > item:before { - counter-increment: items 1; - content: counter(items, decimal) ". "; -} -tei-text tei-list[type=gloss] { - list-style-type: none; -} -tei-list[type="gloss"] > tei-label { - display: block; - margin-top: 0.25em; - margin-bottom: 0.25em; - font-weight: bold; -} -tei-list[type="gloss"] > tei-item { - margin-left: 2em; -} -tei-item > tei-list[type=ordered] { - margin-left: 1em; -} -tei-listapp { - display: block; - margin: 1em; - padding: 1em; -} -tei-listbibl { - display:block; - list-style-type: none; - margin-left: .5 em; - margin-top: .5em; -} -tei-listbibl > tei-head { - font-size: 120%; - font-weight: bold; -} -tei-listbibl > tei-bibl { - display: list-item; - margin-left: .5em; -} -tei-listwit { - display:block; - list-style-type: none; - margin-left: .5em; -} -tei-listwit > tei-head { - font-size: 120%; - font-weight: bold; -} -tei-listwit > tei-witness { - display: list-item; - margin-left: 2em; - text-indent: -1.1em; -} -tei-witness > tei-listwit { - display: inline; -} -tei-witness > tei-listwit > tei-head { - display: inline; -} -tei-witness > tei-listwit > tei-witness { - display: inline; -} -tei-locus { - display: none; -} -/* m */ -tei-milestone { - display: none; - margin-left: auto; - margin-right: auto; - text-align: center; -} -tei-musicNotation { - font-weight: bold; -} -tei-musicNotation:before { - font-weight: bold; - content: "Musical Notation: "; -} -/* n */ -tei-node { - display: none; -} -tei-note { - display: none; -} -tei-notesstmt { - display: none; -} -/* o */ -tei-ovar { - font-style: italic; -} -tei-origPlace { - font-weight: bold; -} -tei-origPlace:before { - font-weight: bold; - content: "Place of Origin: "; -} +.editioncrafter { -/* p */ -tei-p { - display: block; - margin-top: 1em; - margin-bottom: 1em; - text-align: justify; -} -*[data-tei-rendition~="#center"] p { - text-align: center; -} -tei-availability > p:first-child { - margin-top: 0em; -} -tei-performance { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-person { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-personGrp { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-postscript { - display: block; - margin-top: 2em; -} -tei-principal { - font-weight: bold; -} -tei-principal:before { - font-weight: bold; - content: "Principal: "; -} -tei-profiledesc { - display: none; -} -tei-publicationstmt > * { - display: none; -} -tei-publicationstmt { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-publicationstmt > date { - display: none; -} -tei-publicationstmt > publisher { - display: none; -} - -/* q */ -tei-q { - quotes: "\201c" "\201d" "\2018" "\2019" "\201c" "\201d" "\2018" "\2019" "\201c" "\201d" "\2018" "\2019" "\201c" "\201d"; -} -tei-q:before { - content: ""; -} -tei-q:after { - content: ""; -} -tei-q[data-tei-next]:after { - content: "" !important; -} -tei-q[data-tei-prev]:before { - content: "" !important; -} -tei-quote { - font-style:italic; -} - -/* r */ -tei-app tei-rdg { - /*perhaps choice */ - display:none; -} -tei-re { - display: block; - margin-top: 0; - margin-bottom: 0; -} -tei-recordhist { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-ref { - color: #5f0000; -} -tei-remarks { - font-weight: bold; -} -tei-remarks:before { - font-weight: bold; - content: "remarks: "; -} -tei-respstmt { - display: block; - margin-top: 0; - margin-bottom: 0; -} -tei-revisiondesc { - display: none; -} -tei-row { - display: grid; - grid-auto-flow: column; - grid-auto-columns: 1fr; -} - -/* s */ -tei-salute { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-samplingdecl { - display: block; - margin-top: 0; - margin-bottom: 0; -} -tei-scriptnote { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-seal { - display: block; - margin-top: 0; - margin-bottom: 0; -} -tei-seal:before { - font-weight: bold; - content: "Seal: "; -} -tei-sealdesc { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-secFol:before { - font-weight: bold; - content: "Second Folio: "; -} -tei-secl>*:first-child:before { - content: "\a["; - white-space: pre; -} -tei-secl>*:last-child:after { - content: "]\a\a"; - white-space: pre; -} -tei-seg { - outline: 0px solid transparent; -} -tei-sense { - display: block; - margin-top: 0; - margin-bottom: 0; -} -tei-seriesstmt { - display: none; -} -tei-setting { - display: block; - margin-top: 0; - margin-bottom: 0; -} -tei-signed { - display: block; - margin-top: 2em; -} -tei-soCalled { - quotes: "\201c" "\201d" "\2018" "\2019" "\201c" "\201d" "\2018" "\2019" "\201c" "\201d" "\2018" "\2019" "\201c" "\201d"; -} -tei-soCalled:before { - content: open-quote; -} -tei-soCalled:after { - content: close-quote; -} -tei-soCalled[data-tei-next]:after { - content: "" !important; -} -tei-soCalled[data-tei-prev]:before { - content: "" !important; -} -tei-sound { - font-style: italic; -} -tei-source { - display: block; - margin-top: 0; - margin-bottom: 0; -} -tei-sourcedesc { - display: none; -} -tei-space:before { - font-weight: bold; - content: ""; -} -tei-span[data-tei-data-n]:before { - content: attr(data-n); -} -tei-speaker { - font-weight: bold; - margin-right: 0; -} -tei-sponsor { - display: block; - margin-top: 0; - margin-bottom: 0; -} -tei-sponsor:before { - font-weight: bold; - content: "Sponsor:"; -} -tei-stage { - display: block; - margin-top: 1em; - margin-bottom: 1em; - font-style: italic; -} -tei-stamp { - display: block; - margin-top: 1em; - margin-bottom: 1em; -} -tei-stamp:before { - font-weight: bold; - content: "Stamped: "; -} - -tei-surplus>*:first-child:before { - content: "\a["; - white-space: pre; -} -tei-surplus>*:last-child:after { - content: "]\a\a"; - white-space: pre; -} -/* t */ -tei-tei { - display: block; -} -tei-table { - display: block; - border-top: thin solid black; - border-left: thin solid black; -} -tei-table { - margin-top: 2em; - margin-bottom: 2em; - font-size: 12pt; -} -tei-table > tei-head { - border-bottom: thin solid black; - border-right: thin solid black; - font-size: 120%; - font-weight: bold; - padding: 2px; - text-align: center; -} -tei-teiheader { - display: block; - margin-top: 2em; - margin-bottom: 2em; -} -tei-tei > tei-text { - display: block; - line-height: 1.5; -} -tei-textclass { - display: none; -} -tei-textdesc { - display: none; -} -/* title */ -tei-tei tei-title { - display: inline; -} -tei-tei tei-title[level=a] { - quotes: "\201c" "\201d" "\2018" "\2019" "\201c" "\201d" "\2018" "\2019" "\201c" "\201d" "\2018" "\2019" "\201c" "\201d"; -} -tei-tei tei-title[level=a]:before { - content: open-quote; -} -tei-tei tei-title[level=a]:after { - content: close-quote; -} -tei-tei tei-title[level=a][next]:after { - content: "" !important; -} -tei-tei tei-title[level=a][prev]:before { - content: "" !important; -} -tei-title[level=m] { - font-style: italic; -} -tei-titlestmt > tei-title { - display: block; - font-family: Arvo, sans-serif; - font-weight: normal; - font-weight: bold !important; - font-size: 150%; -} -tei-typedesc { - display: none; -} -/* u */ -tei-u:before { - content: "-"; -} -tei-view { - font-style: italic; -} -tei-wit { - display: inline; -} -tei-witdetail { - display:none; + [lang = "ar"], + [lang = "ota"], + [lang = "fa"], + [lang = "he"], + [lang *="-Arab-AR"]{ + direction:rtl; + text-align:right; + } + /* display latin scripts as ltr */ + [lang = "en"], + [lang = "fr"], + [lang = "de"], + [lang = "it"], + [lang *="ar-Latn-"], + [lang *="ota-Latn-"]{ + direction:ltr; + text-align:left; + } + + /* Choice elements */ + tei-choice tei-abbr + tei-expan:before, + tei-choice tei-expan + tei-abbr:before, + tei-choice tei-sic + tei-corr:before, + tei-choice tei-corr + tei-sic:before, + tei-choice tei-orig + tei-reg:before, + tei-choice tei-reg + tei-orig:before { + content: " ("; + } + tei-choice tei-abbr + tei-expan:after, + tei-choice tei-expan + tei-abbr:after, + tei-choice tei-sic + tei-corr:after, + tei-choice tei-corr + tei-sic:after, + tei-choice tei-orig + tei-reg:after, + tei-choice tei-reg + tei-orig:after { + content: ")"; + } + /* A */ + tei-ab { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-accMat { + display: block; + } + tei-accMat:before { + content: "accompanying materials: "; + } + tei-acquisition { + display: block; + margin-top: 0; + margin-bottom: 0; + } + tei-acquisition:before { + font-weight: bold; + content: "acquisition"; + } + tei-activity { + display: block; + } + tei-activity:before { + content: "activity: "; + } + tei-add[place=above] { + color: blue; + vertical-align: super; + font-size: 10pt; + } + tei-add[place=inline]:before { + content: "«"; + } + tei-add[place=inline]:after { + content: "»"; + } + tei-add[place=below] { + vertical-align: sub; + } + tei-additional { + display: block; + } + tei-additions { + display: block; + } + tei-additions:before { + content: "Significant additions within the document: "; + } + tei-addrLine { + display: block; + } + tei-address[data-tei-rend~="block"], addresss[data-tei-rendition~="#block"] { + display: block; + } + tei-adminInfo { + display: block; + } + tei-app tei-note { + display: none; + } + tei-appInfo { + display: block; + } + tei-appInfo:before { + content: "Application information: "; + } + tei-application { + display: block; + } + tei-application:after { + content: " " attr(version); + } + tei-argument { + display: block; + } + tei-att { + font-family: Courier,monospace; + } + tei-att:before { + content: "@"; + } + tei-titlestmt > tei-author { + display: block; + margin-bottom: 1em; + } + tei-publicationstmt > tei-availability { + font-size: 80%; + } + tei-publicationstmt > tei-availability:before { + font-weight: bold; + content: "Availability: "; + } + tei-publicationstmt > tei-availability[data-tei-status]:before { + font-weight: bold; + content: "Availability (" attr(status) "): "; + } + /* B */ + tei-back { + display: block; + } + tei-bibl[data-tei-rend~="block"], bibl[data-tei-rendition~="#block"] { + display: block; + padding-left: 2em; + text-indent: -2em; + } + tei-biblFull { + display: block; + } + tei-binding { + display: block; + } + tei-binding:before { + content: "Binding: \a"; + white-space: pre-wrap; + } + tei-binding[data-tei-contemporary]:before { + content: "Binding: \A" "Contemporary: " attr(contemporary) "\A"; + white-space: pre-wrap; + } + tei-bindingdesc { + display: block; + } + tei-bindngdesc:before { + content: "Binding description: \A"; + } + tei-birth { + display: block; + } + tei-birth:before { + content: "Birth: "; + } + /* c */ + tei-cRefPattern { + display: none; + } + tei-caption { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-case[data-tei-value]:before { + font-weight: bold; + content: attr(value) " "; + } + tei-castgroup { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-castitem { + display: list-item; + } + tei-castlist { + display: block; + list-style-type: none; + margin-top: 1em; + margin-bottom: 1em; + margin-left: 2em; + } + tei-cb { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-cb:before { + content: "[column break]"; + } + tei-cell { + border-right: thin solid black; + border-bottom: thin solid black; + padding: 2px; + } + /* for cell or row with @role = label */ + tei-cell[data-tei-role=label] { + font-weight: bold; + } + tei-climate { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-climate:before { + font-weight: bold; + content: "Climate: "; + } + tei-code { + font-family: Courier,monospace; + } + tei-collation { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-condition { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-constitution { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-constitution:before { + font-weight: bold; + content: "Constitution: "; + } + tei-constitution[data-tei-type] { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-constitution[data-tei-type]:before { + font-weight: bold; + content: "Constitution (" attr(type) "): "; + } + tei-constitution[data-tei-type=frags] { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-constitution[data-tei-type=frags]:before { + font-weight: bold; + content: "Constitution (fragments): "; + } + tei-custevent { + display: list-item; + } + tei-custodialhist { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + /* d */ + tei-date[data-tei-when]:empty:before { + content: attr(when); + } + tei-del { + color: red; + } + /* e */ + tei-editionstmt { + display:block; + } + teieg-egxml { + display: block; + font-size: 80%; + margin-left: 1em; + padding-left: 1em; + border-left: 1px solid #aaaaaa; + margin-top: .75em; + margin-bottom: .75em; + padding-top: .75em; + padding-bottom: .75em; + font-family: monospace; + white-space: pre; + } + tei-emph { + font-style: italic; + } + tei-encodingdesc { + display: none; + } + tei-epigraph { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-explicit { + font-style: italic; + } + tei-filedesc > tei-extent { + display: none; + } + /* f */ + tei-figure { + display: block; + text-align: center; + margin-left: auto; + margin-right: auto; + } + /* g */ + tei-gap[data-tei-reason='lost']:before { + content:'['; + } + tei-gap[data-tei-reason='lost']:after { + content: attr(data-content) ']'; + } + tei-gap[data-tei-reason='illegible']:after { + content: attr(data-content); + } + tei-gi { + font-family: Courier,monospace; + } + tei-gi:before { + content: "<"; + } + tei-gi:after { + content: ">"; + } + /* h */ + tei-head { + display: block; + font-family: 'OpenSans', sans-serif; + font-weight: 700; + font-size: 1.5em; + line-height: max(1.5rem, 24px); + } + tei-body > tei-head { + font-size: 180%; + text-indent: -0.5em; + } + tei-div.textpart { + display: none; + } + tei-div > tei-head { + font-size: 170%; + text-indent: -0.5em; + } + tei-div > tei-div > tei-head { + font-size: 155%; + } + tei-div > tei-div > tei-div > tei-head { + font-size: 140%; + } + tei-div > tei-div > tei-div > tei-div > tei-head, list > tei-head { + font-size: 130%; + } + tei-div > tei-div > tei-div > tei-div > tei-div > tei-head { + font-size: 120%; + } + tei-div > tei-div > tei-div > tei-div > tei-div > tei-div tei-head { + font-size: 110%; + } + tei-figure > tei-head { + display: block; + margin: 1.5em auto 1.5em auto; + padding: .5em 1.5em 1.5em 1.5em; + border: 1px solid black; + border-radius: 15px; + width: 325px; + position: relative; + border: 1px solid #aaaaaa; + background: #fafafa; + /* reset text-indent for note with ancestors. */ + text-indent: 0; + font-size: 85%; + text-align: justify; + -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); + width: 85%; + font-family: Georgia, Serif; + font-size: 13pt; + } + tei-hi[rend~="caps"] { + font-weight:bold; + } + tei-hi[rend~="italic"] { + font-style: italic; + } + tei-hi[rend~="underline"] { + text-decoration: underline; + } + tei-ident { + font-family: Courier,monospace; + } + tei-incipit { + font-style: italic; + } + tei-item { + display: list-item; + margin-left: 1em; + } + tei-cell item { + margin-left: 1em; + } + + /* j */ + + /* l */ + tei-l { + display: block; + //width: 35em; + } + tei-l[data-lineno]:before { + content: attr(data-lineno); + position: absolute; + left: 2em; + } + tei-lb:after { + content: '\a'; + white-space: pre; + } + tei-lg { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-list { + display: block; + margin-top: 1em; + margin-bottom: 1em; + list-style-type: none; + } + tei-item > tei-list { + margin-top: 0; + } + tei-sourcedesc tei-list { + list-style-type: none; + } + tei-sourcedesc > tei-list > tei-head { + font-size: 140%; + font-weight: bold; + } + tei-sourcedesc tei-list > tei-item { + display: list-item; + } + /* Match only lists that are descendants of + tei-text. Otherwise they show up in the header. */ + tei-text tei-list[type=simple] { + list-style-type: none; + } + tei-text tei-list[type=bulleted] { + list-style-type: disc; + } + tei-text tei-list[type=ordered] { + list-style-type: none; + counter-reset: items 0; + } + tei-text tei-list[type=ordered] > tei-item { + display: list-item; + margin-left: 0; + } + tei-item > tei-list[type=ordered] { + margin-left: 1em; + } + tei-text tei-list[type=ordered] > item:before { + counter-increment: items 1; + content: counter(items, decimal) ". "; + } + tei-text tei-list[type=gloss] { + list-style-type: none; + } + tei-list[type="gloss"] > tei-label { + display: block; + margin-top: 0.25em; + margin-bottom: 0.25em; + font-weight: bold; + } + tei-list[type="gloss"] > tei-item { + margin-left: 2em; + } + tei-item > tei-list[type=ordered] { + margin-left: 1em; + } + tei-listapp { + display: block; + margin: 1em; + padding: 1em; + } + tei-listbibl { + display:block; + list-style-type: none; + margin-left: .5 em; + margin-top: .5em; + } + tei-listbibl > tei-head { + font-size: 120%; + font-weight: bold; + } + tei-listbibl > tei-bibl { + display: list-item; + margin-left: .5em; + } + tei-listwit { + display:block; + list-style-type: none; + margin-left: .5em; + } + tei-listwit > tei-head { + font-size: 120%; + font-weight: bold; + } + tei-listwit > tei-witness { + display: list-item; + margin-left: 2em; + text-indent: -1.1em; + } + tei-witness > tei-listwit { + display: inline; + } + tei-witness > tei-listwit > tei-head { + display: inline; + } + tei-witness > tei-listwit > tei-witness { + display: inline; + } + tei-locus { + display: none; + } + + /* m */ + tei-milestone { + display: none; + margin-left: auto; + margin-right: auto; + text-align: center; + } + tei-musicNotation { + font-weight: bold; + } + tei-musicNotation:before { + font-weight: bold; + content: "Musical Notation: "; + } + /* n */ + tei-node { + display: none; + } + tei-note { + display: none; + } + tei-notesstmt { + display: none; + } + /* o */ + tei-ovar { + font-style: italic; + } + tei-origPlace { + font-weight: bold; + } + tei-origPlace:before { + font-weight: bold; + content: "Place of Origin: "; + } + + /* p */ + tei-p { + display: block; + margin-top: 1em; + margin-bottom: 1em; + text-align: justify; + } + *[data-tei-rendition~="#center"] p { + text-align: center; + } + tei-availability > p:first-child { + margin-top: 0em; + } + tei-performance { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-person { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-personGrp { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-postscript { + display: block; + margin-top: 2em; + } + tei-principal { + font-weight: bold; + } + tei-principal:before { + font-weight: bold; + content: "Principal: "; + } + tei-profiledesc { + display: none; + } + tei-publicationstmt > * { + display: none; + } + tei-publicationstmt { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-publicationstmt > date { + display: none; + } + tei-publicationstmt > publisher { + display: none; + } + + /* q */ + tei-q { + quotes: "\201c" "\201d" "\2018" "\2019" "\201c" "\201d" "\2018" "\2019" "\201c" "\201d" "\2018" "\2019" "\201c" "\201d"; + } + tei-q:before { + content: ""; + } + tei-q:after { + content: ""; + } + tei-q[data-tei-next]:after { + content: "" !important; + } + tei-q[data-tei-prev]:before { + content: "" !important; + } + tei-quote { + font-style:italic; + } + + /* r */ + tei-app tei-rdg { + /*perhaps choice */ + display:none; + } + tei-re { + display: block; + margin-top: 0; + margin-bottom: 0; + } + tei-recordhist { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-ref { + color: #5f0000; + } + tei-remarks { + font-weight: bold; + } + tei-remarks:before { + font-weight: bold; + content: "remarks: "; + } + tei-respstmt { + display: block; + margin-top: 0; + margin-bottom: 0; + } + tei-revisiondesc { + display: none; + } + tei-row { + display: grid; + grid-auto-flow: column; + grid-auto-columns: 1fr; + } + + /* s */ + tei-salute { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-samplingdecl { + display: block; + margin-top: 0; + margin-bottom: 0; + } + tei-scriptnote { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-seal { + display: block; + margin-top: 0; + margin-bottom: 0; + } + tei-seal:before { + font-weight: bold; + content: "Seal: "; + } + tei-sealdesc { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-secFol:before { + font-weight: bold; + content: "Second Folio: "; + } + tei-secl>*:first-child:before { + content: "\a["; + white-space: pre; + } + tei-secl>*:last-child:after { + content: "]\a\a"; + white-space: pre; + } + tei-seg { + outline: 0px solid transparent; + } + tei-sense { + display: block; + margin-top: 0; + margin-bottom: 0; + } + tei-seriesstmt { + display: none; + } + tei-setting { + display: block; + margin-top: 0; + margin-bottom: 0; + } + tei-signed { + display: block; + margin-top: 2em; + } + tei-soCalled { + quotes: "\201c" "\201d" "\2018" "\2019" "\201c" "\201d" "\2018" "\2019" "\201c" "\201d" "\2018" "\2019" "\201c" "\201d"; + } + tei-soCalled:before { + content: open-quote; + } + tei-soCalled:after { + content: close-quote; + } + tei-soCalled[data-tei-next]:after { + content: "" !important; + } + tei-soCalled[data-tei-prev]:before { + content: "" !important; + } + tei-sound { + font-style: italic; + } + tei-source { + display: block; + margin-top: 0; + margin-bottom: 0; + } + tei-sourcedesc { + display: none; + } + tei-space:before { + font-weight: bold; + content: ""; + } + tei-span[data-tei-data-n]:before { + content: attr(data-n); + } + tei-speaker { + font-weight: bold; + margin-right: 0; + } + tei-sponsor { + display: block; + margin-top: 0; + margin-bottom: 0; + } + tei-sponsor:before { + font-weight: bold; + content: "Sponsor:"; + } + tei-stage { + display: block; + margin-top: 1em; + margin-bottom: 1em; + font-style: italic; + } + tei-stamp { + display: block; + margin-top: 1em; + margin-bottom: 1em; + } + tei-stamp:before { + font-weight: bold; + content: "Stamped: "; + } + + tei-surplus>*:first-child:before { + content: "\a["; + white-space: pre; + } + tei-surplus>*:last-child:after { + content: "]\a\a"; + white-space: pre; + } + /* t */ + tei-tei { + display: block; + } + tei-table { + display: block; + border-top: thin solid black; + border-left: thin solid black; + } + tei-table { + margin-top: 2em; + margin-bottom: 2em; + font-size: 12pt; + } + tei-table > tei-head { + border-bottom: thin solid black; + border-right: thin solid black; + font-size: 120%; + font-weight: bold; + padding: 2px; + text-align: center; + } + tei-teiheader { + display: block; + margin-top: 2em; + margin-bottom: 2em; + } + tei-tei > tei-text { + display: block; + line-height: 1.5; + } + tei-textclass { + display: none; + } + tei-textdesc { + display: none; + } + /* title */ + tei-tei tei-title { + display: inline; + } + tei-tei tei-title[level=a] { + quotes: "\201c" "\201d" "\2018" "\2019" "\201c" "\201d" "\2018" "\2019" "\201c" "\201d" "\2018" "\2019" "\201c" "\201d"; + } + tei-tei tei-title[level=a]:before { + content: open-quote; + } + tei-tei tei-title[level=a]:after { + content: close-quote; + } + tei-tei tei-title[level=a][next]:after { + content: "" !important; + } + tei-tei tei-title[level=a][prev]:before { + content: "" !important; + } + tei-title[level=m] { + font-style: italic; + } + tei-titlestmt > tei-title { + display: block; + font-family: Arvo, sans-serif; + font-weight: normal; + font-weight: bold !important; + font-size: 150%; + } + tei-typedesc { + display: none; + } + /* u */ + tei-u:before { + content: "-"; + } + tei-view { + font-style: italic; + } + tei-wit { + display: inline; + } + tei-witdetail { + display:none; + } } diff --git a/editioncrafter/src/scss/_base.scss b/editioncrafter/src/scss/_base.scss index 1126f32..1e17167 100644 --- a/editioncrafter/src/scss/_base.scss +++ b/editioncrafter/src/scss/_base.scss @@ -14,161 +14,164 @@ $dark-maroon: #460C0A; $light-maroon: #96332f; $grey: #858585; -*{ - box-sizing: border-box; -} -div{ - width: auto; -} - -body { - padding: 0; - margin: 0; - box-sizing: border-box; -} - -.warning { - color: yellow; -} - -.fa { - width: max(1.5rem, 24px); - padding: max(0.2rem, 3.2px) max(0.1rem, 1.6px) max(0.1rem, 1.6px); - text-align: center; -} - -.fa.active { - background-color: #9e9e9e0a; - border: max(0.2rem, 3.2px) solid #FF9800; -} - -.fa-book.active { - border-radius: 0 max(2rem, 32px) max(2rem, 32px) 0; -} - -.fa:not(.active) { - color: grey; -} - -.fa.fa-lock, -.fa.fa-lock-open { - border-radius: max(2rem, 32px) 0 0 max(2rem, 32px); -} - -.line-clamp { - display: -webkit-box; - -webkit-box-orient: vertical; - overflow: hidden; - -webkit-line-clamp: 3; - &.two-lines{ - -webkit-line-clamp: 2; - } - } - -.flex-parent { - display:flex; - &.half-width{ - width: 50%; - } - &.full-width{ - width: 100%; - } - &.column { - flex-direction:column; - } - &.jc-start { - justify-content:flex-start; - } - &.jc-center { - justify-content:center; - } - &.jc-end { - justify-content:flex-end; - } - &.jc-space-btw { - justify-content:space-between; - } - &.jc-space-around { - justify-content:space-around; - } - &.ai-start { - align-items:flex-start; - } - &.ai-center { - align-items:center; - } - &.ai-end { - align-items:flex-end; - } - &.wrap { - flex-wrap:wrap; - } - &.row-reverse { - flex-direction: row-reverse; - } - &.column-reverse { - flex-direction: column-reverse; - } - @for $i from 1 through 12 { - .flex-#{$i} { - flex:$i; +.editioncrafter { + + *{ + box-sizing: border-box; + } + div{ + width: auto; + } + + body { + padding: 0; + margin: 0; + box-sizing: border-box; + } + + .warning { + color: yellow; + } + + .fa { + width: max(1.5rem, 24px); + padding: max(0.2rem, 3.2px) max(0.1rem, 1.6px) max(0.1rem, 1.6px); + text-align: center; + } + + .fa.active { + background-color: #9e9e9e0a; + border: max(0.2rem, 3.2px) solid #FF9800; + } + + .fa-book.active { + border-radius: 0 max(2rem, 32px) max(2rem, 32px) 0; + } + + .fa:not(.active) { + color: grey; + } + + .fa.fa-lock, + .fa.fa-lock-open { + border-radius: max(2rem, 32px) 0 0 max(2rem, 32px); + } + + .line-clamp { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 3; + &.two-lines{ + -webkit-line-clamp: 2; + } } - } -} - -.bg-maroon-gradient{ - background-image: linear-gradient(to right, #792421, #66211c, #531d17, #411912, #30140d); -} -.bg-dark-gradient-bt{ - background-image: linear-gradient(to bottom, hsl(30, 50%, 90%), hsl(50, 43%, 83%), hsl(43, 54%, 77%)); -} -.bg-dark-gradient-tb{ - background-image: linear-gradient(to bottom, hsl(43, 54%, 77%), hsl(50, 43%, 83%), hsl(30, 50%, 90%)); -} -.bg-light-gradient-bt{ - background-image: linear-gradient(to bottom, hsl(30, 50%, 99%), hsl(50, 43%, 90%), hsl(43, 54%, 85%)); -} -.bg-light-gradient-tb{ - background-image: linear-gradient(to bottom, hsl(43, 54%, 85%), hsl(50, 43%, 90%), hsl(30, 50%, 99%)); -} - -.accent-bar{ - height: 10px; - width: 100%; -} - -.invisible{ - opacity:0; -} - -.disabled{ - opacity: 0.5; -} - -.figure-dialog-img-container { - img { - display: block; + + .flex-parent { + display:flex; + &.half-width{ + width: 50%; + } + &.full-width{ + width: 100%; + } + &.column { + flex-direction:column; + } + &.jc-start { + justify-content:flex-start; + } + &.jc-center { + justify-content:center; + } + &.jc-end { + justify-content:flex-end; + } + &.jc-space-btw { + justify-content:space-between; + } + &.jc-space-around { + justify-content:space-around; + } + &.ai-start { + align-items:flex-start; + } + &.ai-center { + align-items:center; + } + &.ai-end { + align-items:flex-end; + } + &.wrap { + flex-wrap:wrap; + } + &.row-reverse { + flex-direction: row-reverse; + } + &.column-reverse { + flex-direction: column-reverse; + } + @for $i from 1 through 12 { + .flex-#{$i} { + flex:$i; + } + } + } + + .bg-maroon-gradient{ + background-image: linear-gradient(to right, #792421, #66211c, #531d17, #411912, #30140d); + } + .bg-dark-gradient-bt{ + background-image: linear-gradient(to bottom, hsl(30, 50%, 90%), hsl(50, 43%, 83%), hsl(43, 54%, 77%)); + } + .bg-dark-gradient-tb{ + background-image: linear-gradient(to bottom, hsl(43, 54%, 77%), hsl(50, 43%, 83%), hsl(30, 50%, 90%)); + } + .bg-light-gradient-bt{ + background-image: linear-gradient(to bottom, hsl(30, 50%, 99%), hsl(50, 43%, 90%), hsl(43, 54%, 85%)); + } + .bg-light-gradient-tb{ + background-image: linear-gradient(to bottom, hsl(43, 54%, 85%), hsl(50, 43%, 90%), hsl(30, 50%, 99%)); + } + + .accent-bar{ + height: 10px; width: 100%; - height: auto; - } -} - -a:hover { - text-decoration: underline; -} - -a { - color: $maroon; - text-decoration: none; -} - -@include keyframes(slide-down) { - 0% { - height: 2px; - bottom: -5px; } - 100% { - height: 6px; - bottom: -9px; + + .invisible{ + opacity:0; + } + + .disabled{ + opacity: 0.5; + } + + .figure-dialog-img-container { + img { + display: block; + width: 100%; + height: auto; + } + } + + a:hover { + text-decoration: underline; + } + + a { + color: $maroon; + text-decoration: none; + } + + @include keyframes(slide-down) { + 0% { + height: 2px; + bottom: -5px; + } + 100% { + height: 6px; + bottom: -9px; + } } -} \ No newline at end of file +} diff --git a/editioncrafter/src/scss/_diplomatic.scss b/editioncrafter/src/scss/_diplomatic.scss index 6cb28ef..2f690b6 100644 --- a/editioncrafter/src/scss/_diplomatic.scss +++ b/editioncrafter/src/scss/_diplomatic.scss @@ -1,4 +1,4 @@ -#diplomatic { +#diplomatic.editioncrafter { container-type: inline-size; container-name: diplomatic; #content-view, .header-wrapper, #entry-list-view, #annotation-list-view { @@ -225,7 +225,7 @@ } } -#diplomatic.sticky { +#diplomatic.editioncrafter.sticky { .header-wrapper.sticky { position: sticky; top: 0; @@ -233,7 +233,7 @@ } } -#diplomatic { +#diplomatic.editioncrafter { #footer { color: white; background-color: $dark-maroon; @@ -299,7 +299,7 @@ } } -#diplomatic.fixed { +#diplomatic.editioncrafter { background: white; // position: fixed; width: auto; diff --git a/editioncrafter/src/scss/_globalNavigation.scss b/editioncrafter/src/scss/_globalNavigation.scss index 6793718..3d714b2 100644 --- a/editioncrafter/src/scss/_globalNavigation.scss +++ b/editioncrafter/src/scss/_globalNavigation.scss @@ -1,34 +1,37 @@ -#globalNavigation { - display: flex; - align-items: center; - flex-direction: row-reverse; - font-size: max(0.9rem, 14.4px); - position: relative; - top: min(-4rem, -64px); - right: max(2rem, 32px); - float: right; - @include md { - display: block; - } -} +.editioncrafter { -#globalNavigation .expandedViewOnly { - span, a { - color: white; - margin-left: max(1rem, 16px); - cursor: pointer; + #globalNavigation { + display: flex; + align-items: center; + flex-direction: row-reverse; + font-size: max(0.9rem, 14.4px); + position: relative; + top: min(-4rem, -64px); + right: max(2rem, 32px); + float: right; + @include md { + display: block; + } + } + + #globalNavigation .expandedViewOnly { + span, a { + color: white; + margin-left: max(1rem, 16px); + cursor: pointer; + } + } + + #globalNavigation span .francais { + font-weight: 100; + } + + #globalNavigation input { + height: max(1.5rem, 24px); + padding: 0 0 0 max(0.5rem, 8px); + font-style: italic; + border: 1px solid #00000063; + color: #756c6c; + background-color: #D8D8D8; } -} - -#globalNavigation span .francais { - font-weight: 100; -} - -#globalNavigation input { - height: max(1.5rem, 24px); - padding: 0 0 0 max(0.5rem, 8px); - font-style: italic; - border: 1px solid #00000063; - color: #756c6c; - background-color: #D8D8D8; } diff --git a/editioncrafter/src/scss/_glossary.scss b/editioncrafter/src/scss/_glossary.scss index 767dcb2..c668b3e 100644 --- a/editioncrafter/src/scss/_glossary.scss +++ b/editioncrafter/src/scss/_glossary.scss @@ -1,108 +1,112 @@ -#glossaryView { +.editioncrafter { - #glossaryViewInner { - margin: 5px 0 0 0; - @include md { - margin: 52px 0 0 0; + #glossaryView { + + #glossaryViewInner { + margin: 5px 0 0 0; + @include md { + margin: 52px 0 0 0; + } + width: calc(100% - 1.2rem); + max-height: calc(100vh - 170px); + padding: 5px 16px; } - width: calc(100% - 1.2rem); - max-height: calc(100vh - 170px); - padding: 5px 16px; - } - - .cite-header { - text-align: center; - margin-bottom: 5px; - } - - .cite-instructions { - margin: 20px; - margin-left: 15%; - margin-right: 15%; - } - - // .navigationComponent { - // position: sticky; - // top: 0; - // @include md { - // top: initial; - // } - // } - - // .navigationComponentNarrow { - // position: sticky; - // top: 0; - // } - .glossaryNav { - - background: white; - padding: 5px; - position:relative; + .cite-header { + text-align: center; + margin-bottom: 5px; + } + + .cite-instructions { + margin: 20px; + margin-left: 15%; + margin-right: 15%; + } + + // .navigationComponent { + // position: sticky; + // top: 0; + // @include md { + // top: initial; + // } + // } + + // .navigationComponentNarrow { + // position: sticky; + // top: 0; + // } + + .glossaryNav { - #glossary-filter { - margin-right: 10px; + background: white; + padding: 5px; + position:relative; + + #glossary-filter { + margin-right: 10px; + } + .alphaNav { + display: none; + @include md { + display: block; + } + } } + .alphaNav { - display: none; + color: blue; + display: inline; + } + + .title { + white-space: nowrap; + position: relative; + width: calc(100% - max(1.7rem, 27.2px)); + text-align: center; + top: -2em; + font-size: max(1.8rem, 28.8px); + font-weight: 700; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; @include md { - display: block; + top: -1em; } } - } - - .alphaNav { - color: blue; - display: inline; - } - - .title { - white-space: nowrap; - position: relative; - width: calc(100% - max(1.7rem, 27.2px)); - text-align: center; - top: -2em; - font-size: max(1.8rem, 28.8px); - font-weight: 700; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - @include md { - top: -1em; - } - } - - - .subtitle { - white-space: nowrap; - position: relative; - width: calc(100% - max(1.7rem, 27.2px)); - text-align: center; - top: -2em; - font-style: italic; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - @include md { - top: -1em; + + + .subtitle { + white-space: nowrap; + position: relative; + width: calc(100% - max(1.7rem, 27.2px)); + text-align: center; + top: -2em; + font-style: italic; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + @include md { + top: -1em; + } } - } - - #glossaryContent { - padding: max(80px, 5rem) 0 0; - max-height: 100vh; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; - min-width: max(10rem, 160px); - @include md { - padding: max(3.5rem, 56px) 0 0; + + #glossaryContent { + padding: max(80px, 5rem) 0 0; + max-height: 100vh; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + min-width: max(10rem, 160px); + @include md { + padding: max(3.5rem, 56px) 0 0; + } } + } - } + diff --git a/editioncrafter/src/scss/_imageGridView.scss b/editioncrafter/src/scss/_imageGridView.scss index bb3baa3..fb792fc 100644 --- a/editioncrafter/src/scss/_imageGridView.scss +++ b/editioncrafter/src/scss/_imageGridView.scss @@ -1,78 +1,81 @@ -.imageGridComponent { - background-color: #000000; - font-size: max(0.8rem, 12.8px); - overflow: scroll; - height: 100%; - max-height: 100dvh; -} - -.imageGridComponent .thumbnail { - background-color: inherit; - border: none; -} - -.imageGridComponent > ul { - display: flex; - flex-wrap: wrap; - list-style: none; - padding-left: 0; - margin: max(1.5rem, 24px) 0 max(8rem, 128px) max(2rem, 32px); -} - -.imageGridComponent > ul > li { - margin-bottom: 20px; - width: 150px; -} - -.imageGridComponent > ul > li > figure { - margin: 8px; -} - -.imageGridComponent > ul > li > figure:hover { - border: 2px #eee solid; - margin: 6px; -} - -.imageGridComponent > ul > li > .thumbnail-caption { - text-align: center; - color: white; - margin: 0 10px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.hidden { - display: none; -} +.editioncrafter { -.imageGridComponent { - .imageGridToolbar { - padding: 5px; + .imageGridComponent { + background-color: #000000; + font-size: max(0.8rem, 12.8px); + overflow: scroll; + height: 100%; + max-height: 100dvh; + } + + .imageGridComponent .thumbnail { + background-color: inherit; + border: none; + } + + .imageGridComponent > ul { + display: flex; + flex-wrap: wrap; + list-style: none; + padding-left: 0; + margin: max(1.5rem, 24px) 0 max(8rem, 128px) max(2rem, 32px); + } + + .imageGridComponent > ul > li { + margin-bottom: 20px; + width: 150px; + } + + .imageGridComponent > ul > li > figure { + margin: 8px; + } + + .imageGridComponent > ul > li > figure:hover { + border: 2px #eee solid; + margin: 6px; + } + + .imageGridComponent > ul > li > .thumbnail-caption { + text-align: center; color: white; - - .jump-to { - float: right; - display: 'inline'; - margin-right: 30px; - - #jump-to-input { - margin-left: 5px; - } - - #jump-to-button { - margin-left: 5px; - cursor: pointer; + margin: 0 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .hidden { + display: none; + } + + .imageGridComponent { + .imageGridToolbar { + padding: 5px; + color: white; + + .jump-to { + float: right; + display: 'inline'; + margin-right: 30px; + + #jump-to-input { + margin-left: 5px; + } + + #jump-to-button { + margin-left: 5px; + cursor: pointer; + } } - } - - .doc-select { - display: inline; - margin-left: 30px; - font-size: max(0.8rem, 12.8px); - - .MuiInputBase-root { + + .doc-select { + display: inline; + margin-left: 30px; font-size: max(0.8rem, 12.8px); + + .MuiInputBase-root { + font-size: max(0.8rem, 12.8px); + } } } } diff --git a/editioncrafter/src/scss/_imageView.scss b/editioncrafter/src/scss/_imageView.scss index 447e4e0..68be62b 100644 --- a/editioncrafter/src/scss/_imageView.scss +++ b/editioncrafter/src/scss/_imageView.scss @@ -1,38 +1,41 @@ -#image-view-seadragon-left, -#image-view-seadragon-right, -#image-view-seadragon-third { - width: 100%; - height: 100%; - max-height: 100dvh; - grid-area: image_viewer; - background: black; -} +.editioncrafter { -.imageViewComponent { - position: relative; - padding: 0; - margin: 0; - width: 100%; - height: 100%; - max-height: 100dvh; + #image-view-seadragon-left, + #image-view-seadragon-right, + #image-view-seadragon-third { + width: 100%; + height: 100%; + max-height: 100dvh; + grid-area: image_viewer; + background: black; + } + + .imageViewComponent { + position: relative; + padding: 0; + margin: 0; + width: 100%; + height: 100%; + max-height: 100dvh; + } + + .imageViewComponent .navigationComponent { + position: absolute; + } + + .a9s-annotation.a9s-annotation.selected > rect, + .a9s-annotation.a9s-annotation.selected > polygon + { + stroke: #4385F6 !important; + stroke-linejoin: round; + fill: rgba(67, 133, 246, 0.1) !important; + } + + .a9s-annotation.a9s-annotation.hover > rect, + .a9s-annotation.a9s-annotation.hover > polygon + { + stroke: #4385F6 !important; + stroke-linejoin: round; } - -.imageViewComponent .navigationComponent { - position: absolute; -} - -.a9s-annotation.a9s-annotation.selected > rect, -.a9s-annotation.a9s-annotation.selected > polygon - { - stroke: #4385F6 !important; - stroke-linejoin: round; - fill: rgba(67, 133, 246, 0.1) !important; -} - -.a9s-annotation.a9s-annotation.hover > rect, -.a9s-annotation.a9s-annotation.hover > polygon - { - stroke: #4385F6 !important; - stroke-linejoin: round; } diff --git a/editioncrafter/src/scss/_imageZoomControl.scss b/editioncrafter/src/scss/_imageZoomControl.scss index db7af4d..697d391 100644 --- a/editioncrafter/src/scss/_imageZoomControl.scss +++ b/editioncrafter/src/scss/_imageZoomControl.scss @@ -1,52 +1,56 @@ -.ImageZoomControl { - position: absolute; - z-index: 1; - top: max(8rem, 128px); - color: white; - // width: 1rem; - list-style: none; - background: #4A4A4A; - opacity: 0.4; - margin:0; - padding: max(.4rem, 6.4px) max(.5rem, 8px); - border-radius: max(0.3rem, 4.8px); - @include md { - top: max(4rem, 64px); - left: max(2rem, 32px); +.editioncrafter { + + .ImageZoomControl { + position: absolute; + z-index: 1; + top: max(8rem, 128px); + color: white; + // width: 1rem; + list-style: none; + background: #4A4A4A; + opacity: 0.4; + margin:0; + padding: max(.4rem, 6.4px) max(.5rem, 8px); + border-radius: max(0.3rem, 4.8px); + @include md { + top: max(4rem, 64px); + left: max(2rem, 32px); + } + } + + .ImageZoomControl > li { + color: #E0E0E0; + margin: 0 !important; + } + + .ImageZoomControl > li > .zoom-in { + margin-top: 8px; + } + + .ImageZoomControl > li:hover { + color: white; + } + + .ImageZoomControl > li > .zoom-3 { + margin-top: 8px; + } + + .ImageZoomControl > li > .zoom-2 { + margin-top: 8px; + margin-left: 5px; + } + + .ImageZoomControl > li > .zoom-1 { + margin-top: 8px; + margin-left: 7px; + } + + .ImageZoomControl > li > .zoom-out { + margin-top: 8px; + } + + .ImageZoomControl > li > .zoom-grid { + margin-top: 30px; } } -.ImageZoomControl > li { - color: #E0E0E0; - margin: 0 !important; -} - -.ImageZoomControl > li > .zoom-in { - margin-top: 8px; -} - -.ImageZoomControl > li:hover { - color: white; -} - -.ImageZoomControl > li > .zoom-3 { - margin-top: 8px; -} - -.ImageZoomControl > li > .zoom-2 { - margin-top: 8px; - margin-left: 5px; -} - -.ImageZoomControl > li > .zoom-1 { - margin-top: 8px; - margin-left: 7px; -} - -.ImageZoomControl > li > .zoom-out { - margin-top: 8px; -} - -.ImageZoomControl > li > .zoom-grid { - margin-top: 30px; -} diff --git a/editioncrafter/src/scss/_jumpbox.scss b/editioncrafter/src/scss/_jumpbox.scss index 0841fb4..fd10c40 100644 --- a/editioncrafter/src/scss/_jumpbox.scss +++ b/editioncrafter/src/scss/_jumpbox.scss @@ -1,42 +1,45 @@ -.jumpToFolio_component { - margin: max(1rem, 16px) 0 0 min(-4.5rem, -72px); - padding: max(0.6rem, 9.6px); - height: max(1.2rem, 19.2px); - width: max(9.5rem, 152px); - background: #e7e7e7; - border: 1px solid rgba(90, 98, 102, 0.53); - border-radius: max(0.3rem, 4.8px); - -webkit-box-shadow: 6px 6px 5px 0 rgba(0, 0, 0, 0.211765); - -moz-box-shadow: 6px 6px 5px 0 rgba(0, 0, 0, 0.211765); - box-shadow: 6px 6px 5px 0 rgba(0, 0, 0, 0.211765); - font-family: sans-serif; -} -.jumpToFolio_component input:focus{ - outline: none; -} - -.jumpToFolio_component:after, -.jumpToFolio_component:before { - bottom: 100%; - left: 50%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; -} - -.jumpToFolio_component:after { - border-color: rgba(255, 255, 255, 0); - border-bottom-color: #e7e7e7; - border-width: 9px; - margin-left: -9px; -} +.editioncrafter { -.jumpToFolio_component:before { - border-color: rgba(194, 225, 245, 0); - border-bottom-color: rgba(90, 98, 102, 0.53); - border-width: 11px; - margin-left: -11px; + .jumpToFolio_component { + margin: max(1rem, 16px) 0 0 min(-4.5rem, -72px); + padding: max(0.6rem, 9.6px); + height: max(1.2rem, 19.2px); + width: max(9.5rem, 152px); + background: #e7e7e7; + border: 1px solid rgba(90, 98, 102, 0.53); + border-radius: max(0.3rem, 4.8px); + -webkit-box-shadow: 6px 6px 5px 0 rgba(0, 0, 0, 0.211765); + -moz-box-shadow: 6px 6px 5px 0 rgba(0, 0, 0, 0.211765); + box-shadow: 6px 6px 5px 0 rgba(0, 0, 0, 0.211765); + font-family: sans-serif; + } + .jumpToFolio_component input:focus{ + outline: none; + } + + .jumpToFolio_component:after, + .jumpToFolio_component:before { + bottom: 100%; + left: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .jumpToFolio_component:after { + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #e7e7e7; + border-width: 9px; + margin-left: -9px; + } + + .jumpToFolio_component:before { + border-color: rgba(194, 225, 245, 0); + border-bottom-color: rgba(90, 98, 102, 0.53); + border-width: 11px; + margin-left: -11px; + } } diff --git a/editioncrafter/src/scss/_navigation.scss b/editioncrafter/src/scss/_navigation.scss index 7dcc29d..20bcf74 100644 --- a/editioncrafter/src/scss/_navigation.scss +++ b/editioncrafter/src/scss/_navigation.scss @@ -1,205 +1,208 @@ -.navigationComponent { - #tool-bar-buttons{ - font-size: 15px; - } - position: sticky; - display: none; - z-index: 2; - height:48px; - width: 100%; - white-space: nowrap; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - padding:4px; - background-color: white; - border-radius: max(0.3rem, 4.8px); - @include sm { - top: 80px; - } - @include md { - top: 0; - left: 0; - display: flex; - } - button{ - cursor: pointer; - } -} +.editioncrafter { -.navigationComponentNarrow { - #tool-bar-buttons{ - font-size: 15px; - } - display: flex; - width: auto; - z-index: 2; - height:48px; - width: 100%; - white-space: nowrap; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - padding:4px; - background-color: white; - @include md { + .navigationComponent { + #tool-bar-buttons{ + font-size: 15px; + } + position: sticky; display: none; + z-index: 2; + height:48px; + width: 100%; + white-space: nowrap; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + padding:4px; + background-color: white; + border-radius: max(0.3rem, 4.8px); + @include sm { + top: 80px; + } + @include md { + top: 0; + left: 0; + display: flex; + } + button{ + cursor: pointer; + } } - button{ - cursor: pointer; + + .navigationComponentNarrow { + #tool-bar-buttons{ + font-size: 15px; + } + display: flex; + width: auto; + z-index: 2; + height:48px; + width: 100%; + white-space: nowrap; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + padding:4px; + background-color: white; + @include md { + display: none; + } + button{ + cursor: pointer; + } } -} - -.navigationRow{ - display:none; - justify-content:space-between; - align-items:center; - gap: 10px; - width: 100%; - padding:12px 10px 12px 10px; - @include md { - display:flex; - } -} - -.navigationRowNarrow { - display:flex; - justify-content:space-between; - align-items: center; - gap: 10px; - width: 100%; - padding:6px 5px 6px 5px; - @include md { + + .navigationRow{ display:none; - } -} - -.helpIcon { - display: inline-block; - margin-top:6px; - margin-right:16px; - @include md { - display: block; - } -} - -.dropdownV2 { - width:150px; - margin-right:10px; -} - -.imageViewComponent .navigationComponent { - background-color: #4A4A4A; - border-radius: max(0.3rem, 4.8px); - opacity: 0.8; - @include md { + justify-content:space-between; + align-items:center; + gap: 10px; + width: 100%; + padding:12px 10px 12px 10px; + @include md { + display:flex; + } + } + + .navigationRowNarrow { + display:flex; + justify-content:space-between; + align-items: center; + gap: 10px; + width: 100%; + padding:6px 5px 6px 5px; + @include md { + display:none; + } + } + + .helpIcon { + display: inline-block; + margin-top:6px; + margin-right:16px; + @include md { + display: block; + } + } + + .dropdownV2 { + width:150px; + margin-right:10px; + } + + .imageViewComponent .navigationComponent { + background-color: #4A4A4A; + border-radius: max(0.3rem, 4.8px); + opacity: 0.8; + @include md { + background-color: rgba(0,0,0,1); + color: #ffffff; + border-radius: 0; + opacity: 1; + } + + } + + .imageViewComponent .navigationComponentNarrow { background-color: rgba(0,0,0,1); color: #ffffff; border-radius: 0; opacity: 1; } - -} - -.imageViewComponent .navigationComponentNarrow { - background-color: rgba(0,0,0,1); - color: #ffffff; - border-radius: 0; - opacity: 1; -} - -.transcriptionViewComponent .navigationComponent { - background-color: rgba(255,255,255,1);; - color: #000000; -} - -#doc-type-help:after { - color: rgb(151, 142, 142); -} -#doc-type-help{ - .dark{ - .MuiSvgIcon-root.MuiSelect-icon{ - color: white; + + .transcriptionViewComponent .navigationComponent { + background-color: rgba(255,255,255,1);; + color: #000000; + } + + #doc-type-help:after { + color: rgb(151, 142, 142); + } + #doc-type-help{ + .dark{ + .MuiSvgIcon-root.MuiSelect-icon{ + color: white; + } } } -} - -.breadcrumbs { - overflow-x:hidden; - display: hidden; - align-items: baseline; - max-width: 70%; - @include md { + + .breadcrumbs { + overflow-x:hidden; + display: hidden; + align-items: baseline; + max-width: 70%; + @include md { + display: flex; + } + } + + .breadcrumbsNarrow { + overflow-x:hidden; display: flex; + align-items: baseline; + max-width: 70%; + @include md { + display: none; + } } -} - -.breadcrumbsNarrow { - overflow-x:hidden; - display: flex; - align-items: baseline; - max-width: 70%; - @include md { - display: none; + + .breadcrumbs .folioName, .breadcrumbsNarrow .folioName { + display:inline; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-weight: 900; + text-decoration:underline; } -} - -.breadcrumbs .folioName, .breadcrumbsNarrow .folioName { - display:inline; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-weight: 900; - text-decoration:underline; -} - -.closeX { - float: right; - padding: 3px; - font-style: bold; - &:hover { - cursor: pointer; - } -} - -.helpContainer .MuiListItem-root { - display: flex; - gap: 10px; - } - -.helpContainer { - padding:12px; - width:335px; - height: min(600px, calc(100vh - 40px)); - position: relative; - top: 40px; - overflow-x: auto; - - .readingGuide { - - td { - padding: 8px; + + .closeX { + float: right; + padding: 3px; + font-style: bold; + &:hover { + cursor: pointer; } - - h2 { - margin-top: 16px; - margin-bottom: 10px; + } + + .helpContainer .MuiListItem-root { + display: flex; + gap: 10px; + } + + .helpContainer { + padding:12px; + width:335px; + height: min(600px, calc(100vh - 40px)); + position: relative; + top: 40px; + overflow-x: auto; + + .readingGuide { + + td { + padding: 8px; + } + + h2 { + margin-top: 16px; + margin-bottom: 10px; + } } } -} - - -.searchHelpContainer { - padding: 10px 15px 10px 0; - width:335px; -} - -.helpHeader{ - text-align:center; -} + + + .searchHelpContainer { + padding: 10px 15px 10px 0; + width:335px; + } + + .helpHeader{ + text-align:center; + } +} diff --git a/editioncrafter/src/scss/_pagination.scss b/editioncrafter/src/scss/_pagination.scss index b813a69..25f725d 100644 --- a/editioncrafter/src/scss/_pagination.scss +++ b/editioncrafter/src/scss/_pagination.scss @@ -1,45 +1,48 @@ -.paginationComponent { - white-space: nowrap; +.editioncrafter { + + .paginationComponent { + white-space: nowrap; + + text-align: center; + font-size: max(1.2rem, 19.2px); + font-weight: 700; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + margin-top:52px; + @include md { + margin-bottom: 0; + } + } + // .paginationComponent:nth-of-type(3){ + // padding:1rem 0 0 0; + // } - text-align: center; - font-size: max(1.2rem, 19.2px); - font-weight: 700; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - margin-top:52px; - @include md { - margin-bottom: 0; + .paginationComponent.bottom { + margin-top: 0; } -} -// .paginationComponent:nth-of-type(3){ -// padding:1rem 0 0 0; -// } - -.paginationComponent.bottom { - margin-top: 0; -} - -.paginationControl { - padding: 16px; -} - -.paginationControl .arrow { - font-size: max(1.8rem, 28.8px); - color: #4A4A4A; - margin: max(1rem, 16px) max(1rem, 16px) 0; - cursor: pointer; - display: inline-block; -} - -.arrow svg { - font-size: inherit !important; -} - -.paginationControl .folioName { - position: relative; - top: min(-.2rem, -3.2px); - color: #4A4A4A; + .paginationControl { + padding: 16px; + + } + + .paginationControl .arrow { + font-size: max(1.8rem, 28.8px); + color: #4A4A4A; + margin: max(1rem, 16px) max(1rem, 16px) 0; + cursor: pointer; + display: inline-block; + } + + .arrow svg { + font-size: inherit !important; + } + + .paginationControl .folioName { + position: relative; + top: min(-.2rem, -3.2px); + color: #4A4A4A; + } } diff --git a/editioncrafter/src/scss/_ringSpinner.scss b/editioncrafter/src/scss/_ringSpinner.scss index 3fe2b7f..f298515 100644 --- a/editioncrafter/src/scss/_ringSpinner.scss +++ b/editioncrafter/src/scss/_ringSpinner.scss @@ -1,88 +1,91 @@ /* Small inline spinner */ -.inline-ring-spinner { - display: inline-block; - margin-left: 10px; - margin-right: 10px; +.editioncrafter { + + .inline-ring-spinner { + display: inline-block; + margin-left: 10px; + margin-right: 10px; + width: 16px; + height: 16px; + } + + .inline-ring-spinner .light { + border: 3px solid #fff; + border-color: #fff transparent transparent transparent; + } + + .inline-ring-spinner .dark { + border: 3px solid #000; + border-color: #000 transparent transparent transparent; + } + + .inline-ring-spinner div { + box-sizing: border-box; + display: block; + position: absolute; width: 16px; height: 16px; + border-radius: 50%; + animation: inline-ring-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; } - -.inline-ring-spinner .light { - border: 3px solid #fff; - border-color: #fff transparent transparent transparent; -} - -.inline-ring-spinner .dark { - border: 3px solid #000; - border-color: #000 transparent transparent transparent; -} - -.inline-ring-spinner div { - box-sizing: border-box; - display: block; - position: absolute; - width: 16px; - height: 16px; - border-radius: 50%; - animation: inline-ring-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; -} -.inline-ring-spinner div:nth-child(1) { - animation-delay: -0.45s; -} -.inline-ring-spinner div:nth-child(2) { - animation-delay: -0.3s; -} -.inline-ring-spinner div:nth-child(3) { - animation-delay: -0.15s; -} -@keyframes inline-ring-spinner { - 0% { - transform: rotate(0deg); + .inline-ring-spinner div:nth-child(1) { + animation-delay: -0.45s; } - 100% { - transform: rotate(360deg); + .inline-ring-spinner div:nth-child(2) { + animation-delay: -0.3s; } -} - -/* Big spinner */ -.big-ring-spinner { - width: 100%; - height: 100vh; - display: flex; - justify-content: center; -} -.big-ring-spinner div { - box-sizing: border-box; - display: block; - position: absolute; - width: 128px; - height: 128px; - margin-top: 30vh; - border-radius: 50%; - animation: big-ring-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; -} -.big-ring-spinner.dark div { - border: 16px solid #000; - border-color: #000 transparent transparent transparent; -} -.big-ring-spinner.light div { - border: 16px solid #fff; - border-color: #fff transparent transparent transparent; -} -.big-ring-spinner div:nth-child(1) { - animation-delay: -0.45s; -} -.big-ring-spinner div:nth-child(2) { - animation-delay: -0.3s; -} -.big-ring-spinner div:nth-child(3) { - animation-delay: -0.15s; -} -@keyframes big-ring-spinner { - 0% { - transform: rotate(0deg); + .inline-ring-spinner div:nth-child(3) { + animation-delay: -0.15s; + } + @keyframes inline-ring-spinner { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + + /* Big spinner */ + .big-ring-spinner { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + } + .big-ring-spinner div { + box-sizing: border-box; + display: block; + position: absolute; + width: 128px; + height: 128px; + margin-top: 30vh; + border-radius: 50%; + animation: big-ring-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + } + .big-ring-spinner.dark div { + border: 16px solid #000; + border-color: #000 transparent transparent transparent; + } + .big-ring-spinner.light div { + border: 16px solid #fff; + border-color: #fff transparent transparent transparent; + } + .big-ring-spinner div:nth-child(1) { + animation-delay: -0.45s; + } + .big-ring-spinner div:nth-child(2) { + animation-delay: -0.3s; + } + .big-ring-spinner div:nth-child(3) { + animation-delay: -0.15s; } - 100% { - transform: rotate(360deg); + @keyframes big-ring-spinner { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } } \ No newline at end of file diff --git a/editioncrafter/src/scss/_singlePaneView.scss b/editioncrafter/src/scss/_singlePaneView.scss index 703f1af..cfe4a3c 100644 --- a/editioncrafter/src/scss/_singlePaneView.scss +++ b/editioncrafter/src/scss/_singlePaneView.scss @@ -1,9 +1,12 @@ -.single-pane-view { - height: 100%; - width: 100%; - overflow: auto; -} +.editioncrafter { -.single-pane-view > div { - height: 100%; + .single-pane-view { + height: 100%; + width: 100%; + overflow: auto; + } + + .single-pane-view > div { + height: 100%; + } } \ No newline at end of file diff --git a/editioncrafter/src/scss/_spinner.scss b/editioncrafter/src/scss/_spinner.scss index 65950f7..c0719ff 100644 --- a/editioncrafter/src/scss/_spinner.scss +++ b/editioncrafter/src/scss/_spinner.scss @@ -1,60 +1,64 @@ $spinner-size: max(1rem, 16px); -#loadingStateModal { - position: fixed; - z-index: 9000; - background-color: rgba(0, 0, 0, 0.48); - width: 100vw; - height: 100vh; -} - -.spinner { - width:100%; - height:100%; - margin: calc(50vh - (#{$spinner-size}/2)) auto 0 auto; - text-align: center; -} - -.spinner > div { - width: $spinner-size; - height: $spinner-size; - background-color: #ffffff; - border-radius: 100%; - display: inline-block; - -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; - animation: sk-bouncedelay 1.4s infinite ease-in-out both; -} - -.spinner .bounce1 { - -webkit-animation-delay: -0.32s; - animation-delay: -0.32s; -} +.editioncrafter { -.spinner .bounce2 { - -webkit-animation-delay: -0.16s; - animation-delay: -0.16s; -} -@-webkit-keyframes sk-bouncedelay { - 0%, - 100%, - 80% { - -webkit-transform: scale(0); + #loadingStateModal { + position: fixed; + z-index: 9000; + background-color: rgba(0, 0, 0, 0.48); + width: 100vw; + height: 100vh; } - - 40% { - -webkit-transform: scale(1.0); + + .spinner { + width:100%; + height:100%; + margin: calc(50vh - (#{$spinner-size}/2)) auto 0 auto; + text-align: center; } -} -@keyframes sk-bouncedelay { - 0%, - 100%, - 80% { - -webkit-transform: scale(0); - transform: scale(0); + + .spinner > div { + width: $spinner-size; + height: $spinner-size; + background-color: #ffffff; + border-radius: 100%; + display: inline-block; + -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; + animation: sk-bouncedelay 1.4s infinite ease-in-out both; } - - 40% { - -webkit-transform: scale(1.0); - transform: scale(1.0); + + .spinner .bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; + } + + .spinner .bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; + } + @-webkit-keyframes sk-bouncedelay { + 0%, + 100%, + 80% { + -webkit-transform: scale(0); + } + + 40% { + -webkit-transform: scale(1.0); + } + } + @keyframes sk-bouncedelay { + 0%, + 100%, + 80% { + -webkit-transform: scale(0); + transform: scale(0); + } + + 40% { + -webkit-transform: scale(1.0); + transform: scale(1.0); + } } } + diff --git a/editioncrafter/src/scss/_splitPaneView.scss b/editioncrafter/src/scss/_splitPaneView.scss index a8def1c..bbe6c9c 100644 --- a/editioncrafter/src/scss/_splitPaneView.scss +++ b/editioncrafter/src/scss/_splitPaneView.scss @@ -1,49 +1,51 @@ -.split-pane-view { - height: 100%; - width: 100%; - display: grid; -} - -.split-pane-view.two-pane { - grid-template-areas: "image_viewer divider transcription"; -} - -.split-pane-view.three-pane { - grid-template-areas: "image_viewer divider transcription divider_two third_pane"; -} - -.split-pane-view > .divider { - z-index: 2; - width: max(1rem, 16px); - background: #BBB; - cursor:ew-resize; - display: flex; -} - -.split-pane-view > .divider.first_divider { - grid-area: divider; -} - -.split-pane-view > .divider.second_divider { - grid-area: divider_two; -} - -.split-pane-view > .divider > .drawer-button { - align-self: center; - align: center; - cursor: auto; -} +.editioncrafter { -.split-pane-view > .divider > .drawer-button:hover { - color: white; -} - -.split-pane-view > .divider > .hidden { - display: none; -} - -.split-pane-view { - #annotation-view{ - font-size: 16px; + .split-pane-view { + height: 100%; + width: 100%; + display: grid; + } + + .split-pane-view.two-pane { + grid-template-areas: "image_viewer divider transcription"; + } + + .split-pane-view.three-pane { + grid-template-areas: "image_viewer divider transcription divider_two third_pane"; + } + + .split-pane-view > .divider { + z-index: 2; + width: max(1rem, 16px); + background: #BBB; + cursor:ew-resize; + display: flex; + } + + .split-pane-view > .divider.first_divider { + grid-area: divider; + } + + .split-pane-view > .divider.second_divider { + grid-area: divider_two; + } + + .split-pane-view > .divider > .drawer-button { + align-self: center; + cursor: auto; + } + + .split-pane-view > .divider > .drawer-button:hover { + color: white; + } + + .split-pane-view > .divider > .hidden { + display: none; + } + + .split-pane-view { + #annotation-view{ + font-size: 16px; + } } } diff --git a/editioncrafter/src/scss/_thumbnails.scss b/editioncrafter/src/scss/_thumbnails.scss index bb2b620..0fee477 100644 --- a/editioncrafter/src/scss/_thumbnails.scss +++ b/editioncrafter/src/scss/_thumbnails.scss @@ -1,17 +1,21 @@ $color-selected: rgba(7,122,255,0.831); -figure { - padding: max(0.3rem, 4.8px) 0 0; - border-radius: max(0.2rem, 3.2px); - margin: 0; - text-align: center; -} +.editioncrafter { -figure.current { - background-color: $color-selected; + figure { + padding: max(0.3rem, 4.8px) 0 0; + border-radius: max(0.2rem, 3.2px); + margin: 0; + text-align: center; + } + + figure.current { + background-color: $color-selected; + } + + .thumbnail-caption.current { + color: $color-selected !important; + font-weight: 900; + } } -.thumbnail-caption.current { - color: $color-selected !important; - font-weight: 900; -} diff --git a/editioncrafter/src/scss/_transcriptView.scss b/editioncrafter/src/scss/_transcriptView.scss index ad08572..af74681 100644 --- a/editioncrafter/src/scss/_transcriptView.scss +++ b/editioncrafter/src/scss/_transcriptView.scss @@ -1,201 +1,204 @@ -.transcriptionViewComponent { - .transcriptContent { - padding: 50px 16px; - font-size: max(0.9rem, 14.4px); - @include md { - padding: 5px 16px; +.editioncrafter { + + .transcriptionViewComponent { + .transcriptContent { + padding: 50px 16px; + font-size: max(0.9rem, 14.4px); + @include md { + padding: 5px 16px; + } + + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + //margin-bottom:92px; + + figure { + display: inline-flex; + flex-direction: column; + width: 100%; + align-items: center; + gap: 6px; + } + + .block[data-layout='right-middle'] { + max-width: 250px; } - - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; - //margin-bottom:92px; - - figure { - display: inline-flex; - flex-direction: column; - width: 100%; - align-items: center; - gap: 6px; + + .block[data-layout='right-top'] { + max-width: 250px; + } + + .block[data-layout='right-bottom'] { + max-width: 250px; + } + + // TODO refactor to appropriate TEI element + // .ups { + // background: lightgray; + // font-size: 14px; + // } + + .x-small-inline-figure { + margin: 5px; + border: 1px solid gray; + width: 30px; + } + + .small-inline-figure { + margin: 5px; + border: 1px solid gray; + width: 60px; + } + + .medium-inline-figure { + margin: 5px; + border: 1px solid gray; + width: 200px; + } + + .large-inline-figure { + margin: 5px; + border: 1px solid gray; + width: 350px; + } + + + .surface { + grid-area: transcription; + margin: 0; + padding: 0; + list-style: none; + } + + .grid-mode { + display: grid; + grid-auto-rows: minmax(min-content, 0fr); + grid-gap: 2px; + } + + .surface > .small-font { + font-size: 11pt; + } + + .surface > div { + padding: 10px; + } + + .surface > #z0 { + grid-area: z0; + } + + .surface > #z1 { + grid-area: z1; + } + + .surface > #z2 { + grid-area: z2; + } + + .surface > #z3 { + grid-area: z3; + } + + .surface > #z4 { + grid-area: z4; + } + + .surface > #z5 { + grid-area: z5; + } + + .surface > #z6 { + grid-area: z6; + } + + .surface > #z7 { + grid-area: z7; + } + + .surface > #z8 { + grid-area: z8; + } + + .surface > #z9 { + grid-area: z9; + } + + .surface > #z10 { + grid-area: z10; + } + + .surface > #z11 { + grid-area: z11; + } + + .surface > #z12 { + grid-area: z12; + } + + .surface > #z13 { + grid-area: z13; + } + + .surface > #z14 { + grid-area: z14; + } + + .surface > #z15 { + grid-area: z15; + } + + .surface > #z16 { + grid-area: z16; + } + + .surface > #z17 { + grid-area: z17; + } + + .surface > #z18 { + grid-area: z18; + } + + .surface > #z19 { + grid-area: z19; + } + + .surface > #z20 { + grid-area: z20; + } + .highlight { + background-color: yellow; + } } - - .block[data-layout='right-middle'] { - max-width: 250px; - } - - .block[data-layout='right-top'] { - max-width: 250px; - } - - .block[data-layout='right-bottom'] { - max-width: 250px; - } - - // TODO refactor to appropriate TEI element - // .ups { - // background: lightgray; - // font-size: 14px; - // } - - .x-small-inline-figure { - margin: 5px; - border: 1px solid gray; - width: 30px; } - - .small-inline-figure { - margin: 5px; - border: 1px solid gray; - width: 60px; + + tei-line { + display: block; } - - .medium-inline-figure { - margin: 5px; - border: 1px solid gray; - width: 200px; + + tei-add { + color: blue; + vertical-align: super; + font-size: 10pt; } - - .large-inline-figure { - margin: 5px; - border: 1px solid gray; - width: 350px; + + .selected-zone { + background: #EAF1FD; + border-radius: 5px; } - - - .surface { - grid-area: transcription; - margin: 0; - padding: 0; - list-style: none; + + .editor-comment-content { + word-wrap:break-word; } - - .grid-mode { - display: grid; - grid-auto-rows: minmax(min-content, 0fr); - grid-gap: 2px; - } - - .surface > .small-font { - font-size: 11pt; + + .inline-image { + max-width: 90%; + max-height: 360px; + margin: auto; + text-align: center; } - - .surface > div { - padding: 10px; - } - - .surface > #z0 { - grid-area: z0; - } - - .surface > #z1 { - grid-area: z1; - } - - .surface > #z2 { - grid-area: z2; - } - - .surface > #z3 { - grid-area: z3; - } - - .surface > #z4 { - grid-area: z4; - } - - .surface > #z5 { - grid-area: z5; - } - - .surface > #z6 { - grid-area: z6; - } - - .surface > #z7 { - grid-area: z7; - } - - .surface > #z8 { - grid-area: z8; - } - - .surface > #z9 { - grid-area: z9; - } - - .surface > #z10 { - grid-area: z10; - } - - .surface > #z11 { - grid-area: z11; - } - - .surface > #z12 { - grid-area: z12; - } - - .surface > #z13 { - grid-area: z13; - } - - .surface > #z14 { - grid-area: z14; - } - - .surface > #z15 { - grid-area: z15; - } - - .surface > #z16 { - grid-area: z16; - } - - .surface > #z17 { - grid-area: z17; - } - - .surface > #z18 { - grid-area: z18; - } - - .surface > #z19 { - grid-area: z19; - } - - .surface > #z20 { - grid-area: z20; - } - .highlight { - background-color: yellow; - } - } -} - -tei-line { - display: block; -} - -tei-add { - color: blue; - vertical-align: super; - font-size: 10pt; -} - -.selected-zone { - background: #EAF1FD; - border-radius: 5px; -} - -.editor-comment-content { - word-wrap:break-word; -} - -.inline-image { - max-width: 90%; - max-height: 360px; - margin: auto; - text-align: center; } diff --git a/editioncrafter/src/scss/_watermark.scss b/editioncrafter/src/scss/_watermark.scss index 86431ca..28236ec 100644 --- a/editioncrafter/src/scss/_watermark.scss +++ b/editioncrafter/src/scss/_watermark.scss @@ -1,27 +1,30 @@ $watermark-size: max(10rem, 160px); -.watermarkContainer .navigationComponent { - position: absolute; -} - -.watermark{ - width:100%; - height:100%; - margin: calc(50% - (#{$watermark-size}/2)) auto 0 auto; -} -.transcriptContent .watermark{ - margin: calc(50% - (25rem/2)) auto 0 auto; -} - -.watermark_contents{ - width:$watermark-size; - height:$watermark-size; - background-image: url("../img/editioncrafterlogo.png"); - background-size: 100%; - background-repeat: no-repeat; - margin: auto auto auto auto; -} +.editioncrafter { -.third_pane_blank { - min-width: 8px; + .watermarkContainer .navigationComponent { + position: absolute; + } + + .watermark{ + width:100%; + height:100%; + margin: calc(50% - (#{$watermark-size}/2)) auto 0 auto; + } + .transcriptContent .watermark{ + margin: calc(50% - (25rem/2)) auto 0 auto; + } + + .watermark_contents{ + width:$watermark-size; + height:$watermark-size; + background-image: url("../img/editioncrafterlogo.png"); + background-size: 100%; + background-repeat: no-repeat; + margin: auto auto auto auto; + } + + .third_pane_blank { + min-width: 8px; + } } diff --git a/editioncrafter/src/scss/_xmlView.scss b/editioncrafter/src/scss/_xmlView.scss index 19ef355..446db2d 100644 --- a/editioncrafter/src/scss/_xmlView.scss +++ b/editioncrafter/src/scss/_xmlView.scss @@ -1,30 +1,33 @@ -.xmlViewComponent .navigationComponent { - background-color: white; - color: #000000; } +.editioncrafter { -.xmlContent { - padding: 0; - margin: 4.5rem 0 0; - width: calc(100% - 1.2rem); - max-height: 100vh; - min-height: 100%; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; - min-width: max(10rem, 160px); - } - -.xmlViewComponent { - overflow: auto; - margin: 0 0 0 max(1rem, 16px); - max-height: calc(100vh - max(7rem, 112px)); -} - -.xmlContentInner { - max-height: 100%; -} - -.xmlContentInner pre { - overflow-x: auto; + .xmlViewComponent .navigationComponent { + background-color: white; + color: #000000; } + + .xmlContent { + padding: 0; + margin: 4.5rem 0 0; + width: calc(100% - 1.2rem); + max-height: 100vh; + min-height: 100%; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + min-width: max(10rem, 160px); + } + + .xmlViewComponent { + overflow: auto; + margin: 0 0 0 max(1rem, 16px); + max-height: calc(100vh - max(7rem, 112px)); + } + + .xmlContentInner { + max-height: 100%; + } + + .xmlContentInner pre { + overflow-x: auto; + } } From 7c3d5d91bb5527ed2e98bb19a5205ca9cb8ca07f Mon Sep 17 00:00:00 2001 From: Rebecca Black Date: Thu, 2 May 2024 12:43:59 -0400 Subject: [PATCH 3/3] updated version number for new release --- editioncrafter-umd/package.json | 2 +- editioncrafter/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/editioncrafter-umd/package.json b/editioncrafter-umd/package.json index 52f5a0d..41a61d4 100644 --- a/editioncrafter-umd/package.json +++ b/editioncrafter-umd/package.json @@ -1,6 +1,6 @@ { "name": "@cu-mkp/editioncrafter-umd", - "version": "1.0.0", + "version": "1.0.1", "homepage": "https://cu-mkp.github.io/editioncrafter/", "description": "A simple digital critical edition publication tool", "private": false, diff --git a/editioncrafter/package.json b/editioncrafter/package.json index a1ba866..632641a 100644 --- a/editioncrafter/package.json +++ b/editioncrafter/package.json @@ -1,6 +1,6 @@ { "name": "@cu-mkp/editioncrafter", - "version": "1.0.0", + "version": "1.0.1", "description": "A simple digital critical edition publication tool", "homepage": "https://cu-mkp.github.io/editioncrafter/", "private": false,