Merge pull request #18 from ECE49595-Team-6/responsive-ui

made the UI responsive
ECE49595-Team-6 · Oct 29, 2024 · d18d839 · d18d839
2 parents 3c2b365 + acacd9b
commit d18d839
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 23 deletions.
diff --git a/src/components/DynamicRecommendations.tsx b/src/components/DynamicRecommendations.tsx
@@ -146,18 +146,16 @@ class DynamicRecommendations extends React.Component<{recTargetProp : string}, {
   render() {
     Spicetify.Player.addEventListener("onprogress", this.addToQueue);
     return (
-      <>
-        <div className={styles.recommendationsSection}>
-          <div className={styles.recommendationHeader}>
-            <div className={styles.recommendationsLabel} style={{marginTop: "10px"}}>{"Song Recommendations"}</div>
-            <div className={styles.recommendationsHeaderSpacer}></div>
-            <div className={styles.recommendationTarget}>{this.props.recTargetProp}</div>
-          </div>
-          <div className={styles.recommendationsBlock}>
-            {RecommendationsRender(this.state.recommendations)}
-          </div>
+      <div className={styles.recommendationsSection} style={{width: "100%"}}>
+        <div className={styles.recommendationHeader}>
+          <div className={styles.recommendationsLabel} style={{marginTop: "10px"}}>{"Song Recommendations"}</div>
+          <div className={styles.recommendationsHeaderSpacer}></div>
+          <div className={styles.recommendationTarget}>{this.props.recTargetProp}</div>
         </div>
-      </>
+        <div className={styles.recommendationsBlock}>
+          {RecommendationsRender(this.state.recommendations)}
+        </div>
+      </div>
     );
   }
 }

diff --git a/src/components/NowPlaying.tsx b/src/components/NowPlaying.tsx
@@ -231,9 +231,7 @@ class NowPlaying extends React.Component<{}, {audioFeatures: AudioFeaturesRespon
               </div>
             : <></>}
           </div>
-          <div style={{display: "flex", flexDirection: "row"}}>
             <DynamicRecommendations recTargetProp={this.state.recTarget}></DynamicRecommendations>
-          </div>
         </div>
 
         {/* Stats block */}

diff --git a/src/css/app.module.scss b/src/css/app.module.scss
@@ -6,18 +6,21 @@
 .topBar {
   display: flex;
   flex-direction: row;
+  width: 100%;
 }
 
 .nowPlayingSidebar {
-  width: 300px;
+  width: 280px;
+  margin-left: 30px;
+  margin-right: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   height:auto;
 }
 
 .trackInfoPrimary {
-  width: 280px;
+  width: 100%;
   margin-top: 35px;
   display: flex;
   flex-direction: column;
@@ -27,8 +30,8 @@
 
 .trackCover {
   border-radius: 5px;
-  width: 250px;
-  height: 250px;
+  width: 300px;
+  height: 300px;
 }
 
 .statsBlock {
@@ -92,20 +95,20 @@
 }
 
 .recommendationsSection {
-  width: 750px;
   padding-bottom: 20px;
   padding-left: 20px;
   padding-right: 20px;
+
 }
 
 .recommendationsBlock {
+  height: 350px;
+  width: 100%;
   border-radius: 5px;
   margin-top: 8px;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-  row-gap: 13px;
-  column-gap: 10px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
 }
 
 .trackContainer {
@@ -114,6 +117,7 @@
   border-radius: 10px;
   padding: 10px;
   padding-right: 20px;
+  margin: 5px;
 }
 
 .trackContainer:hover {