Merge pull request #99 from cu-mkp/dev

CSS tweaks and updated version number
cu-mkp · Apr 21, 2024 · b7b2736 · b7b2736
2 parents 19f9467 + ab8863b
commit b7b2736
Show file tree

Hide file tree

Showing 21 changed files with 61 additions and 64 deletions.
diff --git 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
@@ -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,

diff --git 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 (
-      <div id="glossaryView" style={{ position: "relative" }}>
+      <div id="glossaryView" style={{ position: "relative", overflow: "auto" }}>
         <Navigation
           side={this.props.side}
           onFilterChange={this.onFilterChange}

diff --git a/editioncrafter/src/component/TranscriptionView.js b/editioncrafter/src/component/TranscriptionView.js
@@ -174,7 +174,7 @@ const TranscriptionView = (props) => {
   }
 
   return (
-    <div style={{ position: "relative" }}>
+    <div style={{ position: "relative", overflow: "auto" }}>
       <Navigation
         side={side}
         documentView={documentView}

diff --git a/editioncrafter/src/component/XMLView.js b/editioncrafter/src/component/XMLView.js
@@ -40,7 +40,7 @@ class XMLView extends Component {
     const { xml: xmlContent } = transcriptionData;
 
     return (
-      <div id={thisID} className={thisClass} style={{ position: "relative" }}>
+      <div id={thisID} className={thisClass} style={{ position: "relative", overflow: "auto" }}>
         <Navigation side={side} documentView={documentView} documentViewActions={documentViewActions} documentName={document.variorum && folio.doc_id}/>
         <Pagination side={side} className="pagination_upper" documentView={documentView} documentViewActions={documentViewActions} />
 

diff --git 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
@@ -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
@@ -304,24 +304,22 @@
 	// 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);
 	// }
 	// @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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,10 +1,8 @@
 
 .transcriptionViewComponent {
-	overflow: scroll;
-    max-height:calc(100vh - 7rem);
 	.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
@@ -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
@@ -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 {