Skip to content

Minds Frontend
Minds Frontend
Source
...
Target
 
Commits (2)
Hide whitespace changes
Inline Side-by-side
Showing with 141 additions and 38 deletions
src/app/common/components/marketing/styles/general.scss
View file @ 701bc989
......@@ -194,7 +194,7 @@
z-index: 3;
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
width: 10vw;
height: 10vw;
......@@ -207,7 +207,31 @@
bottom: 8px;
left: -45px;
@media screen and (max-width: $m-grid-min-vp) {
@media screen and(min-width: $max-mobile) and (max-width: $m-grid-min-vp) {
bottom: -23%;
left: 8.5%;
}
@media screen and (max-width: $max-mobile) {
//bottom: -116px;
//left: 2px;
bottom: -27%;
left: 2.5%;
}
}
.m-marketing__imageTick--right {
position: absolute;
bottom: 8px;
left: -45px;
@media screen and(min-width: $max-mobile) and (max-width: $m-grid-min-vp) {
bottom: 0;
right: 0;
left: auto;
}
@media screen and (max-width: $max-mobile) {
//bottom: -116px;
//left: 2px;
bottom: -27%;
......
src/app/common/components/marketing/styles/style-2.scss
View file @ 701bc989
......@@ -41,7 +41,7 @@
);
}
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
right: 0;
bottom: -3vw;
transform: none;
......@@ -54,7 +54,7 @@
color: #ffffff;
}
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
margin: 15px 0 15px;
text-align: center;
}
......@@ -65,7 +65,7 @@
color: #ffffff;
}
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
font-size: 28px;
line-height: 32px;
margin: 0 0 17px;
......@@ -78,6 +78,10 @@
margin-bottom: 42px;
padding-right: 200px;
@media screen and(min-width:$max-mobile) and (max-width: $m-grid-min-vp) {
padding-right: 0;
}
@include m-theme() {
color: themed($m-grey-300);
}
......@@ -86,7 +90,7 @@
color: #ffffff;
}
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
padding-right: 0;
margin-bottom: 30px;
font-size: 16px;
......@@ -105,7 +109,7 @@
height: 547px;
clip-path: polygon(0% 1%, 0% 97%, 100% 100%, 100% 0%);
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
width: 100vw;
height: 100vw;
clip-path: polygon(0% 2%, 0% 97%, 100% 100%, 100% 0%);
......@@ -131,7 +135,7 @@
no-repeat;
z-index: -1;
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
content: initial;
display: none;
}
......@@ -150,7 +154,7 @@
no-repeat;
z-index: -1;
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
content: initial;
display: none;
}
......
src/app/common/components/marketing/styles/style-4.scss
View file @ 701bc989
......@@ -56,12 +56,16 @@
}
ol.m-marketing__description {
padding-right: 100px;
padding-left: 16px;
& > li {
margin-bottom: 16px;
}
@media screen and(min-width: $m-grid-min-vp),
screen and (max-width: $max-mobile) {
padding-right: 100px;
}
}
ol.m-marketing__description > li,
......@@ -119,7 +123,12 @@
height: 547px;
clip-path: polygon(0% 1%, 0% 96%, 100% 100%, 100% 0%);
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (min-width: $max-mobile) and (max-width: $m-grid-min-vp) {
width: 100%;
height: auto;
}
@media screen and (max-width: $max-mobile) {
width: 100vw;
height: 100vw;
clip-path: polygon(0% 1%, 0% 97%, 100% 100%, 100% 0%);
......@@ -136,7 +145,12 @@
transform: translate(-15px, 0);
z-index: 2;
@media screen and (max-width: $m-grid-min-vp) {
@media screen and(min-width: $max-mobile) and (max-width: $m-grid-min-vp) {
width: 100%;
height: auto;
}
@media screen and (max-width: $max-mobile) {
right: auto;
left: 50%;
bottom: 0;
......@@ -152,7 +166,7 @@
width: 100%;
text-align: right;
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
margin-bottom: calc(
20vw + 40px
); // A little bit less than half UX image + normal margin
......
src/app/common/components/marketing/styles/style-5.scss
View file @ 701bc989
......@@ -97,7 +97,11 @@
height: 518px;
clip-path: polygon(0% 1%, 0% 100%, 100% 96%, 100% 0%);
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (min-width: $max-mobile) and (max-width: $min-desktop) {
width: 100%;
}
@media screen and (max-width: $max-mobile) {
width: 100vw;
height: 100vw;
clip-path: polygon(0% 1%, 0% 100%, 100% 97%, 100% 0%);
......@@ -113,7 +117,11 @@
bottom: 35px;
transform: translate(15px, 0);
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (min-width: $max-mobile) and (max-width: $min-desktop) {
width: 100%;
}
@media screen and (max-width: $max-mobile) {
right: auto;
left: 50%;
bottom: 0;
......
src/app/foundation/grid-values.scss
View file @ 701bc989
$m-grid-min-vp: 1168px;
$m-grid-min-mobile: 480px;
$m-grid-cols: 12;
$m-grid-gap: 20px;
src/app/foundation/grid.scss
View file @ 701bc989
@import './grid-values';
@import '../../stylesheets/defaults';
.m-grid {
display: grid;
......@@ -15,7 +16,18 @@
}
}
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $min-desktop) {
@for $i from 1 through $m-grid-cols {
.m-grid__column-#{$i}--tablet {
grid-column: auto / span $i;
}
.m-grid__column__skip-#{$i}--tablet {
grid-column-start: $i !important;
}
}
}
@media screen and (max-width: $max-mobile) {
@for $i from 1 through $m-grid-cols {
.m-grid__column-#{$i}--mobile {
grid-column: auto / span $i;
......
src/app/modules/homepage/homepage.component.html
View file @ 701bc989
......@@ -3,7 +3,9 @@
<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">
<div
class="m-grid__column-7 m-grid__column-7--tablet m-grid__column-12--mobile m-marketing__body"
>
<h1 i18n>Minds <span class="m-homepage__yellowLine"></span></h1>
<h2 ngPreserveWhitespaces i18n>
......@@ -36,7 +38,7 @@
</div>
<div
class="m-grid__column-5 m-grid__column-12--mobile m-marketing__image"
class="m-grid__column-5 m-grid__column-5--tablet m-grid__column-12--mobile m-marketing__image"
*mExperiment="'Homepage121119'; bucket: 'base'"
>
<span>
......@@ -64,7 +66,7 @@
<div class="m-marketing__section m-homepage__quotation">
<div class="m-grid m-marketing__wrapper">
<div
class="m-grid__column-12 m-grid__column-10--mobile m-grid__column__skip-2--mobile m-marketing__body"
class="m-grid__column-12 m-grid__column-10--mobile m-grid__column-10--tablet m-grid__column__skip-2--tablet m-grid__column__skip-2--mobile m-marketing__body"
>
<div class="m-marketing__quotation">
<h3>“Minds is the anti-Facebook that pays you for your time.”</h3>
......@@ -77,7 +79,7 @@
<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"
class="m-grid__column-6 m-grid__column-6--tablet m-grid__column-12--mobile m-marketing__body"
>
<h2 i18n>How does it work?</h2>
......@@ -110,7 +112,7 @@
</div>
</div>
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
class="m-grid__column-6 m-grid__column-6--tablet m-grid__column-12--mobile m-marketing__image"
>
<span>
<img
......@@ -127,7 +129,7 @@
<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"
class="m-grid__column-6 m-grid__column-6--tablet m-grid__column-12--mobile m-marketing__body"
>
<h2 i18n>Our principles</h2>
......@@ -156,7 +158,7 @@
</ol>
</div>
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
class="m-grid__column-6 m-grid__column-6--tablet m-grid__column-12--mobile m-marketing__image"
>
<span>
<img
......@@ -183,7 +185,7 @@
<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"
class="m-grid__column-6 m-grid__column-6--tablet m-grid__column-12--mobile m-marketing__body"
>
<h2 i18n>Open Discourse</h2>
......@@ -200,7 +202,7 @@
</p>
</div>
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
class="m-grid__column-6 m-grid__column-6--tablet m-grid__column-12--mobile m-marketing__image"
>
<span>
<img
......@@ -216,9 +218,7 @@
<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"
>
<div class="m-grid__column-12 m-marketing__body">
<h3 i18n>Take back control of your social media</h3>
<div class="m-marketing__actionButtons">
......
src/app/modules/homepage/homepage.component.scss
View file @ 701bc989
@import 'defaults';
m-homepage {
m-marketing {
overflow: hidden;
}
.m-marketing__main {
&.m-marketing__section--style-2 {
.m-marketing__body {
......@@ -73,7 +76,13 @@ m-homepage {
height: auto !important;
object-fit: initial !important;
width: 333px !important;
transform: translateY(-25px);
@media screen and (min-width: $min-tablet) {
transform: translateY(-25px);
}
@media screen and (min-width: $max-mobile) {
width: 100% !important;
}
}
}
}
......@@ -88,7 +97,7 @@ m-homepage {
margin-top: 50px;
@media screen and(max-width: $m-grid-min-vp) {
@media screen and(max-width: $max-mobile) {
width: 100%;
& > a:not(:first-child) {
margin-left: 18px;
......@@ -119,7 +128,7 @@ m-homepage {
.m-homepage__joinMindsNow {
max-width: 90%;
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
max-width: 100%;
}
}
......@@ -133,13 +142,18 @@ m-homepage {
margin-top: 45px;
}
h1,
h2,
h3,
.m-marketing__description {
text-align: left !important;
}
}
.m-homepage {
margin-top: -52px;
@media screen and(max-width: $max-mobile) {
display: block;
margin-top: 55px;
h1.m-homepage__minds {
margin-top: 100px;
}
}
}
src/app/modules/homepage/homepage.component.ts
View file @ 701bc989
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
import { Client } from '../../services/api/client';
import { MindsTitle } from '../../services/ux/title';
import { Router } from '@angular/router';
......@@ -10,7 +10,7 @@ import { Session } from '../../services/session';
selector: 'm-homepage',
templateUrl: 'homepage.component.html',
})
export class HomepageComponent implements OnDestroy {
export class HomepageComponent implements OnInit, OnDestroy {
readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
topbar: HTMLElement;
......@@ -41,12 +41,14 @@ export class HomepageComponent implements OnDestroy {
if (/iP(hone|od)/.test(window.navigator.userAgent)) {
this.flags.canPlayInlineVideos = false;
}
}
this.topbar.classList.add('m-v2-topbar__noBackground');
ngOnInit() {
this.onResize();
}
ngOnDestroy() {
this.topbar.classList.remove('m-v2-topbar__noBackground');
this.toggleTopbarBackground(false);
}
goToLoginPage() {
......@@ -59,4 +61,28 @@ export class HomepageComponent implements OnDestroy {
'/' + this.session.getLoggedInUser().username + ';onboarding=1',
});
}
@HostListener('window:resize')
onResize() {
this.toggleTopbarBackground(window.innerWidth > 640);
const tick: HTMLSpanElement = document.querySelector(
'.m-marketing__imageUX > .m-marketing__imageTick'
);
if (window.innerWidth > 480 && window.innerWidth < 1168) {
tick.classList.remove('m-marketing__imageTick--left');
tick.classList.add('m-marketing__imageTick--right');
} else {
tick.classList.add('m-marketing__imageTick--left');
tick.classList.remove('m-marketing__imageTick--right');
}
}
toggleTopbarBackground(value: boolean) {
if (value) {
this.topbar.classList.add('m-v2-topbar__noBackground');
} else {
this.topbar.classList.remove('m-v2-topbar__noBackground');
}
}
}