Skip to content

Minds Frontend
Minds Frontend
Commit 7dd2814c authored by Marcelo Rivera's avatar Marcelo Rivera
Browse files
Options
  • Download

(feat): populate channels and groups lists using top feed 

(fix): use minds-form-register
(fix): margins for groups and channels lists
(fix): get 14 trending hashtags
(fix): stylings
parent 534164ff
feat/onboarding
1 merge request!674WIP: Onboarding
Pipeline #99048800 passed with stages
in 45 minutes and 25 seconds
Hide whitespace changes
Inline Side-by-side
Showing with 466 additions and 178 deletions
src/app/modules/homepage/homepage.module.ts
View file @ 7dd2814c
......@@ -34,6 +34,6 @@ const routes: Routes = [{ path: '', component: HomepageComponent }];
],
declarations: [HomepageComponent],
entryComponents: [HomepageComponent],
exports: [HomepageRegisterComponent],
exports: [],
})
export class HomepageModule {}
src/app/modules/new-onboarding/onboarding.module.ts
View file @ 7dd2814c
......@@ -16,9 +16,9 @@ import { HomepageModule } from '../homepage/homepage.module';
import { InfoStepComponent } from './steps/info/info.component';
import { ProgressbarComponent } from './progressbar/progressbar.component';
import { ChannelListComponent } from './steps/channels/list/list.component';
import { LegacyModule } from '../legacy/legacy.module';
import { JoinComponent } from './join/join.component';
import { GroupListComponent } from './steps/groups/list/list.component';
import { MindsFormsModule } from '../forms/forms.module';
const routes: Routes = [
{
......@@ -64,6 +64,7 @@ const routes: Routes = [
MessengerModule,
SuggestionsModule,
HomepageModule,
MindsFormsModule,
],
exports: [],
declarations: [
......
src/app/modules/new-onboarding/page/onboarding.component.scss
View file @ 7dd2814c
m-onboarding {
display: block;
padding-top: 100px;
overflow: hidden;
padding-top: 30px;
height: calc(100% + 104px); // 52 for the topbar and 52 for the bottom bar
&::before {
content: '';
position: absolute;
top: 0;
right: -290px;
right: 0;
bottom: -80px;
left: 0;
transform: translate(172px, -80px);
clip-path: polygon(55% 0, 100% 0, 100% -1%, 18% 87%);
@include m-theme() {
......@@ -21,12 +20,12 @@ m-onboarding {
@media screen and (max-width: $max-mobile) {
right: 0;
bottom: -3vw;
transform: none;
clip-path: none;
clip-path: polygon(83% 0%, 100% 0, 116% 22%, 30% 43%);
}
}
.m-grid {
height: 100%;
margin: 20px 0;
}
......@@ -40,12 +39,23 @@ m-onboarding {
.m-onboarding__form {
display: block;
background-color: #fcfcfc;
padding: 80px;
padding: 80px 70px;
color: #9b9b9b;
&::before {
content: '';
background-color: #fcfcfc;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
clip-path: polygon(0 0, 100% 8px, 99.99% 99%, 0% 100%);
z-index: -1;
}
@media screen and(max-width: $min-desktop) {
padding: 20px 8px;
padding: 50px 20px;
}
@media screen and(max-width: 740px) {
......@@ -58,15 +68,31 @@ m-onboarding {
margin: 35px 0;
font-size: 16px;
line-height: 25px;
color: #9b9b9b;
@media screen and (max-width: $max-mobile) {
font-size: 16px;
line-height: 23px;
}
}
clip-path: polygon(0 0, 100% 10px, 100% 95%, 0% 100%);
//clip-path: polygon(0 0, 100% 8px, 99.99% 99%, 0% 100%);
& > h1 {
font-size: 20px;
line-height: 44px;
font-weight: bold;
color: #9b9b9b;
&.m-onboarding__mobileTitle {
font-size: 13px;
line-height: 18px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
color: #a2a2a2;
}
}
& > h2 {
......@@ -83,6 +109,14 @@ m-onboarding {
text-align: center;
margin-top: 50px;
margin-bottom: 0;
&.m-onboarding__mobileTitle {
font-size: 28px;
line-height: 37px;
margin-top: 27px;
margin-bottom: 30px;
color: #4a4a4a;
}
}
}
......@@ -98,18 +132,25 @@ m-onboarding {
width: 100%;
padding-top: 50px;
@media screen and (min-width: 740px) {
&::before {
&::before {
//content: '';
display: block;
position: absolute;
width: calc(100% + 140px);
height: 18px;
top: -9px;
margin-left: -70px;
background: black;
background: linear-gradient(180deg, #f3f3f3 0%, transparent 56%);
@media screen and (min-width: 741px) and (max-width: $min-desktop) {
content: '';
width: calc(100% + 40px);
margin-left: -20px;
}
@media screen and (min-width: $min-desktop) {
content: '';
display: block;
position: absolute;
width: 142%;
height: 18px;
top: -9px;
z-index: -2;
margin-left: -21%;
background: black;
background: linear-gradient(180deg, #f3f3f3 0%, transparent 56%);
}
}
......@@ -188,32 +229,27 @@ m-onboarding {
}
}
select {
display: inline-block;
color: #4a4a4a;
background-color: #fff;
box-sizing: border-box;
margin: 0;
margin-right: 10px;
padding: 8px 16px;
height: 36px;
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
font-size: 16px;
line-height: 21px;
border: 1px solid #e8e8e8;
border-radius: 0;
}
}
.m-onboarding__actionButtons {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 50px;
.m-onboarding__dropdowns {
display: flex;
*:not(:first-child) {
margin-left: 30px;
select {
display: inline-block;
color: #4a4a4a;
background-color: #fff;
box-sizing: border-box;
margin: 0;
margin-right: 10px;
padding: 8px 10px;
height: 36px;
min-width: 80px;
max-width: 90px;
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
font-size: 16px;
line-height: 21px;
border: 1px solid #e8e8e8;
border-radius: 0;
}
}
}
......@@ -231,6 +267,18 @@ m-onboarding {
}
}
}
.m-onboarding__actionButtons {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 50px;
margin-bottom: 30px;
& > *:not(:first-child) {
margin-left: 30px;
}
}
}
}
......
src/app/modules/new-onboarding/progressbar/progressbar.component.html
View file @ 7dd2814c
......@@ -5,7 +5,7 @@
<ng-container *ngIf="!isMobile(); else mobileBlock">
<div
class="m-onboardingProgressbar__item"
[class.m-onboardingProgressbar__item--selected]="step.selected"
[class.onboardingProgressbar__item--selected]="step.selected"
*ngFor="let step of steps; let i = index"
>
<span>{{ i + 1 }}</span>
......@@ -15,7 +15,7 @@
</ng-container>
<ng-template #mobileBlock>
<h2 class="m-onboardingProgressbar__stepName">
Hashtags
{{ steps[getSelectedIndex()].name }}
</h2>
<span class="m-onboardingProgressbar_item--mobile">
Step {{ getSelectedIndex() + 1 }} of {{ steps.length }}
......
src/app/modules/new-onboarding/progressbar/progressbar.component.scss
View file @ 7dd2814c
@import 'defaults';
@import 'themes';
.m-onboarding__progressbar {
display: flex;
position: relative;
z-index: 1;
@media screen and(max-width: 740px) {
flex-direction: column;
......@@ -13,11 +17,16 @@
content: '';
position: absolute;
bottom: 8px;
width: 142%;
margin-left: -21%;
width: calc(100% + 140px);
margin-left: -70px;
height: 1px;
background-color: #dbdbdb;
z-index: -1;
z-index: 1;
@media screen and (min-width: 741px) and (max-width: $min-desktop) {
width: calc(100% + 40px);
margin-left: -20px;
}
}
h2.m-onboardingProgressbar__stepName {
......@@ -44,12 +53,6 @@
margin: 0 25px;
text-transform: uppercase;
&.m-onboardingProgressbar__item--selected {
.m-onboardingProgressbarItem__selector {
background-color: #5dbac0;
}
}
.m-onboardingProgressbarItem__selector {
//position: absolute;
//bottom: 0;
......@@ -59,6 +62,16 @@
border-radius: 100%;
background-color: #d5d5d5;
z-index: 2;
}
&.onboardingProgressbar__item--selected {
.m-onboardingProgressbarItem__selector {
//background-color: red;
@include m-theme() {
background-color: themed($m-aqua);
}
}
}
}
}
src/app/modules/new-onboarding/progressbar/progressbar.component.ts
View file @ 7dd2814c
......@@ -26,7 +26,7 @@ export class ProgressbarComponent implements OnInit {
}
isMobile() {
return window.innerWidth < 740;
return window.innerWidth <= 740;
}
@HostListener('window:resize')
......
src/app/modules/new-onboarding/steps/channels/channels.component.ts
View file @ 7dd2814c
import { Component, OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { FeedsService } from '../../../../common/services/feeds.service';
import { Session } from '../../../../services/session';
@Component({
selector: 'm-channels__step',
......
src/app/modules/new-onboarding/steps/channels/list/list.component.html
View file @ 7dd2814c
......@@ -3,29 +3,27 @@
{{ error }}
</span>
<span
*ngIf="!error && !inProgress && !suggestions.length"
*ngIf="!error && !inProgress && !entities.length"
class="m-channelList__empty"
>
You have no suggestions at this time
</span>
<ul class="m-channelList__list" *ngIf="suggestions.length">
<li *ngFor="let suggestion of suggestions" class="m-channelList__item">
<a [routerLink]="['/', suggestion.entity.username]">
<ul class="m-channelList__list" *ngIf="entities.length">
<li class="m-channelList__item" *ngFor="let entity of entities">
<a [routerLink]="['/', entity.username]" target="_blank">
<div
class="m-channelListItem__avatar"
[style.background-image]="
'url(' + minds.cdn_url + '/icon/' + suggestion.entity.guid + ')'
'url(' + minds.cdn_url + '/icon/' + entity.guid + ')'
"
></div>
<div class="m-channelListItem__body">
<div [title]="suggestion.entity.briefdescription">
<h4>{{ suggestion.entity.username }}</h4>
<span i18n
>{{ suggestion.entity.subscribers_count | abbr }} members</span
>
<div [title]="entity.briefdescription">
<h4>{{ entity.username }}</h4>
<span i18n>{{ entity.subscribers_count | abbr }} members</span>
</div>
<div class="m-layout__spacer"></div>
<m-join [entity]="suggestion.entity"></m-join>
<m-join [entity]="entity"></m-join>
</div>
</a>
</li>
......
src/app/modules/new-onboarding/steps/channels/list/list.component.scss
View file @ 7dd2814c
......@@ -123,6 +123,10 @@ m-channel__list {
display: none;
}
}
m-join {
margin-right: 10px;
}
}
}
}
src/app/modules/new-onboarding/steps/channels/list/list.component.ts
View file @ 7dd2814c
import { Component, Input, OnInit } from '@angular/core';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Input,
OnInit,
} from '@angular/core';
import { Client } from '../../../../../services/api/client';
import { Storage } from '../../../../../services/storage';
import { FeedsService } from '../../../../../common/services/feeds.service';
import { first } from 'rxjs/operators';
type EntityType = 'group' | 'user';
@Component({
selector: 'm-channel__list',
templateUrl: 'list.component.html',
changeDetection: ChangeDetectionStrategy.Default,
})
export class ChannelListComponent implements OnInit {
@Input() entityType: EntityType = 'user';
minds = window.Minds;
suggestions: Array<any> = [];
lastOffset = 0;
inProgress: boolean = false;
error: string;
entities: any[] = [];
constructor(private client: Client, private storage: Storage) {}
constructor(
public feedsService: FeedsService,
protected cd: ChangeDetectorRef,
private client: Client,
private storage: Storage
) {}
async ngOnInit() {
this.feedsService.feed.subscribe(async entities => {
if (!entities.length) {
return;
}
this.entities = [];
for (const entity of entities) {
if (entity) {
this.entities.push(await entity.pipe(first()).toPromise());
}
}
this.detectChanges();
});
this.load();
}
async load() {
this.error = null;
this.inProgress = true;
let limit: number = 5;
if (this.suggestions.length) {
limit = 1;
async load(refresh: boolean = false, forceSync: boolean = false) {
if (refresh) {
this.feedsService.clear();
}
// Subscribe can not rely on next batch, so load further batch
this.lastOffset = this.suggestions.length ? this.lastOffset + 11 : 0;
this.inProgress = true;
this.detectChanges();
try {
const response: any = await this.client.get(
`api/v2/suggestions/${this.entityType}`,
{
limit,
offset: this.lastOffset,
}
);
for (const suggestion of response.suggestions) {
const removed = this.storage.get(
`user:suggestion:${suggestion.entity_guid}:removed`
);
if (!removed) {
this.suggestions.push(suggestion);
}
}
} catch (err) {
this.error = err.message;
} finally {
this.inProgress = false;
const hashtags = '';
const period = '30d';
const all = '';
const query = '';
const nsfw = [];
this.feedsService
.setEndpoint(`api/v2/feeds/global/top/channels`)
.setParams({
hashtags,
period,
all,
query,
nsfw,
})
.setLimit(12)
.setCastToActivities(true)
.fetch();
} catch (e) {
console.error('SortedComponent', e);
}
this.inProgress = false;
this.detectChanges();
}
async pass(suggestion, e) {
e.preventDefault();
e.stopPropagation();
this.suggestions.splice(this.suggestions.indexOf(suggestion), 1);
this.entities.splice(this.entities.indexOf(suggestion), 1);
this.storage.set(
`user:suggestion:${suggestion.entity_guid}:removed`,
suggestion.entity_guid
);
await this.client.put(`api/v2/suggestions/pass/${suggestion.entity_guid}`);
// load more
this.load();
this.detectChanges();
}
remove(suggestion) {
this.suggestions.splice(this.suggestions.indexOf(suggestion), 1);
this.entities.splice(this.entities.indexOf(suggestion), 1);
this.storage.set(
`user:suggestion:${suggestion.entity_guid}:removed`,
suggestion.entity_guid
);
// load more
this.load();
this.detectChanges();
}
detectChanges() {
this.cd.markForCheck();
this.cd.detectChanges();
}
}
src/app/modules/new-onboarding/steps/groups/groups.component.ts
View file @ 7dd2814c
......@@ -28,7 +28,7 @@ export class GroupsStepComponent {
constructor(private router: Router) {}
skip() {
this.router.navigate(['/newsfeed']);
this.router.navigate(['/onboarding', 'channels']);
}
continue() {
......
src/app/modules/new-onboarding/steps/groups/list/list.component.html
View file @ 7dd2814c
......@@ -3,29 +3,30 @@
{{ error }}
</span>
<span
*ngIf="!error && !inProgress && !suggestions.length"
*ngIf="!error && !inProgress && !entities.length"
class="m-groupList__empty"
>
You have no suggestions at this time
</span>
<ul class="m-groupList__list" *ngIf="suggestions.length">
<li *ngFor="let suggestion of suggestions" class="m-groupList__item">
<a [routerLink]="['/', suggestion.entity.name]">
<ul class="m-groupList__list" *ngIf="entities.length">
<li
class="m-groupList__item"
*ngFor="let entity of entities; let i = index"
>
<a [routerLink]="['/groups/profile', entity.guid]" target="_blank">
<div
class="m-groupListItem__avatar"
[style.background-image]="
'url(' + minds.cdn_url + '/icon/' + suggestion.entity.guid + ')'
'url(' + minds.cdn_url + '/icon/' + entity.guid + ')'
"
></div>
<div class="m-groupListItem__body">
<div [title]="suggestion.entity.name">
<h4>{{ suggestion.entity.name }}</h4>
<span i18n
>{{ suggestion.entity['members:count'] | abbr }} members</span
>
<div [title]="entity.name">
<h4>{{ entity.name }}</h4>
<span i18n>{{ entity['members:count'] | abbr }} members</span>
</div>
<div class="m-layout__spacer"></div>
<m-join [entity]="suggestion.entity"></m-join>
<m-join [entity]="entity | async"></m-join>
</div>
</a>
</li>
......
src/app/modules/new-onboarding/steps/groups/list/list.component.scss
View file @ 7dd2814c
......@@ -123,6 +123,10 @@ m-group__list {
display: none;
}
}
m-join {
margin-right: 10px;
}
}
}
}
src/app/modules/new-onboarding/steps/groups/list/list.component.ts
View file @ 7dd2814c
import { Component, Input, OnInit } from '@angular/core';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Input,
OnInit,
} from '@angular/core';
import { Client } from '../../../../../services/api/client';
import { Storage } from '../../../../../services/storage';
import { FeedsService } from '../../../../../common/services/feeds.service';
import { first } from 'rxjs/operators';
type EntityType = 'group' | 'user';
@Component({
selector: 'm-group__list',
templateUrl: 'list.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GroupListComponent implements OnInit {
@Input() entityType: EntityType = 'user';
minds = window.Minds;
suggestions: Array<any> = [];
lastOffset = 0;
inProgress: boolean = false;
error: string;
constructor(private client: Client, private storage: Storage) {}
entities: any[] = [];
constructor(
public feedsService: FeedsService,
protected cd: ChangeDetectorRef,
private client: Client,
private storage: Storage
) {}
async ngOnInit() {
this.feedsService.feed.subscribe(async entities => {
if (!entities.length) {
return;
}
this.entities = [];
for (const entity of entities) {
if (entity) {
this.entities.push(await entity.pipe(first()).toPromise());
}
}
this.detectChanges();
});
this.load();
}
async load() {
this.error = null;
this.inProgress = true;
let limit: number = 5;
if (this.suggestions.length) {
limit = 1;
async load(refresh: boolean = false, forceSync: boolean = false) {
if (refresh) {
this.feedsService.clear();
}
// Subscribe can not rely on next batch, so load further batch
this.lastOffset = this.suggestions.length ? this.lastOffset + 11 : 0;
this.inProgress = true;
this.detectChanges();
try {
const response: any = await this.client.get(
`api/v2/suggestions/${this.entityType}`,
{
limit,
offset: this.lastOffset,
}
);
for (const suggestion of response.suggestions) {
const removed = this.storage.get(
`user:suggestion:${suggestion.entity_guid}:removed`
);
if (!removed) {
this.suggestions.push(suggestion);
}
}
} catch (err) {
this.error = err.message;
} finally {
this.inProgress = false;
const hashtags = '';
const period = '30d';
const all = '';
const query = '';
const nsfw = [];
this.feedsService
.setEndpoint(`api/v2/feeds/global/top/channels`)
.setParams({
hashtags,
period,
all,
query,
nsfw,
})
.setLimit(12)
.setCastToActivities(true)
.fetch();
} catch (e) {
console.error('SortedComponent', e);
}
this.inProgress = false;
this.detectChanges();
}
async pass(suggestion, e) {
e.preventDefault();
e.stopPropagation();
this.suggestions.splice(this.suggestions.indexOf(suggestion), 1);
this.entities.splice(this.entities.indexOf(suggestion), 1);
this.storage.set(
`user:suggestion:${suggestion.entity_guid}:removed`,
suggestion.entity_guid
);
await this.client.put(`api/v2/suggestions/pass/${suggestion.entity_guid}`);
// load more
this.load();
this.detectChanges();
}
remove(suggestion) {
this.suggestions.splice(this.suggestions.indexOf(suggestion), 1);
this.entities.splice(this.entities.indexOf(suggestion), 1);
this.storage.set(
`user:suggestion:${suggestion.entity_guid}:removed`,
suggestion.entity_guid
);
// load more
this.load();
this.detectChanges();
}
detectChanges() {
this.cd.markForCheck();
this.cd.detectChanges();
}
}
src/app/modules/new-onboarding/steps/hashtags/hashtags.component.html
View file @ 7dd2814c
......@@ -26,7 +26,7 @@
[ngClass]="{ selected: hashtag.selected }"
(click)="toggleSelection(hashtag)"
>
{{ hashtag.value }}
#{{ hashtag.value | titlecase }}
</span>
</li>
</ul>
......
src/app/modules/new-onboarding/steps/hashtags/hashtags.component.scss
View file @ 7dd2814c
......@@ -19,9 +19,19 @@ m-hashtags__step {
font-size: 18px;
line-height: 44px;
@media screen and(max-width: $max-mobile) {
font-size: 16px;
line-height: 35px;
}
&.m-hashtagsList__item--selected {
color: #5dbac0;
border: 1px solid #ececec;
@include m-theme() {
color: themed($aqua);
}
@media screen and (min-width: $max-mobile) {
border: 1px solid #ececec;
}
}
}
}
......
src/app/modules/new-onboarding/steps/hashtags/hashtags.component.ts
View file @ 7dd2814c
......@@ -46,7 +46,7 @@ export class HashtagsStepComponent implements OnInit {
this.inProgress = true;
try {
this.hashtags = await this.service.load(50);
this.hashtags = await this.service.load(14);
} catch (e) {
console.error(e);
}
......@@ -64,7 +64,7 @@ export class HashtagsStepComponent implements OnInit {
}
skip() {
this.router.navigate(['/newsfeed']);
this.router.navigate(['/onboarding', 'channels']);
}
continue() {
......
src/app/modules/new-onboarding/steps/info/info.component.html
View file @ 7dd2814c
......@@ -10,7 +10,7 @@
<label i18n>Mobile Phone Number</label>
<!-- tooltip -->
<m-tooltip anchor="left">
<m-tooltip [anchor]="tooltipAnchor">
<span m-tooltip--anchor>𝒊</span>
<ng-container i18n>
Your mobile number may be used for additional account security, unique
......@@ -27,7 +27,7 @@
<div class="m-onboarding__input">
<label i18n>Location</label>
<m-tooltip anchor="left">
<m-tooltip [anchor]="tooltipAnchor">
<span m-tooltip--anchor>𝒊</span>
<ng-container i18n>
Your mobile number may be used for additional account security, unique
......@@ -44,7 +44,7 @@
<div class="m-onboarding__input">
<label i18n>Date of Birth</label>
<m-tooltip anchor="left">
<m-tooltip [anchor]="tooltipAnchor">
<span m-tooltip--anchor>𝒊</span>
<ng-container i18n>
Your mobile number may be used for additional account security, unique
......
src/app/modules/new-onboarding/steps/info/info.component.ts
View file @ 7dd2814c
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import {
Component,
ElementRef,
HostListener,
OnInit,
ViewChild,
} from '@angular/core';
import { Session } from '../../../../services/session';
import { MindsUser } from '../../../../interfaces/entities';
import { Client } from '../../../../services/api';
......@@ -52,6 +58,7 @@ export class InfoStepComponent {
selectedMonth = 'January';
selectedDay = '1';
selectedYear = new Date().getFullYear();
tooltipAnchor: 'top' | 'left' = 'left';
number: number;
location: string;
......@@ -65,6 +72,8 @@ export class InfoStepComponent {
this.years = this.range(100, this.selectedYear, false);
this.selectedYear = this.years[0];
this.selectMonth('January');
this.onResize();
}
selectMonth(month: string) {
......@@ -133,7 +142,7 @@ export class InfoStepComponent {
skip() {
this.saveData();
this.router.navigate(['/newsfeed']);
this.router.navigate(['/onboarding', 'hashtags']);
}
continue() {
......@@ -141,6 +150,11 @@ export class InfoStepComponent {
this.router.navigate(['/onboarding', 'groups']);
}
@HostListener('window:resize')
onResize() {
this.tooltipAnchor = window.innerWidth <= 480 ? 'top' : 'left';
}
private saveData() {
this.updateMobileNumber();
this.updateLocation();
......
src/app/modules/new-onboarding/steps/notice/notice.component.html
View file @ 7dd2814c
<div class="m-onboarding__form">
<div class="m-notice__wavingEmoji">👋</div>
<div
class="m-notice__wavingEmoji"
[class.m-notice__wavingEmoji--mobile]="isMobile()"
>
👋
</div>
<h1 class="m-onboarding__mobileTitle" *ngIf="isMobile()" i18n>
Welcome
</h1>
<h1 i18n>
<h1 *ngIf="!isMobile()" i18n>
Welcome to the Minds Community
</h1>
<h2>@{{ user.username }}</h2>
<h2 [class.m-onboarding__mobileTitle]="isMobile()">@{{ user.username }}</h2>
<p class="m-onboarding__description" i18n>
Your privacy is our priority. You are free to provide as much or as little
......@@ -13,8 +22,8 @@
</p>
<div class="m-onboarding__actionButtons">
<button class="mf-button mf-button--alt" (click)="continue()" i18n>
Let's Get Setup
<button class="mf-button mf-button--alt" (click)="continue()">
<span i18n>Let's Get Setup</span>
</button>
<a (click)="skip()" i18n>
No thanks, I'll do it later
......
src/app/modules/new-onboarding/steps/notice/notice.component.scss
View file @ 7dd2814c
......@@ -2,5 +2,20 @@ m-notice__step {
.m-notice__wavingEmoji {
font-size: 36px;
line-height: 25px;
&.m-notice__wavingEmoji--mobile {
margin: 0 auto;
width: 52px;
}
}
@media screen and(max-width: $max-mobile) {
.m-onboarding__actionButtons {
flex-direction: column-reverse;
& > *:not(:first-child) {
margin: 0 0 50px;
}
}
}
}
src/app/modules/new-onboarding/steps/notice/notice.component.ts
View file @ 7dd2814c
......@@ -23,4 +23,8 @@ export class NoticeStepComponent implements OnInit {
skip() {
this.router.navigate(['/newsfeed']);
}
isMobile() {
return window.innerWidth <= 480;
}
}
src/app/modules/new-onboarding/steps/registration/registration.component.html
View file @ 7dd2814c
<m-homepage__registerForm (done)="goToNextStep()"></m-homepage__registerForm>
<minds-form-register
[showTitle]="true"
[showBigButton]="true"
[showPromotions]="false"
[showLabels]="true"
(done)="goToNextStep()"
>
</minds-form-register>
src/app/modules/new-onboarding/steps/registration/registration.component.scss 0 → 100644
View file @ 7dd2814c
m-registration__step {
display: block;
filter: drop-shadow(-1px 0px 8px rgba(50, 50, 0, 0.5));
minds-form-register {
display: block;
background-color: #fcfcfc;
padding: 50px 37px;
clip-path: polygon(0 0, 100% 8px, 99.99% 99%, 0% 100%);
h3 {
font-size: 24px;
line-height: 32px;
font-weight: bold;
}
.mdl-cell {
margin: 0;
padding-bottom: 14px;
}
form {
background: transparent !important;
.mdl-card__supporting-text {
overflow: visible;
}
input:not([type='checkbox']) {
padding: 10px 15px;
height: 37px;
font-weight: normal;
}
}
span,
label {
font-size: 14px;
line-height: 19px;
}
label.mdl-checkbox {
display: flex;
align-items: center;
padding-top: 0;
margin-bottom: 33px;
}
.mdl-card__actions {
flex-direction: column;
align-items: flex-start;
margin-top: 14px;
padding: 0;
& > *:not(button) {
color: #4a4a4a !important;
}
a {
color: #4a90e2;
}
button {
align-self: flex-end;
@include m-theme() {
background-color: themed($m-aqua);
}
}
}
}
@media screen and (max-width: $max-mobile) {
margin: 30px 26px 50px;
&::before {
content: '';
display: block;
position: absolute;
width: 393px;
height: 193px;
top: -66px;
//bottom: 190px;
left: -144px;
transform: translate(45px, 32px);
background: url('<%= APP_CDN %>/assets/marketing/deco_2-straight.svg')
no-repeat;
z-index: -1;
}
minds-form-register {
padding: 48px 25px;
}
}
@media screen and (min-width: $max-mobile) and (max-width: 760px) {
minds-form-register {
padding: 40px 20px;
}
}
}
Please register or to comment