From 84f591833df829458cc9eea754fc751027a80060 Mon Sep 17 00:00:00 2001
From: NCanggoro <ansianggoro@gmail.com>
Date: Sun, 3 Sep 2023 18:17:14 +0700
Subject: [PATCH] fix responsive news and user critics location

---
 src/pages/Home/index.tsx | 30 ++++++++++----------
 src/pages/Home/style.css | 59 ++++++++++++++++++++++++++++++++++++++--
 2 files changed, 71 insertions(+), 18 deletions(-)

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 827310c..8b8db38 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -76,7 +76,7 @@ function Home() {
           <SeparatorWithAnchor pageLink='#' pageName='Recent News / Event' secondLink='#' />
           <div className={"mt-5"}>
             {news.data.map((x: News) => (
-              <div class={"text-sm"}style={{ display: 'inline-block', width: '33.3%', padding: '0 1% 15px', verticalAlign: 'top' }}>
+              <div class={"text-sm news-card"}>
                 <div style={{ height: 250, overflow: 'hidden', borderRadius: 7 }}>
                   <img src={x.thumbnail} style={{ width: "100%", height: '100%', objectFit: 'cover', objectPosition: 'top' }} />
                 </div>
@@ -98,14 +98,14 @@ function Home() {
 
         {/* START LOCATION CRITICS BEST AND USERS BEST SECTION */}
         <section className={"mt-10"}>
-          <div class={"grid grid-cols-4 gap-12"}>
-            <div className={'col-span-2 mr-5'}>
+          <div class={"grid grid-cols-4 lg:gap-12"}>
+            <div className={'col-span-4 lg:col-span-2 trending-section'}>
               <SeparatorWithAnchor pageLink='#' pageName={"Trending Now"} secondLink='#' />
-              <div className={'grid grid-cols-3'}>
+              <div className={'grid grid-cols-4 md:grid-cols-3'}>
                 {popular.data.map((x) => (
-                  <div className={"m-2 text-sm"}>
-                    <div className={"mb-2"} style={{ overflow: 'hidden', borderRadius: 7 }}>
-                      <img src={x.thumbnail} style={{ height: 200, width: '100%' }} />
+                  <div className={"m-2 text-sm col-span-2 md:col-span-1"}>
+                    <div className={"mb-2 trending-image-container"}>
+                      <img src={x.thumbnail} style={{ width: '100%', height: '100%' }} />
                     </div >
                     <p>{x.name}</p>
                     <p className={"text-xs"}>{x.location}</p>
@@ -116,16 +116,16 @@ function Home() {
                 ))}
               </div>
             </div>
-            <div>
+            <div className={'col-span-2 lg:col-span-1'}>
               <SeparatorWithAnchor pageLink='#' pageName={"Critic's Best"} />
               {critics_users_pick.critics.map((x) => (
                 <div className={"pt-2 text-sm"}>
-                  <div className={'mr-2'} style={{ width: 72, height: 72, float: 'left' }}>
+                  <div className={'mr-2 critics-users-image'}>
                     <img src={x.thumbnail} style={{ height: '100%', width: '100%', borderRadius: 3}} />
                   </div>
                   <p className={'location-title'}>{x.name}</p>
-                  <p className={'text-xs'}>{x.location}</p>
-                  <div className={'mt-3'} style={{ display: 'inline-block' }}>
+                  <p className={'text-xs location-province location-title'}>{x.location}</p>
+                  <div className={'critics-users-rating-container'} style={{ display: 'inline-block' }}>
                     <p className={'text-xs ml-2'}>{x.critic_rating}</p>
                     <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
                       <div style={{ height: 4, width: `${x.critic_rating}%`, backgroundColor: 'green' }} />
@@ -136,16 +136,16 @@ function Home() {
               ))
               }
             </div>
-            <div>
+            <div className={'col-span-2 lg:col-span-1'}>
               <SeparatorWithAnchor pageLink='#' pageName={"User's Best"} />
               {critics_users_pick.users.map((x) => (
                 <div className={"pt-2 text-sm"}>
-                  <div className={'mr-2'} style={{ width: 72, height: 72, float: 'left' }}>
+                  <div className={'mr-2 critics-users-image'}>
                     <img src={x.thumbnail} style={{ height: '100%', width: '100%', borderRadius: 3}} />
                   </div>
                   <p className={'location-title'}>{x.name}</p>
-                  <p className={'text-xs'}>{x.location}</p>
-                  <div className={'mt-3'} style={{ display: 'inline-block' }}>
+                  <p className={'text-xs location-province location-title'}>{x.location}</p>
+                  <div className={'critics-users-rating-container'} style={{ display: 'inline-block' }}>
                     <p className={'text-xs ml-2'}>{x.user_rating}</p>
                     <div style={{ height: 4, width: 30, backgroundColor: "#72767d"}}>
                       <div style={{ height: 4, width: `${x.user_rating}%`, backgroundColor: 'green' }} />
diff --git a/src/pages/Home/style.css b/src/pages/Home/style.css
index e61bdcf..0a9e2c6 100644
--- a/src/pages/Home/style.css
+++ b/src/pages/Home/style.css
@@ -32,6 +32,30 @@
   color: #b99229;
 }
 
+.news-card {
+  display: inline-block;
+  width: 33.3%; 
+  padding: 0 1% 15px;
+  vertical-align: top;
+}
+
+
+.trending-image-container {
+  overflow: hidden;
+  border-radius: 7px;
+  height: 200px;
+}
+
+.critics-users-image {
+  width: 72px; 
+  height: 72px;
+  float: left;
+}
+
+.critics-users-rating-container {
+  margin-top: 0.75rem;
+}
+
 @media screen and (max-width: 1300px) {
   .recently-added-section-card {
     width: 24.3%;
@@ -42,6 +66,13 @@
   .recently-added-section-card {
     width: 33.3%;
   }
+  .news-card {
+    width: 50%;
+  }
+
+  .trending-section {
+    margin-bottom: 1.75rem;
+  }
 }
 
 @media screen and (max-width: 625px) {
@@ -50,6 +81,28 @@
   }
 }
 
-/* @media screen and (max-width: 425px) {
-  
-} */
\ No newline at end of file
+@media screen and (max-width: 425px) {
+  .news-card {
+    width: 100%;
+  }
+
+  .location-title {
+    font-size: 10px;
+  }
+
+  .critics-users-image {
+    height: 60px;
+    width: 60px;
+  }
+
+  .location-province {
+    font-size: 10px !important;
+  }
+
+  .trending-image-container {
+    overflow: hidden;
+    border-radius: 7px;
+    height: 100px;
+  }
+
+}
\ No newline at end of file