From 2abfd9b1e16e459c86c517871d2171a369ac3646 Mon Sep 17 00:00:00 2001
From: cao vu <caovv62@wru.vn>
Date: Mon, 24 Aug 2020 22:58:26 +0700
Subject: [PATCH] work on mobile

---
 index.html                   |   4 +-
 resources/css/index.css      |  25 ++++-----
 resources/css/responsive.css | 100 ++++++++++++++++++++++++++++++++++-
 resources/js/carousel.js     |   8 +--
 resources/js/feature_post.js |  16 ++++--
 5 files changed, 125 insertions(+), 28 deletions(-)

diff --git a/index.html b/index.html
index fc26846..1e7ba1a 100644
--- a/index.html
+++ b/index.html
@@ -39,8 +39,8 @@
     <div class="posts-container">
         <div id="FeaturePosts">
           <div class="CarouselSlide">
-            <i class="fas fa-chevron-left" id='prevBtn'></i>
-            <i class="fas fa-chevron-right" id='nextBtn'></i>
+              <i class="fas fa-chevron-left" id='prevBtn'></i>
+              <i class="fas fa-chevron-right" id='nextBtn'></i>
                 <div class="Card_List"></div>
           </div>
         </div>
diff --git a/resources/css/index.css b/resources/css/index.css
index acb510a..a2f972d 100644
--- a/resources/css/index.css
+++ b/resources/css/index.css
@@ -134,7 +134,7 @@
 
 .Card_List{
   position: relative;
-  width: 1500px;
+  width: 1700px;
   height:360px;
   display: flex;
   padding-top: 5px;
@@ -183,29 +183,24 @@
 /*prev and nextbtn */
 #prevBtn{
   position: absolute;
-  font-size: 30px;
-  top:90%;
-  left: 6%;
   z-index: 2;
+  margin-top: 160px;
+  margin-left: 5px;
+  font-size: 30px;
   color: white;
   cursor: pointer;
 }
-#prevBtn:hover{
-  color: rgb(134, 131, 131);
-}
+
 #nextBtn{
   position: absolute;
-  font-size: 30px;
-  top: 90%;
+  margin-top: 160px;
+  right: 8.5%;
   z-index: 2;
-  right: 6%;
-  color: white;
+  font-size: 30px;
+  color:white;
   cursor: pointer;
+  margin-right: 11px;
 }
-#nextBtn:hover{
-  color: rgb(134, 131, 131);
-}
-
 
 /* Posts */
 #posts {
diff --git a/resources/css/responsive.css b/resources/css/responsive.css
index 61454ef..34a34a3 100644
--- a/resources/css/responsive.css
+++ b/resources/css/responsive.css
@@ -111,4 +111,102 @@
   }
 }
  /*feature-post */
