consistent in height layout panes (#241)

bible-technology · Nov 17, 2023 · 7cdc5e0 · 7cdc5e0
1 parent 0284f23
commit 7cdc5e0
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 129 deletions.
diff --git a/renderer/src/layouts/editor/EditorSection.js b/renderer/src/layouts/editor/EditorSection.js
@@ -27,6 +27,7 @@ export default function EditorSection({
   setLoadResource,
   loadResource,
   openResource,
+  isNextRowOpen,
   setOpenResource1,
   setOpenResource2,
   setOpenResource3,
@@ -155,6 +156,7 @@ export default function EditorSection({
         break;
     }
   };
+
   useEffect(() => {
     // Since we are adding reference resources from different places the data we have are inconsistant.
     // Looking for flavor from the flavours because flavor is only available for scripture and gloss(obs), not for Translation resources
@@ -190,6 +192,7 @@ export default function EditorSection({
         aria-label="resources-panel"
         className={classNames(
           openResource ? 'hidden' : '',
+          isNextRowOpen ? 'h-editor' : 'h-reference',
           'flex flex-col relative first:mt-0 border bg-white border-grey-600 rounded shadow-sm group  overflow-hidden',
         )}
       >

diff --git a/renderer/src/layouts/editor/SectionPlaceholder1.js b/renderer/src/layouts/editor/SectionPlaceholder1.js
@@ -303,6 +303,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                   setLoadResource={setLoadResource1}
                   loadResource={loadResource1}
                   openResource={openResource1}
+                  isNextRowOpen={openResource2}
                   setOpenResource1={setOpenResource1}
                   setOpenResource2={setOpenResource2}
                   setRemovingSection={setRemovingSection}
@@ -375,6 +376,7 @@ const SectionPlaceholder1 = ({ editor }) => {
                   setLoadResource={setLoadResource2}
                   loadResource={loadResource2}
                   openResource={openResource2}
+                  isNextRowOpen={openResource1}
                   setOpenResource1={setOpenResource1}
                   setOpenResource2={setOpenResource2}
                   CustomNavigation={(referenceColumnOneData2.selectedResource).lastIndexOf('obs', 0) === 0 ? ObsNavigation2 : CustomNavigation2}

diff --git a/renderer/src/layouts/editor/SectionPlaceholder2.js b/renderer/src/layouts/editor/SectionPlaceholder2.js
@@ -288,148 +288,156 @@ const SectionPlaceholder2 = ({ editor }) => {
           <>
             {(openResource3 === false || openResource4 === false) && (
               <div className={`bg-white rounded-md grid gap-2 ${editor === 'audioTranslation' ? 'md:max-h-[64vh] lg:max-h-[70vh]' : 'h-editor'} overflow-x-auto`}>
-                <EditorSection
-                  row="3"
-                  hideAddition={hideAddition}
-                  sectionNum={sectionNum}
-                  setSectionNum={setSectionNum}
-                  title={referenceColumnTwoData1.refName}
-                  selectedResource={referenceColumnTwoData1.selectedResource}
-                  languageId={referenceColumnTwoData1.languageId}
-                  referenceResources={referenceColumnTwoData1}
-                  setReferenceResources={setReferenceColumnTwoData1}
-                  setLoadResource={setLoadResource3}
-                  loadResource={loadResource3}
-                  openResource={openResource3}
-                  setOpenResource3={setOpenResource3}
-                  setOpenResource4={setOpenResource4}
-                  CustomNavigation={(referenceColumnTwoData1.selectedResource).lastIndexOf('obs', 0) === 0 ? ObsNavigation1 : CustomNavigation1}
-                  setRemovingSection={setRemovingSection}
-                  setAddingSection={setAddingSection}
-                  font={font3}
-                  setFont={setFont3}
-                >
-                  {
-                    (loadResource3 === true)
-                    && ((referenceColumnTwoData1.selectedResource === 'bible' && (
-                      <>
-                        {referenceColumnTwoData1?.languageId
-                          && (
-                            <ScribexContextProvider editable={false} reference>
-                              <ReferenceBibleX
-                                languageId={referenceColumnTwoData1.languageId}
-                                refName={referenceColumnTwoData1.refName}
-                                bookId={_bookId1}
-                                chapter={_chapter1}
-                                verse={_verse1}
+                {openResource3 === false && (
+                  <EditorSection
+                    row="3"
+                    hideAddition={hideAddition}
+                    sectionNum={sectionNum}
+                    setSectionNum={setSectionNum}
+                    title={referenceColumnTwoData1.refName}
+                    selectedResource={referenceColumnTwoData1.selectedResource}
+                    languageId={referenceColumnTwoData1.languageId}
+                    referenceResources={referenceColumnTwoData1}
+                    setReferenceResources={setReferenceColumnTwoData1}
+                    setLoadResource={setLoadResource3}
+                    loadResource={loadResource3}
+                    openResource={openResource3}
+                    isNextRowOpen={openResource4}
+                    setOpenResource3={setOpenResource3}
+                    setOpenResource4={setOpenResource4}
+                    CustomNavigation={(referenceColumnTwoData1.selectedResource).lastIndexOf('obs', 0) === 0 ? ObsNavigation1 : CustomNavigation1}
+                    setRemovingSection={setRemovingSection}
+                    setAddingSection={setAddingSection}
+                    font={font3}
+                    setFont={setFont3}
+                  >
+                    {
+                      (loadResource3 === true)
+                      && ((referenceColumnTwoData1.selectedResource === 'bible' && (
+                        <>
+                          {referenceColumnTwoData1?.languageId
+                            && (
+                              <ScribexContextProvider editable={false} reference>
+                                <ReferenceBibleX
+                                  languageId={referenceColumnTwoData1.languageId}
+                                  refName={referenceColumnTwoData1.refName}
+                                  bookId={_bookId1}
+                                  chapter={_chapter1}
+                                  verse={_verse1}
+                                  font={font3}
+                                />
+                              </ScribexContextProvider>
+                            )}
+                        </>
+                      )) || (referenceColumnTwoData1.selectedResource === 'obs' && (
+                        <>
+                          {referenceColumnTwoData1?.languageId
+                            && (
+                              <ReferenceObs
+                                stories={stories1}
                                 font={font3}
                               />
-                            </ScribexContextProvider>
-                          )}
-                      </>
-                    )) || (referenceColumnTwoData1.selectedResource === 'obs' && (
-                      <>
-                        {referenceColumnTwoData1?.languageId
-                          && (
-                            <ReferenceObs
-                              stories={stories1}
-                            />
-                          )}
-                      </>
-                    )) || (referenceColumnTwoData1.selectedResource === 'audio' && (
-                      <ReferenceAudio
+                            )}
+                        </>
+                      )) || (referenceColumnTwoData1.selectedResource === 'audio' && (
+                        <ReferenceAudio
+                          languageId={referenceColumnTwoData1.languageId}
+                          refName={referenceColumnTwoData1.refName}
+                          bookId={_bookId1}
+                          chapter={_chapter1}
+                          verse={_verse1}
+                        />
+                      )) || (
+                      <TranslationHelps
+                        selectedResource={referenceColumnTwoData1.selectedResource}
                         languageId={referenceColumnTwoData1.languageId}
-                        refName={referenceColumnTwoData1.refName}
+                        owner={referenceColumnTwoData1.owner}
                         bookId={_bookId1}
                         chapter={_chapter1}
                         verse={_verse1}
+                        story={_obsNavigation1}
+                        offlineResource={referenceColumnTwoData1.offlineResource}
                       />
-                    )) || (
-                    <TranslationHelps
-                      selectedResource={referenceColumnTwoData1.selectedResource}
-                      languageId={referenceColumnTwoData1.languageId}
-                      owner={referenceColumnTwoData1.owner}
-                      bookId={_bookId1}
-                      chapter={_chapter1}
-                      verse={_verse1}
-                      story={_obsNavigation1}
-                      offlineResource={referenceColumnTwoData1.offlineResource}
-                    />
+                        )
                       )
-                    )
-                  }
-                </EditorSection>
-                <EditorSection
-                  row="4"
-                  hideAddition={hideAddition}
-                  sectionNum={sectionNum}
-                  setSectionNum={setSectionNum}
-                  title={referenceColumnTwoData2.refName}
-                  selectedResource={referenceColumnTwoData2.selectedResource}
-                  languageId={referenceColumnTwoData2.languageId}
-                  referenceResources={referenceColumnTwoData2}
-                  setReferenceResources={setReferenceColumnTwoData2}
-                  setLoadResource={setLoadResource4}
-                  loadResource={loadResource4}
-                  openResource={openResource4}
-                  setOpenResource3={setOpenResource3}
-                  setOpenResource4={setOpenResource4}
-                  CustomNavigation={(referenceColumnTwoData2.selectedResource).lastIndexOf('obs', 0) === 0 ? ObsNavigation2 : CustomNavigation2}
-                  setRemovingSection={setRemovingSection}
-                  setAddingSection={setAddingSection}
-                  font={font4}
-                  setFont={setFont4}
-                >
-                  {
-                    (loadResource4 === true)
-                    && ((referenceColumnTwoData2.selectedResource === 'bible' && (
-                      <>
-                        {referenceColumnTwoData2?.languageId
-                          && (
-                            <ScribexContextProvider editable={false} reference>
-                              <ReferenceBibleX
-                                languageId={referenceColumnTwoData2.languageId}
-                                refName={referenceColumnTwoData2.refName}
-                                bookId={_bookId2}
-                                chapter={_chapter2}
-                                verse={_verse2}
+                    }
+                  </EditorSection>
+                )}
+                {openResource4 === false && (
+                  <EditorSection
+                    row="4"
+                    hideAddition={hideAddition}
+                    sectionNum={sectionNum}
+                    setSectionNum={setSectionNum}
+                    title={referenceColumnTwoData2.refName}
+                    selectedResource={referenceColumnTwoData2.selectedResource}
+                    languageId={referenceColumnTwoData2.languageId}
+                    referenceResources={referenceColumnTwoData2}
+                    setReferenceResources={setReferenceColumnTwoData2}
+                    setLoadResource={setLoadResource4}
+                    loadResource={loadResource4}
+                    openResource={openResource4}
+                    isNextRowOpen={openResource3}
+                    setOpenResource3={setOpenResource3}
+                    setOpenResource4={setOpenResource4}
+                    CustomNavigation={(referenceColumnTwoData2.selectedResource).lastIndexOf('obs', 0) === 0 ? ObsNavigation2 : CustomNavigation2}
+                    setRemovingSection={setRemovingSection}
+                    setAddingSection={setAddingSection}
+                    font={font4}
+                    setFont={setFont4}
+                  >
+                    {
+                      (loadResource4 === true)
+                      && ((referenceColumnTwoData2.selectedResource === 'bible' && (
+                        <>
+                          {referenceColumnTwoData2?.languageId
+                            && (
+                              <ScribexContextProvider editable={false} reference>
+                                <ReferenceBibleX
+                                  languageId={referenceColumnTwoData2.languageId}
+                                  refName={referenceColumnTwoData2.refName}
+                                  bookId={_bookId2}
+                                  chapter={_chapter2}
+                                  verse={_verse2}
+                                  font={font4}
+                                />
+                              </ScribexContextProvider>
+                            )}
+                        </>
+                      )) || (referenceColumnTwoData2.selectedResource === 'obs' && (
+                        <>
+                          {referenceColumnTwoData2?.languageId
+                            && (
+                              <ReferenceObs
+                                stories={stories2}
                                 font={font4}
                               />
-                            </ScribexContextProvider>
-                          )}
-                      </>
-                    )) || (referenceColumnTwoData2.selectedResource === 'obs' && (
-                      <>
-                        {referenceColumnTwoData2?.languageId
-                          && (
-                            <ReferenceObs
-                              stories={stories2}
-                            />
-                          )}
-                      </>
-                    )) || (referenceColumnTwoData2.selectedResource === 'audio' && (
-                      <ReferenceAudio
+                            )}
+                        </>
+                      )) || (referenceColumnTwoData2.selectedResource === 'audio' && (
+                        <ReferenceAudio
+                          languageId={referenceColumnTwoData2.languageId}
+                          refName={referenceColumnTwoData2.refName}
+                          bookId={_bookId1}
+                          chapter={_chapter1}
+                          verse={_verse1}
+                        />
+                      )) || (
+                      <TranslationHelps
+                        selectedResource={referenceColumnTwoData2.selectedResource}
                         languageId={referenceColumnTwoData2.languageId}
-                        refName={referenceColumnTwoData2.refName}
-                        bookId={_bookId1}
-                        chapter={_chapter1}
-                        verse={_verse1}
+                        owner={referenceColumnTwoData2.owner}
+                        bookId={_bookId2}
+                        chapter={_chapter2}
+                        verse={_verse2}
+                        story={_obsNavigation2}
+                        offlineResource={referenceColumnTwoData2.offlineResource}
                       />
-                    )) || (
-                    <TranslationHelps
-                      selectedResource={referenceColumnTwoData2.selectedResource}
-                      languageId={referenceColumnTwoData2.languageId}
-                      owner={referenceColumnTwoData2.owner}
-                      bookId={_bookId2}
-                      chapter={_chapter2}
-                      verse={_verse2}
-                      story={_obsNavigation2}
-                      offlineResource={referenceColumnTwoData2.offlineResource}
-                    />
+                        )
                       )
-                    )
-                  }
-                </EditorSection>
+                    }
+                  </EditorSection>
+                )}
               </div>
             )}
           </>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -33,6 +33,7 @@ module.exports = {
       },
       height: {
         editor: 'calc(-9rem + 100vh)',
+        reference: 'calc((-9.5rem + 100vh)/2)',
       },
     },
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,6 +33,7 @@ module.exports = { @@
           },
           height: {
             editor: 'calc(-9rem + 100vh)',
+            reference: 'calc((-9.5rem + 100vh)/2)',
           },
         },
       },
@@ Expand Down @@