Merge pull request #20 from lnxfsf/responsive_design

Responsive design
lnxfsf · Jan 20, 2024 · a7555ec · a7555ec
2 parents 8cef54a + 9b088f9
commit a7555ec
Show file tree

Hide file tree

Showing 11 changed files with 237 additions and 25 deletions.
diff --git a/frontend/src/components/DetailsPage/DetailsPage.jsx b/frontend/src/components/DetailsPage/DetailsPage.jsx
@@ -21,13 +21,24 @@ const DetailsPage = () => {
         {/* upper part. header */}
         <Header data={dataObject} />
 
-        <div className="flex w-full h-auto">
+        <div className="flex w-full h-auto img">
           {/* left box */}
           <LeftBox data={dataObject} anime={anime} />
 
           {/* main content */}
           <MainContent data={dataObject} />
         </div>
+
+
+
+      <div className=" img1">
+          <MainContent data={dataObject} />
+
+          <LeftBox data={dataObject} anime={anime} />
+      </div> 
+
+
+
       </div>
     </>
   );

diff --git a/frontend/src/components/DetailsPage/Header.jsx b/frontend/src/components/DetailsPage/Header.jsx
@@ -3,17 +3,41 @@ import "../../styles/DetailsPage.scoped.scss";
 const Header = ({ data }) => {
   return (
     <>
+
+
+
       <div
-        className="w-full h-96 flex justify-start items-end"
+        className="w-full h-96 flex justify-start items-end img "
         style={{ backgroundImage: `url("${data.background_image}")` }}
       >
+
+
         <div className="ttl-box bg-blacky p-4 mb-[-2px]">
-          <div className=" m-8 border-pinky border-l-2 pr-24 pl-2">
+
+          <div className=" m-4 lg:m-8 border-pinky border-l-2 pr-24 pl-2">
             <h1>{data.title}</h1>
             <p>{data.num_of_fav} favorites</p>
           </div>
+
         </div>
+
+
+
       </div>
+
+
+
+        <div className="ttl-box bg-blacky p-4 mb-[-2px] img1">
+
+          <div className=" md:m-4  border-pinky border-l-2  pl-2 ">
+            <h1>{data.title}</h1>
+            <p>{data.num_of_fav} favorites</p>
+          </div>
+
+        </div>
+
+
+
     </>
   );
 };

