Merge pull request reactplay#34 from atapas/31-bug-report-play-detail…

…s-mashtead-wrapping-issues Play details masthead element wrapping issue
SardiusJay · Apr 17, 2022 · ec10280 · ec10280
2 parents 7d0247b + 80e840f
commit ec10280
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 23 deletions.
diff --git a/src/common/playlists/PlayHeaderInfo.jsx b/src/common/playlists/PlayHeaderInfo.jsx
@@ -80,16 +80,22 @@ const PlayHeaderInfo = ({ play }) => {
 
  return (
  <div className="header-leftcol">
- <div className="header-primary">
+ <div className="header-leftcol-action">
  <Link to="/plays" className="action">
  <IoMdArrowBack className="icon" size="24px" />
  <span className="sr-only">Back</span>
  </Link>
- <h3 className="header-title">{play.name}</h3>
- <LevelBadge level={play.level} /> { play.tags && <Tags tags={play.tags.split(',')} /> }
  </div>
- <div className="header-secondary">
- { play.github && <Author github={play.github} /> }
+ <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} /> { play.tags && <Tags tags={play.tags.split(',')} /> }
+ </div>
+ </div>
+ <div className="header-secondary">
+ { play.github && <Author github={play.github} /> }
+ </div>
  </div>
  </div>
  );

diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css
@@ -204,6 +204,44 @@
 }
 
 .play-details .play-details-header .header-leftcol {
+ display: flex;
+ flex-direction: row;
+}
+
+.play-details .play-details-header .header-leftcol-action {
+ padding-top: .3rem;
+ padding-right: .3rem;
+}
+
+.play-details .play-details-header .header-leftcol-action .action {
+ display: block;
+}
+
+.play-details .play-details-header .header-leftcol-action .action .icon {
+ fill: rgba(var(--color-neutral-90-rgb), 0.4);
+}
+
+.play-details .play-details-header .header-leftcol-action .action:hover .icon,
+.play-details .play-details-header .header-leftcol-action .action:focus .icon {
+ fill: rgba(var(--color-neutral-90-rgb), 0.8);
+}
+
+@media screen and (max-width: 1172px) {
+ .play-details .play-details-header .header-leftcol-action {
+ padding-top: .16rem;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .play-details .play-details-header .header-leftcol-action {
+ padding-top: .06rem;
+ }
+ .play-details .play-details-header .header-leftcol-action svg {
+ width: 20px;
+ }
+}
+
+.play-details .play-details-header .header-leftcol-contents {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
@@ -214,6 +252,10 @@
  .play-details .play-details-header .header-leftcol {
  grid-gap: .3rem;
  }
+
+ .play-details .play-details-header .header-leftcol-action {
+ padding-top: .1rem;
+ }
 }
 
 .play-details .play-details-header .header-rightcol {
@@ -224,35 +266,33 @@
  padding-top: 0.4rem;
 }
 
+.play-details .play-details-header .header-primary {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ grid-gap: .2rem .6rem;
+ flex-wrap: wrap;
+}
+
 @media screen and (max-width: 480px) {
  .play-details .play-details-header .header-rightcol {
+ flex-direction: row-reverse;
  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;
- grid-gap: .2rem .6rem;
- flex-wrap: wrap;
+ .play-details .play-details-header .header-rightcol .header-desc {
+ text-align: left;
+ margin-right: 1rem;
+ line-height: var(--lh-rg);
+ }
 }
 
-.play-details .play-details-header .header-primary .action {
- margin-top: 0.4rem;
-}
 
-.play-details .play-details-header .header-primary .action .icon {
- fill: rgba(var(--color-neutral-90-rgb), 0.4);
-}
 
-.play-details .play-details-header .header-primary .action:hover .icon,
-.play-details .play-details-header .header-primary .action:focus .icon {
- fill: rgba(var(--color-neutral-90-rgb), 0.8);
-}
+
 
 .play-level {
  display: inline-flex;
@@ -322,7 +362,12 @@
  flex-wrap: wrap;
  grid-gap: .2rem .6rem;
  align-items: center;
- margin-left: calc(24px + .8rem);
+}
+
+@media screen and (max-width: 768px) {
+ .play-details .play-details-header .header-secondary {
+ margin-top: .3rem;
+ }
 }
 
 .play-details .play-details-header .list-tags {
@@ -363,6 +408,21 @@
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-neutral-60);
+ text-align: right;
+}
+
+.play-details .play-details-header .header-title-tags {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: center;
+ grid-gap: .6rem;
+}
+
+@media screen and (max-width:768px) {
+ .play-details .play-details-header .header-title-tags {
+ grid-gap: .3rem;
+ }
 }
 
 .play-details .play-details-header .header-actions {