From 627ace63cd3ae44814d8debee3a21437be31bfe7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Wed, 24 Feb 2016 11:16:56 +0100 Subject: [PATCH] Add demo whitelabel page --- README.md | 1 + .../wallet/components/demo/demo_landing.js | 67 +++ .../wallet/constants/wallet_api_urls.js | 3 +- js/components/whitelabel/wallet/wallet_app.js | 2 +- .../whitelabel/wallet/wallet_routes.js | 39 ++ js/constants/application_constants.js | 5 + .../wallet/demo/demo_custom_style.scss | 385 ++++++++++++++++++ sass/whitelabel/wallet/index.scss | 1 + 8 files changed, 501 insertions(+), 2 deletions(-) create mode 100644 js/components/whitelabel/wallet/components/demo/demo_landing.js create mode 100644 sass/whitelabel/wallet/demo/demo_custom_style.scss diff --git a/README.md b/README.md index 855d6d4a..54e227a6 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,7 @@ Additionally, to work on the white labeling functionality, you need to edit your 127.0.0.1 23vivi.localhost.com 127.0.0.1 polline.localhost.com 127.0.0.1 artcity.localhost.com +127.0.0.1 demo.localhost.com ``` diff --git a/js/components/whitelabel/wallet/components/demo/demo_landing.js b/js/components/whitelabel/wallet/components/demo/demo_landing.js new file mode 100644 index 00000000..05d5643f --- /dev/null +++ b/js/components/whitelabel/wallet/components/demo/demo_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 DemoLanding = React.createClass({ + propTypes: { + // Provided from WalletApp + currentUser: React.PropTypes.object, + whitelabel: React.PropTypes.object.isRequired + }, + + componentWillMount() { + setDocumentTitle('Demo Marketplace'); + }, + + render() { + return ( +
+
+
+
+ +
+ {getLangText('Demo Art Marketplace is powered by') + ' '} + +
+
+
+
+

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

+ + + +
+
+

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

+ + + +
+
+
+
+
+ ); + } +}); + +export default DemoLanding; diff --git a/js/components/whitelabel/wallet/constants/wallet_api_urls.js b/js/components/whitelabel/wallet/constants/wallet_api_urls.js index 48359949..65a16a1b 100644 --- a/js/components/whitelabel/wallet/constants/wallet_api_urls.js +++ b/js/components/whitelabel/wallet/constants/wallet_api_urls.js @@ -18,7 +18,8 @@ function getWalletApiUrls(subdomain) { 'user': walletConstants.walletApiEndpoint + subdomain + '/users/' }; } else if (subdomain === 'lumenus' || subdomain === '23vivi' || - subdomain === 'polline' || subdomain === 'artcity') { + subdomain === 'polline' || subdomain === 'artcity' || + subdomain === 'demo') { 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 468f2723..61e3327f 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']).includes(subdomain)) { + && (['cyland', 'ikonotv', 'lumenus', '23vivi', 'polline', 'artcity', 'demo']).includes(subdomain)) { header = (
); } else { header = ( diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js index 177d23d6..f7c60a88 100644 --- a/js/components/whitelabel/wallet/wallet_routes.js +++ b/js/components/whitelabel/wallet/wallet_routes.js @@ -44,6 +44,8 @@ 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'; @@ -425,6 +427,43 @@ let ROUTES = { + ), + 'demo': ( + + + + + + + + + + + + + + + ) }; diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js index be5f387b..dcc2ed3c 100644 --- a/js/constants/application_constants.js +++ b/js/constants/application_constants.js @@ -63,6 +63,11 @@ const constants = { 'name': 'Artcity', 'type': 'wallet' }, + { + 'subdomain': 'demo', + 'name': 'Demo', + 'type': 'wallet' + }, { 'subdomain': 'portfolioreview', 'name': 'Portfolio Review', diff --git a/sass/whitelabel/wallet/demo/demo_custom_style.scss b/sass/whitelabel/wallet/demo/demo_custom_style.scss new file mode 100644 index 00000000..34ac66e0 --- /dev/null +++ b/sass/whitelabel/wallet/demo/demo_custom_style.scss @@ -0,0 +1,385 @@ +$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; + + +.client--demo { + /** Landing page **/ + .route--landing { + display: table; + min-height: 100vh; + + > .container { + display: table-cell; + padding-bottom: 100px; + vertical-align: middle; + } + + .hero { + display: none; + } + + .demo-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; + padding: 2em; + + .demo-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%); + border-top: none; + padding: 2em; + } + } + + /** Navbar **/ + .navbar-default { + background-color: $demo--bg-color; + + .navbar-brand .img-brand { + height: 115%; + } + + .navbar-brand .icon-ascribe-logo { + color: $demo--nav-fg-prim-color; + &:hover { + color: darken($demo--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: $demo--nav-fg-prim-color; + } + + .navbar-nav > li > a:hover { + color: darken($demo--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; + } + + .navbar-nav > .open > a, + .dropdown-menu > .active > a, + .dropdown-menu > li > a { + color: $demo--nav-fg-prim-color; + background-color: $demo--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($demo--nav-fg-prim-color, 20%); + background-color: $demo--nav-highlight-color; + } + + .navbar-collapse.collapsing, + .navbar-collapse.collapse.in { + background-color: $demo--nav-bg-color; + + .navbar-nav > .open > a, + .navbar-nav > .active > a { + background-color: $demo--nav-highlight-color; + } + } + + .navbar-collapse.collapsing li a, + .navbar-collapse.collapse.in li a { + color: $demo--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; + } + + .navbar-toggle { + border-color: $demo--highlight-color; + + .icon-bar { + background-color: $demo--highlight-color; + } + } + + .navbar-toggle:hover, + .navbar-toggle:focus { + border-color: lighten($demo--highlight-color, 10%); + background-color: $demo--nav-fg-prim-color; + + .icon-bar { + background-color: lighten($demo--highlight-color, 10%); + } + } + + .notification-menu { + .dropdown-menu { + background-color: $demo--nav-bg-color; + } + + .notification-header { + background-color: $demo--nav-fg-sec-color; + border-top-width: 0; + color: $demo--nav-bg-color; + } + + .notification-action { + color: $demo--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($demo--button-default-color, 30%); + border-color: lighten($demo--button-default-color, 30%); + } + + .btn-default { + background-color: $demo--button-default-color; + border-color: $demo--button-default-color; + + &:hover, + &:active, + &:focus, + &:active:hover, + &:active:focus, + &:active.focus, + &.active:hover, + &.active:focus, + &.active.focus { + background-color: lighten($demo--button-default-color, 30%); + border-color: lighten($demo--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($demo--bg-color, 20%); + border-color: $demo--button-default-color; + } + + .btn-secondary { + border-color: $demo--button-default-color; + color: $demo--button-default-color; + + &:hover, + &:active, + &:focus, + &:active:hover, + &:active:focus, + &:active.focus, + &.active:hover, + &.active:focus, + &.active.focus { + background-color: $demo--button-default-color; + border-color: $demo--button-default-color; + color: $demo--bg-color; + } + } + + .btn-tertiary { + &:hover, + &:active, + &ctive:hover, + &.active:hover{ + background-color: $demo--highlight-color; + border-color: $demo--highlight-color; + color: $demo--bg-color; + } + } + + /** Other components **/ + .ascribe-piece-list-toolbar .btn-ascribe-add { + display: none; + } + + .ascribe-footer { + display: none; + } + + .ascribe-accordion-list-table-toggle:hover { + color: $demo--fg-color; + } + + .request-action-badge { + color: $demo--fg-color; + } + + .acl-information-dropdown-list .title { + color: $demo--fg-color; + } + + // filter widget + .ascribe-piece-list-toolbar-widget button { + background-color: transparent !important; + border-color: transparent !important; + color: $demo--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; + } + } + + .icon-ascribe-search { + color: $demo--fg-color; + } + + // forms + .ascribe-property-wrapper:hover { + border-left-color: rgba($demo--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); + } + &::-moz-placeholder { + color: rgba($demo--fg-color, 0.5); + } + &:-ms-input-placeholder { + color: rgba($demo--fg-color, 0.5); + } + &:-moz-placeholder { + color: rgba($demo--fg-color, 0.5); + } + } + + .ascribe-property { + > div, + > input, + > pre, + > select, + > span:not(.glyphicon), + > p, + > p > span, + > textarea { + color: $demo--fg-color; + } + } + + // global notification + .ascribe-global-notification-success { + background-color: lighten($demo--fg-color, 20%); + } + + // uploader progress + .ascribe-progress-bar > .progress-bar { + background-color: lighten($demo--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%); + } + + .action-file.icon-ascribe-ok, + .action-file.icon-ascribe-ok:hover { + color: lighten($demo--fg-color, 20%); + } + + // spinner + .spinner-circle { + border-color: $demo--fg-color; + } + .spinner-inner { + display: none; + } + .btn-secondary .spinner-circle { + border-color: $demo--bg-color; + } + + // video player + .ascribe-media-player .vjs-default-skin { + .vjs-play-progress, + .vjs-volume-level { + background-color: $demo--highlight-color; + } + } + + // pager + .pager li > a, + .pager li > span { + background-color: $demo--fg-color; + border-color: $demo--fg-color; + } + .pager .disabled > a, + .pager .disabled > span { + background-color: $demo--fg-color !important; + border-color: $demo--fg-color; + } + + // intercom + #intercom-container .intercom-launcher-button { + background-color: $demo--button-default-color !important; + border-color: $demo--button-default-color !important; + } +} diff --git a/sass/whitelabel/wallet/index.scss b/sass/whitelabel/wallet/index.scss index 9cd88ee6..0871f3d6 100644 --- a/sass/whitelabel/wallet/index.scss +++ b/sass/whitelabel/wallet/index.scss @@ -4,6 +4,7 @@ @import '23vivi/23vivi_custom_style'; @import 'polline/polline_custom_style'; @import 'artcity/artcity_custom_style'; +@import 'demo/demo_custom_style'; .ascribe-wallet-app { border-radius: 0;