(feat): Boost page contents and imagery

src/app/modules/boost/boost.module.ts

@@ -99,10 +99,6 @@ const boostRoutes: Routes = [
  BoostConsoleCard,
  BoostConsoleBooster,
  ],
- entryComponents: [
- BoostCreatorComponent,
- BoostConsoleComponent,
- BoostMarketingComponent,
- ],
+ entryComponents: [BoostCreatorComponent, BoostConsoleComponent],
 })
 export class BoostModule {}

src/app/modules/boost/marketing.component.scss

-.m-boost--marketing-header {
- background: url('<%= APP_CDN %>/assets/photos/rocket.jpg') center;
- width: 100%;
- text-align: center;
- display: flex;
- align-content: center;
- flex-direction: column;
- padding: 224px 36px;
- box-sizing: border-box;
- position: relative;
-
- @media only screen and (max-width: 400px) {
- padding: 110px 0;
- }
-
- h1,
- h3 {
- font-family: 'Roboto', Helvetica, sans-serif;
-
- @include m-theme() {
- color: themed($m-white);
- text-shadow: 0 0 3px themed($m-grey-900);
- }
-
- @media only screen and (max-width: 400px) {
- margin: 0;
- }
- z-index: 1;
- }
-
- h1 {
- word-spacing: 25px;
- letter-spacing: 4px;
- text-transform: uppercase;
-
- @media only screen and (max-width: 400px) {
- font-size: 30px;
- }
- }
- h3 {
- letter-spacing: 2px;
- word-spacing: 3px;
- font-weight: 300;
-
- @media only screen and (max-width: 400px) {
- font-size: 14px;
- }
- }
-
- .m-boost--marketing-action-button {
- margin-bottom: -80px;
- margin-top: 32px;
- button {
- letter-spacing: 3px;
- font-size: 18px;
- line-height: 35px;
- height: 53px;
- padding: 0 24px;
- font-weight: 300;
- font-family: 'Roboto', Helvetica, sans-serif;
- @include m-theme() {
- color: themed($m-white);
- }
- }
- z-index: 2;
- }
-
- .m-boost--overlay {
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- z-index: 0;
- @include m-theme() {
- background-color: rgba(themed($m-black), 0.5);
- }
- }
-}
-
-.m-boost--marketing-contents {
- max-width: 100%;
- padding: 64px 0 0 !important;
-
- justify-content: center;
-
- .mdl-cell {
- padding: 32px;
- text-align: center;
- max-width: 500px;
-
- &:nth-of-type(1) {
- @include m-theme() {
- border-right: 1px solid rgba(themed($m-white), 0.15);
- }
- }
-
- i {
- font-size: 64px;
- }
- h2 {
- padding: 0;
- margin: 24px 0;
- text-transform: uppercase;
- font-family: 'Roboto', Helvetica, sans-serif;
- font-weight: 300;
- letter-spacing: 2px;
- font-size: 30px;
- }
- span {
- font-family: 'Roboto', Helvetica, sans-serif;
- letter-spacing: 1px;
- font-weight: 300;
- }
- }
-}
-
-.m-boost--marketing-contents--breakdown {
- padding: 0 0 64px !important;
-}
-
-.m-boost--marketing m-boost--onboarding {
- margin: -115px auto 0;
- display: block;
- position: relative;
- max-width: 990px;
-
- form {
- padding: 16px;
- }
-}
-
-.m-boost--marketing-faq {
- max-width: 900px;
- margin: auto;
- padding: 16px;
-}
-
-.m-boost--marketing m-boost--terms {
- max-width: 600px;
- margin: 16px auto;
- display: block;
- padding: 16px;
- max-height: 600px;
- overflow: scroll;
- @include m-theme() {
- background-color: themed($m-white);
- }
-}
-
-m-boost--marketing {
- .m-marketing--hero--action-button {
- white-space: nowrap;
- }
- .m-layout--row {
- @media screen and(max-width: $max-mobile) {
- flex-wrap: wrap;
- }
- }
-}

src/app/modules/boost/marketing.component.ts

-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ ViewChild,
+} from '@angular/core';
 
 @Component({
- moduleId: module.id,
- selector: 'm-boost--marketing',
+ selector: 'm-boost__marketing',
  templateUrl: 'marketing.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BoostMarketingComponent {
- minds = window.Minds;
- user = window.Minds.user;
+ readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
+
+ @ViewChild('topAnchor', { static: false })
+ readonly topAnchor: ElementRef;
+
+ constructor(protected cd: ChangeDetectorRef) {}
+
+ scrollToTop() {
+ if (this.topAnchor.nativeElement) {
+ this.topAnchor.nativeElement.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start',
+ inline: 'nearest',
+ });
+ }
+ }
+
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ }
 }