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

@@ -23,6 +23,8 @@
  <ng-template #authLink>
  <a [routerLink]="['/pro', channel.username, 'signup']" routerLinkActive="active">Signup / Login</a>
  </ng-template>
+
+ <m-pro-user-menu></m-pro-user-menu>
  </div>
 
  <div class="m-proChannel__body">

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

@@ -26,6 +26,9 @@
  See more
  </li>
  </ul>
+ <ng-container *ngIf="(feedsService.feed | async) && (feedsService.feed | async).length">
+ <div class="m-proChannelListContent__noContent" i18n>There's nothing to show</div>
+ </ng-container>
  <ng-container *ngIf="type === 'activities'">
  <pre *ngFor="let entity of (feedsService.feed | async)">{{entity | async | json}}</pre>
  <!-- talk to Emi about this -->

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

@@ -17,6 +17,17 @@ m-pro--channel-list {
  margin-top: 100px;
  height: fit-content;
  }
+
+ }
+
+ .m-proChannelListContent__noContent {
+ max-width: 200px;
+ border-radius: 4px;
+ font-size: 14px;
+ font-weight: 600;
+ padding: 8px;
+ color: #90a4ae!important;
+ background-color: #eceff1!important;
  }
 
  ul.m-proChannelListContent__list {

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.html

+<div class="m-pro-user-menu m-dropdown">
+ <a class="m-pro-user-menu__Anchor" (click)="toggleMenu()"><i class="material-icons">menu</i></a>
+
+ <ul class="m-dropdown__list m-pro-user-menu__Dropdown mdl-shadow--3dp" [hidden]="!isOpen">
+ <li
+ class="m-dropdownList__item m-pro-user-menuDropdown__Item"
+ (click)="closeMenu()"
+ >
+ <a [routerLink]="['/', getCurrentUser()?.username]">
+ <i class="material-icons">remove_red_eye</i>
+ <span i18n>View on Minds</span>
+ </a>
+ </li>
+ <li
+ class="m-dropdownList__item m-user-menuDropdown__Item"
+ *ngIf="getCurrentUser()"
+ (click)="closeMenu()"
+ >
+ <a routerLink="/logout">
+ <i class="material-icons">exit_to_app</i>
+ <span i18n>Logout</span>
+ </a>
+ </li>
+ </ul>
+</div>
+
+<div class="minds-bg-overlay" (click)="closeMenu()" [hidden]="!isOpen"></div>
\ No newline at end of file

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.scss

+m-pro-user-menu {
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+}
+
+.m-pro-user-menu__Dropdown {
+ list-style: none;
+ margin: 34px 0 0;
+ @include m-theme(){
+ background-color: themed('m-white');
+ color: themed('m-grey-700');
+ }
+
+ li:hover {
+ @include m-theme(){
+ background-color: rgba(themed('m-grey-50'), 0.5);
+ }
+ }
+
+ a {
+ font-size: 14px!important;
+ padding: 0px!important;
+ color: #555!important;
+ 
+ }
+
+ i {
+ color: #555!important;
+ }
+
+}

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.ts

+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from "@angular/core";
+import { Session } from "../../../../services/session";
+import { ThemeService } from "../../../../common/services/theme.service";
+
+@Component({
+ selector: 'm-pro-user-menu',
+ templateUrl: 'pro-user-menu.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProUserMenuComponent implements OnInit {
+ isOpen: boolean = false;
+ 
+ constructor(protected session: Session, protected cd: ChangeDetectorRef, private themeService: ThemeService) {
+ }
+
+ getCurrentUser() {
+ return this.session.getLoggedInUser();
+ }
+
+ ngOnInit() {
+ this.session.isLoggedIn(() => this.detectChanges());
+ }
+
+ toggleMenu() {
+ this.isOpen = !this.isOpen;
+ }
+
+ closeMenu() {
+ this.isOpen = false;
+ }
+
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ this.themeService.applyThemePreference();
+ }
+
+}

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

+@import "defaults";
 m-pro--channel-signup {
  display: flex;
  align-items: center;
- justify-content: center;
+ justify-content: flex-end;
 }
+
+.m-ProChannelSignup--hero{
+ position:relative;
+
+ //background-image: url(/assets/photos/circles.png);
+ background-image: url("<%= APP_CDN %>/assets/videos/what-1/what-1.jpg");
+ background-size: cover;
+ background-position: center center;
+
+ .m-ProChannelSignup--hero--inner {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 100px 52px;
+ margin: auto;
+ max-width: 1280px;
+
+ @media screen and (max-width: 1000px){
+ padding: 120px 16px;
+ flex-wrap: wrap;
+ }
+ @media screen and (max-width: $max-mobile) {
+ padding: 62px 0px;
+ }
+
+ .m-ProChannelSignup--app-buttons {
+ display: flex;
+ justify-content: flex-start;
+ * {
+ margin-left: 2px;
+ }
+ .m-ProChannelSignup--app-buttons__iosBanner {
+ > a > img {
+ height: 48px;
+
+ @media screen and (max-width: 480px) {
+ height: 32px;
+ }
+ }
+ }
+
+ @media screen and (max-width: 480px) {
+ .m-androidApp__download {
+ zoom: 0.65;
+ }
+ }
+ }
+ }
+
+ .m-ProChannelSignup--hero--video {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+
+ video {
+ position: absolute;
+ bottom: 0;
+ min-width: 100%;
+ min-height: 100%;
+ }
+ }
+
+ .m-ProChannelSignup--hero--overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ @include m-theme(){
+ background-color: rgba(themed($m-black),0.4);
+ }
+ }
+
+ .m-ProChannelSignup--hero--slogans{
+ flex: 2;
+ h1, h3, h4 {
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ margin: 0;
+ @include m-theme(){
+ color: themed($m-white);
+ }
+ }
+
+ h1 {
+ font-size: 80px;
+ font-weight: 600;
+ letter-spacing: 1.25px;
+ line-height: 1;
+ //color: rgba(255,255,255,0.85);
+ //color: rgba(0,0,0,0.85);
+
+ @media screen and (max-width: 720px){
+ font-size: 42px;
+ }
+ }
+
+ h3 {
+ font-size: 26px;
+ //color: rgba(255, 255, 255, 0.8);
+ font-weight: 400;
+ letter-spacing: 0.25px;
+ line-height: 1.25;
+ margin-top: 16px;
+ padding-right: 70px;
+
+ @media screen and (max-width: 720px){
+ padding-right: 8px;
+ font-size: 16px;
+ }
+ }
+ z-index: 2;
+ }
+
+ .m-ProChannelSignup--signup{
+ flex: 1;
+ margin-left: 16px;
+
+ @media screen and (max-width: 1000px){
+ flex-basis: 100%;
+ margin-left: 0;
+ }
+ minds-form-register{
+ .mdl-card{
+ background:transparent;
+ padding:0;
+ }
+ .mdl-card__title{
+ //color: #FFF !important;
+ display:none;
+ }
+ .m-login-box input{
+ border:0;
+ border-radius:3px;
+ font-weight: 600;
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+ font-family: 'Roboto', Helvetica, sans-serif;
+ letter-spacing: 1px;
+ //box-shadow: 0 0 6px rgba(255,255,255,0.22);
+ @include m-theme(){
+ background:rgba(themed($m-white),0.9);
+ color:themed($m-grey-800);
+ border:1px solid rgba(themed($m-white),0.25);
+ }
+ &::placeholder{
+ @include m-theme(){
+ color: themed($m-grey-800);
+ }
+ }
+ }
+ .m-login-box .mdl-checkbox__box-outline {
+ @include m-theme(){
+ border-color: themed($m-white);
+ }
+ }
+ .m-btn--action {
+ margin-right: 16px;
+ @include m-theme(){
+ color: themed($m-white) !important;
+ border: 1px solid themed($m-white);
+ }
+ }
+ .mdl-card__actions{
+ flex-direction:row-reverse;
+ padding-left: 8px;
+
+ .m-register-tac{
+ padding-right:16px;
+ font-family: 'Roboto', Helvetica, sans-serif;
+ @include m-theme(){
+ color: rgba(themed($m-white),0.8);
+ }
+ a {
+ @include m-theme(){
+ color: themed($m-white);
+ }
+ }
+ }
+ }
+ .password-help {
+ padding: 12px;
+ border-radius: 4px;
+ font-weight: 300;
+ @include m-theme(){
+ color: themed($m-white);
+ background-color: themed($m-black);
+ }
+ }
+ .m-register-btn {
+ font-family: 'Roboto', Helvetica, sans-serif;
+ letter-spacing: 1.25px;
+ background: transparent;
+ font-size: 12px;
+ box-shadow: none !important;
+ @include m-theme(){
+ border: 1px solid themed($m-grey-50);
+ }
+ }
+ }
+ z-index: 2;
+ }
+
+ @media (max-width: $max-mobile){
+ .m-ProChannelSignup--grid{
+ .m-ProChannelSignup--titles{
+ h1{
+ font-size: 32px;
+ line-height:32px;
+ //font-weight: 200;
+ //margin:16px;
+ padding:0;
+ padding:0 $minds-padding*2;
+ }
+ h3{
+ font-size:16px;
+ //font-weight: 200;
+ line-height:16px;
+ padding:16px 16px 0;
+ }
+ }
+ }
+ .m-ProChannelSignup--titles {
+ //display:none;
+ }
+ .m-app-links {
+ //max-width:60%;
+ margin:$minds-margin;
+ a{
+ flex:auto;
+ }
+ }
+ }
+
+}
\ No newline at end of file

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

