Skip to content

Minds Frontend
Minds Frontend
Source
...
Target
 
Commits (7)
Hide whitespace changes
Inline Side-by-side
Showing with 183 additions and 40 deletions
src/app/common/components/marketing/styles/general.scss
View file @ 92a6332f
......@@ -248,14 +248,22 @@
display: flex;
flex-direction: column;
align-items: flex-end;
margin: 0 auto;
@media screen and(min-width: $m-grid-min-vp) {
width: 500px;
width: 730px;
}
h3 {
font-size: 28px;
font-weight: bold;
line-height: 37px;
margin-bottom: 0;
}
margin: 0 auto;
h4 {
font-size: 14px;
line-height: 19px;
margin: 0;
@include m-theme() {
......
src/app/common/components/marketing/styles/style-4.scss
View file @ 92a6332f
......@@ -63,10 +63,10 @@
margin-bottom: 16px;
}
@media screen and(min-width: $m-grid-min-vp),
screen and (max-width: $max-mobile) {
padding-right: 100px;
}
//@media screen and(min-width: $m-grid-min-vp),
// screen and (max-width: $max-mobile) {
// padding-right: 100px;
//}
}
ol.m-marketing__description > li,
......@@ -83,7 +83,7 @@
padding-right: 0;
margin-bottom: 30px;
font-size: 16px;
line-height: 23px;
line-height: 27px;
}
}
......
src/app/common/layout/layout.scss
View file @ 92a6332f
......@@ -10,7 +10,7 @@ m-body {
}
&.has-v2-navbar {
margin-top: 52px;
margin-top: 51px;
}
&.is-pro-domain {
......
src/app/modules/homepage/homepage.component.html
View file @ 92a6332f
<div class="mf-jumpAnchor" #topAnchor></div>
<m-marketing class="m-homepage" pageTitle="Minds Social Network" i18n-pageTitle>
<m-marketing
class="m-homepage"
[class.m-homepage__formExperiment]="!!registerForm"
pageTitle="Minds Social Network"
i18n-pageTitle
>
<div class="m-marketing__main m-marketing__section--style-2">
<div class="m-grid m-marketing__wrapper">
<div
......@@ -77,6 +82,7 @@
[showBigButton]="true"
[showPromotions]="false"
[showLabels]="true"
#registerForm
>
</minds-form-register>
</div>
......@@ -160,17 +166,16 @@
<ol class="m-marketing__description">
<li>
Our code is free and open source for maximum transparency,
democratization and accountability.
Our code is free and open source for maximum transparency and
accountability.
</li>
<li>
Our content policy is based on the First Amendment to minimize
bias and censorship. Open discourse is essential to solve global
issues and change minds.
Our content policy is based on the First Amendment in order to
minimize bias and censorship.
</li>
<li>
You deserve to be fairly rewarded for your contributions to the
network. We share our revenue with you.
Open discourse is essential to solve global issues and change
minds.
</li>
</ol>
</div>
......
src/app/modules/homepage/homepage.component.scss
View file @ 92a6332f
......@@ -2,40 +2,123 @@
m-homepage {
m-marketing {
position: relative;
margin-top: -52px;
padding-top: 52px;
z-index: 0;
transform: rotate(0deg);
.m-marketing__wrapper,
.m-marketing__extras > * > * {
max-width: 1100px !important;
}
&.m-homepage__formExperiment {
.m-marketing__body {
@media screen and (max-width: $max-mobile) {
&::after {
top: 990px !important;
}
}
}
.m-homepage__appButtons {
margin-left: 0 !important;
}
.m-marketing__asFeaturedIn {
margin-top: 139px !important;
max-width: 1102px !important;
}
.m-homepage__quotation {
margin-top: 84px !important;
margin-bottom: 85px !important;
}
}
.m-marketing__section--style-5 {
.m-marketing__wrapper {
.m-marketing__image {
span {
@media screen and (max-width: $max-mobile) {
margin-bottom: 40px;
}
}
}
}
}
}
.m-marketing__main {
&.m-marketing__section--style-2 {
.m-marketing__wrapper {
position: initial;
padding: 64px 0 0;
@media screen and (min-width: $max-mobile) and (max-width: $m-grid-min-vp) {
padding: 72px 0 0;
padding: 64px 0 0;
}
@media screen and (max-width: $max-mobile) {
padding: 0;
}
.m-marketing__body {
position: initial;
z-index: 0;
@media screen and (max-width: $max-mobile) {
padding: 0 30px 0;
}
&::before {
transform: translate(311px, -123px);
clip-path: polygon(57% 0, 100% 0, 100% 15%, 15% 90%);
bottom: -80px;
transform: none;
clip-path: polygon(72% 0, 100% 0, 100% 21%, 42% 91%);
top: 0;
right: 0;
height: 695px;
z-index: 1;
@include m-theme() {
background: themed($m-amber-medium);
}
@media screen and (max-width: $max-mobile) {
z-index: -1;
}
}
h1 {
margin-top: 0;
margin-bottom: 40px;
}
h2 {
font-size: 62px;
line-height: 65px;
margin-bottom: 36px;
}
.m-marketing__description {
margin-bottom: 21px;
padding-right: 129px;
}
.m-homepage__joinButton {
font-size: 20px;
line-height: 26px;
width: 230px;
height: 60px;
margin: 60px 0;
@include m-theme() {
background: themed($m-aqua);
border-color: themed($m-aqua) !important;
}
@media screen and (max-width: $max-mobile) {
width: 100%;
}
&.m-homepage__joinButton--first {
margin: 0 0 175px;
margin: 22px 0 74px 10px;
}
}
......@@ -45,12 +128,13 @@ m-homepage {
background: #f5f6ff;
position: absolute;
bottom: -10px;
left: -140px;
height: 202px;
right: -600px;
top: 524px;
//bottom: -10px;
left: 0;
height: 211px;
right: 0;
z-index: -2;
z-index: -1;
}
@media screen and (max-width: $max-mobile) {
......@@ -62,29 +146,51 @@ m-homepage {
&::after {
left: 0;
right: 0;
bottom: -626px;
bottom: -698px;
top: 1200px;
}
}
}
}
.m-homepage__registerForm {
@media screen and(min-width: $min-tablet) {
transform: translate(-54px, -19px);
}
//&::before {
// transform: none;
// clip-path: polygon(73% 0, 100% 0, 100% 28%, 39% 93%);
// bottom: -115px;
// right: -688px;
// top: -123px;
//
// @include m-theme() {
// background: themed($m-amber-medium);
// }
//}
display: block;
filter: drop-shadow(-1px 0px 8px rgba(50, 50, 0, 0.5));
minds-form-register {
width: 409px;
height: 423px;
display: block;
background-color: #fcfcfc;
padding: 50px 37px;
padding: 58px 37px;
clip-path: polygon(0 0, 100% 8px, 99.99% 99%, 0% 100%);
clip-path: polygon(0 0, 100% 8px, 99% 95%, 0% 98%);
@media screen and (max-width: $max-mobile) {
width: 300px;
}
h3 {
font-size: 24px;
line-height: 32px;
font-weight: bold;
margin: 0;
}
.mdl-cell {
......@@ -93,6 +199,7 @@ m-homepage {
}
form {
margin-top: 21px;
background: transparent !important;
.mdl-card__supporting-text {
......@@ -112,17 +219,22 @@ m-homepage {
line-height: 19px;
}
label:not(.mdl-checkbox) {
display: inline-block;
margin-bottom: 14px;
}
label.mdl-checkbox {
display: flex;
align-items: center;
padding-top: 0;
margin-top: 5px;
margin-bottom: 33px;
}
.mdl-card__actions {
flex-direction: column;
align-items: flex-start;
margin-top: 14px;
padding: 0;
& > *:not(button) {
......@@ -135,6 +247,10 @@ m-homepage {
button {
align-self: flex-end;
height: 56px;
width: 208px;
font-size: 20px;
line-height: 26px;
@include m-theme() {
background-color: themed($m-aqua);
}
......@@ -177,6 +293,7 @@ m-homepage {
}
.m-marketing__image {
position: initial;
margin: 0 auto;
span {
......@@ -210,18 +327,20 @@ m-homepage {
height: auto !important;
object-fit: initial !important;
max-width: 333px;
max-width: 273px;
min-width: 250px;
width: 100%;
clip-path: none;
@media screen and (min-width: $min-tablet) {
transform: translateY(-25px);
}
@media screen and (max-width: $max-mobile) {
min-width: 333px;
transform: translate(-4px, -17px);
}
}
&::after {
top: 94px;
right: -78px;
}
}
}
}
......@@ -234,6 +353,7 @@ m-homepage {
//width: 50%;
margin-top: 50px;
margin-left: 10px;
& > a:first-child {
margin-right: 5%;
......@@ -277,12 +397,13 @@ m-homepage {
}
.m-homepage__quotation {
margin-top: 116px;
margin-bottom: 161px;
margin-top: 111px;
margin-bottom: 9px;
}
.m-marketing__asFeaturedIn {
margin-top: 45px;
margin-top: 100px;
max-width: 1081px;
}
h1,
......
src/app/modules/homepage/homepage.component.ts
View file @ 92a6332f
import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
import {
Component,
HostListener,
OnDestroy,
OnInit,
ViewChild,
} from '@angular/core';
import { Client } from '../../services/api/client';
import { MindsTitle } from '../../services/ux/title';
import { Router } from '@angular/router';
......@@ -6,12 +12,15 @@ import { Navigation as NavigationService } from '../../services/navigation';
import { LoginReferrerService } from '../../services/login-referrer.service';
import { Session } from '../../services/session';
import { V2TopbarService } from '../../common/layout/v2-topbar/v2-topbar.service';
import { RegisterForm } from '../forms/register/register';
@Component({
selector: 'm-homepage',
templateUrl: 'homepage.component.html',
})
export class HomepageComponent implements OnInit, OnDestroy {
@ViewChild('registerForm', { static: false }) registerForm: RegisterForm;
readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
minds = window.Minds;
......