diff --git a/frontend/src/components/DetailsPage/LeftBox.jsx b/frontend/src/components/DetailsPage/LeftBox.jsx
@@ -5,7 +5,7 @@ const LeftBox = ({ data , anime  }) => {
   return (
     <>
       <div className="basis-1/3 flex items-start justify-center ">
-        <div className="flex border-pinky border-2 w-56 m-6 h-auto rounded-2xl p-4 flex-col">
+        <div className="flex border-pinky border-2 w-56 mb-6 mt-6 md:m-6 h-auto rounded-2xl p-4 flex-col">
           {anime ? (
             <div>
               <p className="parag">Studios:</p>

diff --git a/frontend/src/components/DetailsPage/MainContent.jsx b/frontend/src/components/DetailsPage/MainContent.jsx
@@ -5,11 +5,13 @@ const MainContent = ({ data }) => {
   return (
     <>
       <div className="overflow-hidden flex grow bg-blacky justify-center items-start flex-col">
-        <h2 className="about_ttl m-6 border-pinky border-l-2 pr-24 pl-2 ml-32">
+
+
+        <h2 className="ml-4 about_ttl m-6 border-pinky border-l-2 pr-24 pl-2 md:ml-6 lg:ml-32">
           About {data.title}:
         </h2>
 
-        <p className="parag1  break-normal p-6 w-[80%] ml-28">{data.desc}</p>
+        <p className="ml-2 parag1  break-normal pl-2 md:p-6  w-[95%] md:w-[80%] lg:ml-28">{data.desc}</p>
 
         <YoutubeFrame yt_trailer={data.yt_trailer} />
       </div>

diff --git a/frontend/src/components/DetailsPage/YoutubeFrame.jsx b/frontend/src/components/DetailsPage/YoutubeFrame.jsx
@@ -11,9 +11,10 @@ const YoutubeFrame = ({yt_trailer}) => {
 
 
 
-              <div className="w-full p-6 ml-28">
+              <div className="w-full pt-6 pb-6 pr-6 ml-2 pl-2 md:p-6 lg:ml-28">
                 {/* show trailer, only if it is not null ! whether it is anime or manga (some mangas have trailer... ) */}
                 <iframe
+                  className="yt"
                   width="80%"
                   height="315"
                   src={yt_trailer}

diff --git a/frontend/src/components/Home/BrowseHome/BrowseHome.jsx b/frontend/src/components/Home/BrowseHome/BrowseHome.jsx
@@ -4,7 +4,7 @@ import React, { useContext } from "react";
 import AuthContext from "../../../context/AuthContext";
 
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 
 import { Filter } from "./Filter";
@@ -24,6 +24,20 @@ const BrowseHome = () => {
     setShowFilter(value);
   };
 
+
+useEffect(() => {
+    const handleResize = () => {
+      setShowFilter(window.innerWidth >= 768);
+    };
+
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
 
 
 

diff --git a/frontend/src/pages/Anime.jsx b/frontend/src/pages/Anime.jsx
@@ -4,7 +4,7 @@ import "../styles/FilterSearch.scoped.scss";
 
 
 
-import { useState } from 'react';
+import { useState,useEffect } from 'react';
 
 import { FilterSearchAnime } from "../components/Anime/FilterSearchAnime";
 import { BrowseAniMan } from "../components/Browse/BrowseAniMan";
@@ -19,6 +19,19 @@ const Anime = () => {
     setShowFilter(value);
   };
 
+useEffect(() => {
+    const handleResize = () => {
+      setShowFilter(window.innerWidth >= 768);
+    };
+
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
 
 
 

diff --git a/frontend/src/pages/Explore.jsx b/frontend/src/pages/Explore.jsx
@@ -1,5 +1,5 @@
 import { Link } from "react-router-dom";
-import { useState } from 'react';
+import { useState, useEffect } from "react";
 
 import "../styles/FilterSearch.scoped.scss";
 import "../styles/Explore.scoped.scss";
@@ -9,28 +9,34 @@ 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">
-
 
-
+  useEffect(() => {
+    const handleResize = () => {
+      setShowFilter(window.innerWidth >= 768);
+    };
 
-      <div className="bg-blacky flex justify-center items-center ">
-          <Search  onShowFilterChange={handleShowFilterChange}/>
-      </div>
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
 
- {showFilter ? (
-        <FilterSearchExplore />
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return (
+    <>
+      <div className="main">
+        <div className="bg-blacky flex justify-center items-center ">
+          <Search onShowFilterChange={handleShowFilterChange} />
+        </div>
 
-     ) : null}   
+        {showFilter ? <FilterSearchExplore /> : null}
 
         <div className="subtitle flex flex-row justify-between p-6 ">
           <h2>Trending Anime:</h2>

diff --git a/frontend/src/pages/Manga.jsx b/frontend/src/pages/Manga.jsx
@@ -1,7 +1,7 @@
 
 import "../styles/FilterSearch.scoped.scss";
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 import { FilterSearchManga } from "../components/Manga/FilterSearchManga";
 import { BrowseAniMan } from "../components/Browse/BrowseAniMan";
@@ -16,6 +16,22 @@ const Manga = () => {
     setShowFilter(value);
   };
 
+
+useEffect(() => {
+    const handleResize = () => {
+      setShowFilter(window.innerWidth >= 768);
+    };
+
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+
   return (
     <>
       <div className="main">

diff --git a/frontend/src/styles/DetailsPage.scoped.scss b/frontend/src/styles/DetailsPage.scoped.scss
@@ -1,18 +1,62 @@
 .main {
   background: #111;
+
+
+
 }
 
 .ttl-box {
   /* https://bennettfeely.com/clippy/ 
     https://css-tricks.com/notched-boxes/
     */
   clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%);
+
+
+    @media (min-width: 768px) and (max-width: 1024px) {
+
+      clip-path: polygon(0 0, 70% 0, 90% 100%, 0% 100%);
+
+    }
+
+
+
+
+    @media (max-width: 768px) {
+
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+
+
+    }
+
+
+
+
+
+
 }
 
 .ttl-box > div > h1 {
   color: white;
   font-family: Inter;
   font-size: 24pt;
+
+    @media (min-width: 768px) and (max-width: 1024px) {
+
+      font-size: 20pt;
+
+    }
+
+
+
+    @media (min-width: 300px) and (max-width: 768px) {
+
+
+      font-size: 19pt;
+
+    }
+
+
+
   font-style: bold;
   font-weight: 700;
   line-height: normal;
@@ -39,13 +83,77 @@
 
 .parag1 {
   font-size: 12pt;
+
+ @media (max-width: 768px) {
+
+  font-size: 11pt;
+
+ }
 }
 
 .about_ttl {
   color: white;
   font-family: Inter;
   font-size: 20pt;
+
+ @media (min-width: 768px) and (max-width: 1024px) {
+
+      font-size: 17pt;
+
+    }
+
+
+
+    @media (min-width: 300px) and (max-width: 768px) {
+
+
+      font-size: 16pt;
+
+    }
+
+
+
   font-style: bold;
   font-weight: 700;
   line-height: normal;
 }
+
+
+.img {
+
+    @media (max-width: 768px) {
+
+
+        display: none;
+
+
+    }
+
+}
+
+
+
+.img1 {
+
+    @media (min-width: 769px) {
+
+
+        display: none;
+
+
+    }
+
+}
+
+
+.yt{
+@media (max-width: 768px) {
+
+ width: 100%; 
+
+
+
+
+    }
+
+}