src/app/modules/pro/channel/categories/categories.component.html

+<div
+ class="m-proChannel__category"
+ [class.m-proChannel__selectedCategory]="!!tag.selected"
+ (click)="selectTag(tag)"
+ *ngFor="let tag of tags"
+>
+ {{tag.label}}
+</div>

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

@@ -5,28 +5,17 @@ import { MindsUser, Tag } from "../../../../interfaces/entities";
 
 @Component({
  selector: 'm-pro--channel--categories',
- template: `
- <div
- class="m-proChannel__category"
- [class.m-proChannel__selectedCategory]="!!tag.selected"
- (click)="selectTag(tag)"
- *ngFor="let tag of channel.pro_settings.tag_list"
- >
- {{tag.label}}
- </div>
- `,
+ templateUrl: 'categories.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 
 export class ProCategoriesComponent {
-
- @Input() type: string;
- @Input() params: any = {};
-
  @Input() set selectedHashtag(value: string) {
  this.selectTag(value, false);
  }
 
+ @Input() showAllTag: boolean = true;
+
  @Output() onSelectTag: EventEmitter<string | null> = new EventEmitter<string|null>();
 
  get channel(): MindsUser {
@@ -55,6 +44,16 @@ export class ProCategoriesComponent {
  }
  }
 
+ get tags() {
+ const tags = this.channel.pro_settings.tag_list.concat([]);
+
+ if (this.showAllTag) {
+ tags.unshift({ label: 'All', tag: 'all', selected: false });
+ }
+
+ return tags;
+ }
+
  detectChanges() {
  this.cd.markForCheck();
  this.cd.detectChanges();

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

@@ -54,6 +54,9 @@ m-pro--channel {
  min-height: 100%;
 
  .m-proChannel__topbar {
+ width: 100%;
+ box-sizing: border-box;
+
  grid-row: 1 / span 1;
  grid-column: 1 / span 12;
 
@@ -177,19 +180,20 @@ m-pro--channel {
  padding: 12px 16px;
  font-family: 'Roboto', Helvetica, sans-serif;
  cursor: pointer;
- border: none;
  border-radius: 4px;
  margin-left: 16px;
- color: var(--m-pro--plain-background-color);
- background-color: var(--m-pro--primary-color);
+ background: none transparent;
+ color: var(--m-pro--primary-color);
+ border: 1px solid var(--m-pro--primary-color);
+ font-weight: 600;
 
  &.m-proChannelTopbar__subscribe--subscribed {
+ border: none;
  color: var(--m-pro--text-color);
- background-color: var(--m-pro--plain-background-color);
  }
 
  .m-proChannelTopbar__subscribe--label {
- opacity: 0.65;
+ opacity: 0.85;
  }
 
  .m-proChannelTopbar__subscribe--counter {

src/app/modules/pro/channel/channel.service.ts

@@ -50,8 +50,6 @@ export class ProChannelService {
  this.currentChannel.pro_settings.tag_list = [];
  }
 
- this.currentChannel.pro_settings.tag_list.unshift({ tag: 'all', label: 'All', selected: false });
-
  this.featuredContent = null;
 
  return this.currentChannel;

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

 <div class="m-pro--channel-home">
+ <m-pro--channel--categories
+ [showAllTag]="false"
+ [selectedHashtag]="''"
+ (onSelectTag)="navigateToCategory($event)"
+ ></m-pro--channel--categories>
 
  <div class="m-pro--channel-home--section" *ngIf="featuredContent?.length">
  <div class="m-pro--channel-home--featured-content">

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

 .m-pro--channel-home {
- margin-top: 72px;
+ m-pro--channel--categories {
+ margin: 16px 0 32px;
+ }
 
  .m-pro--channel-home--section {
- margin-top: 72px;
+ margin-bottom: 72px;
 
- &:first-child {
- margin-top: 0;
+ &:last-child {
+ margin-bottom: 0;
  }
 
  > h2 {
@@ -43,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

 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
 import { ProChannelService } from '../channel.service';
 import { OverlayModalService } from '../../../../services/ux/overlay-modal';
-import { Observable } from 'rxjs';
 
 @Component({
  selector: 'm-pro--channel-home',
@@ -22,6 +23,7 @@ export class ProChannelHomeComponent implements OnInit {
  moreData: boolean = true;
 
  constructor(
+ protected router: Router,
  protected channelService: ProChannelService,
  protected modalService: OverlayModalService,
  protected cd: ChangeDetectorRef,
@@ -33,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 = [];
@@ -74,6 +76,10 @@ export class ProChannelHomeComponent implements OnInit {
  return this.channelService.open(entity, this.modalService);
  }
 
+ navigateToCategory(tag) {
+ this.router.navigate(this.channelService.getRouterLink('all', { hashtag: tag }));
+ }
+
  get settings() {
  return this.channelService.currentChannel && this.channelService.currentChannel.pro_settings;
  }

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.html

 <m-pro--channel--categories
- [type]="paramsType"
  [selectedHashtag]="selectedHashtag"
  (onSelectTag)="selectHashtag($event)"
  [style.visibility]="shouldShowCategories ? 'visible' : 'hidden'"

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;