Merge pull request #135 from SCAI-BIO/adjust-screen-size

Adjust Media Queries
SCAI-BIO · Nov 14, 2024 · 98059df · 98059df
2 parents 8f5d773 + 1dfe50b
commit 98059df
Show file tree

Hide file tree

Showing 14 changed files with 1,343 additions and 230 deletions.
diff --git a/frontend/src/app/auto-harmonizer/auto-harmonizer.component.css b/frontend/src/app/auto-harmonizer/auto-harmonizer.component.css
@@ -1,3 +1,4 @@
+/* Base Styles */
 .header-container {
   margin: 20px;
   display: flex;
@@ -47,12 +48,6 @@
   margin-top: 20px;
 }
 
-.progress {
-  margin-top: 10px;
-  width: 100%;
-  max-width: 50%;
-}
-
 .form-field {
   padding-right: 10px;
   padding-left: 10px;
@@ -74,4 +69,143 @@
 .mat-table th:last-child,
 .mat-table td:last-child {
   border-right: none;
+}
+
+/* Responsive Styles */
+
+/* For screens 1200px and below */
+@media (max-width: 1200px) {
+  .form-upload-container {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .form-container {
+    max-width: 100%;
+    margin-right: 0;
+  }
+
+  .file-upload-container {
+    max-width: 100%;
+    margin-top: 20px;
+  }
+}
+
+/* For screens 992px and below */
+@media (max-width: 992px) {
+  .header-container {
+    margin: 15px;
+    padding: 15px;
+  }
+
+  .component-container {
+    padding: 15px;
+  }
+
+  .form-upload-container {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .form-container {
+    max-width: 100%;
+    margin-right: 0;
+  }
+
+  .file-upload-container {
+    padding: 18px;
+    height: auto;
+  }
+
+  .button-container {
+    margin-top: 18px;
+  }
+
+  .table-container {
+    max-height: 500px;
+  }
+
+  .mat-table th,
+  .mat-table td {
+    padding: 10px;
+  }
+}
+
+@media (max-width: 768px) {
+  .header-container {
+    margin: 10px;
+    padding: 10px;
+  }
+
+  .component-container {
+    padding: 10px;
+  }
+
+  .form-upload-container {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .form-container {
+    max-width: 100%;
+    margin-right: 0;
+  }
+
+  .file-upload-container {
+    padding: 15px;
+    height: auto;
+  }
+
+  .button-container {
+    margin-top: 15px;
+  }
+
+  .table-container {
+    max-height: 400px;
+  }
+
+  .mat-table th,
+  .mat-table td {
+    padding: 8px;
+  }
+}
+
+@media (max-width: 576px) {
+  .header-container {
+    margin: 5px;
+    padding: 5px;
+  }
+
+  .component-container {
+    padding: 5px;
+  }
+
+  .form-upload-container {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .form-container {
+    margin-bottom: 10px;
+    max-width: 100%;
+  }
+
+  .file-upload-container {
+    padding: 10px;
+    height: auto;
+  }
+
+  .button-container {
+    margin-top: 10px;
+  }
+
+  .table-container {
+    max-height: 300px;
+  }
+
+  .mat-table th,
+  .mat-table td {
+    font-size: 12px;
+    padding: 6px;
+  }
 }
diff --git a/frontend/src/app/biomarkers/biomarkers.component.css b/frontend/src/app/biomarkers/biomarkers.component.css
@@ -1,3 +1,4 @@
+/* Header Container */
 .header-container {
     margin: 20px;
     display: flex;
@@ -6,20 +7,23 @@
     background-color: #f9f9f9;
 }
 
+/* Main Component Container */
 .component-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 20px;
 }
 
+/* Biomarker Container */
 .biomarker-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 20%;
 }
 
+/* Cohort and Button Containers */
 .cohort-selection-container, .button-container {
     display: flex;
     flex-direction: column;
@@ -28,6 +32,7 @@
     padding: 10px 0;
 }
 
+/* Cohort Container */
 .cohort-container {
     display: flex;
     flex-direction: column;
@@ -37,6 +42,7 @@
     margin-bottom: 20px;
 }
 
+/* Cohort List */
 .cohort-list {
     display: flex;
     flex-wrap: wrap;
@@ -48,6 +54,7 @@
     margin: 0 10px;
 }
 
+/* Color Circle */
 .color-circle {
     display: inline-block;
     width: 12px;
@@ -56,10 +63,12 @@
     margin-right: 2px;
 }
 
+/* Full Width and Form Field */
 .full-width, .mat-form-field {
     width: 100%;
 }
 
+/* Chip Listbox */
 mat-chip-listbox {
     flex-wrap: wrap;
     padding: 10px;
@@ -69,4 +78,75 @@ mat-chip-option {
     margin: 5px;
     background-color: #d1c4e9;
     color: #4a148c;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 1200px) {
+    .biomarker-container {
+        width: 30%;
+    }
+
+    .cohort-selection-container, .button-container {
+        width: 50%;
+    }
+}
+
+@media (max-width: 992px) {
+    .header-container, .component-container {
+        padding: 15px;
+    }
+
+    .biomarker-container,
+    .cohort-selection-container,
+    .button-container {
+        width: 60%;
+    }
+}
+
+@media (max-width: 768px) {
+    .header-container, .component-container {
+        padding: 10px;
+    }
+
+    .biomarker-container,
+    .cohort-selection-container,
+    .button-container {
+        width: 80%;
+    }
+
+    .cohort-list p {
+        margin: 5px;
+    }
+
+    mat-chip-listbox {
+        padding: 5px;
+    }
+}
+
+@media (max-width: 576px) {
+
+    .header-container,
+    .component-container {
+        padding: 8px;
+        margin: 10px;
+    }
+
+    .biomarker-container,
+    .cohort-selection-container,
+    .button-container {
+        width: 100%;
+    }
+
+    .cohort-list p {
+        margin: 3px;
+    }
+
+    .color-circle {
+        width: 10px;
+        height: 10px;
+    }
+
+    mat-chip-option {
+        font-size: 12px;
+    }
 }