feat(responsive): make a application a bit more responsive

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" }}>

frontend/app/components/ReleaseList/ReleaseList.jsx

@@ -5,11 +5,16 @@ 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" }}
+    >
+      <nav
+        className="m l"
+        style={{
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%",
+        }}
       >
         <Image
           className="round"
@@ -20,7 +25,7 @@ export const ReleaseList = (props) => {
           alt=""
         />
 
-      <div className="max">
+        <div style={{ width: "calc(100% - 10rem)" }}>
           <h5 className="small">{`${props.title.substring(0, 90)}${
             [...props.title].length > 90 ? "..." : ""
           }`}</h5>
@@ -28,6 +33,30 @@ export const ReleaseList = (props) => {
             [...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>
   );
 };

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>
+      </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>
 

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}
                 />
               );
             })}