fix site container issue

CDCgov · Oct 21, 2024 · fb7f67c · fb7f67c
1 parent f88ef5d
commit fb7f67c
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 98 deletions.
diff --git a/query-connector/src/app/query/components/ResultsView.tsx b/query-connector/src/app/query/components/ResultsView.tsx
@@ -4,7 +4,7 @@ import ResultsViewSideNav, {
 } from "./resultsView/ResultsViewSideNav";
 import React, { useEffect } from "react";
 import ResultsViewTable from "./resultsView/ResultsViewTable";
-import styles from "./resultsView.module.scss";
+import styles from "./resultsView/resultsView.module.scss";
 import ConditionsTable from "./resultsView/tableComponents/ConditionsTable";
 import Demographics from "./resultsView/tableComponents/Demographics";
 import DiagnosticReportTable from "./resultsView/tableComponents/DiagnosticReportTable";

diff --git a/query-connector/src/app/query/components/SearchForm.tsx b/query-connector/src/app/query/components/SearchForm.tsx
@@ -15,7 +15,7 @@ import {
 } from "@/app/constants";
 import { UseCaseQueryResponse, UseCaseQuery } from "@/app/query-service";
 import { fhirServers } from "@/app/fhir-servers";
-import styles from "./searchForm.module.scss";
+import styles from "./searchForm/searchForm.module.scss";
 import { FormatPhoneAsDigits } from "@/app/format-service";
 import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
 

