header responsiveness and description re-arrange

anish1617 · Mar 23, 2022 · 8583c90 · 8583c90
1 parent 0edbf70
commit 8583c90
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 16 deletions.
diff --git a/src/common/playlists/PlayHeader.js b/src/common/playlists/PlayHeader.js
@@ -6,8 +6,11 @@ const PlayHeader = ({ play }) => {
  return (
  <div className="play-details-header">
  <PlayHeaderInfo play={play} />
- <div className="header-actions">
- <PlayHeaderActions play={play} />
+ <div className="header-rightcol">
+ <div className="header-actions">
+ <PlayHeaderActions play={play} />
+ </div>
+ <small className="header-desc">{play.description}</small>
  </div>
  </div>
  );

diff --git a/src/common/playlists/PlayHeaderInfo.js b/src/common/playlists/PlayHeaderInfo.js
@@ -51,6 +51,7 @@ const Author = ({github}) => {
  by <a 
  href={`https://github.com/${github}`}
  target="_blank"
+ className="play-anchor"
  rel="noopener noreferrer">
  <strong>{data.name}</strong>
  </a>
@@ -77,15 +78,13 @@ const Tags = ({tags}) => {
 const PlayHeaderInfo = ({ play }) => {
 
  return (
- <div>
- <div className="header-wrapper">
+ <div className="header-leftcol">
+ <div className="header-primary">
  <h3 className="header-title">{play.name}</h3>
- <LevelBadge level={play.level} />
+ <LevelBadge level={play.level} /> { play.tags && <Tags tags={play.tags.split(', ')} /> }
  </div>
- <div>{play.description}</div>
  <div className="header-secondary">
  { play.github && <Author github={play.github} /> }
- { play.tags && <Tags tags={play.tags.split(', ')} /> }
  </div>
  </div>
  );

diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css
@@ -193,7 +193,43 @@
  -moz-box-shadow: 0px 4px 10px 0px rgba(var(--color-neutral-90-rgb),0.12);
 }
 
-.play-details .play-details-header .header-wrapper {
+@media screen and (max-width: 480px) {
+ .play-details .play-details-header {
+ flex-direction: column;
+ }
+}
+
+.play-details .play-details-header .header-leftcol {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ grid-gap: .1rem;
+}
+
+@media screen and (max-width: 480px) {
+ .play-details .play-details-header .header-leftcol {
+ grid-gap: .3rem;
+ }
+}
+
+.play-details .play-details-header .header-rightcol {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ grid-gap: .5rem;
+ padding-top: 0.4rem;
+}
+
+@media screen and (max-width: 480px) {
+ .play-details .play-details-header .header-rightcol {
+ align-items: flex-start;
+ border-top: solid 1px var(--color-neutral-30);
+ margin-top: 0.4rem;
+ padding-top: 0.4rem;
+ }
+}
+
+.play-details .play-details-header .header-primary {
  display: flex;
  flex-direction: row;
  align-items: center;
@@ -220,35 +256,47 @@
  background-color: rgba(var(--color-play-level-1),0.12);
  color: rgba(var(--color-play-level-1), 1);
 }
-.play-level.play-level-1:hover,
+/* .play-level.play-level-1:hover,
 .play-level.play-level-1:focus {
  background-color: rgba(var(--color-play-level-1),1);
  color: var(--color-neutral-10);
-}
+} */
 
 .play-level.play-level-2 {
  color: rgba(var(--color-play-level-2), 1);
  background-color: rgba(var(--color-play-level-2),0.12);
 }
-.play-level.play-level-2:hover,
+/* .play-level.play-level-2:hover,
 .play-level.play-level-2:focus {
  background-color: rgba(var(--color-play-level-2),1);
  color: var(--color-neutral-10);
-}
+} */
 
 .play-level.play-level-3 {
  color: rgba(var(--color-play-level-3), 1);
  background-color: rgba(var(--color-play-level-3),0.12);
 }
-.play-level.play-level-3:hover,
+/* .play-level.play-level-3:hover,
 .play-level.play-level-3:focus {
  background-color: rgba(var(--color-play-level-3),1);
  color: var(--color-neutral-10);
-}
+} */
 
 .play-details .play-details-header .header-secondary .header-author {
  font-size: var(--fs-sm);
 }
+
+.play-details .play-details-header .header-secondary .header-author a {
+ color: var(--color-neutral-90);
+ text-decoration: none;
+}
+
+.play-details .play-details-header .header-secondary .header-author a:hover,
+.play-details .play-details-header .header-secondary .header-author a:focus {
+ color: var(--color-neutral-100);
+ border-bottom: solid 2px var(--color-brand-primary);
+}
+
 .play-details .play-details-header .header-secondary {
  display: flex;
  flex-direction: row;
@@ -278,17 +326,23 @@
  transition: all 0.12s ease-in-out;
 }
 
-.play-tag:hover,
+/* .play-tag:hover,
 .play-tag:focus {
  background-color: var(--color-neutral-70);
  color: var(--color-neutral-10);
-}
+} */
 
 .play-details .play-details-header .header-title {
  margin: 0;
  font-size: var(--fs-md);
 }
 
+.play-details .play-details-header .header-desc {
+ margin: 0;
+ font-size: var(--fs-xs);
+ color: var(--color-neutral-60);
+}
+
 .play-details .play-details-header .header-actions {
  display: flex;
  flex-direction: row;