@@ -6,15 +6,24 @@ import { Session } from "../../../../services/session";
 @Component({
  selector: 'm-pro--channel-signup',
  template: `
- <div class="m-ProChannelSignup__Text">
- <!-- TODO: this text should be dynamic -->
- <h2>Independent.</h2>
- <h2>Community-owned.</h2>
- <h2>Decentralized News</h2>
- </div>
- <div class="m-ProChannelSignup__SignupForm">
- <minds-form-register (done)="registered()"></minds-form-register>
- </div>
+ <section class="m-ProChannelSignup--hero">
+
+ <div class="m-ProChannelSignup--hero--inner">
+
+ <div class="m-ProChannelSignup--hero--slogans">
+ <!-- TODO: this text should be dynamic -->
+ <h1>Independent.</h1>
+ <h1>Community-owned.</h1>
+ <h1>Decentralized News</h1>
+ </div>
+
+ <div class="m-ProChannelSignup--signup">
+ <minds-form-register (done)="registered()"></minds-form-register>
+ </div>
+
+ </div>
+ 
+ </section>
  `
 })
 

src/app/modules/pro/pro.module.ts

@@ -14,6 +14,7 @@ import { ProChannelDonateComponent } from './channel/donate/donate.component';
 import { ProTileComponent } from "./channel/tile/tile.component";
 import { NewsfeedModule } from "../newsfeed/newsfeed.module";
 import { ProSettingsComponent } from './settings/settings.component';
+import { ProUserMenuComponent } from "./channel/pro-user-menu/pro-user-menu.component";
 
 const routes: Routes = [
  {
@@ -76,6 +77,7 @@ const routes: Routes = [
  ProChannelSignupComponent,
  ProChannelListComponent,
  ProChannelDonateComponent,
+ ProUserMenuComponent
  ],
  exports: [],
  entryComponents: [