Improved PlayHeader(#1562) (#1568)

* Fixed Play Header Added collapse button and updated the max-width for the description. * made collapse mobile responsive * enhanced collapse button
reactplay · Nov 4, 2024 · 3a48cc2 · 3a48cc2
1 parent afd7254
commit 3a48cc2
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 13 deletions.
diff --git a/src/common/playlists/PlayHeader.jsx b/src/common/playlists/PlayHeader.jsx
@@ -1,17 +1,34 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PlayHeaderInfo from './PlayHeaderInfo';
 import PlayHeaderActions from './PlayHeaderActions';
+import { FaAngleUp } from 'react-icons/fa6';
+import { FaAngleDown } from 'react-icons/fa6';
+
+export const CollapseContext = React.createContext();
 
 const PlayHeader = ({ play }) => {
+  const [collapse, setCollapse] = useState(false);
+
   return (
     <>
       <div className="play-details-header">
-        <PlayHeaderInfo play={play} />
+        <CollapseContext.Provider value={collapse}>
+          <PlayHeaderInfo play={play} />
+        </CollapseContext.Provider>
         <div className="header-rightcol">
           <div className="header-actions">
+            <button
+              className="collapse-btn px-3 py-2 rounded-md flex flex-row justify-center items-center text-white"
+              onClick={() => {
+                setCollapse((prev) => !prev);
+              }}
+            >
+              {collapse ? <FaAngleUp className="mr-2" /> : <FaAngleDown className="mr-2" />}
+              Collapse
+            </button>
             <PlayHeaderActions play={play} />
           </div>
-          <small className="header-desc">{play.description}</small>
+          {collapse && <small className="header-desc">{play.description}</small>}
         </div>
       </div>
     </>

diff --git a/src/common/playlists/PlayHeaderInfo.jsx b/src/common/playlists/PlayHeaderInfo.jsx
@@ -3,8 +3,9 @@ import { Link } from 'react-router-dom';
 import LevelBadge from 'common/components/LevelBadge';
 import { format } from 'date-fns';
 import * as allLocales from 'date-fns/locale';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { email2Slug } from 'common/services/string';
+import { CollapseContext } from './PlayHeader';
 
 const Author = ({ playCreatedAt, user }) => {
   const [formattedPlayDate] = useState(() => {
@@ -61,6 +62,8 @@ const Tags = ({ tags }) => {
 };
 
 const PlayHeaderInfo = ({ play }) => {
+  const collapse = useContext(CollapseContext);
+
   return (
     <div className="overflow-hidden header-leftcol">
       <div className="header-leftcol-action">
@@ -72,16 +75,24 @@ const PlayHeaderInfo = ({ play }) => {
       <div className="header-leftcol-contents">
         <div className="header-primary">
           <h3 className="header-title">{play.name}</h3>
-          <div className="header-title-tags">
-            <LevelBadge level={play.level.name} />{' '}
-            {!!play.play_tags.length && <Tags tags={play.play_tags} />}
-          </div>
-        </div>
-        <div className="mt-1 header-secondary">
-          {play.user && (
-            <Author githubUsername={play.github} playCreatedAt={play.created_at} user={play.user} />
+          {collapse && (
+            <div className="header-title-tags">
+              <LevelBadge level={play.level.name} />{' '}
+              {!!play.play_tags.length && <Tags tags={play.play_tags} />}
+            </div>
           )}
         </div>
+        {collapse && (
+          <div className="mt-1 header-secondary">
+            {play.user && (
+              <Author
+                githubUsername={play.github}
+                playCreatedAt={play.created_at}
+                user={play.user}
+              />
+            )}
+          </div>
+        )}
       </div>
     </div>
   );

diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css
@@ -326,6 +326,15 @@
   padding-top: 0.4rem;
 }
 
+.header-rightcol {
+  max-width: 70%;
+}
+
+.collapse-btn {
+  border: 1px solid #010326;
+  color: #010326;
+}
+
 .play-details .play-details-header .header-primary {
   display: flex;
   flex-direction: row;
@@ -336,12 +345,15 @@
 
 @media screen and (max-width: 480px) {
   .play-details .play-details-header .header-rightcol {
-    flex-direction: row-reverse;
+    flex-direction: column-reverse;
     align-items: flex-start;
     border-top: solid 1px var(--color-neutral-30);
     margin-top: 0.4rem;
     padding-top: 0.4rem;
   }
+  .header-rightcol{
+    max-width: 95%;
+  }
 
   .play-details .play-details-header .header-rightcol .header-desc {
     text-align: left;