Updates to styling and reactiveness (#75)

* trying width and height auto

* resize based on container

* add loading spinner component

* added loading spinner to image and transcription views

* made dropdown and help icon visible on single pane

* improved layout of nav at small widths

* improvement to color of nav row for imageview

editioncrafter/src/component/DiploMatic.js

@@ -1,7 +1,7 @@
 import withWidth from '@material-ui/core/withWidth';
 import { createBrowserHistory } from 'history';
 import PropTypes from 'prop-types';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { connect, Provider } from 'react-redux';
 import {
   HashRouter, Route, Navigate, Routes,
@@ -10,28 +10,36 @@ import DocumentView from './DocumentView';
 import RouteListener from './RouteListener';
 
 const DiploMatic = (props) => {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const containerRef = useRef(null)
   useEffect(() => {
     const history = createBrowserHistory();
     history.listen(() => {
       window.scrollTo(0, 0);
     });
-  });
+  }, []);
+
+  useEffect(() => {
+    if(containerRef.current){ 
+      setContainerWidth(containerRef.current.offsetWidth);  
+    }
+  }, [containerRef]);
 
   const { fixedFrameMode } = props.diplomatic;
   const fixedFrameModeClass = fixedFrameMode ? 'fixed' : 'sticky';
 
   return (
     <Provider store={props.store}>
       <HashRouter>
-        <div id="diplomatic" className={fixedFrameModeClass}>
+        <div id="diplomatic" className={fixedFrameModeClass} ref={containerRef}>
           <RouteListener />
           <div id="content">
             <Routes>
-              <Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2/:folioID3/:transcriptionType3" element={<DocumentView {...props} />} exact />
-              <Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2" element={<DocumentView {...props} />} exact />
-              <Route path="/ec/:folioID/:transcriptionType" element={<DocumentView {...props} />} exact />
-              <Route path="/ec/:folioID" element={<DocumentView {...props} />} exact />
-              <Route path="/ec" element={<DocumentView {...props} />} exact />
+              <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 />
+              <Route path="/ec/:folioID/:transcriptionType" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
+              <Route path="/ec/:folioID" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
+              <Route path="/ec" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
               <Route path="/" element={<Navigate to="/ec" />} exact />
             </Routes>
           </div>

editioncrafter/src/component/DocumentView.js

@@ -24,11 +24,16 @@ const DocumentView = (props) => {
   const [left, setLeft] = useState(paneDefaults);
   const [right, setRight] = useState(paneDefaults);
   const [third, setThird] = useState(paneDefaults);
+  const [singlePaneMode, setSinglePaneMode] = useState(props.containerWidth < 960);
 
   const params = useParams();
   const navigate = useNavigate();
   const location = useLocation();
 
+  useEffect(() => {
+    setSinglePaneMode(props.containerWidth < 960);
+  }, [props.containerWidth]);
+
   // Navigate while keeping existing search params
   const navigateWithParams = (pathname) => {
     navigate(pathname + location.search);
@@ -472,7 +477,7 @@ const DocumentView = (props) => {
     right: { ...viewportState('right') },
   };
 
-  if (isWidthUp('md', props.width)) {
+  if (isWidthUp('md', props.width) && !singlePaneMode) {
     return (
       <div>
         <SplitPaneView
@@ -488,7 +493,7 @@ const DocumentView = (props) => {
   return (
     <div>
       <SinglePaneView
-        singlePane={renderPane('right', mobileDocView)}
+        singlePane={renderPane(viewportState('left').iiifShortID === "-1" ? 'left' : 'right', docView)}
       />
     </div>
   );

editioncrafter/src/component/ImageView.js

@@ -12,6 +12,7 @@ import ImageZoomControl from './ImageZoomControl';
 import SeaDragonComponent from './SeaDragonComponent';
 
 import '@recogito/annotorious-openseadragon/dist/annotorious.min.css';
+import { BigRingSpinner } from './RingSpinner';
 
 const ImageView = (props) => {
   const [viewer, setViewer] = useState(null);
@@ -21,6 +22,7 @@ const ImageView = (props) => {
   const navigate = useNavigate();
 
   const [searchParams] = useSearchParams();
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     if (anno && searchParams.get('zone')) {
@@ -119,18 +121,24 @@ const ImageView = (props) => {
 
   useEffect(() => {
     const folio = props.document.folioIndex[props.folioID];
+    if (folio.loading) {
+      setLoading(true);
+    }
     if (folio.tileSource && viewer) {
       viewer.open(folio.tileSource);
       if (folio.annotations && anno) {
         anno.setAnnotations(folio.annotations);
       }
     }
+    if (!folio.loading) {
+      setLoading(false);
+    }
   }, [anno, viewer, props.folioID, props.document.folioIndex]);
 
   return (
     <div>
       { tileSource
-      && (
+      ? (
       <div className={`image-view imageViewComponent ${props.side}`}>
         <Navigation
           side={props.side}
@@ -153,8 +161,11 @@ const ImageView = (props) => {
           side={props.side}
           tileSource={tileSource}
           initViewer={initViewer}
+          loading={loading}
         />
       </div>
+      ) : (
+        <BigRingSpinner color="dark" delay={300} />
       )}
     </div>
   );