From b76ffcde73cd941d0f8137c92818a1e373ba7602 Mon Sep 17 00:00:00 2001 From: vrde Date: Fri, 18 Sep 2015 13:46:15 +0200 Subject: [PATCH 1/3] Finish styling for landing page --- js/components/whitelabel/prize/prize_app.js | 2 +- .../components/ikonotv/ikonotv_landing.js | 14 +++--- js/components/whitelabel/wallet/wallet_app.js | 5 ++- .../wallet/ikonotv/ikonotv_landing.scss | 43 ++++++++++++++++--- 4 files changed, 50 insertions(+), 14 deletions(-) diff --git a/js/components/whitelabel/prize/prize_app.js b/js/components/whitelabel/prize/prize_app.js index 29763ab3..f187dd1c 100644 --- a/js/components/whitelabel/prize/prize_app.js +++ b/js/components/whitelabel/prize/prize_app.js @@ -27,7 +27,7 @@ let PrizeApp = React.createClass({ } return ( -
+
{header} diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js index 1e2d3803..293eecdd 100644 --- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js @@ -32,13 +32,13 @@ let IkonotvLanding = React.createClass({ if(this.state.currentUser && this.state.currentUser.email) { return ( - {getLangText('ENTER')} + {getLangText('ENTER TO START')} ); } else { return ( - {getLangText('ENTER')} + {getLangText('ENTER TO START')} ); } @@ -51,11 +51,13 @@ let IkonotvLanding = React.createClass({

PROTECT

- +
+
+
+

& SHARE

-

Welcome to the ikonoTV

-

Registration Page

+

Welcome to the ikonoTV
Registration Page

@@ -102,4 +104,4 @@ let IkonotvLanding = React.createClass({ } }); -export default IkonotvLanding; \ No newline at end of file +export default IkonotvLanding; diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js index 06bac15f..8aa15f59 100644 --- a/js/components/whitelabel/wallet/wallet_app.js +++ b/js/components/whitelabel/wallet/wallet_app.js @@ -8,9 +8,12 @@ import Footer from '../../footer'; import GlobalNotification from '../../global_notification'; import getRoutes from './wallet_routes'; +import classNames from 'classnames'; + let RouteHandler = Router.RouteHandler; + let WalletApp = React.createClass({ mixins: [Router.State], @@ -28,7 +31,7 @@ let WalletApp = React.createClass({ } return ( -
+
{header} diff --git a/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss b/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss index b0d60983..7a54f20a 100644 --- a/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss +++ b/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss @@ -1,11 +1,20 @@ +.client--ikonotv.page--landing { + background-color: #c40050; + margin: 0; + width: 100%; + padding: 5em 1em; +} + + +.client--ikonotv.page--landing .ascribe-footer { + display: none; +} + .ikonotv-landing { /* center all text on the page */ text-align: center; - background-color: #c40050; color: white; - padding: 5em 5em 5em 5em; - header { /* center all images on the page */ img { @@ -16,7 +25,7 @@ /* Ikonotv logo */ img:first-child { - width: 200px; + max-width: 200px; } > .tagline { @@ -29,12 +38,30 @@ margin-top: 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 { font-weight: 600; font-size: 2.75em; + @media only screen and (max-width: 600px) { + font-size: 1.75em; + } } > h2 + h2 { @@ -44,7 +71,8 @@ article { > section { - width: 65%; + width: 100%; + max-width: 60em; margin: 3em auto 1em auto; > h1 { @@ -57,6 +85,9 @@ text-align: left; font-size: 1.3em; line-height: 1.8; + @media only screen and (max-width: 600px) { + font-size: 1.1em; + } } } } @@ -78,4 +109,4 @@ font-weight: 500; } } -} \ No newline at end of file +} From c99c3492fbb67a0b50609b89e0374577a5b20e97 Mon Sep 17 00:00:00 2001 From: vrde Date: Fri, 18 Sep 2015 14:02:31 +0200 Subject: [PATCH 2/3] Add margin top to ascribe-wallet-app class --- sass/whitelabel/index.scss | 3 ++- sass/whitelabel/wallet/index.scss | 5 +++++ 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 sass/whitelabel/wallet/index.scss diff --git a/sass/whitelabel/index.scss b/sass/whitelabel/index.scss index 9fa1b68f..fc7a6b3b 100644 --- a/sass/whitelabel/index.scss +++ b/sass/whitelabel/index.scss @@ -1,2 +1,3 @@ @import 'prize/index'; -@import 'wallet/ikonotv/ikonotv_landing'; \ No newline at end of file +@import 'wallet/index'; +@import 'wallet/ikonotv/ikonotv_landing'; diff --git a/sass/whitelabel/wallet/index.scss b/sass/whitelabel/wallet/index.scss new file mode 100644 index 00000000..4ec76076 --- /dev/null +++ b/sass/whitelabel/wallet/index.scss @@ -0,0 +1,5 @@ +.ascribe-wallet-app { + border-radius: 0; + padding-top: 70px; + min-height: 100vh; +} From 03803ca61a5e7220df5eb61a543ef1323315c9d4 Mon Sep 17 00:00:00 2001 From: vrde Date: Fri, 18 Sep 2015 14:25:31 +0200 Subject: [PATCH 3/3] Add active routes as css classes --- js/components/whitelabel/wallet/wallet_app.js | 3 ++- sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss | 7 +++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js index 8aa15f59..cb2a79d5 100644 --- a/js/components/whitelabel/wallet/wallet_app.js +++ b/js/components/whitelabel/wallet/wallet_app.js @@ -20,6 +20,7 @@ let WalletApp = React.createClass({ render() { let subdomain = window.location.host.split('.')[0]; let ROUTES = getRoutes(null, subdomain); + let activeRoutes = this.getRoutes().map(elem => 'route--' + elem.name); let header = null; if ((this.isActive('landing') || this.isActive('login') || this.isActive('signup')) @@ -31,7 +32,7 @@ let WalletApp = React.createClass({ } return ( -
+
{header} diff --git a/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss b/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss index 7a54f20a..0dc69a84 100644 --- a/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss +++ b/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss @@ -1,12 +1,15 @@ -.client--ikonotv.page--landing { +.client--ikonotv.route--landing { background-color: #c40050; margin: 0; width: 100%; padding: 5em 1em; } +.client--ikonotv .ascribe-login-wrapper { -.client--ikonotv.page--landing .ascribe-footer { +} + +.client--ikonotv.route--landing .ascribe-footer { display: none; }