From 85dd02f2190839f7350ad12b07eccb062e592915 Mon Sep 17 00:00:00 2001 From: Akshaygore1 Date: Sat, 17 Feb 2024 11:29:44 +0530 Subject: [PATCH 1/4] Play Card UI FIxes --- src/common/playlists/PlayCard.jsx | 58 +++++++++++++ src/common/playlists/PlayThumbnail.jsx | 49 +---------- src/common/playlists/playlist.css | 110 ++++++++++++++++++++++++- src/plays/quiz-app/QuizApp.tsx | 6 +- 4 files changed, 172 insertions(+), 51 deletions(-) create mode 100644 src/common/playlists/PlayCard.jsx diff --git a/src/common/playlists/PlayCard.jsx b/src/common/playlists/PlayCard.jsx new file mode 100644 index 000000000..631a85185 --- /dev/null +++ b/src/common/playlists/PlayCard.jsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { BsPlayCircleFill } from 'react-icons/bs'; +import { BiLogoTypescript } from 'react-icons/bi'; +import { BiLogoJavascript } from 'react-icons/bi'; + +import Shimmer from 'react-shimmer-effect'; +import Like from 'common/components/Like/Like'; +import userImage from 'images/user.png'; + +function PlayCard({ play, cover, likeObject }) { + return ( + +
+
+ + Dummy Image + + +
+ + {/*
*/} +
{play.name}
+ {play.user && ( +
+ avatar +
{play?.user.displayName}
+
+ )} +
+
+ + {play.language === 'ts' ? ( + + ) : ( + + )} +
+
+
+ + ); +} + +export default PlayCard; diff --git a/src/common/playlists/PlayThumbnail.jsx b/src/common/playlists/PlayThumbnail.jsx index cf8bba9e9..3de51e100 100644 --- a/src/common/playlists/PlayThumbnail.jsx +++ b/src/common/playlists/PlayThumbnail.jsx @@ -1,28 +1,8 @@ import { useState, useEffect } from 'react'; -import { Link } from 'react-router-dom'; -import { BsPlayCircleFill } from 'react-icons/bs'; -import Shimmer from 'react-shimmer-effect'; -import userImage from 'images/user.png'; -import Like from 'common/components/Like/Like'; import { useUserId, useAuthenticated } from '@nhost/react'; import countByProp from 'common/utils/commonUtils'; import { loadCoverImage } from 'common/utils/coverImageUtil'; - -const Author = ({ user }) => { - return ( -
- avatar -
{user?.displayName}
-
- ); -}; +import PlayCard from './PlayCard'; const PlayThumbnail = ({ play }) => { const [cover, setCover] = useState(null); @@ -57,32 +37,7 @@ const PlayThumbnail = ({ play }) => { loadCover(); }, [play]); - return ( -
  • - -
    - - - -
    -
    -
    {play.name}
    - {play.user && } -
    -
    - -
    -
    -
    -
    -
    - -
    Play now
    -
    Playing..
    -
    - -
    • - ); + return ; }; export default PlayThumbnail; diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css index fd2150779..e09487db7 100644 --- a/src/common/playlists/playlist.css +++ b/src/common/playlists/playlist.css @@ -803,7 +803,7 @@ color: #25a0a7; } -.search-summary{ +.search-summary { padding: 1.6rem 2rem 0rem 2rem; display: flex; flex-wrap: wrap; @@ -825,3 +825,111 @@ border-radius: 4px; border: 1px solid grey; } + +.play-card-container { + display: flex; + flex-direction: column; + border: 1px solid #ddd; /* Add a border for visual separation, adjust as needed */ + border-radius: 8px; /* Add rounded corners, adjust as needed */ + overflow: hidden; /* Prevent content from overflowing */ + transition: transform 0.2s ease-in-out; /* Add a smooth transition effect */ + width: 300px; /* Adjust the max-width as needed */ + height: 100%; /* Ensure the card container fills its parent */ + padding: 12px; +} + +.border { + border: 1px solid rgb(189 183 183); + margin: 8px; + /* padding: 20px; */ +} +.author { + display: flex; + align-items: center; + margin-top: 10px; + justify-content: center; +} +.card-cover { + width: 100%; /* Set the width to fill its container */ + height: auto; /* Maintain aspect ratio */ + border-radius: 8px; /* Rounded corners, adjust as needed */ + object-fit: cover; /* Scale the image to cover the entire box */ + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */ +} + +.author-name { + margin-left: 10px; + font-size: 12px; + font-weight: 200; +} +.card-header { + font-size: 18px; /* Example font size, adjust as needed */ + padding: 10px; /* Example padding, adjust as needed */ +} + +.img { + border-radius: 50%; + width: 40px; + height: 40px; +} +.card-footer { + display: flex; + justify-content: space-between; + margin-top: 30px; + align-items: center; +} +.like-btn, +.lng-btn { + padding: 10px 20px; + border-radius: 20px; + background-color: #007bff; + color: #fff; + cursor: pointer; + transition: background-color 0.3s; +} +.like-btn:hover, +.lng-btn:hover { + background-color: #0056b3; +} + +.like-container { + display: flex; + align-items: center; /* Align children vertically */ + justify-content: space-between; +} + +.language { + height: 1.25rem; + width: 1.25rem; + background-repeat: no-repeat; + opacity: 0.2; +} + +.play-thumb-container { + position: relative; + overflow: hidden; +} + +.play-thumb-img { + width: 100%; + height: auto; + object-fit: cover; + transition: filter 0.3s ease-in-out; +} + +.play-card-container:hover .play-thumb-img { + filter: blur(3px) brightness(0.7) saturate(50%); +} + +.play-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; + transition: opacity 0.3s ease-in-out; +} + +.play-card-container:hover .play-icon { + opacity: 1; +} diff --git a/src/plays/quiz-app/QuizApp.tsx b/src/plays/quiz-app/QuizApp.tsx index 0290ae6af..e56c94c01 100644 --- a/src/plays/quiz-app/QuizApp.tsx +++ b/src/plays/quiz-app/QuizApp.tsx @@ -213,9 +213,9 @@ function QuizApp(props: any) { isWin === false && index + 1 === questions[question].answer && isFlipped ? ' border-red-600' : index + 1 === questions[question].answer && - questions[question].qStatus === 1 - ? 'border-[#021C1E]' - : 'border-b-0' + questions[question].qStatus === 1 + ? 'border-[#021C1E]' + : 'border-b-0' } ${selectedAns === index ? 'text-blue-700' : ''}`} disabled={questions[question].qStatus === 1 ? true : false} key={index} From 92166dc7eb76c1b724c2ed8a26f2486965d0d039 Mon Sep 17 00:00:00 2001 From: Akshay Gore <92959398+Akshaygore1@users.noreply.github.com> Date: Sat, 17 Feb 2024 15:09:14 +0530 Subject: [PATCH 2/4] Update QuizApp.tsx Signed-off-by: Akshay Gore <92959398+Akshaygore1@users.noreply.github.com> --- src/plays/quiz-app/QuizApp.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/plays/quiz-app/QuizApp.tsx b/src/plays/quiz-app/QuizApp.tsx index e56c94c01..0290ae6af 100644 --- a/src/plays/quiz-app/QuizApp.tsx +++ b/src/plays/quiz-app/QuizApp.tsx @@ -213,9 +213,9 @@ function QuizApp(props: any) { isWin === false && index + 1 === questions[question].answer && isFlipped ? ' border-red-600' : index + 1 === questions[question].answer && - questions[question].qStatus === 1 - ? 'border-[#021C1E]' - : 'border-b-0' + questions[question].qStatus === 1 + ? 'border-[#021C1E]' + : 'border-b-0' } ${selectedAns === index ? 'text-blue-700' : ''}`} disabled={questions[question].qStatus === 1 ? true : false} key={index} From 5c22b16b09e47a4ab6468a66d287bba32416ab82 Mon Sep 17 00:00:00 2001 From: Akshaygore1 Date: Sat, 17 Feb 2024 18:34:15 +0530 Subject: [PATCH 3/4] Changes in color --- src/common/playlists/PlayCard.jsx | 7 +++---- src/common/playlists/playlist.css | 8 ++++++++ 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/common/playlists/PlayCard.jsx b/src/common/playlists/PlayCard.jsx index 631a85185..d83a7420a 100644 --- a/src/common/playlists/PlayCard.jsx +++ b/src/common/playlists/PlayCard.jsx @@ -1,8 +1,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { BsPlayCircleFill } from 'react-icons/bs'; -import { BiLogoTypescript } from 'react-icons/bi'; -import { BiLogoJavascript } from 'react-icons/bi'; +import { BiLogoTypescript, BiLogoJavascript } from 'react-icons/bi'; import Shimmer from 'react-shimmer-effect'; import Like from 'common/components/Like/Like'; @@ -44,9 +43,9 @@ function PlayCard({ play, cover, likeObject }) {
    {play.language === 'ts' ? ( - + ) : ( - + )}
    diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css index e09487db7..6c914fb09 100644 --- a/src/common/playlists/playlist.css +++ b/src/common/playlists/playlist.css @@ -933,3 +933,11 @@ .play-card-container:hover .play-icon { opacity: 1; } + +.lang-icon { + filter: grayscale(100%); +} + +.play-card-container:hover .lang-icon { + filter: none; +} From ef4232a369741921285000c68ad435c8e207b182 Mon Sep 17 00:00:00 2001 From: Akshaygore1 Date: Sat, 17 Feb 2024 21:19:57 +0530 Subject: [PATCH 4/4] Added Card Styling Changes As Requested --- src/common/playlists/PlayCard.jsx | 2 +- src/common/playlists/playlist.css | 35 ++++++++++++++++--------------- 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/src/common/playlists/PlayCard.jsx b/src/common/playlists/PlayCard.jsx index d83a7420a..cd53dbd32 100644 --- a/src/common/playlists/PlayCard.jsx +++ b/src/common/playlists/PlayCard.jsx @@ -13,7 +13,7 @@ function PlayCard({ play, cover, likeObject }) {
    - Dummy Image +
    diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css index 6c914fb09..b90153284 100644 --- a/src/common/playlists/playlist.css +++ b/src/common/playlists/playlist.css @@ -829,12 +829,12 @@ .play-card-container { display: flex; flex-direction: column; - border: 1px solid #ddd; /* Add a border for visual separation, adjust as needed */ - border-radius: 8px; /* Add rounded corners, adjust as needed */ - overflow: hidden; /* Prevent content from overflowing */ - transition: transform 0.2s ease-in-out; /* Add a smooth transition effect */ - width: 300px; /* Adjust the max-width as needed */ - height: 100%; /* Ensure the card container fills its parent */ + border: 1px solid #ddd; + border-radius: 8px; + overflow: hidden; + transition: transform 0.2s ease-in-out; + width: 300px; + height: 100%; padding: 12px; } @@ -847,14 +847,14 @@ display: flex; align-items: center; margin-top: 10px; - justify-content: center; + justify-content: flex-start; } .card-cover { - width: 100%; /* Set the width to fill its container */ - height: auto; /* Maintain aspect ratio */ - border-radius: 8px; /* Rounded corners, adjust as needed */ - object-fit: cover; /* Scale the image to cover the entire box */ - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */ + width: 100%; + height: auto; + border-radius: 8px; + object-fit: cover; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); } .author-name { @@ -863,8 +863,9 @@ font-weight: 200; } .card-header { - font-size: 18px; /* Example font size, adjust as needed */ - padding: 10px; /* Example padding, adjust as needed */ + font-size: 18px; + padding: 10px; + text-align: center; } .img { @@ -910,14 +911,14 @@ overflow: hidden; } -.play-thumb-img { +.play-card-thumb-img { width: 100%; - height: auto; + height: 146px; object-fit: cover; transition: filter 0.3s ease-in-out; } -.play-card-container:hover .play-thumb-img { +.play-card-container:hover .play-card-thumb-img { filter: blur(3px) brightness(0.7) saturate(50%); }