(refactor): Bigger tiles

src/app/modules/pro/channel/home/home.component.scss

@@ -45,30 +45,23 @@
  }
 
  .m-pro--channel-home--featured-content {
- grid-template-columns: repeat(4, 1fr);
+ grid-template-columns: repeat(2, 1fr);
 
  *:nth-child(1) {
- grid-column: span 4;
- }
-
- *:nth-child(2),
- *:nth-child(3) {
  grid-column: span 2;
  }
 
  @media screen and (max-width: $max-mobile) {
  grid-template-columns: repeat(1, 1fr);
 
- *:nth-child(1),
- *:nth-child(2),
- *:nth-child(3) {
+ *:nth-child(1) {
  grid-column: initial;
  }
  }
  }
 
  .m-pro--channel-home--category-content {
- grid-template-columns: repeat(4, 1fr);
+ grid-template-columns: repeat(2, 1fr);
 
  @media screen and (max-width: $max-mobile) {
  grid-template-columns: repeat(1, 1fr);

src/app/modules/pro/channel/home/home.component.ts

@@ -35,7 +35,7 @@ export class ProChannelHomeComponent implements OnInit {
  }
 
  async load() {
- const MAX_FEATURED_CONTENT = 19; // 1 + 2 + (4 * 4)
+ const MAX_FEATURED_CONTENT = 17; // 1 + (8 * 2)
 
  this.inProgress = true;
  this.featuredContent = [];

src/app/modules/pro/channel/list-modal/list-modal.component.scss

@@ -5,7 +5,7 @@
 .m-pro--channel-list-modal--grid {
  display: grid;
  grid-gap: 16px;
- grid-template-columns: repeat(3, 1fr);
+ grid-template-columns: repeat(2, 1fr);
 
  &.m-pro--channel-list-modal--activities-grid {
  grid-template-columns: repeat(1, 1fr);

src/app/modules/pro/channel/list/list.component.scss

@@ -81,6 +81,8 @@ m-pro--channel-list {
 
  cursor: pointer;
 
+ min-height: 220px;
+
  > span {
  display: block;
  width: 100%;
@@ -89,9 +91,8 @@ m-pro--channel-list {
 
  ul.m-proChannelListContent__list {
  display: grid;
- grid-template-columns: repeat(4, 1fr);
- grid-auto-rows: minmax(220px, auto);
- grid-gap: 32px 32px;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 24px;
  list-style: none;
  padding: 0;
 
@@ -112,33 +113,7 @@ m-pro--channel-list {
  }
  }
 
- &:not(.m-proChannelListContent__normalList) {
- & > li:nth-child(1), li:nth-child(2) {
- & > video {
- max-width: 500px;
- //max-height: 250px;
- }
- }
-
- & > li:nth-child(1) {
- grid-column: span 2;
- justify-content: flex-start;
- }
-
- & > li:nth-child(2) {
- grid-column: 3 / span 2;
-
- &:not(.m-proChannelListContentList__seeMore) {
- justify-content: flex-end;
- }
- }
- }
-
  & > li {
- grid-column: span 1;
-
- //border: 1px solid blue;
-
  display: flex;
  justify-content: center;
  align-items: center;
@@ -176,29 +151,4 @@ m-pro--channel-list {
  text-align: center;
  margin: 16px 0;
  }
-
- @media screen and (min-width: 1px) and (max-width: $min-desktop) {
- .m-proChannelList__content {
- margin: 0;
- width: 100%;
- }
-
- ul.m-proChannelListContent__list {
- grid-template-columns: 1fr;
-
- & > li {
- &:not(.m-proChannelListContent__normalList):nth-child(1), &:not(.m-proChannelListContent__normalList):nth-child(2) {
- margin-bottom: 0;
- justify-content: center;
- grid-column: span 1;
-
- & > video {
- //max-height: 150px;
- width: 300px;
- }
- }
- }
-
- }
- }
 }

src/app/modules/pro/channel/tiles/media/tile.component.scss

-ul.m-proChannelListContent__list li:nth-child(n+3) m-pro--channel-tile {
- height: 220px!important;
-
- & > img {
- height: 100%!important;
- }
-}
-
 m-pro--channel-tile {
  cursor: pointer;
  position: relative;