Commit fddc4285 authored by Eugen Rochko's avatar Eugen Rochko

Add "browse apps" page

parent 860aa796
......@@ -11,6 +11,7 @@ const defaultParams = {
min_active_users: '1',
sort_by: 'active_users',
sort_order: 'desc',
include_opt_out: 'false',
};
const categories = [
......
......@@ -8,6 +8,7 @@ import classNames from 'classnames';
import Home from './Home';
import Sponsorship from './Sponsorship';
import Imprint from './Imprint';
import BrowseApps from './BrowseApps';
import ScrollToTop from './ScrollToTop';
import Title from './Title';
......@@ -39,6 +40,7 @@ const App = ({ usersLocale }) => (
<Route exact path='/' component={Home} />
<Route path='/sponsors' component={Sponsorship} />
<Route path='/imprint' component={Imprint} />
<Route path='/apps' component={BrowseApps} />
<Title />
</div>
</ScrollToTop>
......
import React from 'react';
import { FormattedMessage } from 'react-intl';
import Navigation from './Navigation';
import Legal from './Legal';
import tusky from './assets/apps/tusky.png';
import subwayTooter from './assets/apps/subway-tooter.png';
import pawoo from './assets/apps/pawoo.jpg';
import mastalab from './assets/apps/mastalab.png';
import amaroq from './assets/apps/amaroq.jpg';
const apps = {
android: [
{
name: 'Tusky',
icon: tusky,
url: 'https://play.google.com/store/apps/details?id=com.keylesspalace.tusky',
},
{
name: 'Subway Tooter',
icon: subwayTooter,
url: 'https://play.google.com/store/apps/details?id=jp.juggler.subwaytooter',
},
{
name: 'Mastalab',
icon: mastalab,
url: 'https://play.google.com/store/apps/details?id=fr.gouv.etalab.mastodon',
},
{
name: 'Pawoo',
icon: pawoo,
url: 'https://play.google.com/store/apps/details?id=jp.pxv.pawoo',
},
],
ios: [
{
name: 'Amaroq',
icon: amaroq,
url: 'https://itunes.apple.com/us/app/amarok-for-mastodon/id1214116200?ls=1&mt=8',
},
{
name: 'Pawoo',
icon: pawoo,
url: 'https://itunes.apple.com/us/app/pawoo/id1229070679',
},
],
};
const renderApp = ({ name, icon, paid, url }) => (
<div className='app-grid__item' key={name}>
<a href={url} target='_blank'>
<img src={icon} alt={name} className='app-grid__item__icon' />
<div className='app-grid__item__text'>
<strong>{name}</strong>
<span className='app-grid__item__tag'>{paid ? <FormattedMessage id='apps.paid' defaultMessage='Paid' /> : <FormattedMessage id='apps.free' defaultMessage='Free' />}</span>
</div>
</a>
</div>
);
const BrowseApps = () => (
<div className='browse-apps'>
<Navigation />
<div className='container'>
<h1><FormattedMessage id='browse_apps.title' defaultMessage='Browse apps' /></h1>
<p className='lead'><FormattedMessage id='browse_apps.lead' defaultMessage='You can use Mastodon with any of these apps!' /></p>
<hr />
<h2>Android</h2>
<div className='app-grid'>
{apps.android.map(renderApp)}
</div>
<h2>iOS</h2>
<div className='app-grid'>
{apps.ios.map(renderApp)}
</div>
<Legal />
</div>
</div>
);
export default BrowseApps;
......@@ -25,8 +25,9 @@ const Navigation = () => (
</ul>
<ul className='right'>
<li><Link to='/apps'><FormattedMessage id='nav.apps' defaultMessage='Apps' /></Link></li>
<li><Link to='/sponsors'><FormattedMessage id='nav.sponsors' defaultMessage='Sponsors' /></Link></li>
<li><a href='https://github.com/tootsuite/mastodon'><FormattedMessage id='nav.code' defaultMessage='Source code' /></a></li>
<li><a href='https://github.com/tootsuite/mastodon'><FormattedMessage id='nav.code' defaultMessage='Code' /></a></li>
<li><Dropdown asLinks label={<FormattedMessage id='nav.resources' defaultMessage='Resources' />} options={options} /></li>
<li><LanguageSelectContainer /></li>
</ul>
......
......@@ -11,3 +11,4 @@
@import 'scss/Sponsorship.scss';
@import 'scss/LanguageSelect.scss';
@import 'scss/Features.scss';
@import 'scss/BrowseApps.scss';
......@@ -39,9 +39,9 @@
"how_it_works.robust_text": "The network is resistant to financial, technical and organizational issues, as well as government interference, due to its diversified nature.",
"how_it_works.server": "Each server is independent",
"how_it_works.server_text": "Mastodon is free, open-source software that anyone can install on a server. Independent operation, independent rules.",
"imprint": "Imprint",
"imprint": "Legal notice",
"nav.blog": "Blog",
"nav.code": "Source code",
"nav.code": "Code",
"nav.docs": "Documentation",
"nav.merch": "Merch",
"nav.resources": "Resources",
......@@ -82,4 +82,4 @@
"wizard_row.stability.intermittent": "Intermittent",
"wizard_row.stability.stable": "Stable",
"wizard_row.user_count": "{population} {count, plural, one {person} other {people}}"
}
\ No newline at end of file
}
@import './variables.scss';
.browse-apps {
padding-top: 15px;
.navbar {
margin-bottom: 160px;
}
h1 {
font-weight: 500;
font-size: 21px;
color: $lightest;
}
p.lead {
font-size: 16px;
color: $lighter;
}
hr {
clear: both;
height: 0;
border: 0;
border: 1px solid lighten($darkest, 8%);
margin: 20px 0;
}
h2 {
font-weight: 700;
margin-bottom: 30px;
}
}
.app-grid {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
margin-bottom: 20px;
&__item {
box-sizing: border-box;
flex: 0 0 auto;
padding: 0 5px;
margin-bottom: 10px;
width: 205px;
a {
display: block;
padding: 10px;
background: lighten($darkest, 8%);
border-radius: 4px;
display: flex;
align-items: center;
color: $lightest;
text-decoration: none;
&:hover,
&:focus,
&:active {
background: lighten($darkest, 12%);
}
}
img {
width: 60px;
height: 60px;
margin-right: 12px;
border-radius: 4px;
}
&__text {
strong {
display: block;
color: $lightest;
font-size: 16px;
font-weight: 700;
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
&__tag {
background: $darkest;
text-transform: uppercase;
color: $lighter;
font-size: 12px;
padding: 2px 4px;
border-radius: 4px;
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment