Merge pull request #486 from cornell-dti/responsive-review-summary-card

style: make review summary gauge card responsive
cornell-dti · Dec 10, 2024 · b00b42d · b00b42d
2 parents 73ce045 + f46586b
commit b00b42d
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 14 deletions.
diff --git a/client/src/modules/Course/Components/Gauges.tsx b/client/src/modules/Course/Components/Gauges.tsx
@@ -157,12 +157,14 @@ const Gauges = ({overall, difficulty, workload}: GaugesProps) => {
                                     />
                         })}
                     </div>
-                    <div className={styles.ratingNum}> {difficulty ? difficulty.toPrecision(2) : "-"} </div>
-                    <img src={difficultyEmote}
-                         className={styles.emote}
-                         title={difficultyHover}
-                         alt={difficultyHover}
-                    />
+                    <div className={styles.responsiveLabel}>
+                        <div className={styles.ratingNum}> {difficulty ? difficulty.toPrecision(2) : "-"} </div>
+                        <img src={difficultyEmote}
+                            className={styles.emote}
+                            title={difficultyHover}
+                            alt={difficultyHover}
+                        />
+                    </div>
                 </div>
                 <div className={styles.horizontal}>
                     <div className={styles.category}> Workload </div>
@@ -174,12 +176,14 @@ const Gauges = ({overall, difficulty, workload}: GaugesProps) => {
                                     />
                         })}
                     </div>
-                    <div className={styles.ratingNum}> {workload ? workload.toPrecision(2) : "-"} </div>
-                    <img src={workloadEmote}
-                         className={styles.emote}
-                         title={workloadHover}
-                         alt={workloadHover}
-                    />
+                    <div className={styles.responsiveLabel}>
+                        <div className={styles.ratingNum}> {workload ? workload.toPrecision(2) : "-"} </div>
+                        <img src={workloadEmote}
+                            className={styles.emote}
+                            title={workloadHover}
+                            alt={workloadHover}
+                        />
+                    </div>
                 </div>
             </div>
         </div>

diff --git a/client/src/modules/Course/Styles/Gauges.module.css b/client/src/modules/Course/Styles/Gauges.module.css
@@ -92,9 +92,16 @@
     font-weight: 590;
 }
 
-@media only screen and (max-width: 1216px) {
+.responsiveLabel {
+    display: flex;
+    flex-direction: row;
+    gap: 14px;
+}
+
+@media only screen and (max-width: 1124px) {
     .container {
-        gap: 24px;
+        gap: 12px;
+        flex-direction: column;
     }
 
     .overallScore {
@@ -128,13 +135,19 @@
 
     .horizontal {
         gap: 6px;
+        flex-direction: column;
     }
 
     .ratingNum {
         font-size: 14px;
         font-weight: 590;
     }
 
+    .ratings {
+        height: auto;
+        gap: 12px;
+    }
+
     .bars {
         display: flex;
         flex-flow: row nowrap;
@@ -146,4 +159,10 @@
     .bar {
         width: 30px;
     }
+
+    .responsiveLabel {
+        display: flex;
+        flex-flow: row nowrap;
+        gap: 10px;
+    }
 }