ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Add Liquid Gallery Whitelabel Page

This commit is contained in:
tim 2016-04-06 16:22:03 +02:00
parent b6c8e5c65e
commit 76daa7edc2
8 changed files with 211 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -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
```

73
js/components/whitelabel/wallet/components/market/market_landing.js Normal file
View File

@ -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 (
<div className="container ascribe-form-wrapper landing">
<div className="row">
<div className="col-xs-12">
<div className="row landing--header">
<img className="landing--header-logo" src={logo} />
<div>
{getLangText(`${name} Marketplace is powered by`) + ' '}
<span className="icon-ascribe-logo" />
</div>
</div>
<div className="row 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 MarketLanding;

2
js/components/whitelabel/wallet/constants/wallet_api_urls.js
View File

@ -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}/',

2
js/components/whitelabel/wallet/wallet_app.js
View File

@ -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 = (<div className="hero"/>);
} else {
header = (

42
js/components/whitelabel/wallet/wallet_routes.js
View File

@ -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': (
<Route path='/' component={WalletApp}>
<IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(DemoLanding)} />
<IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(MarketLanding)} />
<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={getLangText('+ NEW WORK')}
aclName='acl_wallet_submit' />
<Route
path='collection'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketPieceList)}
headerTitle={getLangText('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>
),
'liquidgallery': (
<Route path='/' component={WalletApp}>
<IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(MarketLanding)} />
<Route
path='login'
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />

5
js/constants/application_constants.js
View File

@ -68,6 +68,11 @@ const constants = {
'name': 'Demo',
'type': 'wallet'
},
{
'subdomain': 'liquidgallery',
'name': 'Liquid Gallery',
'type': 'wallet'
},
{
'subdomain': 'portfolioreview',
'name': 'Portfolio Review',

1
sass/whitelabel/wallet/market/index.scss
View File

@ -1 +1,2 @@
@import 'market_footer';
@import 'market_custom_style';

181
sass/whitelabel/wallet/demo/demo_custom_style.scss → sass/whitelabel/wallet/market/market_custom_style.scss
View File

@ -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;
}
}