Playlist grid

anish1617 · Mar 16, 2022 · 5168f8a · 5168f8a
1 parent 73c8b7f
commit 5168f8a
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 87 deletions.
diff --git a/src/App.css b/src/App.css
@@ -74,7 +74,7 @@
  --screen-xl-max: 1400px;
 
  /* Play */
- --play-thumb-size: 180px;
+ --play-thumb-size: 268px;
 }
 
 html,
@@ -126,6 +126,7 @@ code {
  --fs-lg: 1.4rem;
  --fs-xl: 2rem;
  --fs-xxl: 2.8rem;
+ --play-thumb-size: 240px;
  }
 }
 
@@ -140,13 +141,21 @@ code {
  }
 }
 
+@media screen and (max-width: 480px) {
+ :root {
+ /* Font Sizes */
+ --play-thumb-size: 280px;
+ }
+}
+
 /* App Body */
 .app-body {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
+ background-color: var(--color-neutral-20);
 }
 
 /* App Footer */

diff --git a/src/common/playlists/PlayList.js b/src/common/playlists/PlayList.js
@@ -2,47 +2,27 @@ import { useSearchFilter } from "common/search/hooks/useSearchFilter";
 import { Link } from "react-router-dom";
 import './playlist.css';
 
-import { BsPlayFill } from "react-icons/bs";
-import { MdOutlineKeyboardArrowLeft, MdOutlineKeyboardArrowRight } from "react-icons/md";
-
+import { BsPlayCircleFill } from "react-icons/bs";
 
 const PlayList = () => {
  const plays = useSearchFilter();
 
  return (
  <>
- <div className="list-plays">
- <button className="btn-scroll">
- <MdOutlineKeyboardArrowLeft size="36px" className="icon" />
- </button>
- <ul>
- {plays.map((play, index) => (
- <li key={play.id}>
- <Link to={play.path} state={{ id: play.id }}>
- <div className="play-title">{play.name}</div>
- <div className="play-status">
- <BsPlayFill size="18px" color="var(--color-neutral-80)"/>
- <div className="default">Play now</div>
- <div className="current">Playing..</div>
- </div>
- </Link>
- </li>
- ))}
- <li className="active">
- <Link to="#">
- <div className="play-title">Play Name</div>
- <div className="play-status">
- <BsPlayFill size="18px" color="var(--color-neutral-80)"/>
- <div className="default">Play now</div>
- <div className="current">Playing..</div>
- </div>
- </Link>
- </li>
- </ul>
- <button className="btn-scroll">
- <MdOutlineKeyboardArrowRight size="36px" className="icon"/>
- </button>
- </div>
+ <ol className="list-plays">
+ {plays.map((play, index) => (
+ <li key={play.id}>
+ <Link to={play.path} state={{ id: play.id }}>
+ <div className="play-title">{play.name}</div>
+ <div className="play-status">
+ <BsPlayCircleFill size="18px" color="var(--color-neutral-80)"/>
+ <div className="default">Play now</div>
+ <div className="current">Playing..</div>
+ </div>
+ </Link>
+ </li>
+ ))}
+ </ol>
  </>
  )};
 

diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css
@@ -1,60 +1,43 @@
 /* List of Plays Available */
 .list-plays {
- padding: 0.4rem;
- background-color: rgba(var(--color-brand-primary-rgb), 0.1);
-}
-
-.list-plays {
- display: flex;
- flex-direction: row;
- justify-content: center;
- grid-gap: 0.6rem;
-}
-
-.list-plays .btn-scroll {
- border: 0;
- padding-left: 0;
- padding-right: 0;
- background-color: transparent;
- cursor: pointer;
-}
-
-.list-plays .btn-scroll .icon {
- opacity: 0.6;
- fill: var(--color-neutral-90);
-}
-
-.list-plays .btn-scroll:hover .icon,
-.list-plays .btn-scroll:focus .icon {
- opacity: 1;
- fill: var(--color-neutral-90);
-}
-
-.list-plays ul {
- margin: 0 auto;
- padding: 0.6rem 0.6rem 0.6rem 0;
+ margin: 0 1rem;
+ padding: 1.6rem 2rem;
  list-style: none;
- display: flex;
+ /* display: flex;
  flex-direction: row;
- grid-gap: 1rem;
- flex-grow: 1;
- overflow-x: hidden;
+ flex-wrap: wrap; */
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(var(--play-thumb-size), var(--play-thumb-size)));
+ grid-auto-rows: minmax(var(--play-thumb-size), var(--play-thumb-size));
+ grid-gap: 2rem;
+ justify-content: center;
 }
 
