Skip to content

Minds Frontend
Minds Frontend
Commit 69174e34 authored by Marcelo Rivera's avatar Marcelo Rivera
Browse files
Options
  • Download

(feat): merge designs 

(feat): add experiment
parent 7c4044f3
feat/homepage-redesign
1 merge request!623WIP: Homepage redesign
Pipeline #95417718 failed with stages
in 5 minutes and 31 seconds
Hide whitespace changes
Inline Side-by-side
Showing with 35 additions and 411 deletions
src/app/modules/homepage/v2/homepage-v2.component.html → src/app/modules/homepage/homepage.component.html
View file @ 69174e34
......@@ -35,7 +35,22 @@
</div>
</div>
<div class="m-grid__column-5 m-grid__column-12--mobile">
<div
class="m-grid__column-5 m-grid__column-12--mobile m-marketing__image"
*mExperiment="'Homepage121119'; bucket: 'base'"
>
<span>
<img
class="m-homepage__cellphone"
[src]="cdnAssetsUrl + 'assets/homepage/homepage-1.png'"
/>
</span>
</div>
<div
class="m-grid__column-5 m-grid__column-12--mobile"
*mExperiment="'Homepage121119'; bucket: 'form'"
>
<m-homepage__registerForm></m-homepage__registerForm>
</div>
</div>
......
src/app/modules/homepage/v2/homepage-v2.component.scss → src/app/modules/homepage/homepage.component.scss
View file @ 69174e34
@import 'defaults';
m-homepage__v2 {
m-homepage {
.m-marketing__main {
&.m-marketing__section--style-2 {
.m-marketing__body {
......
src/app/modules/homepage/v2/homepage-v2.component.ts → src/app/modules/homepage/homepage.component.ts
View file @ 69174e34
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Client } from '../../../services/api/client';
import { MindsTitle } from '../../../services/ux/title';
import { Client } from '../../services/api/client';
import { MindsTitle } from '../../services/ux/title';
import { Router } from '@angular/router';
import { Navigation as NavigationService } from '../../../services/navigation';
import { LoginReferrerService } from '../../../services/login-referrer.service';
import { Session } from '../../../services/session';
import { Navigation as NavigationService } from '../../services/navigation';
import { LoginReferrerService } from '../../services/login-referrer.service';
import { Session } from '../../services/session';
@Component({
selector: 'm-homepage__v2',
templateUrl: 'homepage-v2.component.html',
selector: 'm-homepage',
templateUrl: 'homepage.component.html',
})
export class HomepageV2Component implements OnDestroy {
export class HomepageComponent implements OnDestroy {
readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
topbar: HTMLElement;
......
src/app/modules/homepage/homepage.module.ts
View file @ 69174e34
......@@ -11,14 +11,13 @@ import { LegacyModule } from '../legacy/legacy.module';
import { ModalsModule } from '../modals/modals.module';
import { MindsFormsModule } from '../forms/forms.module';
import { HomepageV1Component } from './v1/homepage-v1.component';
import { MarketingModule } from '../marketing/marketing.module';
import { ExperimentsModule } from '../experiments/experiments.module';
import { HomepageV2Component } from './v2/homepage-v2.component';
import { HomepageRegisterComponent } from './v2/register/register.component';
import { HomepageComponent } from './homepage.component';
import { HomepageRegisterComponent } from './register/register.component';
import { CaptchaModule } from '../captcha/captcha.module';
const routes: Routes = [{ path: '', component: HomepageV2Component }];
const routes: Routes = [{ path: '', component: HomepageComponent }];
@NgModule({
imports: [
......@@ -34,11 +33,7 @@ const routes: Routes = [{ path: '', component: HomepageV2Component }];
ExperimentsModule,
CaptchaModule,
],
declarations: [
HomepageV1Component,
HomepageV2Component,
HomepageRegisterComponent,
],
entryComponents: [HomepageV1Component, HomepageV2Component],
declarations: [HomepageComponent, HomepageRegisterComponent],
entryComponents: [HomepageComponent],
})
export class HomepageModule {}
src/app/modules/homepage/v2/register/register.component.ts → src/app/modules/homepage/register/register.component.ts
View file @ 69174e34
......@@ -8,11 +8,11 @@ import {
ViewChild,
} from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ReCaptchaComponent } from '../../../captcha/recaptcha/recaptcha.component';
import { Session } from '../../../../services/session';
import { Client } from '../../../../services/api/client';
import { ExperimentsService } from '../../../experiments/experiments.service';
import { RouterHistoryService } from '../../../../common/services/router-history.service';
import { ReCaptchaComponent } from '../../captcha/recaptcha/recaptcha.component';
import { Session } from '../../../services/session';
import { Client } from '../../../services/api';
import { ExperimentsService } from '../../experiments/experiments.service';
import { RouterHistoryService } from '../../../common/services/router-history.service';
@Component({
selector: 'm-homepage__registerForm',
......
src/app/modules/homepage/v1/homepage-v1.component.html deleted 100644 → 0
View file @ 7c4044f3
<div class="mf-jumpAnchor" #topAnchor></div>
<m-marketing class="m-homepage" pageTitle="Minds Social Network" i18n-pageTitle>
<div class="m-marketing__main m-marketing__section--style-2">
<div class="m-grid m-marketing__wrapper">
<div class="m-grid__column-7 m-grid__column-12--mobile m-marketing__body">
<h1 i18n>Minds <span class="m-homepage__yellowLine"></span></h1>
<h2 ngPreserveWhitespaces i18n>
The social network that treats you as a person, not the product....
</h2>
<p class="m-marketing__description" i18n>
We don't spy on our users, or sell their data. Solve issues through
open discourse. Community owned and governed. Empower with payments
and rewards
</p>
<div class="m-homepage__joinMindsNow">
<button
class="mf-button mf-button--alt mf-button--gradient"
(click)="goToLoginPage()"
i18n
>
Join Minds Now
</button>
</div>
<div class="m-homepage__appButtons">
<a
href="https://itunes.apple.com/app/minds-com/id961771928"
target="_blank"
>
<img [src]="cdnAssetsUrl + 'assets/app-store.png'" />
</a>
<a
href="https://play.google.com/store/apps/details?id=com.minds.mobile"
target="_blank"
>
<img [src]="cdnAssetsUrl + 'assets/google-play.png'" />
</a>
</div>
</div>
<div
class="m-grid__column-5 m-grid__column-12--mobile m-marketing__image"
>
<span>
<img
class="m-homepage__cellphone"
[src]="cdnAssetsUrl + 'assets/homepage/homepage-1.png'"
/>
</span>
</div>
</div>
</div>
<ng-container slot="2">
<m-marketing__asFeaturedIn></m-marketing__asFeaturedIn>
<!-- Section 2 -->
<div class="m-marketing__section m-homepage__quotation">
<div class="m-grid m-marketing__wrapper">
<div
class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
>
<div class="m-marketing__quotation">
<h3>“Let's say something here about Minds!”</h3>
<h4>— Jim Peterson, New York Times</h4>
</div>
</div>
</div>
</div>
<div class="m-marketing__section m-marketing__section--style-5">
<div class="m-grid m-marketing__wrapper">
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
>
<h2 i18n>Privacy</h2>
<p class="m-marketing__description" i18n>
Our goal is to protect your digital rights, not exploit them. We
encrypt all of your sensitive data and don't use surveillance to spy
on what you are doing.
</p>
<p class="m-marketing__description" i18n>
Your privacy matters to us above all else!
</p>
<div class="m-marketing__actionButtons">
<a
class="m-marketing__link"
[href]="cdnAssetsUrl + 'assets/documents/Whitepaper-v0.5.pdf'"
target="_blank"
i18n
>
Download Whitepaper
</a>
</div>
</div>
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
>
<span>
<img
class="m-marketing__image--1"
[src]="cdnAssetsUrl + 'assets/homepage/homepage-2.png'"
/>
</span>
</div>
</div>
</div>
<!-- Section 3 -->
<div class="m-marketing__section m-marketing__section--style-4">
<div class="m-grid m-marketing__wrapper">
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
>
<h2 i18n>Transparency</h2>
<p class="m-marketing__description" i18n>
All of our code and development is free and open source, so you can
trust that we are being honest about what our algorithms are doing.
</p>
<p class="m-marketing__description" i18n>
Anyone can contribute to our project or peer review our code for
maximum transparency and accountability.
</p>
<div class="m-marketing__actionButtons">
<a
class="mf-button mf-button--smaller mf-button--hollow-mono"
href="https://www.gitlab.com/minds"
target="_blank"
i18n
>
<span>View on GitLab</span>
<i class="material-icons">cloud_download</i>
</a>
</div>
</div>
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
>
<span>
<img
class="m-marketing__image--1"
[src]="cdnAssetsUrl + 'assets/homepage/homepage-3.png'"
/>
<span class="m-marketing__imageUX">
<span class="m-marketing__imageTick m-marketing__imageTick--left">
<i class="material-icons">done</i>
</span>
<img
class="m-marketing__image--2"
[src]="cdnAssetsUrl + 'assets/homepage/homepage-3-ux.png'"
/>
</span>
</span>
</div>
</div>
</div>
<!-- Section 4 -->
<div class="m-marketing__section m-marketing__section--style-5">
<div class="m-grid m-marketing__wrapper">
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
>
<h2 i18n>Open Discourse</h2>
<p class="m-marketing__description" i18n>
We believe that legal open discourse is the key to reducing violence
and radicalization, not censorship. All speech that is legal in the
United States can be posted to Minds, and we encourage open dialogue
to help bridge the gap in our world today.
</p>
<p class="m-marketing__description" i18n>
We are working closely with thought leaders like Daryl Davis on
deradicalizing through conversation and respect.
</p>
</div>
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
>
<span>
<img
class="m-marketing__image--1"
[src]="cdnAssetsUrl + 'assets/homepage/homepage-4.png'"
/>
</span>
</div>
</div>
</div>
<!-- Final section -->
<div class="m-marketing__section m-marketing__section--tail">
<div class="m-grid m-marketing__wrapper">
<div
class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
>
<h3 i18n>Take back control of your social media</h3>
<div class="m-marketing__actionButtons">
<button
class="mf-button mf-button--alt mf-button--gradient"
(click)="goToLoginPage()"
i18n
>
Join Minds Now
</button>
</div>
</div>
</div>
</div>
</ng-container>
</m-marketing>
src/app/modules/homepage/v1/homepage-v1.component.scss deleted 100644 → 0
View file @ 7c4044f3
@import 'defaults';
m-homepage__v1 {
.m-marketing__main {
&.m-marketing__section--style-2 {
.m-marketing__body {
&::before {
transform: translate(311px, -80px);
clip-path: polygon(57% 0, 100% 0, 100% 15%, 18% 87%);
bottom: -80px;
@include m-theme() {
background: themed($m-amber-medium);
}
}
&::after {
content: '';
clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 100%);
background: #f5f6ff;
position: absolute;
bottom: -10px;
left: -100px;
height: 202px;
right: -500px;
z-index: -2;
}
}
}
.m-marketing__image {
span {
&::before {
content: initial !important;
}
.m-homepage__cellphone {
//box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
height: auto !important;
object-fit: initial !important;
width: 333px !important;
transform: translateY(-25px);
}
}
}
}
.m-homepage__appButtons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 50%;
margin-top: 150px;
& > a {
width: 120px;
height: 37px;
img {
width: 100%;
}
}
}
.m-homepage__yellowLine {
display: inline-block;
width: 55px;
height: 5px;
margin-bottom: 3px;
@include m-theme() {
background-color: themed($m-amber-medium);
}
}
.m-homepage__joinMindsNow {
max-width: 90%;
@media screen and (max-width: $m-grid-min-vp) {
max-width: 100%;
}
}
.m-homepage__quotation {
margin-top: 116px;
margin-bottom: 161px;
}
}
.m-homepage {
margin-top: -52px;
}
src/app/modules/homepage/v1/homepage-v1.component.ts deleted 100644 → 0
View file @ 7c4044f3
import { Component, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { Navigation as NavigationService } from '../../../services/navigation';
import { Session } from '../../../services/session';
import { MindsTitle } from '../../../services/ux/title';
import { Client } from '../../../services/api';
import { LoginReferrerService } from '../../../services/login-referrer.service';
@Component({
selector: 'm-homepage__v1',
templateUrl: 'homepage-v1.component.html',
})
export class HomepageV1Component implements OnDestroy {
readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
topbar: HTMLElement;
minds = window.Minds;
flags = {
canPlayInlineVideos: true,
};
constructor(
public client: Client,
public title: MindsTitle,
public router: Router,
public navigation: NavigationService,
private loginReferrer: LoginReferrerService,
public session: Session
) {
this.topbar = document.querySelector('.m-v2-topbar__Top');
this.title.setTitle('Minds Social Network', false);
if (this.session.isLoggedIn()) {
this.router.navigate(['/newsfeed']);
return;
}
if (/iP(hone|od)/.test(window.navigator.userAgent)) {
this.flags.canPlayInlineVideos = false;
}
this.topbar.classList.add('m-v2-topbar__noBackground');
}
ngOnDestroy() {
this.topbar.classList.remove('m-v2-topbar__noBackground');
}
goToLoginPage() {
this.router.navigate(['/login']);
}
registered() {
this.loginReferrer.navigate({
defaultUrl:
'/' + this.session.getLoggedInUser().username + ';onboarding=1',
});
}
}
Please register or to comment