1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00

Merged in AD-997-prepare-landing-page (pull request #67)

Finish styling for landing page
This commit is contained in:
TimDaubenschuetz 2015-09-18 14:54:11 +02:00
commit 4f55c63cf5
6 changed files with 61 additions and 15 deletions

View File

@ -27,7 +27,7 @@ let PrizeApp = React.createClass({
} }
return ( return (
<div className="container ascribe-prize-app"> <div className={'container ascribe-prize-app client--' + subdomain}>
{header} {header}
<RouteHandler /> <RouteHandler />
<GlobalNotification /> <GlobalNotification />

View File

@ -32,13 +32,13 @@ let IkonotvLanding = React.createClass({
if(this.state.currentUser && this.state.currentUser.email) { if(this.state.currentUser && this.state.currentUser.email) {
return ( return (
<ButtonLink to="pieces"> <ButtonLink to="pieces">
{getLangText('ENTER')} {getLangText('ENTER TO START')}
</ButtonLink> </ButtonLink>
); );
} else { } else {
return ( return (
<ButtonLink to="signup"> <ButtonLink to="signup">
{getLangText('ENTER')} {getLangText('ENTER TO START')}
</ButtonLink> </ButtonLink>
); );
} }
@ -51,11 +51,13 @@ let IkonotvLanding = React.createClass({
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono_tv.png" /> <img src="https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono_tv.png" />
<div className="tagline"> <div className="tagline">
<h1>PROTECT</h1> <h1>PROTECT</h1>
<img src="http://placehold.it/600x300" /> <div className="poster">
<div className="content">
</div>
</div>
<h1>& SHARE</h1> <h1>& SHARE</h1>
</div> </div>
<h2>Welcome to the ikonoTV</h2> <h2>Welcome to the ikonoTV<br />Registration Page</h2>
<h2>Registration Page</h2>
</header> </header>
<article> <article>
<section> <section>

View File

@ -8,15 +8,19 @@ import Footer from '../../footer';
import GlobalNotification from '../../global_notification'; import GlobalNotification from '../../global_notification';
import getRoutes from './wallet_routes'; import getRoutes from './wallet_routes';
import classNames from 'classnames';
let RouteHandler = Router.RouteHandler; let RouteHandler = Router.RouteHandler;
let WalletApp = React.createClass({ let WalletApp = React.createClass({
mixins: [Router.State], mixins: [Router.State],
render() { render() {
let subdomain = window.location.host.split('.')[0]; let subdomain = window.location.host.split('.')[0];
let ROUTES = getRoutes(null, subdomain); let ROUTES = getRoutes(null, subdomain);
let activeRoutes = this.getRoutes().map(elem => 'route--' + elem.name);
let header = null; let header = null;
if ((this.isActive('landing') || this.isActive('login') || this.isActive('signup')) if ((this.isActive('landing') || this.isActive('login') || this.isActive('signup'))
@ -28,7 +32,7 @@ let WalletApp = React.createClass({
} }
return ( return (
<div className="container ascribe-prize-app"> <div className={classNames('container', 'ascribe-wallet-app', 'client--' + subdomain, activeRoutes)}>
{header} {header}
<RouteHandler /> <RouteHandler />
<GlobalNotification /> <GlobalNotification />

View File

@ -1,2 +1,3 @@
@import 'prize/index'; @import 'prize/index';
@import 'wallet/index';
@import 'wallet/ikonotv/ikonotv_landing'; @import 'wallet/ikonotv/ikonotv_landing';

View File

@ -1,11 +1,23 @@
.client--ikonotv.route--landing {
background-color: #c40050;
margin: 0;
width: 100%;
padding: 5em 1em;
}
.client--ikonotv .ascribe-login-wrapper {
}
.client--ikonotv.route--landing .ascribe-footer {
display: none;
}
.ikonotv-landing { .ikonotv-landing {
/* center all text on the page */ /* center all text on the page */
text-align: center; text-align: center;
background-color: #c40050;
color: white; color: white;
padding: 5em 5em 5em 5em;
header { header {
/* center all images on the page */ /* center all images on the page */
img { img {
@ -16,7 +28,7 @@
/* Ikonotv logo */ /* Ikonotv logo */
img:first-child { img:first-child {
width: 200px; max-width: 200px;
} }
> .tagline { > .tagline {
@ -29,12 +41,30 @@
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
@media only screen and (max-width: 600px) {
font-size: 4em;
}
}
> .poster {
max-width: 600px;
margin: 0 auto;
> .content {
width: 100%;
padding-bottom: 56.25%;
height: 0;
background-color: #ffff00;
}
} }
} }
> h2 { > h2 {
font-weight: 600; font-weight: 600;
font-size: 2.75em; font-size: 2.75em;
@media only screen and (max-width: 600px) {
font-size: 1.75em;
}
} }
> h2 + h2 { > h2 + h2 {
@ -44,7 +74,8 @@
article { article {
> section { > section {
width: 65%; width: 100%;
max-width: 60em;
margin: 3em auto 1em auto; margin: 3em auto 1em auto;
> h1 { > h1 {
@ -57,6 +88,9 @@
text-align: left; text-align: left;
font-size: 1.3em; font-size: 1.3em;
line-height: 1.8; line-height: 1.8;
@media only screen and (max-width: 600px) {
font-size: 1.1em;
}
} }
} }
} }

View File

@ -0,0 +1,5 @@
.ascribe-wallet-app {
border-radius: 0;
padding-top: 70px;
min-height: 100vh;
}