Styling Adjustments

luox-app · Sep 6, 2023 · fda235c · fda235c
1 parent d596ecb
commit fda235c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/src/javascript/components/CVGPlot.jsx b/src/javascript/components/CVGPlot.jsx
@@ -57,9 +57,15 @@ let styleWidth = 700;
 let styleHeight = 700;
 const windowWidth = window.innerWidth;
 
-if (windowWidth < 500) {
- styleWidth = windowWidth;
- styleHeight = windowWidth;
+if (windowWidth <= 996 && windowWidth > 776) {
+ styleWidth = 500;
+ styleHeight = 500;
+} else if (windowWidth <= 776 && windowWidth > 500) {
+ styleWidth = 300;
+ styleHeight = 300;
+} else if (windowWidth <= 500) {
+ styleWidth = 200;
+ styleHeight = 200;
 }
 
 const downloadChart = (downloadType) => {
@@ -295,7 +301,7 @@ const CVGPlot = ({ measurementLabels, refHAB }) => {
  pageRangeDisplayed={10}
  onChange={handlePageChange}
  />
- <div id="colorVectorGraphics" className="col-md-8 md-offset-2 col-xs-12">
+ <div id="colorVectorGraphics">
  <Plot
  data={data}
  style={{ width: styleWidth, height: styleHeight }}

diff --git a/src/javascript/components/Upload.jsx b/src/javascript/components/Upload.jsx
@@ -80,7 +80,7 @@ const Upload = () => {
  </section>
  <LoadingIndicator />
  <section className="why-us pt-2 upload-section">
- <div className="container p-5 text-center">
+ <div className="container p-4 text-center upload-div">
  <div className="row justify-content-center">
  <UploadForm
  radianceOrIrradiance={radianceOrIrradiance}

diff --git a/src/stylesheets/custom.css b/src/stylesheets/custom.css
@@ -333,10 +333,29 @@
 .modal-lg {
  --bs-modal-width: 70%;
 }
-@media screen and (max-width: 776px) {
+@media screen and (max-width: 996px) {
+ .upload-div, .container {
+ max-width: 95% !important;
+ }
+ .table-row {
+ margin-left: 0px !important;
+ margin-right: 0px !important;
+ overflow-x: scroll !important;
+ }
+}
+@media screen and (max-width: 768px){
  .modal-lg {
  --bs-modal-width: 100%;
  }
+ .upload-div, .container {
+ padding: 20px !important;
+ max-width: 95% !important;
+ }
+ .table-row {
+ margin-left: 0px !important;
+ margin-right: 0px !important;
+ overflow-x: scroll !important;
+ }
 }
 @media screen and (max-width: 576px) {
  #app {