diff --git a/query-connector/src/app/query/page.tsx b/query-connector/src/app/query/page.tsx
@@ -41,85 +41,77 @@ const Query: React.FC = () => {
  useState<UseCaseQueryResponse>({});
 
  const [showCustomizeQuery, setShowCustomizeQuery] = useState(false);
+
+ const modeToCssContainerMap: { [mode in Mode]: string } = {
+ search: "main-container",
+ "patient-results": "main-container__wide",
+ "select-query": showCustomizeQuery
+ ? "main-container__wide"
+ : "main-container",
+ results: "main-container__wide",
+ };
  return (
  <>
  <SiteAlert page={mode} />
- {Object.keys(CUSTOMIZE_QUERY_STEPS).includes(mode) && (
- <StepIndicator headingLevel="h4" curStep={mode} />
- )}
- <div className="main-container">
+ <div className={modeToCssContainerMap[mode]}>
+ {Object.keys(CUSTOMIZE_QUERY_STEPS).includes(mode) && (
+  <StepIndicator headingLevel="h4" curStep={mode} />
+  )}
  {/* Step 1 */}
  {mode === "search" && (
- <div className="main-container">
- <SearchForm
- useCase={useCase}
- setUseCase={setUseCase}
- setMode={setMode}
- setLoading={setLoading}
- setPatientDiscoveryQueryResponse={
- setPatientDiscoveryQueryResponse
- }
- fhirServer={fhirServer}
- setFhirServer={setFhirServer}
- />
- </div>
+ <SearchForm
+ useCase={useCase}
+ setUseCase={setUseCase}
+ setMode={setMode}
+ setLoading={setLoading}
+ setPatientDiscoveryQueryResponse={setPatientDiscoveryQueryResponse}
+ fhirServer={fhirServer}
+ setFhirServer={setFhirServer}
+ />
  )}
 
  {/* Step 2 */}
  {mode === "patient-results" && (
- <div className="main-container__wide">
- <PatientSearchResults
- patients={patientDiscoveryQueryResponse?.Patient ?? []}
- goBack={() => setMode("search")}
- setMode={setMode}
- setPatientForQueryResponse={setPatientForQueryResponse}
- />
- </div>
+ <PatientSearchResults
+ patients={patientDiscoveryQueryResponse?.Patient ?? []}
+ goBack={() => setMode("search")}
+ setMode={setMode}
+ setPatientForQueryResponse={setPatientForQueryResponse}
+ />
  )}
 
  {/* Step 3 */}
  {mode === "select-query" && (
- <div
- className={
- showCustomizeQuery ? "main-container__wide" : "main-container"
- }
- >
- <SelectQuery
- goBack={() => setMode("patient-results")}
- goForward={() => setMode("results")}
- selectedQuery={useCase}
- setSelectedQuery={setUseCase}
- patientForQuery={patientForQuery}
- resultsQueryResponse={resultsQueryResponse}
- showCustomizeQuery={showCustomizeQuery}
- setResultsQueryResponse={setResultsQueryResponse}
- setShowCustomizeQuery={setShowCustomizeQuery}
- fhirServer={fhirServer}
- setFhirServer={setFhirServer}
- setLoading={setLoading}
- />
- </div>
+ <SelectQuery
+ goBack={() => setMode("patient-results")}
+ goForward={() => setMode("results")}
+ selectedQuery={useCase}
+ setSelectedQuery={setUseCase}
+ patientForQuery={patientForQuery}
+ resultsQueryResponse={resultsQueryResponse}
+ showCustomizeQuery={showCustomizeQuery}
+ setResultsQueryResponse={setResultsQueryResponse}
+ setShowCustomizeQuery={setShowCustomizeQuery}
+ fhirServer={fhirServer}
+ setFhirServer={setFhirServer}
+ setLoading={setLoading}
+ />
  )}
 
  {/* Step 4 */}
- {mode === "results" && (
- <div className="main-container__wide">
- {resultsQueryResponse && (
- <ResultsView
- selectedQuery={useCase}
- useCaseQueryResponse={resultsQueryResponse}
- goBack={() => {
- setMode("select-query");
- }}
- goToBeginning={() => {
- setMode("search");
- }}
- />
- )}
- </div>
+ {mode === "results" && resultsQueryResponse && (
+ <ResultsView
+ selectedQuery={useCase}
+ useCaseQueryResponse={resultsQueryResponse}
+ goBack={() => {
+ setMode("select-query");
+ }}
+ goToBeginning={() => {
+ setMode("search");
+ }}
+ />
  )}
  {loading && <LoadingView loading={loading} />}
-
  <ToastContainer icon={false} />
  </div>
  </>

diff --git a/query-connector/src/styles/custom-styles.scss b/query-connector/src/styles/custom-styles.scss
@@ -435,26 +435,39 @@ hr.custom-hr {
 
 .custom-query-step-indicator .usa-step-indicator__header {
  display: none !important;
- }
+}
 .customize-accordion .usa-accordion__button[aria-expanded="true"],
 .customize-accordion .usa-accordion__button[aria-expanded="false"] {
  background-size: 16px 10px;
  background-position: top 24px right 20px;
 }
 
- .customize-accordion .usa-accordion__button[aria-expanded="true"] {
-  background-image: url("./assets/expandUp.svg");
- }
+.customize-accordion .usa-accordion__button[aria-expanded="true"] {
+ background-image: url("./assets/expandUp.svg");
+}
 
- .customize-accordion .usa-accordion__button[aria-expanded="false"] {
-  background-image: url("./assets/expandDown.svg");
- }
+.customize-accordion .usa-accordion__button[aria-expanded="false"] {
+ background-image: url("./assets/expandDown.svg");
+}
 
- .customize-accordion .usa-accordion__content {
- padding: 0rem;
- }
+.customize-accordion .usa-accordion__content {
+ padding: 0rem;
+}
+
+.resultsViewSideNav .usa-sidenav,
+.resultsViewSideNav .usa-sidenav__item {
+ border: none !important;
+}
+
+.tableRowWithHover:hover td {
+ background-color: $background-hover-color;
+}
+
+.tableRowWithHover_clickable,
+.tableRowWithHover_clickable td {
+ cursor: pointer;
+}
 
-<<<<<<< HEAD
 // Overrides
 .margin-top-0-important {
  margin-top: 0 !important;
@@ -484,27 +497,3 @@ hr.custom-hr {
 .padding-0-important {
  padding: 0 !important;
 }
-
-.resultsViewSideNav .usa-sidenav,
-.resultsViewSideNav .usa-sidenav__item {
- border: none !important;
-}
-=======
- .no-margin-top-important {
- margin-top: 0 !important;
- }
-
- .resultsViewSideNav .usa-sidenav,
- .resultsViewSideNav .usa-sidenav__item {
- border: none !important;
- }
->>>>>>> main
-
- .tableRowWithHover:hover td {
- background-color: $background-hover-color;
- }
-
- .tableRowWithHover_clickable,
- .tableRowWithHover_clickable td {
- cursor: pointer;
- }