Skip to content
Commits on Source (2)
Hide whitespace changes
Inline Side-by-side
src/app/modules/mobile/marketing/marketing.component.html
View file @ 357faf4a
<div class="m-marketing m-mobile--marketing">
<!--Top / Hero -->
<div class="m-marketing--hero">
<div class="m-marketing--hero--video">
<img [src]="minds.cdn_assets_url + 'assets/photos/circles.png'">
</div>
<div class="m-marketing--hero--inner">
<div class="m-marketing--hero--slogans">
<h2>
Minds Android App
</h2>
<h1>
Minds Mobile App
</h1>
</div>
<div class="m-marketing--hero--actions">
<i class="material-icons m-mobile__giantDroid">android</i>
<!-- Space for an icon -->
</div>
</div>
</div>
<section class="m-marketing--section mdl-color--white" style="padding-bottom: 0; padding-top: 0">
<div class="m-marketing--downloadPlatform">
<h2>
For Android:
</h2>
<!--Android APK -->
<div class="m-marketing--downloadOption">
<div class="m-marketing--downloadButton">
<a [href]="latestRelease.href" target="_blank"><img [src]="minds.cdn_assets_url + 'assets/marketing/mobile-dl-button.png'"/></a>
<span>(recommended)</span>
</div>
<p>Download the mobile app directly from Minds for the best experience. All content is accessible.
<p>In order to install this version you must:</p>
<ul>
<li>Update Phone settings to "enable downloads from unverified source"</li>
<li>Download and install!</li>
</ul>
</div>
<!--Play Store -->
<div class="m-marketing--downloadOption">
<div class="m-marketing--downloadButton">
<a href='https://play.google.com/store/apps/details?id=com.minds.mobile&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1' target="_blank"><img alt='Get it on Google Play' src='https://play.google.com/intl/en_gb/badges/images/generic/en_badge_web_generic.png'/></a>
</div>
<p>You may also download the mobile app from the Google Play Store. Due to the Google Play Store terms of service, NSFW content is not accessible in this version.</p>
</div>
</div>
<!--iOS Download -->
<div class="m-marketing--downloadPlatform">
<h2>
For iPhone:
</h2>
<div class="m-marketing--downloadOption">
<div class="m-marketing--downloadButton m-marketing--downloadButton--iOS">
<a href="https://geo.itunes.apple.com/us/app/minds-com/id961771928?mt=8&amp;uo=6" target="_blank"><img alt="iOS App" src="https://devimages-cdn.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-app-store.svg"></a>
</div>
<p>iPhone users may download the mobile app directly from the iOS App Store. All features of the Minds Token (wallet, boost, wire, etc) are not currently supported in this version. All content is accessible.</p>
</div>
</div>
<div class="m-marketing--section--subsection m-marketing--section--subsection--first">
<div class="m-marketing--section--subsection-container">
<div class="m-marketing--section--subsection-left m-marketing--section--subsection-text">
<div class="mdl-grid">
<h2>
Release History:
</h2>
<div class="mdl-cell mdl-cell--12-col m-mobile--marketing--spinner" *ngIf="inProgress">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</div>
......@@ -43,7 +75,6 @@
<ng-container *ngIf="release.unstable">Canary -</ng-container>
{{release.version}}
</h2>
<p>Released: {{release.timestamp * 1000 | date:'longDate'}} -
<a [href]="release.href" target="_blank">
Download
......
src/app/modules/mobile/marketing/marketing.component.scss
View file @ 357faf4a
.m-mobile--marketing {
.m-marketing--hero {
padding:52px 0 !important;
margin-bottom: 32px;
padding: 0;
@media screen and (min-width: $max-mobile) {
padding:52px 0 !important;
}
.m-marketing--hero--inner {
padding-top: 52px;
padding-bottom: 52px;
flex-wrap: wrap;
padding: 52 0 52 0;
.m-marketing--hero--slogans h1 {
text-align: left;
padding-left: $minds-padding * 2;
font-size: xx-large;
font-weight: 700;
@media screen and (min-width: $min-tablet) {
margin-left: 120px;
font-size: 42px;
}
@include m-theme(){
color: themed($m-white-always);
}
}
}
img {
......@@ -24,7 +41,31 @@
}
.m-marketing--section--subsection--first .m-marketing--section--subsection-container {
padding-top: 32px !important;
padding-top: 0;
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
width: 100%;
@media screen and (min-width: $min-tablet) {
width: unset;
margin: 0 25%;
}
.m-marketing--section--subsection-text {
max-width: 100%;
min-width: 100%;
margin: 0;
padding: 0;
h2 {
text-align: left;
font-size: x-large;
font-weight: 700;
padding: $minds-padding * 1.5 0;
margin: 0 0 ($minds-padding * 2) ($minds-padding * 2);
}
}
}
.m-marketing--hero--actions img {
......@@ -47,6 +88,72 @@
}
}
.m-marketing--section {
text-align: left;
margin-left: $minds-padding * 2;
h2 {
text-align: left;
font-size: x-large;
font-weight: 700;
padding-left: 12px;
}
.m-marketing--downloadPlatform {
@media screen and (min-width: $min-tablet) {
margin: 0 25%;
}
.m-marketing--downloadOption {
padding-bottom: $minds-padding * 2;
@media screen and (max-width: $min-tablet) {
padding-bottom: $minds-padding * 1;
}
.m-marketing--downloadButton--iOS {
img {
padding-left: 14px;
}
}
.m-marketing--downloadButton {
display: flex;
flex-wrap: wrap;
padding-bottom: $minds-padding * 4;
@media screen and (max-width: $min-tablet) {
padding-bottom: $minds-padding * 2;
}
img {
max-width: 200px;
min-width: 175px;
}
}
span {
font-size: large;
align-self: center;
padding-left: $minds-padding * 2;
font-weight: 400;
}
p {
padding: 0 ($minds-padding * 1.5);
line-height: 24pt;
@include m-theme(){
color: themed($m-grey-600);
}
}
li {
@include m-theme(){
color: themed($m-grey-600);
}
}
}
}
}
@media screen and (min-width: 500px) {
.m-marketing--hero--slogans h2 {
font-size: 60px !important;
......@@ -94,10 +201,3 @@
}
}
.m-mobile__giantDroid {
font-size: 152px;
@include m-theme(){
color: themed($m-white);
}
}
src/app/modules/mobile/marketing/marketing.component.ts
View file @ 357faf4a
......@@ -2,6 +2,7 @@ import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/co
import {MindsTitle} from '../../../services/ux/title';
import {Session} from '../../../services/session';
import {MobileService} from "../mobile.service";
import { first } from 'lodash';
@Component({
selector: 'm-mobile--marketing',
......@@ -15,6 +16,9 @@ export class MobileMarketingComponent {
releases: any[] = [];
inProgress: boolean = false;
error: string;
latestRelease: any = {
href: null,
};
constructor(
protected title: MindsTitle,
......@@ -26,18 +30,20 @@ export class MobileMarketingComponent {
ngOnInit() {
this.title.setTitle('Mobile');
this.user = this.session.getLoggedInUser();
this.load();
}
/**
* Gets releases for view.
*/
async load() {
try {
this.inProgress = true;
this.detectChanges();
this.releases = await this.service.getReleases();
this.latestRelease = await first(this.releases.filter(rel => rel.latest && !rel.unstable));
} catch (e) {
console.error(e);
this.error = e.message || 'Unknown error';
......
src/assets/marketing/mobile-dl-button.png 0 → 100644
View file @ 357faf4a
File suppressed by a .gitattributes entry or the file's encoding is unsupported.