Merge pull request #18 from lnxfsf/responsive_design

browsehome

frontend/src/components/Home/BrowseHome/BrowseHome.jsx

@@ -1,6 +1,5 @@
 import "../../../styles/BrowseHome.scoped.scss";
 
-
 import React, { useContext } from "react";
 import AuthContext from "../../../context/AuthContext";
 
@@ -13,25 +12,23 @@ const BrowseHome = () => {
   return (
     <>
       <div className="main flex justify-center items-center ">
-
-        <div className="basis-1/4">
-
-
-            {/* filter  */}
-            <Filter />
-
+        <div className="md:basis-1/4 m-4 flex justify-center items-center ">
+          {/* filter  */}
+          <Filter />
         </div>
 
-        <div className="cards_container grow p-14">
-
-    {/* other one */}
+        <div className="cards_container md:grow md:p-14">
 
-
+          {/* when desktop layout */}
           <Items />
+        </div>
+      </div>
 
 
+      <div className="cards_container_mob grow p-6">
+        {/*  when mobile */}
 
-        </div>
+        <Items />
       </div>
     </>
   );

frontend/src/components/Home/BrowseHome/Filter.jsx

@@ -14,7 +14,7 @@ const Filter = () => {
         */}
 
 
-          <div className="filter flex flex-col border-2 border-pinky m-6 ">
+          <div className="filter flex flex-col border-2 border-pinky md:m-6 ">
             <h1 className="self-center m-4 mt-8 ">Browse</h1>
 
             <div className="flex flex-col  justify-start ml-3 mt-3">

frontend/src/components/Home/BrowseHome/Items.jsx

@@ -10,7 +10,7 @@ const Items = () => {
 
    return <>
 
-          <div className="  grid grid-cols-4 gap-x-6 gap-y-6  grow ">
+          <div className="  grid  custom-grid-cols  gap-x-6 gap-y-6  grow ">
 
             {/*individual card. for anime it shows */}
             {anime_data.map((item) => (

frontend/src/components/Home/PopularCarousel/PopularCarousel.jsx

@@ -9,7 +9,7 @@ const PopularCarousel = () => {
 
   var curIndex = 0
   const [curAnime , setAnime] = useState(anime_data[curIndex])
-
+/* 
   useEffect(() => {
     const interval = setInterval(() => {
       curIndex++
@@ -19,7 +19,7 @@ const PopularCarousel = () => {
       setAnime(anime_data[curIndex])
     }, 15000);
     return () => clearInterval(interval);
-  }, []);
+  }, []); */
 
   return (
     <>

frontend/src/styles/BrowseHome.scoped.scss

@@ -6,10 +6,41 @@
 }
 
 .cards_container {
+  width: 0;
+  height: 0;
+  display: none;
+
+  @media screen and (min-width: 768px) {
+    display: flex;
+
+    width: 100%;
+    height: 100%;
+
+
+
+
+  }
+
+  overflow-y: auto;
+}
+
+// when its mobile, then it shows this
+.cards_container_mob {
+  display: flex;
+
   width: 100%;
-  height: 100%;
+  height: 40rem;
 
   overflow-y: auto;
+
+
+
+  background: linear-gradient(180deg, #111 0%, #1e1e1e 50.52%, #1e1e1e 100%);
+
+
+  @media screen and (min-width: 768px) {
+    display: none;
+  }
 }
 
 /* card item */
@@ -27,6 +58,26 @@
 
 .card_img {
   width: 100%;
+
+
+
+  @media (min-width: 350px) and (max-width: 415px) {
+
+      width: 9rem;
+
+  }
+
+
+  @media (min-width: 250px) and (max-width: 350px) {
+
+      width: 8rem;
+
+  }
+
+
+
+
+
   height: 12em;
   border-radius: 10px;
 
@@ -37,11 +88,37 @@
 .title {
   color: white;
   font-weight: bold;
+
+
+@media (min-width: 560px) and (max-width: 768px) {
+
+      font-size: 12pt;
+  }
+
+
+  @media (min-width: 350px) and (max-width: 415px) {
+
+      font-size: 11pt;
+  }
+
+
+
+  @media (min-width: 250px) and (max-width: 350px) {
+
+      font-size: 10pt;
+
+  }
+
 }
 
 /* search part */
 .filter {
-  width: 14vw;
+  width: 100%;
+
+  @media screen and (min-width: 768px) {
+    width: 14vw;
+  }
+
   height: auto;
   border-radius: 25px;
 }
@@ -58,20 +135,20 @@
 
 .submit {
   width: 90%;
+
   color: white;
   background-color: #ea1179;
 }
 
-.submit:hover{
-  background-color: #b80c5f
+.submit:hover {
+  background-color: #b80c5f;
 }
 
-
-
 /* button for search */
 
 .search-container {
   width: 100%;
+
   display: flex;
   align-items: center;
   margin-top: 8px;
@@ -110,7 +187,12 @@
 /* dropdown */
 .dropdown-select,
 .dropdown-select_g {
-  width: 90%;
+  width: 95%;
+
+  @media screen and (min-width: 768px) {
+    width: 90%;
+  }
+
   padding: 5px;
   margin-top: 5px;
 
@@ -131,3 +213,51 @@
   background-color: #b80c5f;
   color: #fff;
 }
+
+
+// here define how much what
+.custom-grid-cols {
+
+
+grid-template-columns: repeat(2, minmax(0, 1fr));
+
+
+@media (min-width: 921px) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+@media (min-width: 768px) and (max-width: 921px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+
+} 
+
+@media (min-width: 560px) and (max-width: 768px) {
+
+
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+
+}
+
+
+@media (min-width: 415px) and (max-width: 560px) {
+
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+
+// @media (max-width: 350px) {
+
+//     grid-template-columns: repeat(1, minmax(0, 1fr));
+
+
+// } 
+
+
+/* 
+@media  {
+  
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+} */
+
+
+}