src/app/interfaces/entities.ts

@@ -81,11 +81,13 @@ export interface MindsUser {
  background_image: string,
  title: string,
  headline: string,
+ one_line_headline: string;
  footer_text: string,
  footer_links: { href: string, title: string }[],
  scheme: string,
- styles?: { [key: string]: string },
- featured_content?: Array<string>,
+ featured_content ?: Array<string>,
+ tile_ratio ?: string;
+ styles ?: { [key: string]: string },
  };
 }
 

src/app/modules/auth/login.component.html

@@ -6,7 +6,7 @@
  </div>
 
  <div>
- <h3 i18n="@@M__COMMON__START_A_CHANNEL">Not on Minds? Start a channel</h3>
+ <h3 i18n="@@M__COMMON__START_A_CHANNEL_MINDS_REF">Not on Minds? Start a Minds channel</h3>
  <minds-form-register [referrer]="referrer" (done)="registered()"></minds-form-register>
  </div>
 </div>

src/app/modules/forms/login/login.html

@@ -93,7 +93,7 @@
 <!-- END: LOGIN -->
 
 <!-- START: TWOFACTOR -->
-<div class="mdl-card mdl-shadow--2dp minds-login-box" [hidden]="!twofactorToken">
+<div class="mdl-card mdl-shadow--2dp minds-login-box" *ngIf="twofactorToken">
  <div class="mdl-card__title">
  <h2 class="mdl-card__title-text" i18n="@@FORMS__LOGIN__2FA_LOGIN_TITLE">Twofactor Login</h2>
  </div>

src/app/modules/forms/login/login.scss

@@ -4,6 +4,10 @@
  margin-top:$minds-margin*2;
  width:100% !important;
 
+ &:last-child {
+ margin-bottom: 0;
+ }
+
  h3{
  margin:0;
  font-size:24px;

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

@@ -150,8 +150,8 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
  break;
  }
 
