Skip to content

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

(fix): re-exported cellphone image 

(fix): "Join Minds Now" margins
(fix): updated topbar
(fix): updated $aqua colour and use it instead
parent 505830c2
feat/homepage-redesign
1 merge request!623Homepage redesign
Pipeline #98459842 running with stages
Hide whitespace changes
Inline Side-by-side
Showing with 213 additions and 74 deletions
src/app/common/components/marketing/styles/general.scss
View file @ fd2de775
......@@ -265,7 +265,7 @@
}
.mf-button.mf-button--alt.mf-button--gradient {
background: #4eb69f; /* Old Browsers */
background: #5dbac0; /* Old Browsers */
background: linear-gradient(
45deg,
#4eb69f 0%,
......
src/app/common/layout/v2-topbar/v2-topbar.component.html
View file @ fd2de775
......@@ -35,7 +35,7 @@
<div
class="m-v2-topbar__Top"
[class.m-v2-topbar__noBackground]="!showBackground"
[class.m-v2-topbar__marketingPages]="!showBackground"
>
<div class="m-v2-topbar">
<div class="m-v2-topbar__Container--left">
......@@ -78,11 +78,35 @@
</div>
</ng-container>
<ng-template #loggedOutRightContainer>
<div class="m-v2-topbar__Container__LoginWrapper">
<a routerLink="/login" title="Login" i18n-title>
Login / Signup
</a>
</div>
<ng-container *ngIf="showSeparateLoginBtns; else singleButton">
<div class="m-v2-topbar__Container__LoginWrapper">
<a
class="m-v2-topbarLoginWrapper__login"
routerLink="/login"
title="Login"
i18n-title
>
Login
</a>
<a
class="m-v2-topbarLoginWrapper__joinMindsNow"
routerLink="/login"
title="Join Minds Now"
i18n-title
>
Join Minds Now
</a>
</div>
</ng-container>
<ng-template #singleButton>
<div class="m-v2-topbar__Container__LoginWrapper">
<a routerLink="/login" title="Login" i18n-title>
Login / Signup
</a>
</div>
</ng-template>
</ng-template>
<div class="m-v2-topbar__UserMenu" *ngIf="getCurrentUser()">
......
src/app/common/layout/v2-topbar/v2-topbar.component.scss
View file @ fd2de775
......@@ -27,12 +27,29 @@
width: 100%;
}
&.m-v2-topbar__noBackground {
&.m-v2-topbar__marketingPages {
flex-direction: row;
@include m-theme() {
border: none;
background-color: transparent;
}
.m-v2-topbar {
padding: 15px 0 0;
max-width: 1084px;
margin: 0 auto;
@media screen and (max-width: 1168px) {
margin: 0 25px;
}
.m-v2-topbarNavItem__Logo {
margin: 0;
padding: 0;
}
}
.m-v2-topbar__Container__LoginWrapper > a {
margin-right: 40px;
@include m-theme() {
......@@ -139,7 +156,6 @@
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.m-v2-topbar__Container--left {
......@@ -169,7 +185,7 @@
border-top: 3px solid transparent;
text-decoration: none;
@include m-theme() {
color: themed($m-grey-800);
color: themed($m-grey-800) !important;
}
&.m-v2-topbarNav__Item--active {
......@@ -287,11 +303,41 @@
font-family: 'Roboto', sans-serif;
cursor: pointer;
@include m-theme() {
background-color: themed($m-white);
background-color: themed($m-white);
border: 1px solid themed($m-blue);
color: themed($m-blue);
}
}
> a.m-v2-topbarLoginWrapper__login,
> a.m-v2-topbarLoginWrapper__joinMindsNow {
font-size: 16px;
line-height: 21px;
font-weight: normal;
text-transform: none;
white-space: nowrap;
@include m-theme() {
color: themed($m-grey-800) !important;
}
}
> a.m-v2-topbarLoginWrapper__login {
padding: 0;
border: none !important;
@media screen and(max-width: $max-mobile) {
margin-right: 10px;
}
}
> a.m-v2-topbarLoginWrapper__joinMindsNow {
@include m-theme() {
border: 1px solid themed($m-grey-800) !important;
}
margin-right: 0 !important;
border-radius: 4px;
}
}
.m-v2-topbar__Bottom {
......
src/app/common/layout/v2-topbar/v2-topbar.component.ts
View file @ fd2de775
......@@ -23,6 +23,7 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
timeout;
isTouchScreen = false;
showBackground: boolean = true;
showSeparateLoginBtns: boolean = false;
@ViewChild(DynamicHostDirective, { static: true })
notificationsToasterHost: DynamicHostDirective;
......@@ -60,8 +61,13 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
this.componentInstance = this.componentRef.instance;
}
toggleBackground(value: boolean) {
this.showBackground = value;
/**
* Marketing pages set this to true in order to change how the topbar looks
* @param value
*/
toggleMarketingPages(value: boolean) {
this.showBackground = !value;
this.showSeparateLoginBtns = value;
this.detectChanges();
}
......
src/app/common/layout/v2-topbar/v2-topbar.service.ts
View file @ fd2de775
......@@ -13,9 +13,9 @@ export class V2TopbarService {
return this;
}
toggleBackground(value: boolean) {
toggleMarketingPages(value: boolean) {
if (this.container) {
this.container.toggleBackground(value);
this.container.toggleMarketingPages(value);
}
}
}
src/app/foundation/buttons.scss
View file @ fd2de775
@import './grid-values';
@import '../../stylesheets/themes';
@import 'defaults';
.mf-button {
display: inline-block;
......@@ -63,7 +64,7 @@
}
}
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
display: block;
font-size: 15px;
padding: 12px 15px;
......
src/app/modules/homepage/homepage.component.html
View file @ fd2de775
......@@ -21,14 +21,16 @@
Take back control of your social media.
</p>
<button
class="mf-button mf-button--alt m-homepage__joinButton"
(click)="goToLoginPage()"
*mExperiment="'Homepage121119'; bucket: 'base'"
i18n
>
Join Minds Now
</button>
<ng-container *ngIf="!isMobile()">
<button
class="mf-button mf-button--alt m-homepage__joinButton m-homepage__joinButton--first"
(click)="goToLoginPage()"
*mExperiment="'Homepage121119'; bucket: 'base'"
i18n
>
Join Minds Now
</button>
</ng-container>
<div class="m-homepage__appButtons">
<a
......@@ -44,17 +46,25 @@
<img [src]="cdnAssetsUrl + 'assets/homepage/app-store.png'" />
</a>
</div>
<ng-container *ngIf="isMobile()">
<button
class="mf-button mf-button--alt m-homepage__joinButton"
(click)="goToLoginPage()"
*mExperiment="'Homepage121119'; bucket: 'base'"
i18n
>
Join Minds Now
</button>
</ng-container>
</div>
<div
class="m-grid__column-5 m-grid__column-6--tablet 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 class="m-homepage__cellphone">
<img [src]="cdnAssetsUrl + 'assets/homepage/homepage-1.png'" />
</span>
</div>
......
src/app/modules/homepage/homepage.component.scss
View file @ fd2de775
......@@ -8,47 +8,63 @@ m-homepage {
.m-marketing__main {
&.m-marketing__section--style-2 {
.m-marketing__body {
&::before {
transform: translate(311px, -123px);
clip-path: polygon(57% 0, 100% 0, 100% 15%, 15% 90%);
bottom: -80px;
@include m-theme() {
background: themed($m-amber-medium);
}
.m-marketing__wrapper {
@media screen and (min-width: $max-mobile) and (max-width: $m-grid-min-vp) {
padding: 72px 0 0;
}
.m-homepage__joinButton {
margin-bottom: 120px;
background: #5dbac0 !important;
border-color: #5dbac0 !important;
@media screen and (max-width: $max-mobile) {
padding: 0;
}
&::after {
content: '';
clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 100%);
background: #f5f6ff;
.m-marketing__body {
&::before {
transform: translate(311px, -123px);
clip-path: polygon(57% 0, 100% 0, 100% 15%, 15% 90%);
bottom: -80px;
position: absolute;
bottom: -10px;
left: -140px;
height: 202px;
right: -600px;
@include m-theme() {
background: themed($m-amber-medium);
}
}
z-index: -2;
}
.m-homepage__joinButton {
margin: 60px 0;
@include m-theme() {
background: themed($m-aqua);
border-color: themed($m-aqua) !important;
}
@media screen and (max-width: $max-mobile) {
&::before {
transform: translate(153px, 212px);
clip-path: polygon(69% 0, 100% 0, 100% 28%, 0 90%);
&.m-homepage__joinButton--first {
margin: 0 0 175px;
}
}
&::after {
left: 0;
right: 0;
bottom: -626px;
content: '';
clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 100%);
background: #f5f6ff;
position: absolute;
bottom: -10px;
left: -140px;
height: 202px;
right: -600px;
z-index: -2;
}
@media screen and (max-width: $max-mobile) {
&::before {
transform: translate(153px, 212px);
clip-path: polygon(69% 0, 100% 0, 100% 28%, 0 90%);
}
&::after {
left: 0;
right: 0;
bottom: -626px;
bottom: -698px;
}
}
}
}
......@@ -119,7 +135,9 @@ m-homepage {
button {
align-self: flex-end;
background-color: #5dbac0;
@include m-theme() {
background-color: themed($m-aqua);
}
}
}
}
......@@ -154,6 +172,10 @@ m-homepage {
}
}
.m-homepage__spacer {
margin-bottom: 60px;
}
.m-marketing__image {
margin: 0 auto;
......@@ -162,17 +184,43 @@ m-homepage {
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;
@media screen and (min-width: $min-tablet) {
transform: translateY(-25px);
&.m-homepage__cellphone {
filter: drop-shadow(-1px 0px 8px rgba(50, 50, 0, 0.5));
clip-path: none;
@media screen and (max-width: $max-mobile) {
&::before {
content: '' !important;
display: block;
position: absolute;
width: 393px;
height: 193px;
top: -70px;
//bottom: 190px;
left: -144px;
transform: translate(45px, 32px);
background: url('<%= APP_CDN %>/assets/marketing/deco_2-straight.svg')
no-repeat;
z-index: -1;
}
}
@media screen and (min-width: $max-mobile) {
width: 100% !important;
& > img {
//box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
height: auto !important;
object-fit: initial !important;
max-width: 333px;
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;
}
}
}
}
......
src/app/modules/homepage/homepage.component.ts
View file @ fd2de775
......@@ -40,7 +40,7 @@ export class HomepageComponent implements OnInit, OnDestroy {
this.flags.canPlayInlineVideos = false;
}
this.topbarService.toggleBackground(false);
this.topbarService.toggleMarketingPages(true);
}
ngOnInit() {
......@@ -48,7 +48,7 @@ export class HomepageComponent implements OnInit, OnDestroy {
}
ngOnDestroy() {
this.topbarService.toggleBackground(true);
this.topbarService.toggleMarketingPages(false);
}
goToLoginPage() {
......@@ -75,4 +75,8 @@ export class HomepageComponent implements OnInit, OnDestroy {
tick.classList.remove('m-marketing__imageTick--right');
}
}
isMobile() {
return window.innerWidth < 480;
}
}
src/assets/homepage/homepage-1.png
View replaced file @ 505830c2 View file @ fd2de775
src/assets/homepage/homepage-1.png

101 KB | W: 333px | H: 608px

src/assets/homepage/homepage-1.png

345 KB | W: 546px | H: 1096px

  • 2-up
  • Swipe
  • Onion skin
src/stylesheets/themes.scss
View file @ fd2de775
......@@ -67,7 +67,7 @@ $blue-light: #71aae7;
$green-dark: #388e3c;
$green: #4caf50;
$green-light: #8bc34a;
$aqua: #4fc3a9;
$aqua: #5dbac0;
$amber-dark: #ffa000;
$amber: #ffc108;
$amber-medium: #fed12f;
......
Please register or to comment