From ec894ae9b1c9b19b1b31ed90387d50eaf55ae673 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Thu, 16 May 2024 04:00:20 +0500
Subject: [PATCH] feat(responsive): make a application a bit more responsive

---
 .../components/ReleaseCard/ReleaseCard.jsx    | 13 +++-
 .../components/ReleaseList/ReleaseList.jsx    | 71 ++++++++++++-----
 .../ReleasesOverview/ReleasesOverview.jsx     | 78 +++++++++++++++++--
 .../components/UserProfile/UserProfile.jsx    |  2 -
 4 files changed, 132 insertions(+), 32 deletions(-)

diff --git a/frontend/app/components/ReleaseCard/ReleaseCard.jsx b/frontend/app/components/ReleaseCard/ReleaseCard.jsx
index 7705def..2a99618 100644
--- a/frontend/app/components/ReleaseCard/ReleaseCard.jsx
+++ b/frontend/app/components/ReleaseCard/ReleaseCard.jsx
@@ -5,11 +5,18 @@ export const ReleaseCard = (props) => {
   return (
     <Link
       href={`/release/${props.id}`}
-      className={props.className ? props.className : "s2"}
+      className={""}
+      style={{
+        width: "300px",
+        height: "100%",
+      }}
     >
       <article
-        className="no-padding round fill"
-        style={{ width: 284, height: props.height ? props.height : 508 }}
+        className="small-padding round fill"
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
       >
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <div style={{ aspectRatio: "1/1" }}>
diff --git a/frontend/app/components/ReleaseList/ReleaseList.jsx b/frontend/app/components/ReleaseList/ReleaseList.jsx
index 2ff6b8d..e5d39b2 100644
--- a/frontend/app/components/ReleaseList/ReleaseList.jsx
+++ b/frontend/app/components/ReleaseList/ReleaseList.jsx
@@ -5,29 +5,58 @@ export const ReleaseList = (props) => {
   return (
     <Link
       href={`/release/${props.id}`}
-      className={
-        props.className
-          ? props.className
-          : "s12 round fill row padding surface-container"
-      }
+      className={props.className ? props.className : "round padding fill"}
+      style={{ width: "100%", height: "100%", gridColumn: "1/-1" }}
     >
-      <Image
-        className="round"
-        style={{ aspectRatio: "1/1" }}
-        width="128px"
-        height="128px"
-        src={props.poster}
-        alt=""
-      />
+      <nav
+        className="m l"
+        style={{
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%",
+        }}
+      >
+        <Image
+          className="round"
+          style={{ aspectRatio: "1/1" }}
+          width="128px"
+          height="128px"
+          src={props.poster}
+          alt=""
+        />
 
-      <div className="max">
-        <h5 className="small">{`${props.title.substring(0, 90)}${
-          [...props.title].length > 90 ? "..." : ""
-        }`}</h5>
-        <p>{`${props.description.substring(0, 170)}${
-          [...props.description].length > 170 ? "..." : ""
-        }`}</p>
-      </div>
+        <div style={{ width: "calc(100% - 10rem)" }}>
+          <h5 className="small">{`${props.title.substring(0, 90)}${
+            [...props.title].length > 90 ? "..." : ""
+          }`}</h5>
+          <p>{`${props.description.substring(0, 170)}${
+            [...props.description].length > 170 ? "..." : ""
+          }`}</p>
+        </div>
+      </nav>
+
+      <nav
+        className="s"
+        style={{
+          alignItems: "center",
+          maxWidth: "100%",
+        }}
+      >
+        <Image
+          className="round"
+          style={{ aspectRatio: "1/1" }}
+          width="128px"
+          height="128px"
+          src={props.poster}
+          alt=""
+        />
+
+        <div style={{ width: "calc(20%)" }}>
+          <h5 className="small">{`${props.title.substring(0, 90)}${
+            [...props.title].length > 90 ? "..." : ""
+          }`}</h5>
+        </div>
+      </nav>
     </Link>
   );
 };
diff --git a/frontend/app/components/ReleasesOverview/ReleasesOverview.jsx b/frontend/app/components/ReleasesOverview/ReleasesOverview.jsx
index da73865..bda0c70 100644
--- a/frontend/app/components/ReleasesOverview/ReleasesOverview.jsx
+++ b/frontend/app/components/ReleasesOverview/ReleasesOverview.jsx
@@ -6,9 +6,18 @@ export default function ReleasesOverview(props) {
 
   return (
     <>
-      <div style={{ display: "flex", justifyContent: "space-between" }}>
+      <nav
+        className="l"
+        style={{
+          justifyContent: "space-between",
+          alignItems: "center",
+          flexWrap: "wrap",
+          maxWidth: "calc(100% - 12rem)",
+          margin: "auto",
+        }}
+      >
         {props.chips && (
-          <div>
+          <nav className="scroll">
             {props.chips.map((item) => {
               return (
                 <button
@@ -22,10 +31,10 @@ export default function ReleasesOverview(props) {
                 </button>
               );
             })}
-          </div>
+          </nav>
         )}
 
-        <div>
+        <div className="secondary-container round tiny-padding">
           <button
             className="circle transparent"
             onClick={() => {
@@ -43,11 +52,68 @@ export default function ReleasesOverview(props) {
             <i className={view == "grid" ? "fill" : ""}>cards</i>
           </button>
         </div>
-      </div>
+      </nav>
+
+      <nav
+        className="s m"
+        style={{
+          justifyContent: "space-between",
+          alignItems: "center",
+          flexWrap: "wrap",
+          margin: "auto",
+          maxWidth: "100%",
+        }}
+      >
+        {props.chips && (
+          <nav className="scroll" style={{ maxWidth: "100%" }}>
+            {props.chips.map((item) => {
+              return (
+                <button
+                  key={item.list}
+                  className={`chip ${props.list == item.list ? "fill" : ""}`}
+                  onClick={() => {
+                    props.setList(item.list);
+                  }}
+                >
+                  <span>{item.title}</span>
+                </button>
+              );
+            })}
+          </nav>
+        )}
+
+        <div className="secondary-container round tiny-padding">
+          <button
+            className="circle transparent"
+            onClick={() => {
+              setView("list");
+            }}
+          >
+            <i className={view == "list" ? "fill" : ""}>view_agenda</i>
+          </button>
+          <button
+            className="circle transparent"
+            onClick={() => {
+              setView("grid");
+            }}
+          >
+            <i className={view == "grid" ? "fill" : ""}>cards</i>
+          </button>
+        </div>
+      </nav>
 
       {props.releases ? (
         <>
-          <div className="grid">
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "repeat( auto-fill, 300px )",
+              gap: "1rem",
+              justifyContent: "center",
+              justifyItems: "center",
+              paddingTop: "1rem",
+            }}
+          >
             <CardList data={props.releases} view={view} />
           </div>
 
diff --git a/frontend/app/components/UserProfile/UserProfile.jsx b/frontend/app/components/UserProfile/UserProfile.jsx
index 8cfc3dd..4e8d426 100644
--- a/frontend/app/components/UserProfile/UserProfile.jsx
+++ b/frontend/app/components/UserProfile/UserProfile.jsx
@@ -216,7 +216,6 @@ export const UserProfile = (props) => {
             {lastWatched.map((item) => {
               return (
                 <ReleaseCard
-                  className={"s2"}
                   key={item.id}
                   id={item.id}
                   title={item.title_ru}
@@ -225,7 +224,6 @@ export const UserProfile = (props) => {
                     item.last_view_episode.name ||
                     `${item.last_view_episode.position + 1} серия`
                   }
-                  height={400}
                 />
               );
             })}