From a10f1a9074e0b3837c751f6d9ab82e27cb1f5950 Mon Sep 17 00:00:00 2001
From: Linuxiness <igor.lerinc7@gmail.com>
Date: Sat, 20 Jan 2024 16:36:37 +0100
Subject: [PATCH 1/4] it shows/hides according to window as well

---
 .../components/Home/BrowseHome/BrowseHome.jsx | 16 ++++++++-
 frontend/src/pages/Anime.jsx                  | 15 +++++++-
 frontend/src/pages/Explore.jsx                | 34 +++++++++++--------
 frontend/src/pages/Manga.jsx                  | 18 +++++++++-
 4 files changed, 66 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/Home/BrowseHome/BrowseHome.jsx b/frontend/src/components/Home/BrowseHome/BrowseHome.jsx
index dcb13bb..a87289c 100644
--- 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
index 9e1cd20..4c42cad 100644
--- 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
index 3a05955..efc20ee 100644
--- 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
index 0ef3458..3c88de6 100644
--- 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">

From a4f3cc75804d8e76a2deb8f2e403174a26d6cc83 Mon Sep 17 00:00:00 2001
From: Linuxiness <igor.lerinc7@gmail.com>
Date: Sat, 20 Jan 2024 17:10:50 +0100
Subject: [PATCH 2/4] fixed upcomingcarousel images better

---
 .../src/styles/UpcomingCarousel.scoped.scss   | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/src/styles/UpcomingCarousel.scoped.scss b/frontend/src/styles/UpcomingCarousel.scoped.scss
index 6bfc9cf..ee80d17 100644
--- a/frontend/src/styles/UpcomingCarousel.scoped.scss
+++ b/frontend/src/styles/UpcomingCarousel.scoped.scss
@@ -127,7 +127,24 @@ text-wrap: wrap;
 
 .item > div > img {
   border: 0;
-  object-fit: contain;
+  // object-fit: contain;
+  
+  
+  
+  @media screen and (max-width: 768px)  {
+   object-fit: cover;
+  width:100%;
+  height:14em;
+  }
+
+
+  @media screen and (min-width: 768px)  {
+  object-fit: cover;
+  width:100%;
+  height:30em;
+
+    
+  }
   
   
   

From 72f44af0edf2164f9cab687152de2ac6b23b4ccd Mon Sep 17 00:00:00 2001
From: Linuxiness <igor.lerinc7@gmail.com>
Date: Sat, 20 Jan 2024 20:46:12 +0100
Subject: [PATCH 3/4] detailspage mostly done

---
 .../src/components/DetailsPage/Header.jsx     | 28 ++++++-
 .../components/DetailsPage/MainContent.jsx    |  6 +-
 .../components/DetailsPage/YoutubeFrame.jsx   |  3 +-
 frontend/src/styles/DetailsPage.scoped.scss   | 84 +++++++++++++++++++
 4 files changed, 116 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/DetailsPage/Header.jsx b/frontend/src/components/DetailsPage/Header.jsx
index f43649b..ecc2151 100644
--- 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=" 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/MainContent.jsx b/frontend/src/components/DetailsPage/MainContent.jsx
index fe85859..9197818 100644
--- 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-2 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=" 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
index ed1af02..7a13eba 100644
--- 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 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/styles/DetailsPage.scoped.scss b/frontend/src/styles/DetailsPage.scoped.scss
index 449e116..dcb6b29 100644
--- a/frontend/src/styles/DetailsPage.scoped.scss
+++ b/frontend/src/styles/DetailsPage.scoped.scss
@@ -1,5 +1,8 @@
 .main {
   background: #111;
+  
+
+  
 }
 
 .ttl-box {
@@ -7,12 +10,53 @@
     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;
@@ -49,3 +93,43 @@
   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%; 
+      
+     
+      
+
+    }
+
+}

From 9b088f9ec779e4ca7b92dcae565a47613cbe53e7 Mon Sep 17 00:00:00 2001
From: Linuxiness <igor.lerinc7@gmail.com>
Date: Sat, 20 Jan 2024 21:06:06 +0100
Subject: [PATCH 4/4] detailspage mobilelayout

---
 .../components/DetailsPage/DetailsPage.jsx    | 13 +++++++++-
 .../src/components/DetailsPage/Header.jsx     |  2 +-
 .../src/components/DetailsPage/LeftBox.jsx    |  2 +-
 .../components/DetailsPage/MainContent.jsx    |  4 ++--
 .../components/DetailsPage/YoutubeFrame.jsx   |  2 +-
 frontend/src/styles/DetailsPage.scoped.scss   | 24 +++++++++++++++++++
 6 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/DetailsPage/DetailsPage.jsx b/frontend/src/components/DetailsPage/DetailsPage.jsx
index 048f9ec..c2bd1d7 100644
--- 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
index ecc2151..1415c71 100644
--- a/frontend/src/components/DetailsPage/Header.jsx
+++ b/frontend/src/components/DetailsPage/Header.jsx
@@ -29,7 +29,7 @@ const Header = ({ data }) => {
 
         <div className="ttl-box bg-blacky p-4 mb-[-2px] img1">
 
-          <div className=" m-4  border-pinky border-l-2  pl-2 ">
+          <div className=" md:m-4  border-pinky border-l-2  pl-2 ">
             <h1>{data.title}</h1>
             <p>{data.num_of_fav} favorites</p>
           </div>
diff --git a/frontend/src/components/DetailsPage/LeftBox.jsx b/frontend/src/components/DetailsPage/LeftBox.jsx
index af97f14..5fc7cb9 100644
--- 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
index 9197818..0e92ab1 100644
--- a/frontend/src/components/DetailsPage/MainContent.jsx
+++ b/frontend/src/components/DetailsPage/MainContent.jsx
@@ -7,11 +7,11 @@ const MainContent = ({ data }) => {
       <div className="overflow-hidden flex grow bg-blacky justify-center items-start flex-col">
     
     
-        <h2 className="ml-2 about_ttl m-6 border-pinky border-l-2 pr-24 pl-2 md:ml-6 lg: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 pl-2 md:p-6  w-[95%] md:w-[80%] lg: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
index 7a13eba..ba45883 100644
--- a/frontend/src/components/DetailsPage/YoutubeFrame.jsx
+++ b/frontend/src/components/DetailsPage/YoutubeFrame.jsx
@@ -11,7 +11,7 @@ const YoutubeFrame = ({yt_trailer}) => {
                 
 
                 
-              <div className="w-full pt-6 pb-6 pr-6 pl-2 md:p-6 lg: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"
diff --git a/frontend/src/styles/DetailsPage.scoped.scss b/frontend/src/styles/DetailsPage.scoped.scss
index dcb6b29..63a8de8 100644
--- a/frontend/src/styles/DetailsPage.scoped.scss
+++ b/frontend/src/styles/DetailsPage.scoped.scss
@@ -83,12 +83,36 @@
 
 .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;