From 76daa7edc2bdef7a46439b15481f8a1971366504 Mon Sep 17 00:00:00 2001 From: tim Date: Wed, 6 Apr 2016 16:22:03 +0200 Subject: [PATCH] Add Liquid Gallery Whitelabel Page --- README.md | 1 + .../components/market/market_landing.js | 73 +++++++ .../wallet/constants/wallet_api_urls.js | 2 +- js/components/whitelabel/wallet/wallet_app.js | 2 +- .../whitelabel/wallet/wallet_routes.js | 42 +++- js/constants/application_constants.js | 5 + sass/whitelabel/wallet/market/index.scss | 1 + .../market_custom_style.scss} | 181 +++++++++--------- 8 files changed, 211 insertions(+), 96 deletions(-) create mode 100644 js/components/whitelabel/wallet/components/market/market_landing.js rename sass/whitelabel/wallet/{demo/demo_custom_style.scss => market/market_custom_style.scss} (56%) diff --git a/README.md b/README.md index 54e227a6..9e33de50 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,7 @@ Additionally, to work on the white labeling functionality, you need to edit your 127.0.0.1 polline.localhost.com 127.0.0.1 artcity.localhost.com 127.0.0.1 demo.localhost.com +127.0.0.1 liquidgallery.localhost.com ``` diff --git a/js/components/whitelabel/wallet/components/market/market_landing.js b/js/components/whitelabel/wallet/components/market/market_landing.js new file mode 100644 index 00000000..9b14804e --- /dev/null +++ b/js/components/whitelabel/wallet/components/market/market_landing.js @@ -0,0 +1,73 @@ +'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 MarketLanding = React.createClass({ + propTypes: { + // Provided from WalletApp + currentUser: React.PropTypes.object, + whitelabel: React.PropTypes.object.isRequired + }, + + componentDidUpdate() { + const { name } = this.props.whitelabel; + + if (name) { + setDocumentTitle(`${name} Marketplace`); + } + }, + + render() { + const { logo, name } = this.props.whitelabel; + + return ( +
+
+
+
+ +
+ {getLangText(`${name} Marketplace is powered by`) + ' '} + +
+
+
+
+

+ {getLangText('Existing ascribe user?')} +

+ + + +
+
+

+ {getLangText('Do you need an account?')} +

+ + + +
+
+
+
+
+ ); + } +}); + +export default MarketLanding; diff --git a/js/components/whitelabel/wallet/constants/wallet_api_urls.js b/js/components/whitelabel/wallet/constants/wallet_api_urls.js index 65a16a1b..e381cc88 100644 --- a/js/components/whitelabel/wallet/constants/wallet_api_urls.js +++ b/js/components/whitelabel/wallet/constants/wallet_api_urls.js @@ -19,7 +19,7 @@ function getWalletApiUrls(subdomain) { }; } else if (subdomain === 'lumenus' || subdomain === '23vivi' || subdomain === 'polline' || subdomain === 'artcity' || - subdomain === 'demo') { + subdomain === 'demo' || subdomain === 'liquidgallery') { return { 'editions_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/editions/', 'edition': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/editions/${bitcoin_id}/', diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js index e382377b..9ca6cd16 100644 --- a/js/components/whitelabel/wallet/wallet_app.js +++ b/js/components/whitelabel/wallet/wallet_app.js @@ -31,7 +31,7 @@ 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', 'polline', 'artcity', 'demo']).includes(subdomain)) { + && (['cyland', 'ikonotv', 'lumenus', '23vivi', 'polline', 'artcity', 'demo', 'liquidgallery']).includes(subdomain)) { header = (
); } else { header = ( diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js index d94d8130..2e0e9a10 100644 --- a/js/components/whitelabel/wallet/wallet_routes.js +++ b/js/components/whitelabel/wallet/wallet_routes.js @@ -33,6 +33,7 @@ import IkonotvRegisterPiece from './components/ikonotv/ikonotv_register_piece'; import IkonotvPieceContainer from './components/ikonotv/ikonotv_detail/ikonotv_piece_container'; import IkonotvContractNotifications from './components/ikonotv/ikonotv_contract_notifications'; +import MarketLanding from './components/market/market_landing'; import MarketPieceList from './components/market/market_piece_list'; import MarketRegisterPiece from './components/market/market_register_piece'; import MarketPieceContainer from './components/market/market_detail/market_piece_container'; @@ -46,8 +47,6 @@ import Vivi23PieceList from './components/23vivi/23vivi_piece_list'; import PollineLanding from './components/polline/polline_landing'; -import DemoLanding from './components/demo/demo_landing'; - import ArtcityLanding from './components/artcity/artcity_landing'; import WalletApp from './wallet_app'; @@ -378,7 +377,44 @@ let ROUTES = { ), 'demo': ( - + + + + + + + + + + + + + + + ), + 'liquidgallery': ( + + diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js index 042e336e..d32d9603 100644 --- a/js/constants/application_constants.js +++ b/js/constants/application_constants.js @@ -68,6 +68,11 @@ const constants = { 'name': 'Demo', 'type': 'wallet' }, + { + 'subdomain': 'liquidgallery', + 'name': 'Liquid Gallery', + 'type': 'wallet' + }, { 'subdomain': 'portfolioreview', 'name': 'Portfolio Review', diff --git a/sass/whitelabel/wallet/market/index.scss b/sass/whitelabel/wallet/market/index.scss index 706b7b51..65029621 100644 --- a/sass/whitelabel/wallet/market/index.scss +++ b/sass/whitelabel/wallet/market/index.scss @@ -1 +1,2 @@ @import 'market_footer'; +@import 'market_custom_style'; diff --git a/sass/whitelabel/wallet/demo/demo_custom_style.scss b/sass/whitelabel/wallet/market/market_custom_style.scss similarity index 56% rename from sass/whitelabel/wallet/demo/demo_custom_style.scss rename to sass/whitelabel/wallet/market/market_custom_style.scss index 34ac66e0..933bb4ab 100644 --- a/sass/whitelabel/wallet/demo/demo_custom_style.scss +++ b/sass/whitelabel/wallet/market/market_custom_style.scss @@ -1,14 +1,14 @@ -$demo--fg-color: black; -$demo--bg-color: white; -$demo--nav-fg-prim-color: $demo--fg-color; -$demo--nav-fg-sec-color: #3a3a3a; -$demo--nav-bg-color: $demo--bg-color; -$demo--nav-highlight-color: #f8f8f8; -$demo--button-default-color: $demo--fg-color; -$demo--highlight-color: #2882fa; +$market--fg-color: black; +$market--bg-color: white; +$market--nav-fg-prim-color: $market--fg-color; +$market--nav-fg-sec-color: #3a3a3a; +$market--nav-bg-color: $market--bg-color; +$market--nav-highlight-color: #f8f8f8; +$market--button-default-color: $market--fg-color; +$market--highlight-color: #2882fa; -.client--demo { +.client--demo, .client--liquidgallery { /** Landing page **/ .route--landing { display: table; @@ -24,26 +24,25 @@ $demo--highlight-color: #2882fa; display: none; } - .demo-landing { + .landing { font-weight: normal; text-align: center; } - .demo-landing--header { - background-color: $demo--bg-color; - border: 1px solid darken($demo--bg-color, 20%); - color: $demo--fg-color; + .landing--header { + background-color: $market--bg-color; + border: 1px solid darken($market--bg-color, 20%); + color: $market--fg-color; padding: 2em; - .demo-landing--header-logo { + .landing--header-logo { margin: 1em 0 2em 0; - height: 175px; } } - .demo-landing--content { - background-color: $demo--bg-color; - border: 1px solid darken($demo--bg-color, 20%); + .landing--content { + background-color: $market--bg-color; + border: 1px solid darken($market--bg-color, 20%); border-top: none; padding: 2em; } @@ -51,16 +50,16 @@ $demo--highlight-color: #2882fa; /** Navbar **/ .navbar-default { - background-color: $demo--bg-color; + background-color: $market--bg-color; .navbar-brand .img-brand { height: 115%; } .navbar-brand .icon-ascribe-logo { - color: $demo--nav-fg-prim-color; + color: $market--nav-fg-prim-color; &:hover { - color: darken($demo--nav-fg-prim-color, 20%); + color: darken($market--nav-fg-prim-color, 20%); } } @@ -70,26 +69,26 @@ $demo--highlight-color: #2882fa; .navbar-nav > li > a:focus, .navbar-nav > li > .active a, .navbar-nav > li > .active a:focus { - color: $demo--nav-fg-prim-color; + color: $market--nav-fg-prim-color; } .navbar-nav > li > a:hover { - color: darken($demo--nav-fg-prim-color, 20%); + color: darken($market--nav-fg-prim-color, 20%); } .navbar-nav > .active a, .navbar-nav > .active a:hover, .navbar-nav > .active a:focus { - background-color: $demo--nav-bg-color; - border-bottom-color: $demo--nav-fg-prim-color; - color: $demo--nav-fg-prim-color; + background-color: $market--nav-bg-color; + border-bottom-color: $market--nav-fg-prim-color; + color: $market--nav-fg-prim-color; } .navbar-nav > .open > a, .dropdown-menu > .active > a, .dropdown-menu > li > a { - color: $demo--nav-fg-prim-color; - background-color: $demo--nav-bg-color; + color: $market--nav-fg-prim-color; + background-color: $market--nav-bg-color; } .navbar-nav > .open > a:hover, @@ -98,60 +97,60 @@ $demo--highlight-color: #2882fa; .dropdown-menu > .active > a:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { - color: lighten($demo--nav-fg-prim-color, 20%); - background-color: $demo--nav-highlight-color; + color: lighten($market--nav-fg-prim-color, 20%); + background-color: $market--nav-highlight-color; } .navbar-collapse.collapsing, .navbar-collapse.collapse.in { - background-color: $demo--nav-bg-color; + background-color: $market--nav-bg-color; .navbar-nav > .open > a, .navbar-nav > .active > a { - background-color: $demo--nav-highlight-color; + background-color: $market--nav-highlight-color; } } .navbar-collapse.collapsing li a, .navbar-collapse.collapse.in li a { - color: $demo--nav-fg-prim-color; + color: $market--nav-fg-prim-color; } .navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover { - color: lighten($demo--nav-fg-prim-color, 20%); - background-color: $demo--nav-highlight-color; + color: lighten($market--nav-fg-prim-color, 20%); + background-color: $market--nav-highlight-color; } .navbar-toggle { - border-color: $demo--highlight-color; + border-color: $market--highlight-color; .icon-bar { - background-color: $demo--highlight-color; + background-color: $market--highlight-color; } } .navbar-toggle:hover, .navbar-toggle:focus { - border-color: lighten($demo--highlight-color, 10%); - background-color: $demo--nav-fg-prim-color; + border-color: lighten($market--highlight-color, 10%); + background-color: $market--nav-fg-prim-color; .icon-bar { - background-color: lighten($demo--highlight-color, 10%); + background-color: lighten($market--highlight-color, 10%); } } .notification-menu { .dropdown-menu { - background-color: $demo--nav-bg-color; + background-color: $market--nav-bg-color; } .notification-header { - background-color: $demo--nav-fg-sec-color; + background-color: $market--nav-fg-sec-color; border-top-width: 0; - color: $demo--nav-bg-color; + color: $market--nav-bg-color; } .notification-action { - color: $demo--highlight-color; + color: $market--highlight-color; } } @@ -175,13 +174,13 @@ $demo--highlight-color: #2882fa; fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active { - background-color: lighten($demo--button-default-color, 30%); - border-color: lighten($demo--button-default-color, 30%); + background-color: lighten($market--button-default-color, 30%); + border-color: lighten($market--button-default-color, 30%); } .btn-default { - background-color: $demo--button-default-color; - border-color: $demo--button-default-color; + background-color: $market--button-default-color; + border-color: $market--button-default-color; &:hover, &:active, @@ -192,8 +191,8 @@ $demo--highlight-color: #2882fa; &.active:hover, &.active:focus, &.active.focus { - background-color: lighten($demo--button-default-color, 30%); - border-color: lighten($demo--button-default-color, 30%); + background-color: lighten($market--button-default-color, 30%); + border-color: lighten($market--button-default-color, 30%); } } @@ -216,13 +215,13 @@ $demo--highlight-color: #2882fa; fieldset[disabled] .btn-secondary.focus, fieldset[disabled] .btn-secondary:active, fieldset[disabled] .btn-secondary.active { - background-color: darken($demo--bg-color, 20%); - border-color: $demo--button-default-color; + background-color: darken($market--bg-color, 20%); + border-color: $market--button-default-color; } .btn-secondary { - border-color: $demo--button-default-color; - color: $demo--button-default-color; + border-color: $market--button-default-color; + color: $market--button-default-color; &:hover, &:active, @@ -233,9 +232,9 @@ $demo--highlight-color: #2882fa; &.active:hover, &.active:focus, &.active.focus { - background-color: $demo--button-default-color; - border-color: $demo--button-default-color; - color: $demo--bg-color; + background-color: $market--button-default-color; + border-color: $market--button-default-color; + color: $market--bg-color; } } @@ -244,9 +243,9 @@ $demo--highlight-color: #2882fa; &:active, &ctive:hover, &.active:hover{ - background-color: $demo--highlight-color; - border-color: $demo--highlight-color; - color: $demo--bg-color; + background-color: $market--highlight-color; + border-color: $market--highlight-color; + color: $market--bg-color; } } @@ -260,54 +259,54 @@ $demo--highlight-color: #2882fa; } .ascribe-accordion-list-table-toggle:hover { - color: $demo--fg-color; + color: $market--fg-color; } .request-action-badge { - color: $demo--fg-color; + color: $market--fg-color; } .acl-information-dropdown-list .title { - color: $demo--fg-color; + color: $market--fg-color; } // filter widget .ascribe-piece-list-toolbar-widget button { background-color: transparent !important; border-color: transparent !important; - color: $demo--button-default-color !important; + color: $market--button-default-color !important; &:hover, &:active { - background-color: $demo--button-default-color !important; - border-color: $demo--button-default-color !important; - color: $demo--bg-color !important; + background-color: $market--button-default-color !important; + border-color: $market--button-default-color !important; + color: $market--bg-color !important; } } .icon-ascribe-search { - color: $demo--fg-color; + color: $market--fg-color; } // forms .ascribe-property-wrapper:hover { - border-left-color: rgba($demo--fg-color, 0.5); + border-left-color: rgba($market--fg-color, 0.5); } .ascribe-property textarea, .ascribe-property input, .search-bar > .form-group > .input-group input { &::-webkit-input-placeholder { - color: rgba($demo--fg-color, 0.5); + color: rgba($market--fg-color, 0.5); } &::-moz-placeholder { - color: rgba($demo--fg-color, 0.5); + color: rgba($market--fg-color, 0.5); } &:-ms-input-placeholder { - color: rgba($demo--fg-color, 0.5); + color: rgba($market--fg-color, 0.5); } &:-moz-placeholder { - color: rgba($demo--fg-color, 0.5); + color: rgba($market--fg-color, 0.5); } } @@ -320,66 +319,66 @@ $demo--highlight-color: #2882fa; > p, > p > span, > textarea { - color: $demo--fg-color; + color: $market--fg-color; } } // global notification .ascribe-global-notification-success { - background-color: lighten($demo--fg-color, 20%); + background-color: lighten($market--fg-color, 20%); } // uploader progress .ascribe-progress-bar > .progress-bar { - background-color: lighten($demo--fg-color, 20%); + background-color: lighten($market--fg-color, 20%); } .ascribe-progress-bar span { - text-shadow: -1px 0 lighten($demo--fg-color, 20%), - 0 1px lighten($demo--fg-color, 20%), - 1px 0 lighten($demo--fg-color, 20%), - 0 -1px lighten($demo--fg-color, 20%); + text-shadow: -1px 0 lighten($market--fg-color, 20%), + 0 1px lighten($market--fg-color, 20%), + 1px 0 lighten($market--fg-color, 20%), + 0 -1px lighten($market--fg-color, 20%); } .action-file.icon-ascribe-ok, .action-file.icon-ascribe-ok:hover { - color: lighten($demo--fg-color, 20%); + color: lighten($market--fg-color, 20%); } // spinner .spinner-circle { - border-color: $demo--fg-color; + border-color: $market--fg-color; } .spinner-inner { display: none; } .btn-secondary .spinner-circle { - border-color: $demo--bg-color; + border-color: $market--bg-color; } // video player .ascribe-media-player .vjs-default-skin { .vjs-play-progress, .vjs-volume-level { - background-color: $demo--highlight-color; + background-color: $market--highlight-color; } } // pager .pager li > a, .pager li > span { - background-color: $demo--fg-color; - border-color: $demo--fg-color; + background-color: $market--fg-color; + border-color: $market--fg-color; } .pager .disabled > a, .pager .disabled > span { - background-color: $demo--fg-color !important; - border-color: $demo--fg-color; + background-color: $market--fg-color !important; + border-color: $market--fg-color; } // intercom #intercom-container .intercom-launcher-button { - background-color: $demo--button-default-color !important; - border-color: $demo--button-default-color !important; + background-color: $market--button-default-color !important; + border-color: $market--button-default-color !important; } }