- 
\ No newline at end of file
+ @media screen and (max-width: 1024px){
+  .CarouselSlide{
+    width: 76%;
+    margin-left:80px;
+  }
+  #nextBtn{
+    margin-right:160px;
+  }
+}
+ @media screen and (max-width: 768px){
+  .CarouselSlide{
+    width: 99%;
+    margin-left:0px
+  }
+  #nextBtn{
+    margin-right:50px;
+  }
+}
+@media screen and (max-width: 600px){
+  .CarouselSlide{
+    width: 60%;
+    margin-left:90px;
+  }
+  #nextBtn{
+    margin-right:75px;
+  }
+}
+@media screen and (max-width: 450px){
+  .CarouselSlide{
+    width: 64%;
+    margin-left:80px;
+  }
+  #nextBtn{
+    margin-right:55px;
+  }
+}
+@media screen and (max-width: 414px){
+  .CarouselSlide{
+    width: 70%;
+    margin-left:60px;
+  }
+  #nextBtn{
+    margin-right:50px;
+  }
+}
+@media screen and (max-width: 411px){
+  .CarouselSlide{
+    width: 70%;
+    margin-left:70px;
+  }
+  #nextBtn{
+    margin-right:30px;
+  }
+}
+@media screen and (max-width: 375px){
+  .CarouselSlide{
+    width: 76%;
+    margin-left:40px;
+  }
+  #nextBtn{
+    margin-right:30px;
+  }
+}
+@media screen and (max-width: 360px){
+  .CarouselSlide{
+    width: 76%;
+  }
+  #nextBtn{
+    margin-right:20px;
+  }
+}
+@media screen and (max-width: 320px){
+  .CarouselSlide{
+    width: 90%;
+    margin-left:20px;
+  }
+  #nextBtn{
+    margin-right:0px;
+  }
+}
+@media screen and (max-width: 280px){
+  .CarouselSlide{
+    width: 90%;
+    margin-left:0px;
+  }
+  .contentCard{
+    transform:scale(0.8);
+  }
+  #nextBtn{
+    margin-right:10px;
+  }
+  #prevBtn{
+    margin-left:30px;
+  }
+}
+
+
+
+
diff --git a/resources/js/carousel.js b/resources/js/carousel.js
index ee99dcd..0bd92b2 100644
--- a/resources/js/carousel.js
+++ b/resources/js/carousel.js
@@ -2,17 +2,13 @@ document.addEventListener('DOMContentLoaded',function(){
     var carouselSlide = document.querySelector('.Card_List');
     var carouselImg = document.querySelectorAll('.contentCard');
 
-    //
-
     var prevBtn = document.querySelector('#prevBtn');
     var nextBtn = document.querySelector('#nextBtn');
 
-    //
     let counter = 1;
     const size = carouselImg[0].clientWidth+20;
-    
     nextBtn.addEventListener('click',()=>{
-        if(counter >= carouselImg.length - 3) return;
+        if(counter >= carouselImg.length - 4) return;
         carouselSlide.style.transition = "transform 0.5s ease-in-out";
         counter++;
         carouselSlide.style.transform = 'translateX('+ (-size * counter)+'px)';
@@ -24,5 +20,5 @@ document.addEventListener('DOMContentLoaded',function(){
         counter--;
         carouselSlide.style.transform = 'translateX('+ (-size * counter) +'px)';
     });
-    
+
 },false)
\ No newline at end of file
diff --git a/resources/js/feature_post.js b/resources/js/feature_post.js
index 251de1e..a7c3bd5 100644
--- a/resources/js/feature_post.js
+++ b/resources/js/feature_post.js
@@ -24,6 +24,11 @@ const DUMMY_FEATURE = [
       title: '5. Super ultra hot videos Super ultra hot videos Super ultra hot videos',
       view: '20.000',
     },
+    {
+      image: 'resources/images/dummyimage1.jpg',
+      title: '6. Super ultra hot videos Super ultra hot videos Super ultra hot videos',
+      view: '30.000',
+    },
   ];
   
   var listCard = document.getElementsByClassName('Card_List')[0];
@@ -35,14 +40,14 @@ const DUMMY_FEATURE = [
     var icon = document.createElement('i');
     var Content = document.createElement('div');
     var contentCard = document.createElement('div');
-
+    //featureImg
     featureImg.classList.add('FeatureImg');
     featureImg.setAttribute('src',DUMMY_FEATURE[i].image);
-
+    // featureTitle
     featureTitle.classList.add('FeatureTitle');
     var fTitle = document.createTextNode(DUMMY_FEATURE[i].title);
     featureTitle.appendChild(fTitle);
-
+    // featureView
     featureView.classList.add('FeatureView');
     icon.className = 'fas fa-eye';
     featureView.appendChild(icon);
@@ -58,7 +63,10 @@ const DUMMY_FEATURE = [
     contentCard.classList.add('contentCard');
     contentCard.appendChild(featureImg);
     contentCard.appendChild(Content);
-
+    
     listCard.appendChild(contentCard);
   }
 
+  
+  
+