- if (this.channel.pro_settings.headline) {
- title.push(this.channel.pro_settings.headline);
+ if (this.channel.pro_settings.one_line_headline) {
+ title.push(this.channel.pro_settings.one_line_headline);
  }
 
  this.title.setTitle(title.join(' - '));

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

-@import "defaults";
-
 m-pro--channel-login {
  display: flex;
  align-items: center;
@@ -12,6 +10,7 @@ m-pro--channel-login {
 
 .m-ProChannelLogin--hero {
  position: relative;
+ width: 100%;
 
  .m-ProChannelLogin--hero--inner {
  display: flex;
@@ -84,7 +83,8 @@ m-pro--channel-login {
  }
 
  .m-ProChannelLogin--hero--slogans {
- flex: 2;
+ flex-grow: 1;
+ z-index: 2;
 
  h1, h3, h4 {
  text-rendering: optimizeLegibility;
@@ -100,17 +100,19 @@ m-pro--channel-login {
  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;
  }
  }
 
+ h2 {
+ margin: 0;
+ white-space: pre-wrap;
+ }
+
  h3 {
  font-size: 26px;
- //color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  letter-spacing: 0.25px;
  line-height: 1.25;
@@ -122,13 +124,12 @@ m-pro--channel-login {
  font-size: 16px;
  }
  }
-
- z-index: 2;
  }
 
  .m-ProChannelLogin--login {
  flex: 1;
  margin-left: 16px;
+ z-index: 2;
 
  @media screen and (max-width: 1000px) {
  flex-basis: 100%;
@@ -225,9 +226,11 @@ m-pro--channel-login {
  border: 1px solid themed($m-grey-50);
  }
  }
- }
 
- z-index: 2;
+ .mdl-card__actions:last-child {
+ padding-bottom: 0;
+ }
+ }
  }
 
  @media (max-width: $max-mobile) {

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

@@ -12,16 +12,24 @@ import { ProChannelService } from "../channel.service";
  <div class="m-ProChannelLogin--hero--inner">
 
  <div class="m-ProChannelLogin--hero--slogans">
- <h2>{{ headline }}</h2>
+ <h2>{{ settings?.headline }}</h2>
  </div>
 
  <div class="m-ProChannelLogin--login">
  <ng-container *ngIf="currentSection === 'login'">
- <span class="m-proChannelLogin--subtext">Not on Minds? <a (click)="currentSection = 'register'">Start a Channel</a></span>
+ <span class="m-proChannelLogin--subtext">
+ Not on {{ settings?.title }}?
+ <a (click)="currentSection = 'register'">Start a Minds channel</a>
+ </span>
+
  <minds-form-login (done)="registered()"></minds-form-login>
  </ng-container>
+
  <ng-container *ngIf="currentSection === 'register'">
- <span class="m-proChannelLogin--subtext"><a (click)="currentSection = 'login'">I already have an account</a></span>
+ <span class="m-proChannelLogin--subtext">
+ <a (click)="currentSection = 'login'">I already have a Minds account</a>
+ </span>
+
  <minds-form-register (done)="registered()"></minds-form-register>
  </ng-container>
  </div>
@@ -38,8 +46,8 @@ export class ProChannelLoginComponent {
 
  paramsSubscription: Subscription;
 
- get headline() {
- return this.service.currentChannel.pro_settings.headline || '';
+ get settings() {
+ return this.service.currentChannel.pro_settings;
  }
 
  constructor(

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

@@ -3,6 +3,13 @@ import { Client } from '../../services/api/client';
 
 @Injectable()
 export class ProService {
+ public readonly ratios = [
+ '16:9',
+ '16:10',
+ '4:3',
+ '1:1',
+ ];
+
  constructor(
  protected client: Client,
  ) { }
@@ -43,6 +50,10 @@ export class ProService {
  if (!settings.scheme) {
  settings.scheme = 'light';
  }
+
+ if (!settings.ratio) {
+ settings.ratio = this.ratios[0];
+ }
  }
 
  return { isActive, settings };

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

@@ -88,8 +88,8 @@
  </div>
 
  <div class="m-pro--settings--field">
- <label for="headline" i18n>Headline</label>
- <input type="text" id="headline" name="headline" [(ngModel)]="settings.headline">
+ <label for="headline" i18n>Headline (can be multi-line)</label>
+ <textarea id="headline" name="headline" [(ngModel)]="settings.headline"></textarea>
  </div>
  </ng-template>
 
@@ -125,6 +125,15 @@
  <label for="scheme_dark" class="m-pro--settings--inline-label">Dark</label>
  </div>
 
+ <div class="m-pro--settings--field">
+ <label i18n>Tiles Aspect Ratio</label>
+
+ <ng-container *ngFor="let ratio of ratios">
+ <input type="radio" [id]="'tile_ratio_' + ratio" name="tile_ratio" [value]="ratio" [(ngModel)]="settings.tile_ratio">
+ <label [for]="'tile_ratio_' + ratio" class="m-pro--settings--inline-label">{{ratio}}</label>
+ </ng-container>
+ </div>
+
  <div class="m-pro--settings--field">
  <label for="logo_guid" i18n>Logo Asset GUID</label>
  <input type="text" id="logo_guid" name="logo_guid" [(ngModel)]="settings.logo_guid">
@@ -140,7 +149,7 @@
 
 
  <div class="m-pro--settings--field" *ngFor="let tag of settings.tag_list; let i = index">
- <label for="headline" i18n>Hashtag #{{ i + 1 }}</label>
+ <label [for]="'tag-label-' + i" i18n>Hashtag #{{ i + 1 }}</label>
 
  <div class="m-pro--settings--flex-inputs">
  <input
@@ -220,7 +229,7 @@
  </div>
 
  <div class="m-pro--settings--field" *ngFor="let link of settings.footer_links; let i = index">
- <label for="headline" i18n>Link #{{ i + 1 }}</label>
+ <label [for]="'footer-link-title-' + i" i18n>Link #{{ i + 1 }}</label>
 
  <div class="m-pro--settings--flex-inputs">
  <input

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

@@ -49,7 +49,8 @@
  input[type=text],
  input[type=password],
  input[type=search],
- input[type=date] {
+ input[type=date],
+ textarea {
  appearance: none;
  border: 1px solid;
  border-radius: 6px;
@@ -67,6 +68,11 @@
  }
  }
 
+ textarea {
+ height: 6em;
+ resize: none;
+ }
+
  &.m-pro--settings--field-actions {
  display: flex;
  flex-direction: row;

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

@@ -99,6 +99,10 @@ export class ProSettingsComponent implements OnInit {
  return ['/pro', this.session.getLoggedInUser().username];
  }
 
+ get ratios() {
+ return this.service.ratios;
+ }
+
  onDragStart(event: DragEvent) {
 
  this.currentDragEffectMsg = "";