Clean up nested document node splits (#325)

* Clean up nested document node splits * CRE page results border merging
OWASP · Jul 14, 2023 · d5fccbd · d5fccbd
1 parent 5d46099
commit d5fccbd
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 16 deletions.
diff --git a/application/frontend/src/components/DocumentNode/DocumentNode.tsx b/application/frontend/src/components/DocumentNode/DocumentNode.tsx
@@ -143,15 +143,15 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
               let lastDocumentName = sortedResults[0].document.name
               return (
                 <div className="document-node__link-type-container" key={type}>
-                  {idx > 0 && <hr/>}
+                  {idx > 0 && <hr style={{backgroundColor: "transparent", border: "none"}}/>}
                   <div>
                     <b>Which {getDocumentTypeText(type, links[0].document.doctype)}</b>:{/* Risk here of mixed doctype in here causing odd output */}
                   </div>
                   <div>
                     <div className="accordion ui fluid styled f0">
                       {sortedResults.map((link, i) =>{const temp = (
                         <div key={Math.random()}>
-                          {lastDocumentName !== (link.document.name) &&<hr style={{margin:"10px"}}/>}
+                          {lastDocumentName !== (link.document.name) &&<span style={{margin:"5px"}}/>}
                           <DocumentNode
                             node={link.document}
                             linkType={type}

diff --git a/application/frontend/src/components/DocumentNode/documentNode.scss b/application/frontend/src/components/DocumentNode/documentNode.scss
@@ -49,7 +49,7 @@
     padding-bottom: .25em;
   }
 
-  div>hr+.title.external-link {
+  div>span+.title.external-link {
     border-top: none;
   }
 

diff --git a/application/frontend/src/pages/CommonRequirementEnumeration/CommonRequirementEnumeration.tsx b/application/frontend/src/pages/CommonRequirementEnumeration/CommonRequirementEnumeration.tsx
@@ -78,19 +78,27 @@ export const CommonRequirementEnumeration = () => {
           )}
           <div className="cre-page__links-container">
             {Object.keys(linksByType).length > 0 &&
-              Object.entries(linksByType).map(([type, links]) => (
-                <div className="cre-page__links" key={type}>
-                  <div className="cre-page__links-eader">
-                    <b>Which {getDocumentTypeText(type, links[0].document.doctype)}</b>:{/* Risk here of mixed doctype in here causing odd output */}
-                  </div>
-                  {links.sort((a, b) => getDocumentDisplayName(a.document).localeCompare(getDocumentDisplayName(b.document))).map((link, i) => (
-                    <div key={i} className="accordion ui fluid styled cre-page__links-container">
-                      <DocumentNode node={link.document} linkType={type} />
-                      <FilterButton document={link.document} />
+              Object.entries(linksByType).map(([type, links]) => {
+                const sortedResults = links.sort((a, b) => getDocumentDisplayName(a.document).localeCompare(getDocumentDisplayName(b.document)))
+                let lastDocumentName = sortedResults[0].document.name
+                return (
+                  <div className="cre-page__links" key={type}>
+                    <div className="cre-page__links-eader">
+                      <b>Which {getDocumentTypeText(type, links[0].document.doctype)}</b>:{/* Risk here of mixed doctype in here causing odd output */}
                     </div>
-                  ))}
-                </div>
-              ))}
+                    {sortedResults.map((link, i) => {
+                      const temp = (
+                        <div key={i} className="accordion ui fluid styled cre-page__links-container">
+                          {lastDocumentName !== (link.document.name) && <span style={{ margin: "5px" }} />}
+                          <DocumentNode node={link.document} linkType={type} />
+                          <FilterButton document={link.document} />
+                        </div>
+                      )
+                      lastDocumentName = link.document.name
+                      return temp
+                    })}
+                  </div>
+                )})}
           </div>
         </>
       )}

diff --git a/...ication/frontend/src/pages/CommonRequirementEnumeration/commonRequirementEnumeration.scss b/...ication/frontend/src/pages/CommonRequirementEnumeration/commonRequirementEnumeration.scss
@@ -13,6 +13,7 @@
     font-size: 2rem;
     margin-bottom: 0px;
   }
+
   &__sub-heading {
     color: #999;
     margin-top: 0px;
@@ -35,3 +36,40 @@
     padding-top: 20px;
   }
 }
+
+.cre-page__links-container.accordion.ui.styled {
+  padding-top: 0;
+  border: none;
+  border-radius: 0;
+  margin-top: 0;
+  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15), 0 1px 0 1px rgba(34, 36, 38, .15);
+}
+
+.cre-page__links-container.accordion.ui.styled:nth-child(2) {
+  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15), 0 0 0 1px rgba(34, 36, 38, .15);
+  border-radius: 0.28571429rem 0;
+  >.title.external-link {
+    padding-top: .75em;
+    padding-bottom: .25em;
+  }
+}
+
+.cre-page__links-container.accordion.ui.styled:last-child {
+  border-radius: 0 0.28571429rem;
+  >.title.external-link {
+    padding-bottom: .75em;
+  }
+}
+
+.cre-page__links-container.accordion.ui.styled 
+{
+  >.title.external-link {
+    padding-top: 0;
+    padding-bottom: .25em;
+  }
+
+  >span+.title.external-link {
+    border-top: none;
+  }
+
+}
diff --git a/application/frontend/src/pages/Search/components/SearchResults.tsx b/application/frontend/src/pages/Search/components/SearchResults.tsx
@@ -12,7 +12,7 @@ export const SearchResults = ({ results }) => {
       <>
         {sortedResults.map((document, i) => {let temp = (
           <>
-            {document.doctype != DOCUMENT_TYPES.TYPE_CRE && lastDocumentName !== document.name &&<hr style={{marginBottom: "40px"}} />}
+            {document.doctype != DOCUMENT_TYPES.TYPE_CRE && lastDocumentName !== document.name &&<span style={{margin: "5px"}} />}
             <div key={i} className="accordion ui fluid styled standard-page__links-container">
               <DocumentNode node={document} linkType={'Standard'} />
             </div>