Merge pull request #19 from lnxfsf/responsive_design

Responsive design
lnxfsf · Jan 20, 2024 · 8cef54a · 8cef54a
2 parents 99b8307 + 7c05e38
commit 8cef54a
Show file tree

Hide file tree

Showing 14 changed files with 399 additions and 30 deletions.
diff --git a/frontend/src/components/Anime/FilterSearchAnime.jsx b/frontend/src/components/Anime/FilterSearchAnime.jsx
@@ -7,8 +7,8 @@ const FilterSearchAnime = () => {
   return <>
 
 
-    <div className="filter grid grid-cols-6 p-6 ">
-          <div className="flex flex-col  justify-start ml-3 mt-3">
+    <div className="filter grid  custom-grid-cols p-6 ">
+          <div className="flex flex-col  justify-start md:ml-3 mt-3">
             <p className="filter_txt">Search:</p>
 
             <div className="search-container">
@@ -21,7 +21,7 @@ const FilterSearchAnime = () => {
             </div>
           </div>
 
-          <div className="flex flex-col  justify-start ml-3 mt-3">
+          <div className="flex flex-col  justify-start md:ml-3 mt-3">
             <p className="filter_txt">Genres:</p>
 
             <select className="dropdown-select_g1" multiple>
@@ -35,7 +35,7 @@ const FilterSearchAnime = () => {
             </select>
           </div>
 
-          <div className="flex flex-col  justify-start ml-3 mt-3">
+          <div className="flex flex-col  justify-start md:ml-3 mt-3">
             <p className="filter_txt">Year:</p>
 
             <select className="dropdown-select">
@@ -52,7 +52,7 @@ const FilterSearchAnime = () => {
             </select>
           </div>
 
-          <div className="flex flex-col  justify-start ml-3 mt-3">
+          <div className="flex flex-col  justify-start md:ml-3 mt-3">
             <p className="filter_txt">Studio:</p>
 
             <select className="dropdown-select">
@@ -70,7 +70,7 @@ const FilterSearchAnime = () => {
             </select>
           </div>
 
-          <div className="flex flex-col  justify-start ml-3 mt-3">
+          <div className="flex flex-col  justify-start md:ml-3 mt-3">
             <p className="filter_txt">Seasons:</p>
 
             <select className="dropdown-select">
@@ -88,7 +88,7 @@ const FilterSearchAnime = () => {
             </select>
           </div>
 
-          <div className="flex flex-col  justify-start ml-3 mt-3">
+          <div className="flex flex-col  justify-start md:ml-3 mt-3">
             <p className="filter_txt">Episodes:</p>
 
             <select className="dropdown-select">

diff --git a/frontend/src/components/Browse/BrowseAniMan.jsx b/frontend/src/components/Browse/BrowseAniMan.jsx
@@ -18,7 +18,7 @@ const BrowseAniMan = ({ isanime }) => {
   return (
     <>
       {isanime ? (
-        <div className=" cards_container grid grid-cols-6 gap-x-6 gap-y-6 p-6  ">
+        <div className=" cards_container grid custom-grid-cols gap-x-6 gap-y-6 p-6  ">
           {anime_data.map((item) => (
             <Link
               to="/detailspage"
@@ -43,7 +43,7 @@ const BrowseAniMan = ({ isanime }) => {
           ))}
         </div>
       ) : (
-        <div className=" cards_container grid grid-cols-6 gap-x-6 gap-y-6 p-6  ">
+        <div className=" cards_container grid custom-grid-cols gap-x-6 gap-y-6 p-6  ">
           {manga_data.map((item) => (
             <Link
               to="/detailspage"

diff --git a/frontend/src/components/Explore/FilterSearchExplore.jsx b/frontend/src/components/Explore/FilterSearchExplore.jsx
@@ -10,8 +10,8 @@ const FilterSearchExplore = () => {
 
 
    {/*TODO apply this filter. should react 'onChange'. and results should be displayed on whole page (without these sections..)  */}
-        <div className="filter grid grid-cols-6 p-6 ">
-          <div className="flex flex-col  justify-start ml-3 mt-3">
+        <div className="filter grid custom-grid-cols p-6 ">
+          <div className="flex flex-col  justify-start md:ml-3 mt-3">
             <p className="filter_txt">Search:</p>
 
             <div className="search-container">
@@ -24,7 +24,7 @@ const FilterSearchExplore = () => {
             </div>
           </div>
 
-          <div className="flex flex-col  justify-start ml-3 mt-3">
+          <div className="flex flex-col  justify-start md:ml-3 mt-3">
             <p className="filter_txt">Genres:</p>
 
             <select className="dropdown-select_g1" multiple>
@@ -38,7 +38,7 @@ const FilterSearchExplore = () => {
             </select>
           </div>
 
-          <div className="flex flex-col  justify-start ml-3 mt-3">
+          <div className="flex flex-col  justify-start md:ml-3 mt-3">
             <p className="filter_txt">Year:</p>
 
             <select className="dropdown-select">

diff --git a/frontend/src/components/Home/BrowseHome/BrowseHome.jsx b/frontend/src/components/Home/BrowseHome/BrowseHome.jsx
@@ -3,26 +3,70 @@ import "../../../styles/BrowseHome.scoped.scss";
 import React, { useContext } from "react";
 import AuthContext from "../../../context/AuthContext";
 
+
+import { useState } from 'react';
+
+
 import { Filter } from "./Filter";
 import { Items } from "./Items";
+import { Search } from "../../Search";
 
 const BrowseHome = () => {
   const { user } = useContext(AuthContext);
 
+
+  // you'll just pass prop from child to parent, in child, just toogle that, and it shows/hides it. without using css..
+
+
+  const [showFilter, setShowFilter] = useState(false);
+
+  const handleShowFilterChange = (value) => {
+    setShowFilter(value);
+  };
+
+
+
+
   return (
     <>
+
+
+      <div className="bg-blacky flex justify-center items-center ">
+          <Search  onShowFilterChange={handleShowFilterChange}/>
+      </div>
+
+
+
+ {showFilter ? (
+
       <div className="main flex justify-center items-center ">
-        <div className="md:basis-1/4 m-4 flex justify-center items-center ">
-          {/* filter  */}
+
+
+        <div className="md:basis-1/4 m-4 flex justify-center items-center">
+          {/* filter */}
           <Filter />
         </div>
+
+
+
+        {/* <div className="md:basis-1/4 m-4 flex justify-center items-center ">
+    
+
+    
+          <Filter />
+        </div> */}
+
+
+
 
         <div className="cards_container md:grow md:p-14">
 
           {/* when desktop layout */}
           <Items />
         </div>
       </div>
+
+     ) : null}   
 
 
       <div className="cards_container_mob grow p-6">

diff --git a/frontend/src/components/Manga/FilterSearchManga.jsx b/frontend/src/components/Manga/FilterSearchManga.jsx
@@ -8,8 +8,8 @@ const FilterSearchManga = () => {
   return <>
 
 
-        <div className="filter grid grid-cols-6 p-6 ">
-          <div className="flex flex-col  justify-start ml-3 mt-3">
+        <div className="filter grid  custom-grid-cols p-6 ">
+          <div className="flex flex-col  justify-start md:ml-3 mt-3">
             <p className="filter_txt">Search:</p>
 
             <div className="search-container">
@@ -22,7 +22,7 @@ const FilterSearchManga = () => {
             </div>
           </div>
 
-          <div className="flex flex-col  justify-start ml-3 mt-3">
+          <div className="flex flex-col  justify-start md:ml-3 mt-3">
             <p className="filter_txt">Genres:</p>
 
             <select className="dropdown-select_g1" multiple>
@@ -36,7 +36,7 @@ const FilterSearchManga = () => {
             </select>
           </div>
 
-          <div className="flex flex-col  justify-start ml-3 mt-3">
+          <div className="flex flex-col  justify-start md:ml-3 mt-3">
             <p className="filter_txt">Year:</p>
 
             <select className="dropdown-select">
@@ -53,7 +53,7 @@ const FilterSearchManga = () => {
             </select>
           </div>
 
-          <div className="flex flex-col  justify-start ml-3 mt-3">
+          <div className="flex flex-col  justify-start md:ml-3 mt-3">
             <p className="filter_txt">Publishing Status:</p>
 
             <select className="dropdown-select">
@@ -71,7 +71,7 @@ const FilterSearchManga = () => {
             </select>
           </div>
 
-          <div className="flex flex-col  justify-start ml-3 mt-3">
+          <div className="flex flex-col  justify-start md:ml-3 mt-3">
             <p className="filter_txt">Country Of Origin:</p>
 
             <select className="dropdown-select">

diff --git a/frontend/src/components/Search.jsx b/frontend/src/components/Search.jsx
@@ -0,0 +1,59 @@
+
+import "../styles/BrowseHome.scoped.scss";
+
+import  { useState } from 'react';
+
+import { IconButton,Button } from "@mui/material";
+import FilterListIcon from '@mui/icons-material/FilterList';
+
+const Search = ({onShowFilterChange}) => {
+
+
+  const [showFilter, setShowFilter] = useState(false);
+
+  const toggleShowFilter = () => {
+    const newValue = !showFilter;
+    setShowFilter(newValue);
+    onShowFilterChange(newValue);
+  };
+
+
+    return (
+
+        <>
+
+      <div className="flex items-center  justify-center ml-3 mt-3 mb-6 filter_btn">
+
+
+              <div className="search-container">
+                <div className="input-container">
+                  <input type="text" placeholder="Search" />
+                  <button className="search-icon">
+                    <i className="bx bx-search-alt-2"></i>
+                  </button>
+                </div>
+              </div>
+
+
+
+
+
+            </div>
+
+
+      <div className="flex items-center  justify-start ml-3 mt-5 mr-3 mb-6 filter_btn ">
+        <IconButton sx={{bgcolor: "#e5c9d9", color: "#1e1e1e" , borderRadius: 25,  border: `1px solid #ea1179`,   '&:hover': { background: "rgb(234, 17, 121)", color: "white"    }  }} onClick={toggleShowFilter}  ><FilterListIcon/></IconButton>
+
+        </div>
+
+
+
+
+        </>
+    )
+
+
+}
+
+
+export {Search}
diff --git a/frontend/src/pages/Anime.jsx b/frontend/src/pages/Anime.jsx
@@ -1,14 +1,42 @@
 
 import "../styles/FilterSearch.scoped.scss";
 
+
+
+
+import { useState } from 'react';
+
 import { FilterSearchAnime } from "../components/Anime/FilterSearchAnime";
 import { BrowseAniMan } from "../components/Browse/BrowseAniMan";
+import { Search } from "../components/Search";
 
 const Anime = () => {
+
+
+  const [showFilter, setShowFilter] = useState(false);
+
+  const handleShowFilterChange = (value) => {
+    setShowFilter(value);
+  };
+
+
+
+
   return (
     <>
       <div className="main">
+
+
+      <div className="bg-blacky flex justify-center items-center ">
+          <Search  onShowFilterChange={handleShowFilterChange}/>
+      </div>
+
+
+ {showFilter ? (
         <FilterSearchAnime />
+
+     ) : null}   
+
         <BrowseAniMan isanime={true} />
       </div>
     </>

diff --git a/frontend/src/pages/Explore.jsx b/frontend/src/pages/Explore.jsx
@@ -1,17 +1,37 @@
 import { Link } from "react-router-dom";
+import { useState } from 'react';
 
 import "../styles/FilterSearch.scoped.scss";
 import "../styles/Explore.scoped.scss";
 
 import { BrowseAniMan } from "../components/Browse/BrowseAniMan";
 import { FilterSearchExplore } from "../components/Explore/FilterSearchExplore";
+import { Search } from "../components/Search";
 
 const Explore = () => {
+
+  const [showFilter, setShowFilter] = useState(false);
+
+  const handleShowFilterChange = (value) => {
+    setShowFilter(value);
+  };
+
   return (
     <>
       <div className="main">
+
+
+
+
+      <div className="bg-blacky flex justify-center items-center ">
+          <Search  onShowFilterChange={handleShowFilterChange}/>
+      </div>
+
+ {showFilter ? (
         <FilterSearchExplore />
 
+     ) : null}   
+
         <div className="subtitle flex flex-row justify-between p-6 ">
           <h2>Trending Anime:</h2>
           <Link to="/anime">