-.list-plays ul li a {
- position: relative;
+.list-plays li a {
+ border: solid 0px transparent;
  display: block;
+ height: 100%;
+ position: relative;
  border-radius: 0.6rem;
  background-color: var(--color-neutral-10);
- width: var(--play-thumb-size);
- height: calc(var(--play-thumb-size) * 0.8);
+ /* width: var(--play-thumb-size);
+ height: calc(var(--play-thumb-size) * 0.8); */
  padding: 1.6rem;
- box-shadow: 0px 0 10px 0px rgba(var(--color-neutral-90-rgb),0.12);
- -webkit-box-shadow: 0px 0 10px 0px rgba(var(--color-neutral-90-rgb),0.12);
- -moz-box-shadow: 0px 0 10px 0px rgba(var(--color-neutral-90-rgb),0.12);
+ box-shadow: 0px 0 6px 0px rgba(var(--color-neutral-90-rgb),0.10);
+ -webkit-box-shadow: 0px 0 6px 0px rgba(var(--color-neutral-90-rgb),0.10);
+ -moz-box-shadow: 0px 0 6px 0px rgba(var(--color-neutral-90-rgb),0.10);
  transition: all 0.16s ease-in-out;
 }
 
+.list-plays li a:hover,
+.list-plays li a:focus {
+ border: solid 2px var(--color-brand-primary);
+ transform: scale(1.06);
+ box-shadow: 0px 0 12px 0px rgba(var(--color-neutral-90-rgb),0.10);
+ -webkit-box-shadow: 0px 0 12px 0px rgba(var(--color-neutral-90-rgb),0.10);
+ -moz-box-shadow: 0px 0 12px 0px rgba(var(--color-neutral-90-rgb),0.10);
+}
+
 .list-plays a:after {
  content: "";
  position: absolute;
@@ -73,10 +56,10 @@
 
 .list-plays a:hover:after {
  background: rgb(0,0,0);
- background: -moz-linear-gradient(180deg, rgba(var(--color-neutral-90-rgb),1) 0%, rgba(var(--color-neutral-90-rgb),1) 100%);
- background: -webkit-linear-gradient(180deg, rgba(var(--color-neutral-90-rgb),1) 0%, rgba(var(--color-neutral-90-rgb),1) 100%);
- background: linear-gradient(180deg, rgba(var(--color-neutral-90-rgb),1) 0%, rgba(var(--color-neutral-90-rgb),1) 100%);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--color-neutral-90)",endColorstr="var(--color-neutral-90)",GradientType=1);
+ background: -moz-linear-gradient(180deg, rgba(var(--color-brand-primary-rgb),0.2) 0%, rgba(var(--color-brand-primary-rgb),0.2) 100%);
+ background: -webkit-linear-gradient(180deg, rgba(var(--color-brand-primary-rgb),0.2) 0%, rgba(var(--color-brand-primary-rgb),0.2) 100%);
+ background: linear-gradient(180deg, rgba(var(--color-brand-primary-rgb),0.2) 0%, rgba(var(--color-brand-primary-rgb),0.2) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--color-brand-primary)",endColorstr="var(--color-brand-primary)",GradientType=1);
 }
 
 .list-plays a .play-title {
@@ -99,7 +82,7 @@
  top: 1.6rem;
  transform: translateY(0);
  padding-bottom: 0;
- color: white;
+ color: var(--color-neutral-90);
  z-index: 1;
 }
 
@@ -118,7 +101,7 @@
  align-items: center;
  opacity: 1;
  bottom: 1.6rem;
- color: var(--color-brand-primary);
+ color: var(--color-neutral-90);
  z-index: 1;
  grid-gap: 0.4rem;
  line-height: 1;
@@ -270,4 +253,15 @@
 .play-details .header-actions .app-header-btn:focus {
  border-color: var(--color-brand-primary);
  color: rgba(var(--color-neutral-90-rgb), 0.9);
-}
+}
+
+.parent {
+ display: grid;
+ grid-gap: 24px;
+ grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+ }
+
+ .child {
+ background-color: red;
+ padding: 64px;
+ }