Upload spectrum and generate report Page

luox-app · Jul 12, 2023 · b9abe27 · b9abe27
1 parent 3815b45
commit b9abe27
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 73 deletions.
diff --git a/src/javascript/components/App.jsx b/src/javascript/components/App.jsx
@@ -52,20 +52,9 @@ const App = () => {
  <Intro />
  </Route>
  </Switch>
- <footer
- id="footer"
- data-aos="fade-up"
- data-aos-easing="ease-in-out"
- data-aos-duration="200"
- >
+ <footer id="footer">
  <FooterBarWithRouter />
  </footer>
- {/* <a
- href="#"
- className="back-to-top d-flex align-items-center justify-content-center"
- >
- <i className="bi bi-arrow-up-short" />
- </a> */}
  </Router>
  </div>
  );

diff --git a/src/javascript/components/CalculationTable.jsx b/src/javascript/components/CalculationTable.jsx
@@ -253,7 +253,7 @@ const CalculationTable = ({
  return (
  <section>
  <div className="row">
- <div className="col text-left">
+ <div className="col text-left py-2">
  <label htmlFor="calculation-exponential-notation">
  <input
  type="checkbox"
@@ -264,7 +264,7 @@ const CalculationTable = ({
  {" Use exponential notation?"}
  </label>
  </div>
- <div className="col text-center">
+ <div className="col text-center py-2">
  <label htmlFor="calculation-advanced-calculations">
  <input
  type="checkbox"
@@ -275,7 +275,7 @@ const CalculationTable = ({
  {" Display advanced calculations?"}
  </label>
  </div>
- <div className="col text-center">
+ <div className="col text-center py-2">
  <label htmlFor="tm30display">
  <input
  type="checkbox"
@@ -296,7 +296,7 @@ const CalculationTable = ({
  </a>
  </div>
  </div>
- <table className="table table-sm mt-3 result-table">
+ <table className="table table-sm table-striped table-bordered table-hover generate-csv-table mt-5 result-table">
  <CalculationTableHeader measurementLabels={measurementLabels} />
  <tbody>
  <CalculationTableRow
@@ -444,7 +444,7 @@ const CalculationTable = ({
  </table>
  {tm30display && (
  <>
- <h2 className="my-3">Colour Vector Graphics</h2>
+ <h2 className="mt-4 mb-2">Colour Vector Graphics</h2>
  <CVGPlot measurementLabels={measurementLabels} refHAB={refHAB} />
  </>
  )}

diff --git a/src/javascript/components/Chart.jsx b/src/javascript/components/Chart.jsx
@@ -52,9 +52,9 @@ const Chart = ({
 
  return (
  <section>
- <div className="container">
+ <div className="container p-4">
  <div className="row">
- <div className="col-sm">
+ <div className="col-sm pt-5">
  <div className="row">
  <div>
  <h5>Y-axis scale</h5>

diff --git a/src/javascript/components/GenerateCSV.jsx b/src/javascript/components/GenerateCSV.jsx
@@ -22,7 +22,7 @@ const GenerateCSV = () => {
  </section>
  <section className="why-us pt-2">
  <div className="container p-5">
- <div className="row">
+ <div className="row justify-content-center">
  <div className="section-title">
  <h2>Specification</h2>
  <p>
@@ -35,7 +35,7 @@ const GenerateCSV = () => {
  <div className="row px-5">
  <div className="col-md-12">
  <table className="table table-striped table-bordered table-hover generate-csv-table mb-5">
- <thead className="table-dark">
+ <thead>
  <tr>
  <th>Column</th>
  <th>Required?</th>

diff --git a/src/javascript/components/SpectraTable.jsx b/src/javascript/components/SpectraTable.jsx
@@ -47,7 +47,7 @@ const SpectraTableHeader = ({
  return (
  <thead>
  <tr>
- <th colSpan={sampleCount + 1}>
+ <th colSpan={sampleCount + 1} className="text-center">
  Spectral {radianceOrIrradiance} [
  {radianceOrIrradianceSIUnit(radianceOrIrradiance)}]
  </th>
@@ -105,7 +105,7 @@ const SpectraTable = ({
  return (
  <section>
  <div className="row">
- <div className="col text-left">
+ <div className="col text-left py-2">
  <label htmlFor="spectra-exponential-notation">
  <input
  type="checkbox"
@@ -116,7 +116,7 @@ const SpectraTable = ({
  {" Use exponential notation?"}
  </label>
  </div>
- <div className="col text-center">
+ <div className="col text-center py-2">
  {truncateTable() && (
  <label htmlFor="spectra-all-rows">
  <input
@@ -139,7 +139,7 @@ const SpectraTable = ({
  </a>
  </div>
  </div>
- <table className="table table-sm mt-3 result-table">
+ <table className="table table-sm table-striped table-bordered table-hover generate-csv-table mt-5 result-table">
  <SpectraTableHeader
  sampleCount={sampleCount}
  measurementLabels={measurementLabels}

diff --git a/src/javascript/components/Upload.jsx b/src/javascript/components/Upload.jsx
@@ -49,53 +49,64 @@ const Upload = () => {
 
  return (
  <>
- <div className="row">
- <div className="col">
- <h1 className="mt-5">Upload spectrum and generate report</h1>
- <label htmlFor="pro_mode_checkbox" className="promode-label">
- <input
- type="checkbox"
- id="pro_mode_checkbox"
- value="proMode"
- checked={powerMode}
- onChange={userModeChange}
- />{" "}
- Power user mode (check if your SPD columns &gt; 5)
- </label>
- </div>
- </div>
- <LoadingIndicator />
-
- <UploadForm
- radianceOrIrradiance={radianceOrIrradiance}
- measurementLabels={measurementLabels}
- setRadianceOrIrradiance={setRadianceOrIrradiance}
- setRows={setRows}
- setSampleCount={setSampleCount}
- setMeasurementLabels={setMeasurementLabels}
- csv={csv}
- setCSV={setCSV}
- relativePowers={relativePowers}
- setRelativePowers={setRelativePowers}
- setPowerMode={setPowerMode}
- powerMode={powerMode}
- fileInput={fileInput}
- setRefHAB={setRefHAB}
- isLoaded={isLoaded}
- setLoaded={setLoaded}
- />
+ <main id="main">
+ <section className="portfolio">
+ <div className="container">
+ <div className="section-title">
+ <h2>Upload spectrum and generate report</h2>
+ <p className="justify-content-center">
+ <label htmlFor="pro_mode_checkbox" className="promode-label">
+ <input
+ type="checkbox"
+ id="pro_mode_checkbox"
+ value="proMode"
+ checked={powerMode}
+ onChange={userModeChange}
+ />{" "}
+ Power user mode (check if your SPD columns &gt; 5)
+ </label>
+ </p>
+ </div>
+ </div>
+ </section>
+ <LoadingIndicator />
+ <section className="why-us pt-2">
+ <div className="container p-5 text-center">
+ <div className="row justify-content-center">
+ <UploadForm
+ radianceOrIrradiance={radianceOrIrradiance}
+ measurementLabels={measurementLabels}
+ setRadianceOrIrradiance={setRadianceOrIrradiance}
+ setRows={setRows}
+ setSampleCount={setSampleCount}
+ setMeasurementLabels={setMeasurementLabels}
+ csv={csv}
+ setCSV={setCSV}
+ relativePowers={relativePowers}
+ setRelativePowers={setRelativePowers}
+ setPowerMode={setPowerMode}
+ powerMode={powerMode}
+ fileInput={fileInput}
+ setRefHAB={setRefHAB}
+ isLoaded={isLoaded}
+ setLoaded={setLoaded}
+ />
 
- <Results
- rows={rows}
- sampleCount={sampleCount}
- radianceOrIrradiance={radianceOrIrradiance}
- measurementLabels={measurementLabels}
- powerMode={powerMode}
- isLoaded={isLoaded}
- setLoaded={setLoaded}
- refHAB={refHAB}
- setRefHAB={setRefHAB}
- />
+ <Results
+ rows={rows}
+ sampleCount={sampleCount}
+ radianceOrIrradiance={radianceOrIrradiance}
+ measurementLabels={measurementLabels}
+ powerMode={powerMode}
+ isLoaded={isLoaded}
+ setLoaded={setLoaded}
+ refHAB={refHAB}
+ setRefHAB={setRefHAB}
+ />
+ </div>
+ </div>
+ </section>
+ </main>
  </>
  );
 };

diff --git a/src/javascript/components/UploadForm.jsx b/src/javascript/components/UploadForm.jsx
@@ -298,7 +298,7 @@ const UploadForm = ({
  ref={fileInput}
  disabled={isLoaded}
  onChange={handleFileInput}
- className="form-control-file"
+ className="form-control-file ml-100 mt-2"
  id="file-input"
  />
  </div>

diff --git a/src/stylesheets/custom.css b/src/stylesheets/custom.css
@@ -47,4 +47,18 @@
 
 .generate-csv-table th, .generate-csv-table td {
  padding: 15px !important;
+}
+
+.table > thead {
+ --bs-table-color: #fff;
+ --bs-table-bg: #212529;
+ --bs-table-border-color: #373b3e;
+ --bs-table-striped-bg: #2c3034;
+ --bs-table-striped-color: #fff;
+ --bs-table-active-bg: #373b3e;
+ --bs-table-active-color: #fff;
+ --bs-table-hover-bg: #323539;
+ --bs-table-hover-color: #fff;
+ color: var(--bs-table-color);
+ border-color: var(--bs-table-border-color);
 }
diff --git a/src/stylesheets/upload.css b/src/stylesheets/upload.css
@@ -15,7 +15,7 @@ table.errors {
  border:1px solid #ccc;
  padding:10px;
  margin:0 0 10px;
- display:block; 
+ /* display:block;  */
  width: fit-content;
 }
 
@@ -63,6 +63,24 @@ table.errors {
  animation: spin 2s linear infinite;
 }
 
+.form-control-sm {
+ display: inline-block !important;
+ width: auto !important;
+ vertical-align: middle !important;
+}
+
+section {
+ padding: 30px 0px !important;
+}
+
+.cvg {
+ padding-top: 0px !important;
+}
+
+.ml-100 {
+ margin-left: 100px !important;
+}
+
 @keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }