Skip to content

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

(feat): stylings for tablets

parent 9e1a8a28
feat/homepage-redesign
1 merge request!623WIP: Homepage redesign
Pipeline #96719266 failed with stages
in 6 minutes and 27 seconds
Hide whitespace changes
Inline Side-by-side
Showing with 160 additions and 57 deletions
src/app/common/components/marketing/marketing.component.scss
View file @ dec3617e
......@@ -3,6 +3,7 @@
m-marketing {
display: block;
font-family: Roboto, sans-serif;
overflow: hidden;
@include m-theme() {
background: themed($m-white);
......
src/app/common/components/marketing/styles/general.scss
View file @ dec3617e
......@@ -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 @ dec3617e
......@@ -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;
......@@ -76,7 +76,14 @@
p.m-marketing__description {
margin-bottom: 42px;
padding-right: 200px;
@media screen and(min-width: $min-tablet) {
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 +93,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 +112,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 +138,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 +157,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-3.scss
View file @ dec3617e
......@@ -5,7 +5,7 @@
&.m-marketing__section--style-3 {
margin-bottom: 100px;
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
margin-bottom: 80px;
}
......@@ -14,7 +14,7 @@
z-index: 0;
padding: 80px 0 80px;
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
padding: 0;
}
}
......@@ -25,7 +25,7 @@
padding: 0;
min-height: 330px;
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
padding: 0 30px 0;
min-height: 0;
}
......@@ -50,7 +50,7 @@
);
}
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
content: initial;
display: none;
}
......@@ -61,7 +61,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: 20px 0 17px;
......@@ -72,7 +72,10 @@
p.m-marketing__description {
margin-bottom: 42px;
padding-right: 200px;
@media screen and(min-width: $min-tablet) {
padding-right: 200px;
}
@include m-theme() {
color: themed($m-grey-300);
......@@ -82,7 +85,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;
......@@ -126,7 +129,12 @@
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: $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% 100%, 100% 97%, 100% 0%);
......@@ -142,7 +150,7 @@
bottom: 35px;
transform: translate(15px, 0);
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
right: auto;
left: 50%;
bottom: 0;
......@@ -157,7 +165,7 @@
position: relative;
width: 100%;
@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
......@@ -182,7 +190,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 @ dec3617e
......@@ -45,9 +45,10 @@
p.m-marketing__description {
margin-bottom: 42px;
padding-right: 200px;
margin-bottom: 42px;
@media screen and(min-width: $min-tablet) {
padding-right: 200px;
}
@media screen and (max-width: $m-grid-min-vp) {
margin-bottom: 30px;
......@@ -56,12 +57,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,
......@@ -109,17 +114,22 @@
position: relative;
z-index: 0;
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
grid-row: 1;
}
//
img.m-marketing__image--1 {
object-fit: cover;
width: 438px;
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 +146,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 +167,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 @ dec3617e
......@@ -5,7 +5,7 @@
&.m-marketing__section--style-5 {
margin-bottom: 100px;
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
margin-bottom: 80px;
}
......@@ -14,7 +14,7 @@
z-index: 0;
padding: 80px 0 80px;
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
padding: 0;
}
}
......@@ -23,7 +23,7 @@
position: relative;
padding: 95px 0 0;
@media screen and (max-width: $m-grid-min-vp) {
@media screen and (max-width: $max-mobile) {
padding: 0 30px 0;
}
......@@ -32,7 +32,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;
......@@ -43,7 +43,10 @@
p.m-marketing__description {
margin-bottom: 42px;
padding-right: 200px;
@media screen and(min-width: $min-tablet) {
padding-right: 200px;
}
@include m-theme() {
color: themed($m-grey-300);
......@@ -53,7 +56,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;
......@@ -97,7 +100,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 +120,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;
......@@ -128,7 +139,7 @@
position: relative;
width: 100%;
@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
......@@ -153,7 +164,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/foundation/grid-values.scss
View file @ dec3617e
$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 @ dec3617e
@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 @ dec3617e
......@@ -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,10 +218,10 @@
<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-grid__column-12 m-marketing__body">
<h3 class="m-marketingTitle__centered" i18n>
Take back control of your social media
</h3>
<div class="m-marketing__actionButtons">
<button
......
src/app/modules/homepage/homepage.component.scss
View file @ dec3617e
......@@ -63,6 +63,7 @@ m-homepage {
}
.m-marketing__image {
margin: 0 auto;
span {
&::before {
content: initial !important;
......@@ -73,7 +74,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;
}
}
}
}
......@@ -135,14 +142,16 @@ m-homepage {
h1,
h2,
h3,
h3:not(.m-marketingTitle__centered),
.m-marketing__description {
text-align: left !important;
}
@media screen and(max-width: $max-mobile) {
display: block;
margin-top: 55px;
h1.m-homepage__minds {
margin-top: 55px;
margin-top: 100px;
}
}
}
src/app/modules/homepage/homepage.component.ts
View file @ dec3617e
......@@ -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,7 +41,9 @@ export class HomepageComponent implements OnDestroy {
if (/iP(hone|od)/.test(window.navigator.userAgent)) {
this.flags.canPlayInlineVideos = false;
}
}
ngOnInit() {
this.onResize();
}
......@@ -63,6 +65,17 @@ export class HomepageComponent implements OnDestroy {
@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) {
......
Please register or to comment