(proto): Pro home

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

@@ -17,7 +17,8 @@ m-pro--channel {
  display: grid;
  grid-template-rows: repeat(2, 100px) 1fr 100px;
  grid-template-columns: repeat(12, 1fr);
- min-height: calc(100vh - 52px); /* 52px is the topbar height */
+ //min-height: calc(100vh - 52px); /* 52px is the topbar height */
+ min-height: 100%;
 
  .m-proChannel__topbar {
  grid-row: 1 / span 1;

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

 <div class="m-pro--channel-home">
+ <h1 class="m-pro--channel-home--title">{{ settings.title }}</h1>
+
+ <h2 class="m-pro--channel-home--headline">{{ settings.headline }}</h2>
+
  <div class="m-pro--channel-home--featured-content">
  <m-pro--channel-tile
  *ngFor="let entity of featuredContent"

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

 .m-pro--channel-home {
+ .m-pro--channel-home--title {
+ margin: 0 0 16px;
+ text-align: center;
+ font-weight: 700;
+ font-size: 60px;
+ letter-spacing: 1px;
+ }
+
+ .m-pro--channel-home--headline {
+ margin: 0 0 56px;
+ text-align: center;
+ font-weight: 300;
+ font-size: 46px;
+ }
+
  .m-pro--channel-home--featured-content {
+ width: 80%;
+ margin: 0 auto;
  display: grid;
  grid-gap: 24px;
  grid-template-columns: repeat(2, 1fr);

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

@@ -29,6 +29,10 @@ export class ProChannelHomeComponent implements OnInit {
 
  }
 
+ get settings() {
+ return this.channelService.currentChannel && this.channelService.currentChannel.pro_settings;
+ }
+
  detectChanges() {
  this.cd.markForCheck();
  this.cd.detectChanges();