From f12630dfad96674f7cc282f4f803fb0878745c93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 4 Feb 2016 13:44:45 +0100 Subject: [PATCH] Add routes and styling for artcity.ascribe.io --- .../components/artcity/artcity_landing.js | 78 ++++ js/components/whitelabel/wallet/wallet_app.js | 2 +- .../whitelabel/wallet/wallet_routes.js | 39 ++ js/constants/application_constants.js | 5 + .../wallet/artcity/artcity_custom_style.scss | 381 ++++++++++++++++++ sass/whitelabel/wallet/index.scss | 1 + 6 files changed, 505 insertions(+), 1 deletion(-) create mode 100644 js/components/whitelabel/wallet/components/artcity/artcity_landing.js create mode 100644 sass/whitelabel/wallet/artcity/artcity_custom_style.scss diff --git a/js/components/whitelabel/wallet/components/artcity/artcity_landing.js b/js/components/whitelabel/wallet/components/artcity/artcity_landing.js new file mode 100644 index 00000000..c3fbfca4 --- /dev/null +++ b/js/components/whitelabel/wallet/components/artcity/artcity_landing.js @@ -0,0 +1,78 @@ +'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 ArtcityLanding = React.createClass({ + getInitialState() { + return WhitelabelStore.getState(); + }, + + componentWillMount() { + setDocumentTitle('Artcity Marketplace'); + }, + + componentDidMount() { + WhitelabelStore.listen(this.onChange); + WhitelabelActions.fetchWhitelabel(); + }, + + componentWillUnmount() { + WhitelabelStore.unlisten(this.onChange); + }, + + onChange(state) { + this.setState(state); + }, + + render() { + return ( +
+
+
+
+ +
+ {getLangText('Artcity Marketplace is powered by') + ' '} + +
+
+
+
+

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

+ + + +
+
+

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

