From 516642544bf27c5896e6bb3f5f50f32e88c67bb5 Mon Sep 17 00:00:00 2001 From: Rebecca Black Date: Sat, 20 Apr 2024 16:30:00 -0400 Subject: [PATCH 1/3] fixing nested scroll bar issues --- editioncrafter/src/component/GlossaryView.js | 2 +- editioncrafter/src/component/TranscriptionView.js | 2 +- editioncrafter/src/component/XMLView.js | 2 +- editioncrafter/src/scss/_diplomatic.scss | 2 +- editioncrafter/src/scss/_transcriptView.scss | 2 -- 5 files changed, 4 insertions(+), 6 deletions(-) diff --git a/editioncrafter/src/component/GlossaryView.js b/editioncrafter/src/component/GlossaryView.js index c74e9d7..03daa2b 100644 --- a/editioncrafter/src/component/GlossaryView.js +++ b/editioncrafter/src/component/GlossaryView.js @@ -95,7 +95,7 @@ class GlossaryView extends Component { if (!this.props.glossary.loaded) return null; return ( -
+
{ } return ( -
+
+
diff --git a/editioncrafter/src/scss/_diplomatic.scss b/editioncrafter/src/scss/_diplomatic.scss index 9031da6..4dd2ce4 100644 --- a/editioncrafter/src/scss/_diplomatic.scss +++ b/editioncrafter/src/scss/_diplomatic.scss @@ -304,7 +304,7 @@ // position: fixed; width: auto; height: min(100%, 100dvh); - overflow-y: scroll; + overflow-y: hidden; // height: calc(100% - $chrome-height); // @include sm { // height: calc(100% - $sm-chrome-height); diff --git a/editioncrafter/src/scss/_transcriptView.scss b/editioncrafter/src/scss/_transcriptView.scss index 2fa38bf..80633fe 100644 --- a/editioncrafter/src/scss/_transcriptView.scss +++ b/editioncrafter/src/scss/_transcriptView.scss @@ -1,7 +1,5 @@ .transcriptionViewComponent { - overflow: scroll; - max-height:calc(100vh - 7rem); .transcriptContent { padding: 50px 16px; font-size: 14.4px; From f805c45d1ee6490758c53093144b802104e57915 Mon Sep 17 00:00:00 2001 From: Rebecca Black Date: Sat, 20 Apr 2024 21:14:45 -0400 Subject: [PATCH 2/3] fixing CSS to hopefully work better on scalar site --- editioncrafter/src/scss/_CETEIcean.scss | 2 +- editioncrafter/src/scss/_base.scss | 18 +++++++++--------- editioncrafter/src/scss/_diplomatic.scss | 8 +++----- editioncrafter/src/scss/_globalNavigation.scss | 12 ++++++------ editioncrafter/src/scss/_glossary.scss | 12 ++++++------ editioncrafter/src/scss/_imageGridView.scss | 8 ++++---- editioncrafter/src/scss/_imageZoomControl.scss | 11 ++++++----- editioncrafter/src/scss/_jumpbox.scss | 10 +++++----- editioncrafter/src/scss/_navigation.scss | 4 ++-- editioncrafter/src/scss/_pagination.scss | 8 ++++---- editioncrafter/src/scss/_spinner.scss | 2 +- editioncrafter/src/scss/_splitPaneView.scss | 2 +- editioncrafter/src/scss/_thumbnails.scss | 4 ++-- editioncrafter/src/scss/_transcriptView.scss | 2 +- editioncrafter/src/scss/_watermark.scss | 2 +- editioncrafter/src/scss/_xmlView.scss | 6 +++--- 16 files changed, 55 insertions(+), 56 deletions(-) diff --git a/editioncrafter/src/scss/_CETEIcean.scss b/editioncrafter/src/scss/_CETEIcean.scss index f3002d9..bbfe64e 100644 --- a/editioncrafter/src/scss/_CETEIcean.scss +++ b/editioncrafter/src/scss/_CETEIcean.scss @@ -348,7 +348,7 @@ tei-head { font-family: 'OpenSans', sans-serif; font-weight: 700; font-size: 1.5em; - line-height: 1.5rem; + line-height: max(1.5rem, 24px); } tei-body > tei-head { font-size: 180%; diff --git a/editioncrafter/src/scss/_base.scss b/editioncrafter/src/scss/_base.scss index 2d122a3..1126f32 100644 --- a/editioncrafter/src/scss/_base.scss +++ b/editioncrafter/src/scss/_base.scss @@ -1,7 +1,7 @@ -$header-height: 4.5rem; -$sm-header-height: 5.5rem; -$md-header-height: 6.5rem; -$footer-height: 7.5rem; +$header-height: 72px; +$sm-header-height: 88px; +$md-header-height: 104px; +$footer-height: 120px; $chrome-height: $header-height + $footer-height; $sm-chrome-height: $sm-header-height + $footer-height; $md-chrome-height: $md-header-height + $footer-height; @@ -32,18 +32,18 @@ body { } .fa { - width: 1.5rem; - padding: 0.2rem 0.1rem 0.1rem; + 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: 0.2rem solid #FF9800; + border: max(0.2rem, 3.2px) solid #FF9800; } .fa-book.active { - border-radius: 0 2rem 2rem 0; + border-radius: 0 max(2rem, 32px) max(2rem, 32px) 0; } .fa:not(.active) { @@ -52,7 +52,7 @@ body { .fa.fa-lock, .fa.fa-lock-open { - border-radius: 2rem 0 0 2rem; + border-radius: max(2rem, 32px) 0 0 max(2rem, 32px); } .line-clamp { diff --git a/editioncrafter/src/scss/_diplomatic.scss b/editioncrafter/src/scss/_diplomatic.scss index 4dd2ce4..6cb28ef 100644 --- a/editioncrafter/src/scss/_diplomatic.scss +++ b/editioncrafter/src/scss/_diplomatic.scss @@ -312,16 +312,14 @@ // @include md { // height: calc(100% - $md-chrome-height); // } - font-size: 0.7rem; - -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-family: 'OpenSans', sans-serif; - font-size: 0.9rem; + font-size: max(0.9rem, 14.4px); #content { - line-height: 1.2rem; + line-height: max(1.2rem, 19.2px); } h1, h2, @@ -331,6 +329,6 @@ font-family: 'OpenSans', sans-serif; font-weight: 700; padding: 0; - line-height: 1.5rem; + line-height: max(1.5rem, 24px); } } diff --git a/editioncrafter/src/scss/_globalNavigation.scss b/editioncrafter/src/scss/_globalNavigation.scss index 69ec229..6793718 100644 --- a/editioncrafter/src/scss/_globalNavigation.scss +++ b/editioncrafter/src/scss/_globalNavigation.scss @@ -2,10 +2,10 @@ display: flex; align-items: center; flex-direction: row-reverse; - font-size: 0.9rem; + font-size: max(0.9rem, 14.4px); position: relative; - top: -4rem; - right: 2rem; + top: min(-4rem, -64px); + right: max(2rem, 32px); float: right; @include md { display: block; @@ -15,7 +15,7 @@ #globalNavigation .expandedViewOnly { span, a { color: white; - margin-left: 1rem; + margin-left: max(1rem, 16px); cursor: pointer; } } @@ -25,8 +25,8 @@ } #globalNavigation input { - height: 1.5rem; - padding: 0 0 0 0.5rem; + height: max(1.5rem, 24px); + padding: 0 0 0 max(0.5rem, 8px); font-style: italic; border: 1px solid #00000063; color: #756c6c; diff --git a/editioncrafter/src/scss/_glossary.scss b/editioncrafter/src/scss/_glossary.scss index 1eb6b70..2187d14 100644 --- a/editioncrafter/src/scss/_glossary.scss +++ b/editioncrafter/src/scss/_glossary.scss @@ -60,10 +60,10 @@ .title { white-space: nowrap; position: relative; - width: calc(100% - 1.7rem); + width: calc(100% - max(1.7rem, 27.2px)); text-align: center; top: -2em; - font-size: 1.8rem; + font-size: max(1.8rem, 28.8px); font-weight: 700; -webkit-user-select: none; -moz-user-select: none; @@ -78,7 +78,7 @@ .subtitle { white-space: nowrap; position: relative; - width: calc(100% - 1.7rem); + width: calc(100% - max(1.7rem, 27.2px)); text-align: center; top: -2em; font-style: italic; @@ -92,15 +92,15 @@ } #glossaryContent { - padding: 5rem 0 0; + 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: 10rem; + min-width: max(10rem, 160px); @include md { - padding: 3.5rem 0 0; + padding: max(3.5rem, 56px) 0 0; } } diff --git a/editioncrafter/src/scss/_imageGridView.scss b/editioncrafter/src/scss/_imageGridView.scss index d845b58..0955249 100644 --- a/editioncrafter/src/scss/_imageGridView.scss +++ b/editioncrafter/src/scss/_imageGridView.scss @@ -1,6 +1,6 @@ .imageGridComponent { background-color: #000000; - font-size: 0.8rem; + font-size: max(0.8rem, 12.8px); overflow: scroll; height: 100%; max-height: 100dvh; @@ -11,7 +11,7 @@ flex-wrap: wrap; list-style: none; padding-left: 0; - margin: 1.5rem 0 8rem 2rem; + margin: max(1.5rem, 24px) 0 max(8rem, 128px) max(2rem, 32px); } .imageGridComponent > ul > li { @@ -64,10 +64,10 @@ .doc-select { display: inline; margin-left: 30px; - font-size: 0.8rem; + font-size: max(0.8rem, 12.8px); .MuiInputBase-root { - font-size: 0.8rem; + font-size: max(0.8rem, 12.8px); } } } diff --git a/editioncrafter/src/scss/_imageZoomControl.scss b/editioncrafter/src/scss/_imageZoomControl.scss index 595b4df..37ae556 100644 --- a/editioncrafter/src/scss/_imageZoomControl.scss +++ b/editioncrafter/src/scss/_imageZoomControl.scss @@ -1,23 +1,24 @@ .ImageZoomControl { position: absolute; z-index: 1; - top: 8rem; + top: max(8rem, 128px); color: white; // width: 1rem; list-style: none; background: #4A4A4A; opacity: 0.4; margin:0; - padding:.4rem .5rem; - border-radius: 0.3rem; + padding: max(.4rem, 6.4px) max(.5rem, 8px); + border-radius: max(0.3rem, 4.8px); @include md { - top:4rem; - left: 2rem; + top: max(4rem, 64px); + left: max(2rem, 32px); } } .ImageZoomControl > li { color: #E0E0E0; + margin: 0; } .ImageZoomControl > li > .zoom-in { diff --git a/editioncrafter/src/scss/_jumpbox.scss b/editioncrafter/src/scss/_jumpbox.scss index 782a7c9..0841fb4 100644 --- a/editioncrafter/src/scss/_jumpbox.scss +++ b/editioncrafter/src/scss/_jumpbox.scss @@ -1,11 +1,11 @@ .jumpToFolio_component { - margin: 1rem 0 0 -4.5rem; - padding: 0.6rem; - height: 1.2rem; - width: 9.5rem; + 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: 0.3rem; + 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); diff --git a/editioncrafter/src/scss/_navigation.scss b/editioncrafter/src/scss/_navigation.scss index cf13706..59ca75c 100644 --- a/editioncrafter/src/scss/_navigation.scss +++ b/editioncrafter/src/scss/_navigation.scss @@ -14,7 +14,7 @@ user-select: none; padding:4px; background-color: white; - border-radius: 0.3rem; + border-radius: max(0.3rem, 4.8px); @include sm { top: 80px; } @@ -92,7 +92,7 @@ .imageViewComponent .navigationComponent { background-color: #4A4A4A; - border-radius: 0.3rem; + border-radius: max(0.3rem, 4.8px); opacity: 0.8; @include md { background-color: rgba(0,0,0,1); diff --git a/editioncrafter/src/scss/_pagination.scss b/editioncrafter/src/scss/_pagination.scss index ab6bd5e..1b5786a 100644 --- a/editioncrafter/src/scss/_pagination.scss +++ b/editioncrafter/src/scss/_pagination.scss @@ -2,7 +2,7 @@ white-space: nowrap; text-align: center; - font-size: 1.2rem; + font-size: max(1.2rem, 19.2px); font-weight: 700; -webkit-user-select: none; -moz-user-select: none; @@ -27,15 +27,15 @@ } .paginationControl .arrow { - font-size: 1.8rem; + font-size: max(1.8rem, 28.8px); color: #4A4A4A; - margin: 1rem 1rem 0; + margin: max(1rem, 16px) max(1rem, 16px) 0; cursor: pointer; display: inline-block; } .paginationControl .folioName { position: relative; - top: -.2rem; + top: min(-.2rem, -3.2px); color: #4A4A4A; } diff --git a/editioncrafter/src/scss/_spinner.scss b/editioncrafter/src/scss/_spinner.scss index 6a2a530..65950f7 100644 --- a/editioncrafter/src/scss/_spinner.scss +++ b/editioncrafter/src/scss/_spinner.scss @@ -1,4 +1,4 @@ -$spinner-size: 1rem; +$spinner-size: max(1rem, 16px); #loadingStateModal { position: fixed; diff --git a/editioncrafter/src/scss/_splitPaneView.scss b/editioncrafter/src/scss/_splitPaneView.scss index 73c1340..a8def1c 100644 --- a/editioncrafter/src/scss/_splitPaneView.scss +++ b/editioncrafter/src/scss/_splitPaneView.scss @@ -14,7 +14,7 @@ .split-pane-view > .divider { z-index: 2; - width: 1rem; + width: max(1rem, 16px); background: #BBB; cursor:ew-resize; display: flex; diff --git a/editioncrafter/src/scss/_thumbnails.scss b/editioncrafter/src/scss/_thumbnails.scss index 10675ac..bb2b620 100644 --- a/editioncrafter/src/scss/_thumbnails.scss +++ b/editioncrafter/src/scss/_thumbnails.scss @@ -1,8 +1,8 @@ $color-selected: rgba(7,122,255,0.831); figure { - padding: 0.3rem 0 0; - border-radius: 0.2rem; + padding: max(0.3rem, 4.8px) 0 0; + border-radius: max(0.2rem, 3.2px); margin: 0; text-align: center; } diff --git a/editioncrafter/src/scss/_transcriptView.scss b/editioncrafter/src/scss/_transcriptView.scss index 80633fe..ad08572 100644 --- a/editioncrafter/src/scss/_transcriptView.scss +++ b/editioncrafter/src/scss/_transcriptView.scss @@ -2,7 +2,7 @@ .transcriptionViewComponent { .transcriptContent { padding: 50px 16px; - font-size: 14.4px; + font-size: max(0.9rem, 14.4px); @include md { padding: 5px 16px; } diff --git a/editioncrafter/src/scss/_watermark.scss b/editioncrafter/src/scss/_watermark.scss index 0be63c5..965b4fb 100644 --- a/editioncrafter/src/scss/_watermark.scss +++ b/editioncrafter/src/scss/_watermark.scss @@ -1,4 +1,4 @@ -$watermark-size: 10rem; +$watermark-size: max(10rem, 160px); .watermark{ width:100%; diff --git a/editioncrafter/src/scss/_xmlView.scss b/editioncrafter/src/scss/_xmlView.scss index e3849c8..19ef355 100644 --- a/editioncrafter/src/scss/_xmlView.scss +++ b/editioncrafter/src/scss/_xmlView.scss @@ -12,13 +12,13 @@ -moz-user-select: text; -ms-user-select: text; user-select: text; - min-width: 10rem; + min-width: max(10rem, 160px); } .xmlViewComponent { overflow: auto; - margin: 0 0 0 1rem; - max-height: calc(100vh - 7rem); + margin: 0 0 0 max(1rem, 16px); + max-height: calc(100vh - max(7rem, 112px)); } .xmlContentInner { From ab8863b7fe4e3e57a4b4c51e5a4301ebfb4ab527 Mon Sep 17 00:00:00 2001 From: Rebecca Black Date: Sat, 20 Apr 2024 21:23:21 -0400 Subject: [PATCH 3/3] update 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 e4f3ab0..b19c221 100644 --- a/editioncrafter-umd/package.json +++ b/editioncrafter-umd/package.json @@ -1,6 +1,6 @@ { "name": "@cu-mkp/editioncrafter-umd", - "version": "0.2.7", + "version": "0.2.8", "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 de2c0f4..765f38f 100644 --- a/editioncrafter/package.json +++ b/editioncrafter/package.json @@ -1,6 +1,6 @@ { "name": "@cu-mkp/editioncrafter", - "version": "0.2.7", + "version": "0.2.8", "description": "A simple digital critical edition publication tool", "homepage": "https://cu-mkp.github.io/editioncrafter/", "private": false,