Making height more dynamic (#81)

* making height fit layout container * made height fill container when relevant * fixed async useeffect call * added story contained in full screen div
cu-mkp · Mar 26, 2024 · 31f1a27 · 31f1a27
1 parent 3d6ae0c
commit 31f1a27
Show file tree

Hide file tree

Showing 13 changed files with 49 additions and 20 deletions.
diff --git a/editioncrafter/src/component/DiploMatic.js b/editioncrafter/src/component/DiploMatic.js
@@ -33,7 +33,7 @@ const DiploMatic = (props) => {
       <HashRouter>
         <div id="diplomatic" className={fixedFrameModeClass} ref={containerRef}>
           <RouteListener />
-          <div id="content">
+          <div id="content" style={{ height: '100%' }}>
             <Routes>
               <Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2/:folioID3/:transcriptionType3" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
               <Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />

diff --git a/editioncrafter/src/component/DocumentView.js b/editioncrafter/src/component/DocumentView.js
@@ -479,7 +479,7 @@ const DocumentView = (props) => {
 
   if (isWidthUp('md', props.width) && !singlePaneMode) {
     return (
-      <div>
+      <div style={{ height: '100%' }}>
         <SplitPaneView
           leftPane={renderPane('left', docView)}
           rightPane={renderPane('right', docView)}
@@ -491,7 +491,7 @@ const DocumentView = (props) => {
     );
   }
   return (
-    <div>
+    <div style={{ height: '100%' }}>
       <SinglePaneView
         singlePane={renderPane(viewportState('left').iiifShortID === "-1" ? 'left' : 'right', docView)}
       />

diff --git a/editioncrafter/src/component/Pagination.js b/editioncrafter/src/component/Pagination.js
@@ -31,11 +31,11 @@ class Pagination extends React.Component {
   };
 
   render() {
-    const { side, document, documentView } = this.props;
+    const { side, document, documentView, bottom = false } = this.props;
     if( documentView[side].iiifShortID === '-1' ) return null;
     const folioName = document.folioIndex[documentView[side].iiifShortID].name;
     return (
-      <div className="paginationComponent">
+      <div className={ bottom ? "paginationComponent bottom" : "paginationComponent"}>
         <div className="paginationControl">
 
           <span

diff --git a/editioncrafter/src/component/SeaDragonComponent.js b/editioncrafter/src/component/SeaDragonComponent.js
@@ -6,10 +6,14 @@ const SeaDragonComponent = (props) => {
   const [loading, setLoading] = useState(true);
   const viewerRef = useRef(null);
 
-  useEffect(async () => {
-    if (viewerRef.current) {
-      await initViewer(viewerRef.current, tileSource).then(() => setLoading(false));
-    }
+  useEffect(() => {
+    const loader = async () => {
+      if (viewerRef.current) {
+        await initViewer(viewerRef.current, tileSource).then(() => setLoading(false));
+      }
+    };
+
+    loader();
   }, []);
 
   const viewer = useMemo(() => (

diff --git a/editioncrafter/src/component/TranscriptionView.js b/editioncrafter/src/component/TranscriptionView.js
@@ -167,6 +167,7 @@ const TranscriptionView = (props) => {
         side={side}
         documentView={documentView}
         documentViewActions={documentViewActions}
+        bottom
       />
     </div>
     )
@@ -201,6 +202,7 @@ const TranscriptionView = (props) => {
         side={side}
         documentView={documentView}
         documentViewActions={documentViewActions}
+        bottom
       />
     </div>
   );

diff --git a/editioncrafter/src/scss/_diplomatic.scss b/editioncrafter/src/scss/_diplomatic.scss
@@ -1,5 +1,5 @@
 #diplomatic {
-	container-type: size;
+	container-type: inline-size;
 	container-name: diplomatic;
 	#content-view, .header-wrapper, #entry-list-view, #annotation-list-view {
 		h1,
@@ -303,7 +303,8 @@
 	background: white;
 	// position: fixed;
 	width: auto;
-	height: auto;
+	height: min(100%, 100dvh);
+	overflow-y: scroll;
 	// height: calc(100% - $chrome-height);
 	// @include sm {
 	// 	height: calc(100% - $sm-chrome-height);

diff --git a/editioncrafter/src/scss/_glossary.scss b/editioncrafter/src/scss/_glossary.scss
@@ -7,7 +7,7 @@
 			margin: 52px 0 0 0;
 		}
 		width: calc(100% - 1.2rem);
-            height: calc(100vh - 170px);
+            max-height: calc(100vh - 170px);
             padding: 5px 16px;
 	}
 
@@ -94,7 +94,7 @@
 
 	#glossaryContent {
 		padding: 5rem 0 0;
-		min-height: 100vh;
+		max-height: 100vh;
 		-webkit-user-select: text;
 		-moz-user-select: text;
 		-ms-user-select: text;

diff --git a/editioncrafter/src/scss/_imageGridView.scss b/editioncrafter/src/scss/_imageGridView.scss
@@ -2,7 +2,8 @@
 	background-color: #000000;
 	font-size: 0.8rem;
 	overflow: scroll;
-	height: 100vh;
+	height: 100%;
+	max-height: 100dvh;
 }
 
 .imageGridComponent > ul {

diff --git a/editioncrafter/src/scss/_imageView.scss b/editioncrafter/src/scss/_imageView.scss
@@ -4,6 +4,7 @@
 #image-view-seadragon-third {
   width: 100%;
   height: 100%;
+  max-height: 100dvh;
   grid-area: image_viewer;
   background: black;
 }
@@ -13,7 +14,8 @@
 		padding: 0;
 		margin: 0;
 		width: 100%;
-		height: 100vh;
+		height: 100%;
+		max-height: 100dvh;
 	}
 
 .a9s-annotation.a9s-annotation.selected > rect,

diff --git a/editioncrafter/src/scss/_pagination.scss b/editioncrafter/src/scss/_pagination.scss
@@ -17,6 +17,10 @@
 //   padding:1rem 0 0 0;
 // }
 
+.paginationComponent.bottom {
+	margin-top: 0;
+}
+
 .paginationControl {
 	padding: 16px;
 
@@ -27,6 +31,7 @@
 	color: #4A4A4A;
 	margin: 1rem 1rem 0;
 	cursor: pointer;
+	display: inline-block;
 }
 
 .paginationControl .folioName {

diff --git a/editioncrafter/src/scss/_transcriptView.scss b/editioncrafter/src/scss/_transcriptView.scss
@@ -1,7 +1,7 @@
 
 .transcriptionViewComponent {
 	overflow: scroll;
-    height:calc(100vh - 7rem);
+    max-height:calc(100vh - 7rem);
 	.transcriptContent {
 		padding: 50px 16px;
 		@include md {
@@ -12,7 +12,7 @@
 	  -moz-user-select: text;
 	  -ms-user-select: text;
 	  user-select: text;
-	  margin-bottom:92px;
+	  //margin-bottom:92px;
 
 	  figure {
 		  display: inline-flex;

diff --git a/editioncrafter/src/scss/_xmlView.scss b/editioncrafter/src/scss/_xmlView.scss
@@ -6,7 +6,8 @@
   padding: 0;
   margin: 4.5rem 0 0;
   width: calc(100% - 1.2rem);
-  min-height: 100vh;
+  max-height: 100vh;
+  min-height: 100%;
   -webkit-user-select: text;
   -moz-user-select: text;
   -ms-user-select: text;
@@ -17,7 +18,7 @@
 .xmlViewComponent {
   overflow: auto;
   margin: 0 0 0 1rem;
-  height: calc(100vh - 7rem);
+  max-height: calc(100vh - 7rem);
 }
 
 .xmlContentInner {

diff --git a/editioncrafter/stories/EditionCrafter.stories.js b/editioncrafter/stories/EditionCrafter.stories.js
@@ -81,7 +81,20 @@ export const MultiDocument = () => (
 );
 
 export const embeddedDiv = () => (
-  <div style={{ width: '1200px', margin: '0 auto' }}>
+  <div style={{ width: '1200px', height: '600px', margin: '0 auto' }}>
+    <EditionCrafter
+      documentName='FHL_007548733_TAOS_BAPTISMS_BATCH_2'
+      transcriptionTypes={{
+        translation: 'Translation',
+        transcription: 'Transcription',
+      }}
+      iiifManifest='https://cu-mkp.github.io/editioncrafter/taos-baptisms-example/iiif/manifest.json'
+    />
+  </div>
+)
+
+export const fullScreen = () => (
+  <div style={{ width: '100dvw', height: '100dvh' }}>
     <EditionCrafter
       documentName='FHL_007548733_TAOS_BAPTISMS_BATCH_2'
       transcriptionTypes={{