cards responsive look

adrianhajdin · Sep 16, 2022 · 4741f0b · 4741f0b
1 parent 83bbc95
commit 4741f0b
Show file tree

Hide file tree

Showing 10 changed files with 12 additions and 10 deletions.
diff --git a/src/components/ArtistCard.jsx b/src/components/ArtistCard.jsx
@@ -6,7 +6,7 @@ const ArtistCard = ({ track }) => {
 
   return (
     <div
-      className="flex flex-col w-[250px] p-4 bg-white/5 bg-opacity-80 backdrop-blur-sm animate-slideup rounded-lg cursor-pointer"
+      className="flex flex-col sm:w-[250px] w-full max-w-[320px] p-4 bg-white/5 bg-opacity-80 backdrop-blur-sm animate-slideup rounded-lg cursor-pointer"
       onClick={() => navigate(`/artists/${track?.artists[0].adamid}`)}
     >
       <img alt="song_img" src={track?.images?.coverart} className="w-full h-56 rounded-lg" />

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
@@ -48,6 +48,8 @@ const Sidebar = () => {
       <div
         className={`absolute top-0 h-screen w-2/3 bg-gradient-to-tl from-white/10 to-[#483D8B] backdrop-blur-lg z-10 p-6 md:hidden smooth-transition ${mobileMenuOpen ? 'left-0' : '-left-full'}`}
       >
+        <img src={logo} alt="logo" className="w-full h-14 object-contain" />
+
         <div className="mt-10">
           {links.map((item) => (
             <NavLink

diff --git a/src/components/SongBar.jsx b/src/components/SongBar.jsx
@@ -20,11 +20,11 @@ const SongBar = ({ song, i, artistId, isPlaying, activeSong, handlePauseClick, h
             </p>
           </Link>
         ) : (
-          <p className="text-xl font-bold text-white truncate">
+          <p className="text-xl font-bold text-white">
             {song?.attributes?.name}
           </p>
         )}
-        <p className="text-base text-gray-300 truncate mt-1">
+        <p className="text-base text-gray-300 mt-1">
           {artistId ? song?.attributes?.albumName : song?.subtitle}
         </p>
       </div>

diff --git a/src/components/SongCard.jsx b/src/components/SongCard.jsx
@@ -9,7 +9,7 @@ const SongCard = ({ song, isPlaying, activeSong, data, i }) => {
   const dispatch = useDispatch();
 
   return (
-    <div className="flex flex-col w-[250px] p-4 bg-white/5 bg-opacity-80 backdrop-blur-sm animate-slideup rounded-lg cursor-pointer">
+    <div className="flex flex-col sm:w-[250px] w-full max-w-[320px] p-4 bg-white/5 bg-opacity-80 backdrop-blur-sm animate-slideup rounded-lg cursor-pointer">
       <div className="relative w-full h-56 group">
         <div className={`absolute inset-0 justify-center items-center bg-black bg-opacity-50 group-hover:flex ${activeSong?.title === song.title ? 'flex bg-black bg-opacity-70' : 'hidden'}`}>
           {isPlaying && activeSong?.title === song.title ? (

diff --git a/src/components/TopPlay.jsx b/src/components/TopPlay.jsx
@@ -24,7 +24,7 @@ const TopChartCard = ({ song, i, isPlaying, activeSong, handlePauseClick, handle
           </p>
         </Link>
         <Link to={`/artists/${song?.artists[0].adamid}`}>
-          <p className="text-base text-gray-300 truncate mt-1">
+          <p className="text-base text-gray-300 mt-1">
             {song?.subtitle}
           </p>
         </Link>

diff --git a/src/pages/Artists.jsx b/src/pages/Artists.jsx
@@ -14,7 +14,7 @@ const Artists = () => {
     <div className="flex flex-col">
       <h2 className="font-bold text-3xl text-white text-left mt-4 mb-10">Discover top artists</h2>
 
-      <div className="flex flex-wrap gap-8">
+      <div className="flex flex-wrap sm:justify-start justify-center gap-8">
         {data?.tracks.map((track) => <ArtistCard key={track.key} track={track} />)}
       </div>
     </div>

diff --git a/src/pages/CountryTracks.jsx b/src/pages/CountryTracks.jsx
@@ -27,7 +27,7 @@ const CountryTracks = () => {
     <div className="flex flex-col">
       <h2 className="font-bold text-3xl text-white text-left mt-4 mb-10">Discover Country Tracks of <span className="font-black">{country}</span></h2>
 
-      <div className="flex flex-wrap gap-8">
+      <div className="flex flex-wrap sm:justify-start justify-center gap-8">
         {data?.map((song, i) => (
           <SongCard
             key={song.key}

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -21,7 +21,7 @@ const Home = () => {
     <div className="flex flex-col">
       <h2 className="font-bold text-3xl text-white text-left mt-4 mb-10">Discover top artists</h2>
 
-      <div className="flex flex-wrap gap-8">
+      <div className="flex flex-wrap sm:justify-start justify-center gap-8">
         {songs?.map((song, i) => (
           <SongCard
             key={song.key}

diff --git a/src/pages/Search.jsx b/src/pages/Search.jsx
@@ -20,7 +20,7 @@ const Search = () => {
     <div className="flex flex-col">
       <h2 className="font-bold text-3xl text-white text-left mt-4 mb-10">Showing results for <span className="font-black">{searchTerm}</span></h2>
 
-      <div className="flex flex-wrap gap-8">
+      <div className="flex flex-wrap sm:justify-start justify-center gap-8">
         {songs.map((song, i) => (
           <SongCard
             key={song.key}

diff --git a/src/pages/TopCharts.jsx b/src/pages/TopCharts.jsx
@@ -16,7 +16,7 @@ const TopCharts = () => {
     <div className="flex flex-col">
       <h2 className="font-bold text-3xl text-white text-left mt-4 mb-10">Discover Top Charts</h2>
 
-      <div className="flex flex-wrap gap-8">
+      <div className="flex flex-wrap sm:justify-start justify-center gap-8">
         {data.map((song, i) => (
           <SongCard
             key={song.key}