Merge pull request #151 from ascribe/AP-6-polline-consignment-wallet

Add routes and styling for polline.ascribe.io

README.md

@@ -33,6 +33,7 @@ Additionally, to work on the white labeling functionality, you need to edit your
 127.0.0.1   lumenus.localhost.com
 127.0.0.1   portfolioreview.localhost.com
 127.0.0.1   23vivi.localhost.com
+127.0.0.1   polline.localhost.com
 ```
 
 

js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js

@@ -8,11 +8,12 @@ import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
+
 let Vivi23Landing = React.createClass({
     propTypes: {
         customThumbnailPlaceholder: React.PropTypes.func,
 
-        // Provided from PrizeApp
+        // Provided from WalletApp
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object.isRequired,
 
@@ -35,7 +36,7 @@ let Vivi23Landing = React.createClass({
                                 src={this.props.whitelabel.logo}
                                 height="75" />
                             <div>
-                                {getLangText('Artwork from the 23VIVI Marketplace is powered by') + ' '}
+                                {getLangText('23VIVI Marketplace is powered by') + ' '}
                                 <span className="icon-ascribe-logo" />
                             </div>
                         </div>

js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js

@@ -31,7 +31,7 @@ let LumenusLanding = React.createClass({
                         <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
                             <img src={this.props.whitelabel.logo} height="150" />
                             <div style={{marginTop: '1em'}}>
-                                {getLangText('Artwork from the Lumenus Marketplace is powered by') + ' '}
+                                {getLangText('Lumenus Marketplace is powered by') + ' '}
                                 <span>
                                     <span className="icon-ascribe-logo"></span>
                                 </span>

js/components/whitelabel/wallet/components/polline/polline_landing.js

@@ -0,0 +1,67 @@
+'use strict';
+
+import React from 'react';
+
+import Button from 'react-bootstrap/lib/Button';
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
+
+import WhitelabelActions from '../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
+import { getLangText } from '../../../../../utils/lang_utils';
+import { setDocumentTitle } from '../../../../../utils/dom_utils';
+
+
+let PollineLanding = React.createClass({
+    propTypes: {
+        // Provided from WalletApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object.isRequired
+    },
+
+    componentWillMount() {
+        setDocumentTitle('Polline Marketplace');
+    },
+
+    render() {
+        return (
+            <div className="container ascribe-form-wrapper polline-landing">
+                <div className="row">
+                    <div className="col-xs-12">
+                        <div className="row polline-landing--header">
+                            <img className="polline-landing--header-logo" src={this.props.whitelabel.logo} />
+                            <div>
+                                {getLangText('Polline Art Marketplace is powered by') + ' '}
+                                <span className="icon-ascribe-logo" />
+                            </div>
+                        </div>
+                        <div className="row polline-landing--content">
+                            <div className="col-xs-6">
+                                <p>
+                                    {getLangText('Existing ascribe user?')}
+                                </p>
+                                <LinkContainer to="/login">
+                                    <Button>
+                                        {getLangText('Log in')}
+                                    </Button>
+                                </LinkContainer>
+                            </div>
+                            <div className="col-xs-6">
+                                <p>
+                                    {getLangText('Do you need an account?')}
+                                </p>
+                                <LinkContainer to="/signup">
+                                    <Button>
+                                        {getLangText('Sign up')}
+                                    </Button>
+                                </LinkContainer>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default PollineLanding;

js/components/whitelabel/wallet/constants/wallet_api_urls.js

@@ -17,7 +17,8 @@ function getWalletApiUrls(subdomain) {
             'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
             'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
         };
-    } else if (subdomain === 'lumenus' || subdomain === '23vivi') {
+    } else if (subdomain === 'lumenus' || subdomain === '23vivi' ||
+               subdomain === 'polline' || subdomain === 'artcity') {
         return {
             'editions_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/editions/',
             'edition': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/editions/${bitcoin_id}/',

js/components/whitelabel/wallet/wallet_app.js

@@ -30,10 +30,9 @@ let WalletApp = React.createClass({
 
         let header = null;
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
-        if ((!path || history.isActive('/login') || history.isActive('/signup') ||
-            history.isActive('/contract_notifications')) &&
-            (['cyland', 'ikonotv', 'lumenus', '23vivi']).includes(subdomain)) {
-            header = (<div className="hero" />);
+        if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications'))
+            && (['cyland', 'ikonotv', 'lumenus', '23vivi', 'polline']).includes(subdomain)) {
+            header = (<div className="hero"/>);
         } else {
             header = (
                 <Header

js/components/whitelabel/wallet/wallet_routes.js

@@ -40,6 +40,8 @@ import LumenusLanding from './components/lumenus/lumenus_landing';
 import Vivi23Landing from './components/23vivi/23vivi_landing';
 import Vivi23PieceList from './components/23vivi/23vivi_piece_list';
 
+import PollineLanding from './components/polline/polline_landing';
+
 import { ProxyHandler, AuthRedirect } from '../../../components/ascribe_routes/proxy_handler';
 
 import WalletApp from './wallet_app';
@@ -345,6 +347,43 @@ let ROUTES = {
                 component={ErrorNotFoundPage}
                 hideFooter />
         </Route>
+    ),
+    'polline': (
+        <Route path='/' component={WalletApp}>
+            <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PollineLanding)} />
+            <Route
+                path='login'
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
+            <Route
+                path='logout'
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
+            <Route
+                path='signup'
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
+            <Route
+                path='password_reset'
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
+            <Route
+                path='settings'
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
+            <Route
+                path='contract_settings'
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
+            <Route
+                path='register_piece'
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketRegisterPiece)}
+                headerTitle='+ NEW WORK'
+                aclName='acl_wallet_submit' />
+            <Route
+                path='collection'
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketPieceList)}
+                headerTitle='COLLECTION'
+                disableOn='noPieces' />
+            <Route path='pieces/:pieceId' component={MarketPieceContainer} />
+            <Route path='editions/:editionId' component={MarketEditionContainer} />
+            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='*' component={ErrorNotFoundPage} />
+        </Route>
     )
 };
 

js/constants/application_constants.js

@@ -53,6 +53,11 @@ const constants = {
             'name': '23VIVI',
             'type': 'wallet'
         },
+        {
+            'subdomain': 'polline',
+            'name': 'Polline Art',
+            'type': 'wallet'
+        },
         {
             'subdomain': 'portfolioreview',
             'name': 'Portfolio Review',

sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss

@@ -2,11 +2,11 @@
 $vivi23--fg-color: black;
 $vivi23--bg-color: white;
 $vivi23--nav-fg-prim-color: $vivi23--fg-color;
-$vivi23--nav-fg-sec-color: #3a3a3a;
+$vivi23--nav-fg-sec-color: #2882fa;
 $vivi23--nav-bg-color: $vivi23--bg-color;
 $vivi23--nav-highlight-color: #f8f8f8;
 $vivi23--button-default-color: $vivi23--fg-color;
-$vivi23--highlight-color: #de2600;
+$vivi23--highlight-color: #2882fa;
 
 
 .client--23vivi {

sass/whitelabel/wallet/index.scss

@@ -2,6 +2,7 @@
 @import 'cyland/cyland_custom_style';
 @import 'ikonotv/ikonotv_custom_style';
 @import '23vivi/23vivi_custom_style';
+@import 'polline/polline_custom_style';
 
 .ascribe-wallet-app {
     border-radius: 0;

sass/whitelabel/wallet/polline/polline_custom_style.scss

@@ -0,0 +1,380 @@
+$polline--fg-color: black;
+$polline--bg-color: white;
+$polline--nav-fg-prim-color: $polline--fg-color;
+$polline--nav-fg-sec-color: #3a3a3a;
+$polline--nav-bg-color: $polline--bg-color;
+$polline--nav-highlight-color: #f8f8f8;
+$polline--button-default-color: $polline--fg-color;
+$polline--highlight-color: #2882fa;
+
+
+.client--polline {
+    /** Landing page **/
+    .route--landing {
+        display: table;
+
+        > .container {
+            display: table-cell;
+            padding-bottom: 100px;
+            vertical-align: middle;
+        }
+
+        .polline-landing {
+            font-weight: normal;
+            text-align: center;
+        }
+
+        .polline-landing--header {
+            background-color: $polline--bg-color;
+            border: 1px solid darken($polline--bg-color, 20%);
+            color: $polline--fg-color;
+            padding: 2em;
+
+            .polline-landing--header-logo {
+                margin: 1em 0 2em 0;
+                height: 175px;
+            }
+        }
+
+        .polline-landing--content {
+            background-color: $polline--bg-color;
+            border: 1px solid darken($polline--bg-color, 20%);
+            border-top: none;
+            padding: 2em;
+        }
+    }
+
+    /** Navbar **/
+    .navbar-default {
+        background-color: $polline--bg-color;
+    
+        .navbar-brand .img-brand {
+            height: 115%;
+        }
+
+        .navbar-brand .icon-ascribe-logo {
+            color: $polline--nav-fg-prim-color;
+            &:hover {
+                color: darken($polline--nav-fg-prim-color, 20%);
+            }
+        }
+
+    }
+
+    .navbar-nav > li > a,
+    .navbar-nav > li > a:focus,
+    .navbar-nav > li > .active a,
+    .navbar-nav > li > .active a:focus {
+        color: $polline--nav-fg-prim-color;
+    }
+
+    .navbar-nav > li > a:hover {
+        color: darken($polline--nav-fg-prim-color, 20%);
+    }
+
+    .navbar-nav > .active a,
+    .navbar-nav > .active a:hover,
+    .navbar-nav > .active a:focus {
+        background-color: $polline--nav-bg-color;
+        border-bottom-color: $polline--nav-fg-prim-color;
+        color: $polline--nav-fg-prim-color;
+    }
+
+    .navbar-nav > .open > a,
+    .dropdown-menu > .active > a,
+    .dropdown-menu > li > a {
+        color: $polline--nav-fg-prim-color;
+        background-color: $polline--nav-bg-color;
+    }
+
+    .navbar-nav > .open > a:hover,
+    .navbar-nav > .open > a:focus,
+    .dropdown-menu > .active > a:hover,
+    .dropdown-menu > .active > a:focus,
+    .dropdown-menu > li > a:hover,
+    .dropdown-menu > li > a:focus {
+        color: lighten($polline--nav-fg-prim-color, 20%);
+        background-color: $polline--nav-highlight-color;
+    }
+
+    .navbar-collapse.collapsing,
+    .navbar-collapse.collapse.in {
+        background-color: $polline--nav-bg-color;
+
+        .navbar-nav > .open > a,
+        .navbar-nav > .active > a {
+            background-color: $polline--nav-highlight-color;
+        }
+    }
+
+    .navbar-collapse.collapsing li a,
+    .navbar-collapse.collapse.in li a {
+        color: $polline--nav-fg-prim-color;
+    }
+    .navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
+        color: lighten($polline--nav-fg-prim-color, 20%);
+        background-color: $polline--nav-highlight-color;
+    }
+
+    .navbar-toggle {
+        border-color: $polline--highlight-color;
+
+        .icon-bar {
+            background-color: $polline--highlight-color;
+        }
+    }
+
+    .navbar-toggle:hover,
+    .navbar-toggle:focus {
+        border-color: lighten($polline--highlight-color, 10%);
+        background-color: $polline--nav-fg-prim-color;
+
+        .icon-bar {
+            background-color: lighten($polline--highlight-color, 10%);
+        }
+    }
+
+    .notification-menu {
+        .dropdown-menu {
+            background-color: $polline--nav-bg-color;
+        }
+
+        .notification-header {
+            background-color: $polline--nav-fg-sec-color;
+            border-top-width: 0;
+            color: $polline--nav-bg-color;
+        }
+
+        .notification-action {
+            color: $polline--highlight-color;
+        }
+    }
+
+    /** Buttons **/
+    // reset disabled button styling for btn-default
+    .btn-default.disabled,
+    .btn-default.disabled:hover,
+    .btn-default.disabled:focus,
+    .btn-default.disabled.focus,
+    .btn-default.disabled:active,
+    .btn-default.disabled.active,
+    .btn-default[disabled],
+    .btn-default[disabled]:hover,
+    .btn-default[disabled]:focus,
+    .btn-default[disabled].focus,
+    .btn-default[disabled]:active,
+    .btn-default[disabled].active,
+    fieldset[disabled] .btn-default,
+    fieldset[disabled] .btn-default:hover,
+    fieldset[disabled] .btn-default:focus,
+    fieldset[disabled] .btn-default.focus,
+    fieldset[disabled] .btn-default:active,
+    fieldset[disabled] .btn-default.active {
+        background-color: lighten($polline--button-default-color, 30%);
+        border-color: lighten($polline--button-default-color, 30%);
+    }
+
+    .btn-default {
+        background-color: $polline--button-default-color;
+        border-color: $polline--button-default-color;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: lighten($polline--button-default-color, 30%);
+            border-color: lighten($polline--button-default-color, 30%);
+        }
+    }
+
+    // disabled buttons
+    .btn-secondary.disabled,
+    .btn-secondary.disabled:hover,
+    .btn-secondary.disabled:focus,
+    .btn-secondary.disabled.focus,
+    .btn-secondary.disabled:active,
+    .btn-secondary.disabled.active,
+    .btn-secondary[disabled],
+    .btn-secondary[disabled]:hover,
+    .btn-secondary[disabled]:focus,
+    .btn-secondary[disabled].focus,
+    .btn-secondary[disabled]:active,
+    .btn-secondary[disabled].active,
+    fieldset[disabled] .btn-secondary,
+    fieldset[disabled] .btn-secondary:hover,
+    fieldset[disabled] .btn-secondary:focus,
+    fieldset[disabled] .btn-secondary.focus,
+    fieldset[disabled] .btn-secondary:active,
+    fieldset[disabled] .btn-secondary.active {
+        background-color: darken($polline--bg-color, 20%);
+        border-color: $polline--button-default-color;
+    }
+
+    .btn-secondary {
+        border-color: $polline--button-default-color;
+        color: $polline--button-default-color;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: $polline--button-default-color;
+            border-color: $polline--button-default-color;
+            color: $polline--bg-color;
+        }
+    }
+
+    .btn-tertiary {
+        &:hover,
+        &:active,
+        &ctive:hover,
+        &.active:hover{
+            background-color: $polline--highlight-color;
+            border-color: $polline--highlight-color;
+            color: $polline--bg-color;
+        }
+    }
+
+    /** Other components **/
+    .ascribe-piece-list-toolbar .btn-ascribe-add {
+        display: none;
+    }
+
+    .ascribe-footer {
+        display: none;
+    }
+
+    .ascribe-accordion-list-table-toggle:hover {
+        color: $polline--fg-color;
+    }
+
+    .request-action-badge {
+        color: $polline--fg-color;
+    }
+
+    .acl-information-dropdown-list .title {
+        color: $polline--fg-color;
+    }
+
+    // filter widget
+    .ascribe-piece-list-toolbar-filter-widget button {
+        background-color: transparent !important;
+        border-color: transparent !important;
+        color: $polline--button-default-color !important;
+
+        &:hover,
+        &:active {
+            background-color: $polline--button-default-color !important;
+            border-color: $polline--button-default-color !important;
+            color: $polline--bg-color !important;
+        }
+    }
+
+    .icon-ascribe-search {
+        color: $polline--fg-color;
+    }
+
+    // forms
+    .ascribe-property-wrapper:hover {
+        border-left-color: rgba($polline--fg-color, 0.5);
+    }
+
+    .ascribe-property textarea,
+    .ascribe-property input,
+    .search-bar > .form-group > .input-group input {
+        &::-webkit-input-placeholder {
+            color: rgba($polline--fg-color, 0.5);
+        }
+        &::-moz-placeholder {
+            color: rgba($polline--fg-color, 0.5);
+        }
+        &:-ms-input-placeholder {
+            color: rgba($polline--fg-color, 0.5);
+        }
+        &:-moz-placeholder {
+            color: rgba($polline--fg-color, 0.5);
+        }
+    }
+
+    .ascribe-property {
+        > div,
+        > input,
+        > pre,
+        > select,
+        > span:not(.glyphicon),
+        > p,
+        > p > span,
+        > textarea {
+            color: $polline--fg-color;
+        }
+    }
+
+    // global notification
+    .ascribe-global-notification-success {
+        background-color: lighten($polline--fg-color, 20%);
+    }
+
+    // uploader progress
+    .ascribe-progress-bar > .progress-bar {
+        background-color: lighten($polline--fg-color, 20%);
+    }
+
+    .ascribe-progress-bar span {
+        text-shadow: -1px 0 lighten($polline--fg-color, 20%),
+                     0 1px lighten($polline--fg-color, 20%),
+                     1px 0 lighten($polline--fg-color, 20%),
+                     0 -1px lighten($polline--fg-color, 20%);
+    }
+
+    .action-file.icon-ascribe-ok,
+    .action-file.icon-ascribe-ok:hover {
+        color: lighten($polline--fg-color, 20%);
+    }
+
+    // spinner
+    .spinner-circle {
+        border-color: $polline--fg-color;
+    }
+    .spinner-inner {
+        display: none;
+    }
+    .btn-secondary .spinner-circle {
+        border-color: $polline--bg-color;
+    }
+
+    // video player
+    .ascribe-media-player .vjs-default-skin {
+        .vjs-play-progress,
+        .vjs-volume-level {
+            background-color: $polline--highlight-color;
+        }
+    }
+
+    // pager
+    .pager li > a,
+    .pager li > span {
+        background-color: $polline--fg-color;
+        border-color: $polline--fg-color;
+    }
+    .pager .disabled > a,
+    .pager .disabled > span {
+        background-color: $polline--fg-color !important;
+        border-color: $polline--fg-color;
+    }
+
+    // intercom
+    #intercom-container .intercom-launcher-button {
+        background-color: $polline--button-default-color !important;
+        border-color: $polline--button-default-color !important;
+    }
+}