(wip): Pro channel

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

 <div
  *ngIf="channel"
  class="m-pro--channel"
- [ngStyle]="{ 'background-image': 'url(' + channel.pro_settings.background_image + ')' }"
 >
  <div class="m-proChannel__topbar">
  <img
@@ -14,10 +13,16 @@
  <a [routerLink]="['/pro', channel.username, 'videos']" routerLinkActive="active" i18n>Videos</a>
  <a [routerLink]="['/pro', channel.username, 'images']" routerLinkActive="active" i18n>Images</a>
  <a [routerLink]="['/pro', channel.username, 'articles']" routerLinkActive="active" i18n>Articles</a>
-<!-- <a [routerLink]="['/pro', channel.username, 'groups']" routerLinkActive="active" i18n>Groups</a>-->
+ <a [routerLink]="['/pro', channel.username, 'groups']" routerLinkActive="active" i18n>Groups</a>
  <a [routerLink]="['/pro', channel.username, 'feed']" routerLinkActive="active" i18n>Feed</a>
-<!-- <a [routerLink]="['/pro', username, 'donate']" routerLinkActive="active">Donate</a>-->
-<!-- <a [routerLink]="['/pro', username, 'signup']" routerLinkActive="active">Signup | Login</a>-->
+ <a [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
+
+ <ng-container *ngIf="currentUser; else authLink">
+ <minds-avatar [object]="currentUser" [editMode]="false"></minds-avatar>
+ </ng-container>
+ <ng-template #authLink>
+ <a [routerLink]="['/pro', channel.username, 'signup']" routerLinkActive="active">Signup / Login</a>
+ </ng-template>
  </div>
 
  <div class="m-proChannel__body">

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

+m-pro--channel {
+ display: block;
+ background: none no-repeat center fixed;
+ background-size: cover;
+}
+
 .m-pro--channel {
+ max-width: 1296px;
+ margin: 0 auto;
  display: grid;
  grid-template-rows: repeat(2, 100px) 1fr;
  grid-template-columns: repeat(12, 1fr);
- background: none no-repeat fixed;
- background-size: cover;
  min-height: 100%;
 
  .m-proChannel__topbar {
@@ -12,8 +18,9 @@
 
  display: flex;
  align-items: center;
+ justify-content: space-between;
 
- padding-left: $minds-padding * 4;
+ padding-left: 32px;
 
  .m-proChannelTopbar__logo {
  max-height: 100%;
@@ -26,14 +33,14 @@
 
  a {
  text-decoration: none;
- padding: $minds-padding * 2;
- font-size: 24px;
+ padding: 16px;
+ font-size: 18px;
  }
 
  .m-proChannel__body {
  grid-row: 3 / span 1;
  grid-column: 1 / span 12;
- padding: 0 $minds-padding * 4;
+ padding: 0 32px;
  }
 
  m-pro--channel h1 {
@@ -41,6 +48,15 @@
  font-weight: bold;
  }
 
+ .minds-avatar {
+ margin: 0;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background-position: center;
+ background-size: cover;
+ }
+
  // colors
  a.active, a:hover {
  color: #4690D6 !important;

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

-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from "@angular/router";
 import { Session } from "../../../services/session";
 import { Subscription } from "rxjs";
@@ -43,11 +43,6 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  this.username = params['username'];
  }
 
- // if (!this.session.isLoggedIn()) {
- // this.router.navigate(['/pro', this.username, 'signup']);
- // return;
- // }
-
  if (this.username && (!this.channel || this.channel.username != this.username)) {
  this.load();
  }
@@ -87,4 +82,20 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  this.cd.markForCheck();
  this.cd.detectChanges();
  }
+
+ @HostBinding('style.backgroundImage') get backgroundImageCssValue() {
+ if (!this.channel) {
+ return 'none';
+ }
+
+ return `url(${this.channel.pro_settings.background_image})`;
+ }
+
+ get currentUser() {
+ if (!this.session.isLoggedIn()) {
+ return null;
+ }
+
+ return this.session.getLoggedInUser();
+ }
 }

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

@@ -36,6 +36,15 @@
 <!--</div>-->
 <!--&lt;!&ndash; TODO: add infinite scroll or something to load more &ndash;&gt;-->
 
+<h1 [ngSwitch]="type">
+ <ng-template ngSwitchCase="videos" i18n>Videos</ng-template>
+ <ng-template ngSwitchCase="images" i18n>Images</ng-template>
+ <ng-template ngSwitchCase="blogs" i18n>Articles</ng-template>
+ <ng-template ngSwitchCase="groups" i18n>Groups</ng-template>
+ <ng-template ngSwitchCase="activities" i18n>Feed</ng-template>
+ <ng-template ngSwitchDefault>{{ type | titlecase }}</ng-template>
+</h1>
+
 <div class="m-proChannelList__content">
  <ng-container *ngIf="type === 'images' || type === 'videos' || type === 'blogs'">
  <ul class="m-proChannelListContent__list">

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

 m-pro--channel-list {
  h1 {
- font-size: 90px;
- font-weight: bold;
+ font-size: 72px;
+ font-weight: 600;
+ margin: 0 0 0.4em;
  }
 
  .m-proChannelList__content {
+ width: 85%;
+ margin: 0 auto;
  display: flex;
  //align-items: center;
  justify-content: center;

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

@@ -10,6 +10,7 @@ import { ProService } from "../../pro.service";
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProChannelListComponent implements OnInit {
+
  type: string;
 
  params$: Subscription;