+ + + +
+
+
+
+
+ ); + } +}); + +export default ArtcityLanding; diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js index 1740c999..86d2b7cb 100644 --- a/js/components/whitelabel/wallet/wallet_app.js +++ b/js/components/whitelabel/wallet/wallet_app.js @@ -32,7 +32,7 @@ let WalletApp = React.createClass({ // 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']).indexOf(subdomain) > -1) { + && (['cyland', 'ikonotv', 'lumenus', '23vivi', 'polline', 'artcity']).indexOf(subdomain) > -1) { header = (
); } else { header =
; diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js index 963107bd..c205f3b3 100644 --- a/js/components/whitelabel/wallet/wallet_routes.js +++ b/js/components/whitelabel/wallet/wallet_routes.js @@ -42,6 +42,8 @@ import Vivi23PieceList from './components/23vivi/23vivi_piece_list'; import PollineLanding from './components/polline/polline_landing'; +import ArtcityLanding from './components/artcity/artcity_landing'; + import { ProxyHandler, AuthRedirect } from '../../../components/ascribe_routes/proxy_handler'; import WalletApp from './wallet_app'; @@ -275,6 +277,43 @@ let ROUTES = { + ), + 'artcity': ( + + + + + + + + + + + + + + + ) }; diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js index dd27484b..b4fb7531 100644 --- a/js/constants/application_constants.js +++ b/js/constants/application_constants.js @@ -58,6 +58,11 @@ const constants = { 'name': 'Polline Art', 'type': 'wallet' }, + { + 'subdomain': 'artcity', + 'name': 'Artcity', + 'type': 'wallet' + }, { 'subdomain': 'portfolioreview', 'name': 'Portfolio Review', diff --git a/sass/whitelabel/wallet/artcity/artcity_custom_style.scss b/sass/whitelabel/wallet/artcity/artcity_custom_style.scss new file mode 100644 index 00000000..ac8811b7 --- /dev/null +++ b/sass/whitelabel/wallet/artcity/artcity_custom_style.scss @@ -0,0 +1,381 @@ +/** Sass cannot use a number as the first character of a variable, so we'll have to settle with artcity **/ +$artcity--fg-color: black; +$artcity--bg-color: #FBFBFB; +$artcity--nav-fg-prim-color: $artcity--fg-color; +$artcity--nav-fg-sec-color: #3a3a3a; +$artcity--nav-bg-color: $artcity--bg-color; +$artcity--nav-highlight-color: #f8f8f8; +$artcity--button-default-color: $artcity--fg-color; +$artcity--highlight-color: #38BFC3; + + +.client--artcity { + /** Landing page **/ + .route--landing { + display: table; + + > .container { + display: table-cell; + padding-bottom: 100px; + vertical-align: middle; + } + + .artcity-landing { + font-weight: normal; + text-align: center; + } + + .artcity-landing--header { + background-color: $artcity--bg-color; + border: 1px solid darken($artcity--bg-color, 20%); + color: $artcity--fg-color; + padding: 2em; + + .artcity-landing--header-logo { + margin: 1em 0 2em 0; + height: 175px; + } + } + + .artcity-landing--content { + background-color: $artcity--bg-color; + border: 1px solid darken($artcity--bg-color, 20%); + border-top: none; + padding: 2em; + } + } + + /** Navbar **/ + .navbar-default { + background-color: $artcity--bg-color; + + .navbar-brand .img-brand { + height: 115%; + } + + .navbar-brand .icon-ascribe-logo { + color: $artcity--nav-fg-prim-color; + &:hover { + color: darken($artcity--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: $artcity--nav-fg-prim-color; + } + + .navbar-nav > li > a:hover { + color: darken($artcity--nav-fg-prim-color, 20%); + } + + .navbar-nav > .active a, + .navbar-nav > .active a:hover, + .navbar-nav > .active a:focus { + background-color: $artcity--nav-bg-color; + border-bottom-color: $artcity--nav-fg-prim-color; + color: $artcity--nav-fg-prim-color; + } + + .navbar-nav > .open > a, + .dropdown-menu > .active > a, + .dropdown-menu > li > a { + color: $artcity--nav-fg-prim-color; + background-color: $artcity--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($artcity--nav-fg-prim-color, 20%); + background-color: $artcity--nav-highlight-color; + } + + .navbar-collapse.collapsing, + .navbar-collapse.collapse.in { + background-color: $artcity--nav-bg-color; + + .navbar-nav > .open > a, + .navbar-nav > .active > a { + background-color: $artcity--nav-highlight-color; + } + } + + .navbar-collapse.collapsing li a, + .navbar-collapse.collapse.in li a { + color: $artcity--nav-fg-prim-color; + } + .navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover { + color: lighten($artcity--nav-fg-prim-color, 20%); + background-color: $artcity--nav-highlight-color; + } + + .navbar-toggle { + border-color: $artcity--highlight-color; + + .icon-bar { + background-color: $artcity--highlight-color; + } + } + + .navbar-toggle:hover, + .navbar-toggle:focus { + border-color: lighten($artcity--highlight-color, 10%); + background-color: $artcity--nav-fg-prim-color; + + .icon-bar { + background-color: lighten($artcity--highlight-color, 10%); + } + } + + .notification-menu { + .dropdown-menu { + background-color: $artcity--nav-bg-color; + } + + .notification-header { + background-color: $artcity--nav-fg-sec-color; + border-top-width: 0; + color: $artcity--nav-bg-color; + } + + .notification-action { + color: $artcity--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($artcity--highlight-color, 30%); + border-color: lighten($artcity--highlight-color, 30%); + } + + .btn-default { + background-color: $artcity--highlight-color; + border-color: $artcity--highlight-color; + + &:hover, + &:active, + &:focus, + &:active:hover, + &:active:focus, + &:active.focus, + &.active:hover, + &.active:focus, + &.active.focus { + background-color: lighten($artcity--highlight-color, 30%); + border-color: lighten($artcity--highlight-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($artcity--bg-color, 20%); + border-color: $artcity--button-default-color; + } + + .btn-secondary { + border-color: $artcity--button-default-color; + color: $artcity--button-default-color; + + &:hover, + &:active, + &:focus, + &:active:hover, + &:active:focus, + &:active.focus, + &.active:hover, + &.active:focus, + &.active.focus { + background-color: $artcity--button-default-color; + border-color: $artcity--button-default-color; + color: $artcity--bg-color; + } + } + + .btn-tertiary { + &:hover, + &:active, + &ctive:hover, + &.active:hover{ + background-color: $artcity--highlight-color; + border-color: $artcity--highlight-color; + color: $artcity--bg-color; + } + } + + /** Other components **/ + .ascribe-piece-list-toolbar .btn-ascribe-add { + display: none; + } + + .ascribe-footer { + display: none; + } + + .ascribe-accordion-list-table-toggle:hover { + color: $artcity--fg-color; + } + + .request-action-badge { + color: $artcity--fg-color; + } + + .acl-information-dropdown-list .title { + color: $artcity--fg-color; + } + + // filter widget + .ascribe-piece-list-toolbar-filter-widget button { + background-color: transparent !important; + border-color: transparent !important; + color: $artcity--button-default-color !important; + + &:hover, + &:active { + background-color: $artcity--button-default-color !important; + border-color: $artcity--button-default-color !important; + color: $artcity--bg-color !important; + } + } + + .icon-ascribe-search { + color: $artcity--fg-color; + } + + // forms + .ascribe-property-wrapper:hover { + border-left-color: rgba($artcity--fg-color, 0.5); + } + + .ascribe-property textarea, + .ascribe-property input, + .search-bar > .form-group > .input-group input { + &::-webkit-input-placeholder { + color: rgba($artcity--fg-color, 0.5); + } + &::-moz-placeholder { + color: rgba($artcity--fg-color, 0.5); + } + &:-ms-input-placeholder { + color: rgba($artcity--fg-color, 0.5); + } + &:-moz-placeholder { + color: rgba($artcity--fg-color, 0.5); + } + } + + .ascribe-property { + > div, + > input, + > pre, + > select, + > span:not(.glyphicon), + > p, + > p > span, + > textarea { + color: $artcity--fg-color; + } + } + + // global notification + .ascribe-global-notification-success { + background-color: lighten($artcity--fg-color, 20%); + } + + // uploader progress + .ascribe-progress-bar > .progress-bar { + background-color: lighten($artcity--fg-color, 20%); + } + + .ascribe-progress-bar span { + text-shadow: -1px 0 lighten($artcity--fg-color, 20%), + 0 1px lighten($artcity--fg-color, 20%), + 1px 0 lighten($artcity--fg-color, 20%), + 0 -1px lighten($artcity--fg-color, 20%); + } + + .action-file.icon-ascribe-ok, + .action-file.icon-ascribe-ok:hover { + color: lighten($artcity--fg-color, 20%); + } + + // spinner + .spinner-circle { + border-color: $artcity--fg-color; + } + .spinner-inner { + display: none; + } + .btn-secondary .spinner-circle { + border-color: $artcity--bg-color; + } + + // video player + .ascribe-media-player .vjs-default-skin { + .vjs-play-progress, + .vjs-volume-level { + background-color: $artcity--highlight-color; + } + } + + // pager + .pager li > a, + .pager li > span { + background-color: $artcity--fg-color; + border-color: $artcity--fg-color; + } + .pager .disabled > a, + .pager .disabled > span { + background-color: $artcity--fg-color !important; + border-color: $artcity--fg-color; + } + + // intercom + #intercom-container .intercom-launcher-button { + background-color: $artcity--button-default-color !important; + border-color: $artcity--button-default-color !important; + } +} diff --git a/sass/whitelabel/wallet/index.scss b/sass/whitelabel/wallet/index.scss index 4e3d2a9a..3d739bce 100644 --- a/sass/whitelabel/wallet/index.scss +++ b/sass/whitelabel/wallet/index.scss @@ -3,6 +3,7 @@ @import 'ikonotv/ikonotv_custom_style'; @import '23vivi/23vivi_custom_style'; @import 'polline/polline_custom_style'; +@import 'artcity/artcity_custom_style'; .ascribe-wallet-app { border-radius: 0;