ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-11-15 01:25:17 +01:00
Code Issues Releases Wiki Activity

Merged in AD-1080-restyle-webapp-with-new-corporate-identity (pull request #104)

Browse Source 
Ad 1080 restyle webapp with new corporate identity
This commit is contained in:
TimDaubenschuetz 2015-10-22 11:55:34 +02:00
commit e16198e3ab
95 changed files with 2543 additions and 1034 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
fonts/ascribe-logo.eot Normal file
View File

Binary file not shown.

19
fonts/ascribe-logo.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="ascribe-logo" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe800;" glyph-name="add" d="M1024 482.684h-477.316v477.316h-69.368v-477.316h-477.316v-69.368h477.316v-477.316h69.368v477.316h477.316z" />
<glyph unicode="&#xe801;" glyph-name="sort" d="M429.733 809.882l-139.567 150.118-139.6-150.118 25-23.283 97.5 104.887v-955.486h34.133v955.553l97.533-104.954zM848.433 109.401l-97.5-104.887v955.486h-34.133v-955.553l-97.533 104.954-25-23.283 139.567-150.118 139.6 150.118z" />
<glyph unicode="&#xe802;" glyph-name="search" d="M1021.1-36.711l-305.914 305.583c67.615 73.406 108.95 171.391 108.95 279.060 0 227.579-184.49 412.068-412.068 412.068s-412.068-184.489-412.068-412.068c0-227.578 184.489-412.068 412.068-412.068 107.625 0 205.576 41.3 278.972 108.866l305.927-305.597 24.133 24.156zM412.068 169.997c-208.394 0-377.935 169.541-377.935 377.935s169.541 377.935 377.935 377.935 377.935-169.54 377.935-377.935c0-208.394-169.541-377.935-377.935-377.935z" />
<glyph unicode="&#xe803;" glyph-name="filter" d="M0 960l384.89-534.756 8.722-489.244 184.119 174.521 0.324 314.724 445.947 534.756h-1024zM551.839 447.106c-5.109-6.126-7.91-13.849-7.919-21.826l-0.308-300.068-117.253-111.141-7.341 411.782c-0.124 6.948-2.365 13.692-6.424 19.331l-345.97 480.683h884.467l-399.251-478.761z" />
<glyph unicode="&#xe804;" glyph-name="add-white" d="M510.103 923.822c263.415 0 477.719-214.304 477.719-477.719s-214.303-477.718-477.719-477.718c-263.415 0-477.718 214.304-477.718 477.718s214.303 477.719 477.718 477.719zM510.103 957.955c-282.688 0-511.851-229.164-511.851-511.852s229.163-511.851 511.851-511.851 511.852 229.164 511.852 511.851-229.164 511.852-511.852 511.852v0zM796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
<glyph unicode="&#xe805;" d="M512.148 959.852c-282.688 0-511.851-229.164-511.851-511.852s229.164-511.851 511.851-511.851 511.852 229.163 511.852 511.851-229.164 511.852-511.852 511.852z" />
<glyph unicode="&#xe806;" d="M796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
<glyph unicode="&#xe807;" glyph-name="icon" d="M550.306 782.458h-75.373l-249.184-613.64h90.453l62.951 159.627h262.477l62.974-159.627h95.755l-250.053 613.64zM403.098 400.255l107.305 274.897 107.28-274.897h-214.586zM1024 448c0 286.204-225.796 512-511.999 512s-512.001-225.796-512.001-512c0-286.204 225.797-512 512.001-512s511.999 225.797 511.999 512v0zM962.165 448c0-245.94-204.249-450.164-450.164-450.164-245.941 0-450.161 204.224-450.161 450.164s204.221 450.164 450.161 450.164c245.915 0 450.164-204.224 450.164-450.164v0z" />
<glyph unicode="&#xe808;" glyph-name="logo" horiz-adv-x="4195" d="M499.718 326.19c0 109.528-24.641 157.448-61.607 198.517-38.336 41.077-95.832 71.191-191.673 71.191-95.832 0-171.135-36.957-212.212-64.34l27.382-52.031c13.695 10.954 88.998 54.764 187.571 54.764 99.943 0 177.978-57.505 177.978-173.876v-34.225l-173.876-6.843c-171.135-6.852-253.281-82.146-253.281-191.673s88.989-191.674 212.212-191.674c123.214 0 191.674 75.294 214.944 102.676v-88.989h72.562v376.503zM427.156 113.978c-30.114-47.92-98.573-116.371-201.258-116.371-102.676 0-154.707 61.607-154.707 130.066 0 68.45 42.448 125.955 175.246 132.798l180.719 10.955v-157.448zM1063.784 123.562c0 120.482-119.12 161.551-198.525 188.933-78.035 27.382-146.494 56.134-146.494 121.853s50.661 101.314 121.853 101.314c71.191 0 115.001-24.641 158.819-72.561l43.809 43.809c-49.291 56.134-106.795 88.989-199.887 88.989-93.1 0-193.044-54.764-193.044-169.765s119.112-156.078 173.876-175.246c54.764-19.168 168.394-47.92 168.394-130.066s-69.821-120.482-149.226-120.482c-79.413 0-142.391 39.707-183.46 99.952l-50.661-41.077c39.707-65.718 113.639-123.215 231.38-123.215s223.166 68.451 223.166 187.562v0zM1679.873 93.44c0 0-68.451-93.1-212.212-93.1-143.753 0-242.326 113.639-242.326 271.087s112.268 260.132 239.594 260.132c125.955 0 180.719-61.616 208.101-93.1l45.18 47.912c-13.687 17.798-82.146 109.528-250.548 109.528-167.024 0-317.628-132.798-317.628-328.583 0-194.406 139.65-331.315 310.785-331.315s236.853 82.146 260.133 109.528l-41.077 47.912zM2142.607 586.323c0 0-27.382 9.576-68.45 9.576-68.459 0-138.28-43.81-161.551-130.058v119.112h-71.2v-635.266h71.2v342.278c0 109.528 34.225 162.921 45.18 177.978 10.946 15.066 47.912 57.505 109.528 57.505 34.225 0 53.394-5.473 68.451-10.955l6.843 69.83zM2353.432 810.851c0 32.855-26.012 58.875-58.867 58.875-32.863 0-58.875-26.020-58.875-58.875s26.011-58.875 58.875-58.875c32.855 0 58.867 26.020 58.867 58.875v0zM2330.161 584.953h-71.191v-635.266h71.191v635.266zM3144.767 267.315c0 188.941-123.223 328.583-312.155 328.583-91.73 0-177.987-36.957-239.594-132.798v431.267h-71.191v-944.68h71.191v120.482c53.394-93.1 141.012-134.169 236.853-134.169 191.673 0 314.896 143.753 314.896 331.315v0zM3069.464 267.315c0-146.494-86.257-266.976-239.594-266.976-154.707 0-239.594 120.482-239.594 266.976 0 147.864 84.887 266.976 239.594 266.976 153.337 0 239.594-119.112 239.594-266.976v0zM3836.158 298.808c0 171.135-120.482 297.090-287.514 297.090-168.402 0-308.044-132.798-308.044-328.583 0-194.406 119.112-331.315 303.933-331.315 184.83 0 264.244 95.833 264.244 95.833l-34.234 50.661c0 0-79.405-82.154-223.158-82.154-143.761 0-228.64 99.952-235.491 250.548h516.154c0 0 4.111 27.382 4.111 47.92v0zM3318.633 312.495c4.111 88.998 68.459 221.796 225.899 221.796 157.449 0 219.065-139.65 219.065-221.796h-444.963zM4027.755 897.194h-26.663l-88.15-217.077h31.998l22.269 56.468h92.852l22.277-56.468h33.874l-88.457 217.077zM3975.68 761.989l37.96 97.245 37.951-97.245h-75.91zM4195.326 778.878c0 101.246-79.876 181.122-181.121 181.122s-181.122-79.876-181.122-181.122c0-101.245 79.876-181.122 181.122-181.122s181.121 79.876 181.121 181.122v0zM4173.452 778.878c0-87.002-72.254-159.247-159.247-159.247-87.002 0-159.246 72.245-159.246 159.247s72.244 159.247 159.246 159.247c86.993 0 159.247-72.245 159.247-159.247v0z" />
</font></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
fonts/ascribe-logo.ttf Normal file
View File

Binary file not shown.

BIN
fonts/ascribe-logo.woff Normal file
View File

Binary file not shown.

43
fonts/ascribe_logo.svg
View File

@ -1,43 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="595.28px" height="419.53px" viewBox="0 0 595.28 419.53" enable-background="new 0 0 595.28 419.53" xml:space="preserve">
<g>
<path d="M362.878,195.61c-1.647-6.692-4.142-13.088-7.412-19.008c-3.401-6.166-7.549-11.797-12.319-16.725
c-4.951-5.127-10.511-9.553-16.519-13.149c-6.202-3.728-12.833-6.607-19.722-8.564c-7.088-2.003-14.352-3.075-21.602-3.188
c-7.417-0.083-14.843,0.769-22.059,2.592c-4.731,1.212-9.302,2.843-13.703,4.791l7.269,14.875
c3.387-1.463,6.895-2.699,10.517-3.627c5.788-1.463,11.74-2.16,17.735-2.082c5.8,0.09,11.635,0.954,17.334,2.562
c5.471,1.554,10.754,3.852,15.717,6.833c4.77,2.856,9.184,6.372,13.131,10.46c3.762,3.886,7.035,8.333,9.73,13.219
c2.57,4.651,4.53,9.687,5.832,14.971c1.237,5.021,1.809,10.269,1.693,15.6c-0.105,5.053-0.9,10.154-2.362,15.145
c-1.409,4.783-3.46,9.395-6.094,13.703c-2.521,4.121-5.625,7.939-9.224,11.348c-3.437,3.256-7.326,6.064-11.562,8.352
c-4.053,2.188-8.428,3.838-13.016,4.914c-4.344,1.023-8.87,1.465-13.477,1.32c-4.341-0.141-8.718-0.875-12.994-2.176
c-4.068-1.244-7.992-3.043-11.661-5.348c-3.473-2.182-6.704-4.871-9.592-7.98c-2.712-2.932-5.052-6.266-6.955-9.906
c-1.799-3.445-3.146-7.162-4.008-11.059c-0.815-3.658-1.137-7.471-0.957-11.338c0.167-3.615,0.837-7.264,1.997-10.867
c1.049-3.288,2.634-6.606,4.587-9.602c1.839-2.828,4.165-5.532,6.732-7.829c2.425-2.172,5.2-4.05,8.23-5.574
c2.81-1.405,5.947-2.48,9.076-3.11c2.926-0.591,6.12-0.8,9.219-0.598c2.85,0.188,5.858,0.804,8.694,1.777
c2.586,0.892,5.217,2.22,7.612,3.845c2.159,1.464,4.247,3.347,6.052,5.468c1.635,1.903,3.084,4.162,4.205,6.548
c1.023,2.166,1.791,4.617,2.225,7.114c0.392,2.204,0.48,4.645,0.258,7.045c-0.201,2.135-0.735,4.404-1.526,6.51
c-0.75,1.959-1.806,3.893-3.056,5.598c-1.149,1.572-2.592,3.064-4.174,4.32c-1.398,1.107-3.125,2.129-4.843,2.861
c-1.534,0.648-3.352,1.137-5.082,1.369c-1.563,0.199-3.315,0.184-4.947-0.047c-1.428-0.201-2.979-0.645-4.357-1.248
c-1.193-0.523-2.489-1.326-3.561-2.209c-0.942-0.771-1.886-1.797-2.605-2.832c-0.609-0.871-1.173-1.992-1.563-3.123
c-0.299-0.855-0.512-1.979-0.568-3.033c-0.045-0.795,0.052-1.85,0.234-2.666c0.16-0.684,0.506-1.557,0.893-2.246
c0.262-0.471,0.75-1.094,1.267-1.594c0.28-0.279,0.826-0.666,1.228-0.875c0.257-0.135,0.845-0.338,1.163-0.402
c0.182-0.035,0.657-0.037,0.931-0.008c4.538,0.547,8.644-2.734,9.167-7.275c0.521-4.541-2.736-8.646-7.277-9.168
c-0.898-0.103-3.262-0.293-5.914,0.191c-1.95,0.389-4.019,1.104-5.693,1.97c-1.114,0.58-3.28,1.848-5.187,3.743
c-1.614,1.559-3.085,3.463-4.134,5.345c-1.135,2.027-2.045,4.35-2.577,6.625c-0.535,2.393-0.756,4.984-0.627,7.271
c0.099,1.828,0.434,4.629,1.461,7.555c0.879,2.555,2.137,5.037,3.623,7.16c1.583,2.275,3.546,4.402,5.667,6.146
c2.256,1.855,4.823,3.439,7.435,4.586c2.768,1.209,5.775,2.064,8.678,2.473c3.095,0.443,6.339,0.465,9.418,0.068
c3.234-0.432,6.479-1.309,9.398-2.545c3.105-1.326,6.101-3.1,8.656-5.127c2.727-2.164,5.233-4.762,7.242-7.508
c2.105-2.873,3.891-6.145,5.178-9.51c1.316-3.506,2.19-7.246,2.53-10.838c0.363-3.928,0.214-7.788-0.437-11.451
c-0.68-3.911-1.91-7.825-3.553-11.298c-1.761-3.754-3.986-7.211-6.595-10.25c-2.778-3.264-5.925-6.097-9.351-8.415
c-3.629-2.464-7.502-4.413-11.51-5.795c-4.27-1.468-8.64-2.356-13.008-2.646c-4.605-0.289-9.173,0.005-13.562,0.892
c-4.606,0.927-9.049,2.45-13.225,4.54c-4.354,2.188-8.342,4.896-11.849,8.036c-3.687,3.298-6.906,7.043-9.564,11.13
c-2.787,4.276-4.968,8.853-6.477,13.58c-1.604,4.977-2.535,10.077-2.771,15.155c-0.247,5.332,0.203,10.613,1.333,15.689
c1.174,5.307,3.022,10.398,5.496,15.137c2.583,4.941,5.772,9.477,9.487,13.492c3.88,4.18,8.228,7.793,12.928,10.746
c4.905,3.08,10.16,5.488,15.634,7.164c5.678,1.727,11.493,2.695,17.286,2.887c0.755,0.023,1.51,0.035,2.263,0.035
c5.287,0,10.509-0.602,15.541-1.789c5.996-1.406,11.744-3.578,17.084-6.457c5.519-2.977,10.595-6.646,15.089-10.902
c4.653-4.41,8.678-9.365,11.959-14.727c3.39-5.545,6.03-11.486,7.856-17.676c1.873-6.408,2.892-12.957,3.026-19.457
C365.195,208.741,364.465,202.041,362.878,195.61"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

6
gulpfile.js
View File

@ -111,7 +111,11 @@ gulp.task('sass:build', function () {
] ]
}).on('error', sass.logError)) }).on('error', sass.logError))
.pipe(gulpif(!argv.production, sourcemaps.write('./maps'))) .pipe(gulpif(!argv.production, sourcemaps.write('./maps')))
.pipe(gulpif(argv.production, minifyCss())) // We need to set `advanced` to false, as it merges
// some of the styles wrongly
.pipe(gulpif(argv.production, minifyCss({
advanced: false
})))
.pipe(gulp.dest('./build/css')) .pipe(gulp.dest('./build/css'))
.pipe(browserSync.stream()); .pipe(browserSync.stream());
}); });

7
index.html
View File

@ -28,7 +28,6 @@
<title>ascribe</title> <title>ascribe</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Sans+Pro:400,600,700,900">
<link rel="stylesheet" href="<%= BASE_URL %>static/css/main.css"> <link rel="stylesheet" href="<%= BASE_URL %>static/css/main.css">
<% DEBUG && print('<link rel="stylesheet" href="' + BASE_URL + 'static/css/maps/main.css.map">') %> <% DEBUG && print('<link rel="stylesheet" href="' + BASE_URL + 'static/css/maps/main.css.map">') %>
@ -41,6 +40,12 @@
<% DEBUG && print('window.DEBUG = true'); %> <% DEBUG && print('window.DEBUG = true'); %>
<% DEBUG && print('window.CREDENTIALS = \'' + CREDENTIALS + '\''); %> <% DEBUG && print('window.CREDENTIALS = \'' + CREDENTIALS + '\''); %>
</script> </script>
<!-- Typekit gibson font -->
<script src="https://use.typekit.net/gma2yhj.js"></script>
<script>
try {Typekit.load({ async: true });}
catch(e){}
</script>
</head> </head>
<body> <body>
<div id="main"></div> <div id="main"></div>

48
js/components/ascribe_accordion_list/accordion_list_item.js
View File

@ -1,6 +1,7 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import { Link } from 'react-router';
let AccordionListItem = React.createClass({ let AccordionListItem = React.createClass({
@ -12,6 +13,7 @@ let AccordionListItem = React.createClass({
subheading: React.PropTypes.object, subheading: React.PropTypes.object,
subsubheading: React.PropTypes.object, subsubheading: React.PropTypes.object,
buttons: React.PropTypes.object, buttons: React.PropTypes.object,
linkData: React.PropTypes.string,
children: React.PropTypes.oneOfType([ children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element React.PropTypes.element
@ -19,29 +21,49 @@ let AccordionListItem = React.createClass({
}, },
render() { render() {
const { linkData,
className,
thumbnail,
heading,
subheading,
subsubheading,
buttons,
badge,
children } = this.props;
return ( return (
<div className="row"> <div className="row">
<div className={this.props.className}> <div className={className}>
<div className="wrapper"> <div className="wrapper">
<div className="col-xs-4 col-sm-3 col-md-2 col-lg-2 clear-paddings"> <div className="pull-left">
<div className="thumbnail-wrapper"> <Link to={linkData}>
{this.props.thumbnail} <div className="thumbnail-wrapper">
{thumbnail}
</div>
</Link>
</div> </div>
</div> <div className="accordion-list-item-header">
<div className="col-xs-8 col-sm-9 col-md-9 col-lg-9 col-md-offset-1 col-lg-offset-1 accordion-list-item-header"> <Link to={linkData}>
{this.props.heading} {heading}
{this.props.subheading} </Link>
{this.props.subsubheading} <Link to={linkData}>
{this.props.buttons} {subheading}
</div> {subsubheading}
</Link>
<div className="accordion-list-item-buttons">
{buttons}
</div>
</div>
<span style={{'clear': 'both'}}></span> <span style={{'clear': 'both'}}></span>
<div className="request-action-badge"> <div className="request-action-badge">
{this.props.badge} {badge}
</div> </div>
</div> </div>
</div> </div>
{this.props.children} {children}
</div> </div>
); );
} }

16
js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
View File

@ -11,6 +11,7 @@ import PieceListStore from '../../stores/piece_list_store';
import Button from 'react-bootstrap/lib/Button'; import Button from 'react-bootstrap/lib/Button';
import CreateEditionsButton from '../ascribe_buttons/create_editions_button'; import CreateEditionsButton from '../ascribe_buttons/create_editions_button';
import AscribeSpinner from '../ascribe_spinner';
import { mergeOptions } from '../../utils/general_utils'; import { mergeOptions } from '../../utils/general_utils';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
@ -75,7 +76,10 @@ let AccordionListItemEditionWidget = React.createClass({
// PLEASE FUTURE TIM, DO NOT FUCKING REMOVE IT AGAIN! // PLEASE FUTURE TIM, DO NOT FUCKING REMOVE IT AGAIN!
if(typeof this.state.editionList[pieceId] === 'undefined') { if(typeof this.state.editionList[pieceId] === 'undefined') {
return ( return (
<span className="glyph-ascribe-spool-chunked ascribe-color spin"/> <AscribeSpinner
size='sm'
color='white'
classNames='pull-right margin-left-2px'/>
); );
} else { } else {
return ( return (
@ -98,7 +102,7 @@ let AccordionListItemEditionWidget = React.createClass({
return ( return (
<CreateEditionsButton <CreateEditionsButton
label={getLangText('Create editions')} label={getLangText('Create editions')}
className="btn-xs pull-right" className="btn-secondary btn-sm pull-right"
piece={piece} piece={piece}
toggleCreateEditionsDialog={this.props.toggleCreateEditionsDialog} toggleCreateEditionsDialog={this.props.toggleCreateEditionsDialog}
onPollingSuccess={this.props.onPollingSuccess}/> onPollingSuccess={this.props.onPollingSuccess}/>
@ -112,12 +116,12 @@ let AccordionListItemEditionWidget = React.createClass({
if(piece.first_edition === null) { if(piece.first_edition === null) {
// user has deleted all his editions and only the piece is showing // user has deleted all his editions and only the piece is showing
return ( return (
<Button <button
disabled disabled
title={getLangText('All editions for this have been deleted already.')} title={getLangText('All editions for this have been deleted already.')}
className={classNames('btn', 'btn-default', 'btn-xs', 'ascribe-accordion-list-item-edition-widget', this.props.className)}> className={classNames('btn', 'btn-default', 'btn-secondary', 'btn-sm', 'ascribe-accordion-list-item-edition-widget', this.props.className)}>
{'0 ' + getLangText('Editions')} {'0 ' + getLangText('Editions')}
</Button> </button>
); );
} else { } else {
let editionMapping = piece && piece.first_edition ? piece.first_edition.num_editions_available + '/' + piece.num_editions : ''; let editionMapping = piece && piece.first_edition ? piece.first_edition.num_editions_available + '/' + piece.num_editions : '';
@ -125,7 +129,7 @@ let AccordionListItemEditionWidget = React.createClass({
return ( return (
<button <button
onClick={this.toggleTable} onClick={this.toggleTable}
className={classNames('btn', 'btn-default', 'btn-xs', 'ascribe-accordion-list-item-edition-widget', this.props.className)}> className={classNames('btn', 'btn-secondary', 'btn-sm', 'ascribe-accordion-list-item-edition-widget', this.props.className)}>
{editionMapping + ' ' + getLangText('Editions')} {this.getGlyphicon()} {editionMapping + ' ' + getLangText('Editions')} {this.getGlyphicon()}
</button> </button>
); );

42
js/components/ascribe_accordion_list/accordion_list_item_piece.js
View File

@ -34,28 +34,42 @@ let AccordionListItemPiece = React.createClass({
}, },
render() { render() {
const { className, piece, artistName, buttons, badge, children, subsubheading } = this.props;
const { url, url_safe } = piece.thumbnail;
let thumbnail;
// Since we're going to refactor the thumbnail generation anyway at one point,
// for not use the annoying ascribe_spiral.png, we're matching the url against
// this name and replace it with a CSS version of the new logo.
if(url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
thumbnail = (
<span className="ascribe-logo-circle">
<span>A</span>
</span>
);
} else {
thumbnail = (
<div style={{backgroundImage: 'url("' + url_safe + '")'}}/>
);
}
return ( return (
<AccordionListItem <AccordionListItem
className={this.props.className} className={className}
thumbnail={ thumbnail={thumbnail}
<Link to={this.getLinkData()}> heading={<h1>{piece.title}</h1>}
<img src={this.props.piece.thumbnail.url_safe}/>
</Link>}
heading={
<Link to={this.getLinkData()}>
<h1>{this.props.piece.title}</h1>
</Link>}
subheading={ subheading={
<h3> <h3>
{getLangText('by ')} {getLangText('by ')}
{this.props.artistName ? this.props.artistName : this.props.piece.artist_name} {artistName ? artistName : piece.artist_name}
</h3> </h3>
} }
subsubheading={this.props.subsubheading} subsubheading={subsubheading}
buttons={this.props.buttons} buttons={buttons}
badge={this.props.badge} badge={badge}
linkData={this.getLinkData()}
> >
{this.props.children} {children}
</AccordionListItem> </AccordionListItem>
); );
} }

4
js/components/ascribe_app.js
View File

@ -23,7 +23,9 @@ let AscribeApp = React.createClass({
<div className="container ascribe-default-app"> <div className="container ascribe-default-app">
<Header routes={routes} /> <Header routes={routes} />
{/* Routes are injected here */} {/* Routes are injected here */}
{children} <div className="ascribe-body">
{children}
</div>
<Footer /> <Footer />
<GlobalNotification /> <GlobalNotification />
<div id="modal" className="container"></div> <div id="modal" className="container"></div>

11
js/components/ascribe_buttons/create_editions_button.js
View File

@ -5,6 +5,8 @@ import React from 'react';
import EditionListActions from '../../actions/edition_list_actions'; import EditionListActions from '../../actions/edition_list_actions';
import EditionListStore from '../../stores/edition_list_store'; import EditionListStore from '../../stores/edition_list_store';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
import classNames from 'classnames'; import classNames from 'classnames';
@ -75,14 +77,17 @@ let CreateEditionsButton = React.createClass({
return ( return (
<button <button
disabled disabled
className={classNames('btn', 'btn-default', this.props.className)}> className={classNames('btn', this.props.className)}>
{getLangText('Creating editions')} <span className="glyph-ascribe-spool-chunked spin"/> {getLangText('Creating editions')} <AscribeSpinner
size='sm'
color='white'
classNames='pull-right margin-left-2px'/>
</button> </button>
); );
} else { } else {
return ( return (
<button <button
className={classNames('btn', 'btn-default', this.props.className)} className={classNames('btn', this.props.className)}
onClick={this.props.toggleCreateEditionsDialog}> onClick={this.props.toggleCreateEditionsDialog}>
{this.props.label} {this.props.label}
</button> </button>

5
js/components/ascribe_detail/edition.js
View File

@ -30,6 +30,7 @@ import Note from './note';
import ApiUrls from '../../constants/api_urls'; import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants'; import AppConstants from '../../constants/application_constants';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
@ -81,7 +82,7 @@ let Edition = React.createClass({
</Col> </Col>
<Col md={6} className="ascribe-edition-details"> <Col md={6} className="ascribe-edition-details">
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<hr/> <hr style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.props.edition.title}</h1> <h1 className="ascribe-detail-title">{this.props.edition.title}</h1>
<EditionDetailProperty label="BY" value={this.props.edition.artist_name} /> <EditionDetailProperty label="BY" value={this.props.edition.artist_name} />
<EditionDetailProperty label="DATE" value={ this.props.edition.date_created.slice(0, 4) } /> <EditionDetailProperty label="DATE" value={ this.props.edition.date_created.slice(0, 4) } />
@ -279,7 +280,7 @@ let CoaDetails = React.createClass({
} }
return ( return (
<div className="text-center"> <div className="text-center">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> <AscribeSpinner color='dark-blue' size='lg'/>
</div> </div>
); );
} }

4
js/components/ascribe_detail/edition_container.js
View File

@ -7,7 +7,7 @@ import EditionStore from '../../stores/edition_store';
import Edition from './edition'; import Edition from './edition';
import AppConstants from '../../constants/application_constants'; import AscribeSpinner from '../ascribe_spinner';
import { setDocumentTitle } from '../../utils/dom_utils'; import { setDocumentTitle } from '../../utils/dom_utils';
@ -78,7 +78,7 @@ let EditionContainer = React.createClass({
} else { } else {
return ( return (
<div className="fullpage-spinner"> <div className="fullpage-spinner">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> <AscribeSpinner color='dark-blue' size='lg'/>
</div> </div>
); );
} }

2
js/components/ascribe_detail/further_details.js
View File

@ -9,7 +9,6 @@ import Form from './../ascribe_forms/form';
import PieceExtraDataForm from './../ascribe_forms/form_piece_extradata'; import PieceExtraDataForm from './../ascribe_forms/form_piece_extradata';
import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions'; import GlobalNotificationActions from '../../actions/global_notification_actions';
@ -17,6 +16,7 @@ import FurtherDetailsFileuploader from './further_details_fileuploader';
import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils'; import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
let FurtherDetails = React.createClass({ let FurtherDetails = React.createClass({
propTypes: { propTypes: {
editable: React.PropTypes.bool, editable: React.PropTypes.bool,

5
js/components/ascribe_detail/piece_container.js
View File

@ -35,7 +35,8 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
import Note from './note'; import Note from './note';
import ApiUrls from '../../constants/api_urls'; import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants'; import AscribeSpinner from '../ascribe_spinner';
import { mergeOptions } from '../../utils/general_utils'; import { mergeOptions } from '../../utils/general_utils';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
import { setDocumentTitle } from '../../utils/dom_utils'; import { setDocumentTitle } from '../../utils/dom_utils';
@ -276,7 +277,7 @@ let PieceContainer = React.createClass({
} else { } else {
return ( return (
<div className="fullpage-spinner"> <div className="fullpage-spinner">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> <AscribeSpinner color='dark-blue' size='lg'/>
</div> </div>
); );
} }

7
js/components/ascribe_forms/create_editions_form.js
View File

@ -8,6 +8,7 @@ import Property from '../ascribe_forms/property';
import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions'; import GlobalNotificationActions from '../../actions/global_notification_actions';
import AscribeSpinner from '../ascribe_spinner';
import ApiUrls from '../../constants/api_urls'; import ApiUrls from '../../constants/api_urls';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
@ -43,12 +44,12 @@ let CreateEditionsForm = React.createClass({
buttons={ buttons={
<button <button
type="submit" type="submit"
className="btn ascribe-btn ascribe-btn-login"> className="btn btn-default btn-wide">
{getLangText('Create editions')} {getLangText('Create editions')}
</button>} </button>}
spinner={ spinner={
<button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner"> <button className="btn btn-default btn-wide btn-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" /> <AscribeSpinner color="dark-blue" size="md" />
</button> </button>
}> }>
<Property <Property

6
js/components/ascribe_forms/form_consign.js
View File

@ -8,7 +8,7 @@ import Form from './form';
import Property from './property'; import Property from './property';
import InputTextAreaToggable from './input_textarea_toggable'; import InputTextAreaToggable from './input_textarea_toggable';
import AppConstants from '../../constants/application_constants'; import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils.js'; import { getLangText } from '../../utils/lang_utils.js';
@ -43,7 +43,9 @@ let ConsignForm = React.createClass({
</div>} </div>}
spinner={ spinner={
<div className="modal-footer"> <div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} /> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div>}> </div>}>
<Property <Property
name='consignee' name='consignee'

7
js/components/ascribe_forms/form_contract_agreement.js
View File

@ -15,6 +15,7 @@ import PropertyCollapsible from './property_collapsible';
import InputTextAreaToggable from './input_textarea_toggable'; import InputTextAreaToggable from './input_textarea_toggable';
import ApiUrls from '../../constants/api_urls'; import ApiUrls from '../../constants/api_urls';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
import { mergeOptions } from '../../utils/general_utils'; import { mergeOptions } from '../../utils/general_utils';
@ -101,12 +102,12 @@ let ContractAgreementForm = React.createClass({
handleSuccess={this.handleSubmitSuccess} handleSuccess={this.handleSubmitSuccess}
buttons={<button buttons={<button
type="submit" type="submit"
className="btn ascribe-btn ascribe-btn-login"> className="btn btn-default btn-wide">
{getLangText('Send contract')} {getLangText('Send contract')}
</button>} </button>}
spinner={ spinner={
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner"> <span className="btn btn-default btn-wide btn-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" /> <AscribeSpinner color="dark-blue" size="md" />
</span> </span>
}> }>
<div className="ascribe-form-header"> <div className="ascribe-form-header">

2
js/components/ascribe_forms/form_copyright_association.js
View File

@ -47,7 +47,7 @@ let CopyrightAssociationForm = React.createClass({
handleSuccess={this.handleSubmitSuccess}> handleSuccess={this.handleSubmitSuccess}>
<Property <Property
name="copyright_association" name="copyright_association"
className="ascribe-settings-property-collapsible-toggle" className="ascribe-property-collapsible-toggle"
label={getLangText('Copyright Association')} label={getLangText('Copyright Association')}
style={{paddingBottom: 0}}> style={{paddingBottom: 0}}>
<select defaultValue={selectedState} name="contract"> <select defaultValue={selectedState} name="contract">

6
js/components/ascribe_forms/form_delete_edition.js
View File

@ -5,7 +5,7 @@ import React from 'react';
import Form from './form'; import Form from './form';
import ApiUrls from '../../constants/api_urls'; import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants'; import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
@ -55,7 +55,9 @@ let EditionDeleteForm = React.createClass({
} }
spinner={ spinner={
<div className="modal-footer"> <div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} /> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div> </div>
}> }>
<p>{getLangText('Are you sure you would like to permanently delete this edition')}&#63;</p> <p>{getLangText('Are you sure you would like to permanently delete this edition')}&#63;</p>

6
js/components/ascribe_forms/form_delete_piece.js
View File

@ -5,7 +5,7 @@ import React from 'react';
import Form from '../ascribe_forms/form'; import Form from '../ascribe_forms/form';
import ApiUrls from '../../constants/api_urls'; import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants'; import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
@ -46,7 +46,9 @@ let PieceDeleteForm = React.createClass({
} }
spinner={ spinner={
<div className="modal-footer"> <div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} /> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div> </div>
}> }>
<p>{getLangText('Are you sure you would like to permanently delete this piece')}&#63;</p> <p>{getLangText('Are you sure you would like to permanently delete this piece')}&#63;</p>

10
js/components/ascribe_forms/form_loan.js
View File

@ -15,7 +15,7 @@ import InputCheckbox from './input_checkbox';
import ContractAgreementListStore from '../../stores/contract_agreement_list_store'; import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
import ContractAgreementListActions from '../../actions/contract_agreement_list_actions'; import ContractAgreementListActions from '../../actions/contract_agreement_list_actions';
import AppConstants from '../../constants/application_constants'; import AscribeSpinner from '../ascribe_spinner';
import { mergeOptions } from '../../utils/general_utils'; import { mergeOptions } from '../../utils/general_utils';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
@ -144,7 +144,7 @@ let LoanForm = React.createClass({
return ( return (
<Property <Property
name="terms" name="terms"
className="ascribe-settings-property-collapsible-toggle" className="ascribe-property-collapsible-toggle"
style={{paddingBottom: 0}}> style={{paddingBottom: 0}}>
<InputCheckbox <InputCheckbox
key="terms_explicitly" key="terms_explicitly"
@ -194,7 +194,7 @@ let LoanForm = React.createClass({
return ( return (
<button <button
type="submit" type="submit"
className="btn ascribe-btn ascribe-btn-login"> className="btn btn-default btn-wide">
{getLangText('Finish process')} {getLangText('Finish process')}
</button> </button>
); );
@ -225,7 +225,9 @@ let LoanForm = React.createClass({
buttons={this.getButtons()} buttons={this.getButtons()}
spinner={ spinner={
<div className="modal-footer"> <div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} /> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div>}> </div>}>
<div className={classnames({'ascribe-form-header': true, 'hidden': !this.props.loanHeading})}> <div className={classnames({'ascribe-form-header': true, 'hidden': !this.props.loanHeading})}>
<h3>{this.props.loanHeading}</h3> <h3>{this.props.loanHeading}</h3>

7
js/components/ascribe_forms/form_login.js
View File

@ -14,6 +14,7 @@ import Property from './property';
import ApiUrls from '../../constants/api_urls'; import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants'; import AppConstants from '../../constants/application_constants';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
@ -75,12 +76,12 @@ let LoginForm = React.createClass({
buttons={ buttons={
<button <button
type="submit" type="submit"
className="btn ascribe-btn ascribe-btn-login"> className="btn btn-default btn-wide">
{this.props.submitMessage} {this.props.submitMessage}
</button>} </button>}
spinner={ spinner={
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner"> <span className="btn btn-default btn-wide btn-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" /> <AscribeSpinner color="dark-blue" size="md" />
</span> </span>
}> }>
<div className="ascribe-form-header"> <div className="ascribe-form-header">

7
js/components/ascribe_forms/form_register_piece.js
View File

@ -11,6 +11,7 @@ import InputFineUploader from './input_fineuploader';
import ApiUrls from '../../constants/api_urls'; import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants'; import AppConstants from '../../constants/application_constants';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
import { mergeOptions } from '../../utils/general_utils'; import { mergeOptions } from '../../utils/general_utils';
@ -84,14 +85,14 @@ let RegisterPieceForm = React.createClass({
buttons={ buttons={
<button <button
type="submit" type="submit"
className="btn ascribe-btn ascribe-btn-login" className="btn btn-default btn-wide"
disabled={!this.state.isUploadReady || this.props.disabled}> disabled={!this.state.isUploadReady || this.props.disabled}>
{this.props.submitMessage} {this.props.submitMessage}
</button> </button>
} }
spinner={ spinner={
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner"> <span className="btn btn-default btn-wide btn-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" /> <AscribeSpinner color="dark-blue" size="md" />
</span> </span>
}> }>
<div className="ascribe-form-header"> <div className="ascribe-form-header">

6
js/components/ascribe_forms/form_remove_editions_from_collection.js
View File

@ -5,7 +5,7 @@ import React from 'react';
import Form from './form'; import Form from './form';
import ApiUrls from '../../constants/api_urls'; import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants'; import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
@ -53,7 +53,9 @@ let EditionRemoveFromCollectionForm = React.createClass({
} }
spinner={ spinner={
<div className="modal-footer"> <div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} /> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div> </div>
}> }>
<p>{getLangText('Are you sure you would like to remove these editions from your collection')}&#63;</p> <p>{getLangText('Are you sure you would like to remove these editions from your collection')}&#63;</p>

6
js/components/ascribe_forms/form_remove_piece_from_collection.js
View File

@ -5,7 +5,7 @@ import React from 'react';
import Form from './form'; import Form from './form';
import ApiUrls from '../../constants/api_urls'; import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants'; import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
@ -46,7 +46,9 @@ let PieceRemoveFromCollectionForm = React.createClass({
} }
spinner={ spinner={
<div className="modal-footer"> <div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} /> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div> </div>
}> }>
<p>{getLangText('Are you sure you would like to remove this piece from your collection')}&#63;</p> <p>{getLangText('Are you sure you would like to remove this piece from your collection')}&#63;</p>

6
js/components/ascribe_forms/form_share_email.js
View File

@ -8,7 +8,7 @@ import InputTextAreaToggable from './input_textarea_toggable';
import Button from 'react-bootstrap/lib/Button'; import Button from 'react-bootstrap/lib/Button';
import AppConstants from '../../constants/application_constants'; import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils.js'; import { getLangText } from '../../utils/lang_utils.js';
@ -47,7 +47,9 @@ let ShareForm = React.createClass({
</div>} </div>}
spinner={ spinner={
<div className="modal-footer"> <div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} /> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div>}> </div>}>
<Property <Property
name='share_emails' name='share_emails'

13
js/components/ascribe_forms/form_signup.js
View File

@ -3,8 +3,6 @@
import React from 'react'; import React from 'react';
import { History } from 'react-router'; import { History } from 'react-router';
import { getLangText } from '../../utils/lang_utils';
import UserStore from '../../stores/user_store'; import UserStore from '../../stores/user_store';
import UserActions from '../../actions/user_actions'; import UserActions from '../../actions/user_actions';
@ -16,6 +14,9 @@ import Property from './property';
import InputCheckbox from './input_checkbox'; import InputCheckbox from './input_checkbox';
import ApiUrls from '../../constants/api_urls'; import ApiUrls from '../../constants/api_urls';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils';
let SignupForm = React.createClass({ let SignupForm = React.createClass({
@ -86,12 +87,12 @@ let SignupForm = React.createClass({
getFormData={this.getFormData} getFormData={this.getFormData}
handleSuccess={this.handleSuccess} handleSuccess={this.handleSuccess}
buttons={ buttons={
<button type="submit" className="btn ascribe-btn ascribe-btn-login"> <button type="submit" className="btn btn-default btn-wide">
{this.props.submitMessage} {this.props.submitMessage}
</button>} </button>}
spinner={ spinner={
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner"> <span className="btn btn-default btn-wide btn-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" /> <AscribeSpinner color="dark-blue" size="md" />
</span> </span>
}> }>
<div className="ascribe-form-header"> <div className="ascribe-form-header">
@ -130,7 +131,7 @@ let SignupForm = React.createClass({
{this.props.children} {this.props.children}
<Property <Property
name="terms" name="terms"
className="ascribe-settings-property-collapsible-toggle" className="ascribe-property-collapsible-toggle"
style={{paddingBottom: 0}}> style={{paddingBottom: 0}}>
<InputCheckbox> <InputCheckbox>
<span> <span>

8
js/components/ascribe_forms/form_submit_to_prize.js
View File

@ -9,7 +9,7 @@ import InputCheckbox from './input_checkbox';
import Alert from 'react-bootstrap/lib/Alert'; import Alert from 'react-bootstrap/lib/Alert';
import AppConstants from '../../constants/application_constants'; import AscribeSpinner from '../ascribe_spinner';
import ApiUrls from '../../constants/api_urls'; import ApiUrls from '../../constants/api_urls';
import { getLangText } from '../../utils/lang_utils.js'; import { getLangText } from '../../utils/lang_utils.js';
@ -40,7 +40,9 @@ let PieceSubmitToPrizeForm = React.createClass({
</div>} </div>}
spinner={ spinner={
<div className="modal-footer"> <div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} /> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div>}> </div>}>
<Property <Property
name='artist_statement' name='artist_statement'
@ -64,7 +66,7 @@ let PieceSubmitToPrizeForm = React.createClass({
</Property> </Property>
<Property <Property
name="terms" name="terms"
className="ascribe-settings-property-collapsible-toggle" className="ascribe-property-collapsible-toggle"
style={{paddingBottom: 0}}> style={{paddingBottom: 0}}>
<InputCheckbox> <InputCheckbox>
<span> <span>

6
js/components/ascribe_forms/form_transfer.js
View File

@ -9,8 +9,8 @@ import Form from './form';
import Property from './property'; import Property from './property';
import InputTextAreaToggable from './input_textarea_toggable'; import InputTextAreaToggable from './input_textarea_toggable';
import AscribeSpinner from '../ascribe_spinner';
import AppConstants from '../../constants/application_constants';
import { getLangText } from '../../utils/lang_utils.js'; import { getLangText } from '../../utils/lang_utils.js';
@ -48,7 +48,9 @@ let TransferForm = React.createClass({
</div>} </div>}
spinner={ spinner={
<div className="modal-footer"> <div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} /> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div>}> </div>}>
<Property <Property
name='transferee' name='transferee'

6
js/components/ascribe_forms/form_unconsign.js
View File

@ -8,7 +8,7 @@ import Form from './form';
import Property from './property'; import Property from './property';
import InputTextAreaToggable from './input_textarea_toggable'; import InputTextAreaToggable from './input_textarea_toggable';
import AppConstants from '../../constants/application_constants'; import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils.js'; import { getLangText } from '../../utils/lang_utils.js';
@ -45,7 +45,9 @@ let UnConsignForm = React.createClass({
</div>} </div>}
spinner={ spinner={
<div className="modal-footer"> <div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} /> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div>}> </div>}>
<Property <Property
name='unconsign_message' name='unconsign_message'

7
js/components/ascribe_forms/form_unconsign_request.js
View File

@ -8,8 +8,7 @@ import Form from './form';
import Property from './property'; import Property from './property';
import InputTextAreaToggable from './input_textarea_toggable'; import InputTextAreaToggable from './input_textarea_toggable';
import AscribeSpinner from '../ascribe_spinner';
import AppConstants from '../../constants/application_constants';
import { getLangText } from '../../utils/lang_utils.js'; import { getLangText } from '../../utils/lang_utils.js';
@ -45,7 +44,9 @@ let UnConsignRequestForm = React.createClass({
</div>} </div>}
spinner={ spinner={
<div className="modal-footer"> <div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} /> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div>}> </div>}>
<Property <Property
name='unconsign_request_message' name='unconsign_request_message'

12
js/components/ascribe_forms/property.js
View File

@ -147,7 +147,12 @@ let Property = React.createClass({
if(typeof this.props.onClick === 'function') { if(typeof this.props.onClick === 'function') {
this.props.onClick(); this.props.onClick();
} }
// skip the focus of non-input elements
let nonInputHTMLElements = ['pre', 'div'];
if (this.refs.input &&
nonInputHTMLElements.indexOf(this.refs.input.getDOMNode().nodeName.toLowerCase()) > -1 ) {
return;
}
this.refs.input.getDOMNode().focus(); this.refs.input.getDOMNode().focus();
this.setState({ this.setState({
isFocused: true isFocused: true
@ -242,15 +247,14 @@ let Property = React.createClass({
return ( return (
<div <div
className={'ascribe-settings-wrapper ' + this.getClassName()} className={'ascribe-property-wrapper ' + this.getClassName()}
onClick={this.handleFocus} onClick={this.handleFocus}
onFocus={this.handleFocus}
style={style}> style={style}>
<OverlayTrigger <OverlayTrigger
delay={500} delay={500}
placement="top" placement="top"
overlay={tooltip}> overlay={tooltip}>
<div className={'ascribe-settings-property ' + this.props.className}> <div className={'ascribe-property ' + this.props.className}>
{this.state.errors} {this.state.errors}
<span>{this.props.label}</span> <span>{this.props.label}</span>
{this.renderChildren(style)} {this.renderChildren(style)}

6
js/components/ascribe_forms/property_collapsible.js
View File

@ -62,14 +62,14 @@ let PropertyCollapsile = React.createClass({
return ( return (
<div <div
className={'ascribe-settings-wrapper'} className={'ascribe-property-wrapper'}
style={style}> style={style}>
<OverlayTrigger <OverlayTrigger
delay={500} delay={500}
placement="top" placement="top"
overlay={tooltip}> overlay={tooltip}>
<div <div
className="ascribe-settings-property-collapsible-toggle" className="ascribe-property-collapsible-toggle"
onClick={this.handleFocus} onClick={this.handleFocus}
onFocus={this.handleFocus}> onFocus={this.handleFocus}>
<input <input
@ -84,7 +84,7 @@ let PropertyCollapsile = React.createClass({
collapsible collapsible
expanded={this.state.show} expanded={this.state.show}
className="bs-custom-panel"> className="bs-custom-panel">
<div className="ascribe-settings-property"> <div className="ascribe-property">
{this.renderChildren()} {this.renderChildren()}
</div> </div>
</Panel> </Panel>

5
js/components/ascribe_pagination/pagination_button.js
View File

@ -3,6 +3,7 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router'; import { Link } from 'react-router';
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
@ -28,14 +29,14 @@ let PaginationButton = React.createClass({
page -= 1; page -= 1;
directionDisplay = ( directionDisplay = (
<span> <span>
<span aria-hidden="true">&larr;</span> {getLangText('Previous')} <span aria-hidden="true"><Glyphicon glyph='chevron-left'/></span> {getLangText('Previous')}
</span> </span>
); );
} else { } else {
page += 1; page += 1;
directionDisplay = ( directionDisplay = (
<span> <span>
{getLangText('Next')} <span aria-hidden="true">&rarr;</span> {getLangText('Next')} <span aria-hidden="true"><Glyphicon glyph='chevron-right'/></span>
</span> </span>
); );
} }

8
js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
View File

@ -74,15 +74,15 @@ let PieceListToolbar = React.createClass({
<span className="pull-left"> <span className="pull-left">
{children} {children}
</span> </span>
<span className="pull-right">
{this.getOrderWidget()}
{this.getFilterWidget()}
</span>
<SearchBar <SearchBar
className="pull-right search-bar ascribe-input-glyph" className="pull-right search-bar ascribe-input-glyph"
searchFor={searchFor} searchFor={searchFor}
searchQuery={searchQuery} searchQuery={searchQuery}
threshold={AppConstants.searchThreshold}/> threshold={AppConstants.searchThreshold}/>
<span className="pull-right">
{this.getOrderWidget()}
{this.getFilterWidget()}
</span>
</div> </div>
</div> </div>
</div> </div>

2
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
View File

@ -76,7 +76,7 @@ let PieceListToolbarFilterWidgetFilter = React.createClass({
render() { render() {
let filterIcon = ( let filterIcon = (
<span> <span>
<span className="glyphicon glyphicon-filter" aria-hidden="true"></span> <span className="ascribe-icon icon-ascribe-filter" aria-hidden="true"></span>
<span style={this.isFilterActive()}>*</span> <span style={this.isFilterActive()}>*</span>
</span> </span>
); );

4
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
View File

@ -47,8 +47,8 @@ let PieceListToolbarOrderWidget = React.createClass({
render() { render() {
let filterIcon = ( let filterIcon = (
<span> <span>
<span className="glyphicon glyphicon-sort-by-alphabet" aria-hidden="true"></span> <span className="ascribe-icon icon-ascribe-sort" aria-hidden="true"></span>
<span style={this.isOrderActive()}>*</span> <span style={this.isOrderActive()}>&middot;</span>
</span> </span>
); );
return ( return (

6
js/components/ascribe_settings/account_settings.js
View File

@ -15,7 +15,7 @@ import AclProxy from '../acl_proxy';
import CopyrightAssociationForm from '../ascribe_forms/form_copyright_association'; import CopyrightAssociationForm from '../ascribe_forms/form_copyright_association';
import ApiUrls from '../../constants/api_urls'; import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants'; import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
@ -37,7 +37,7 @@ let AccountSettings = React.createClass({
}, },
render() { render() {
let content = <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />; let content = <AscribeSpinner color='dark-blue' size='lg'/>;
let profile = null; let profile = null;
if (this.props.currentUser.username) { if (this.props.currentUser.username) {
@ -78,7 +78,7 @@ let AccountSettings = React.createClass({
getFormData={this.getFormDataProfile}> getFormData={this.getFormDataProfile}>
<Property <Property
name="hash_locally" name="hash_locally"
className="ascribe-settings-property-collapsible-toggle" className="ascribe-property-collapsible-toggle"
style={{paddingBottom: 0}}> style={{paddingBottom: 0}}>
<InputCheckbox <InputCheckbox
defaultChecked={this.props.currentUser.profile.hash_locally}> defaultChecked={this.props.currentUser.profile.hash_locally}>

4
js/components/ascribe_settings/api_settings.js
View File

@ -15,7 +15,7 @@ import ActionPanel from '../ascribe_panel/action_panel';
import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph'; import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
import ApiUrls from '../../constants/api_urls'; import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants'; import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
@ -57,7 +57,7 @@ let APISettings = React.createClass({
}, },
getApplications(){ getApplications(){
let content = <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />; let content = <AscribeSpinner color='dark-blue' size='lg'/>;
if (this.state.applications.length > -1) { if (this.state.applications.length > -1) {
content = this.state.applications.map(function(app, i) { content = this.state.applications.map(function(app, i) {

4
js/components/ascribe_settings/bitcoin_wallet_settings.js
View File

@ -10,7 +10,7 @@ import Property from '../ascribe_forms/property';
import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph'; import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
import AppConstants from '../../constants/application_constants'; import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
@ -38,7 +38,7 @@ let BitcoinWalletSettings = React.createClass({
}, },
render() { render() {
let content = <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />; let content = <AscribeSpinner color='dark-blue' size='lg'/>;
if (this.state.walletSettings.btc_public_key) { if (this.state.walletSettings.btc_public_key) {
content = ( content = (

34
js/components/ascribe_spinner.js Normal file
View File

@ -0,0 +1,34 @@
'use strict';
import React from 'react';
import classNames from 'classnames';
let AscribeSpinner = React.createClass({
propTypes: {
classNames: React.PropTypes.string,
size: React.PropTypes.oneOf(['sm', 'md', 'lg']),
color: React.PropTypes.oneOf(['blue', 'dark-blue', 'light-blue', 'pink', 'black', 'loop'])
},
getDefaultProps() {
return {
inline: false,
size: 'md',
color: 'loop'
};
},
render() {
return (
<div className={
classNames('spinner-wrapper-' + this.props.size,
'spinner-wrapper-' + this.props.color,
this.props.classNames)}>
<div className={classNames('spinner-circle')}></div>
<div className={classNames('spinner-inner')}>A</div>
</div>
);
}
});
export default AscribeSpinner;

8
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js
View File

@ -3,7 +3,7 @@
import React from 'react'; import React from 'react';
import ProgressBar from 'react-bootstrap/lib/ProgressBar'; import ProgressBar from 'react-bootstrap/lib/ProgressBar';
import AppConstants from '../../../constants/application_constants'; import AscribeSpinner from '../../ascribe_spinner';
import { getLangText } from '../../../utils/lang_utils'; import { getLangText } from '../../../utils/lang_utils';
let FileDragAndDropPreviewImage = React.createClass({ let FileDragAndDropPreviewImage = React.createClass({
@ -53,7 +53,11 @@ let FileDragAndDropPreviewImage = React.createClass({
} }
} else { } else {
actionSymbol = <img height={35} className="action-file" src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />; actionSymbol = (
<div className="spinner-file">
<AscribeSpinner color='dark-blue' size='md' />
</div>
);
} }
return ( return (

8
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
View File

@ -3,7 +3,7 @@
import React from 'react'; import React from 'react';
import ProgressBar from 'react-bootstrap/lib/ProgressBar'; import ProgressBar from 'react-bootstrap/lib/ProgressBar';
import AppConstants from '../../../constants/application_constants'; import AscribeSpinner from '../../ascribe_spinner';
import { getLangText } from '../../../utils/lang_utils'; import { getLangText } from '../../../utils/lang_utils';
let FileDragAndDropPreviewOther = React.createClass({ let FileDragAndDropPreviewOther = React.createClass({
@ -49,7 +49,11 @@ let FileDragAndDropPreviewOther = React.createClass({
} }
} else { } else {
actionSymbol = <img height={35} src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />; actionSymbol = (
<div className="spinner-file">
<AscribeSpinner color='dark-blue' size='md' />
</div>
);
} }
return ( return (

2
js/components/ascribe_uploader/react_s3_fine_uploader.js
View File

@ -326,7 +326,7 @@ let ReactS3FineUploader = React.createClass({
.then((res) => { .then((res) => {
return res.json(); return res.json();
}) })
.then((res) =>{ .then((res) => {
if(res.otherdata) { if(res.otherdata) {
file.s3Url = res.otherdata.url_safe; file.s3Url = res.otherdata.url_safe;
file.s3UrlSafe = res.otherdata.url_safe; file.s3UrlSafe = res.otherdata.url_safe;

8
js/components/coa_verify_container.js
View File

@ -9,6 +9,8 @@ import Form from './ascribe_forms/form';
import Property from './ascribe_forms/property'; import Property from './ascribe_forms/property';
import InputTextAreaToggable from './ascribe_forms/input_textarea_toggable'; import InputTextAreaToggable from './ascribe_forms/input_textarea_toggable';
import AscribeSpinner from './ascribe_spinner';
import ApiUrls from '../constants/api_urls'; import ApiUrls from '../constants/api_urls';
import { getLangText } from '../utils/lang_utils'; import { getLangText } from '../utils/lang_utils';
import { setDocumentTitle } from '../utils/dom_utils'; import { setDocumentTitle } from '../utils/dom_utils';
@ -62,12 +64,12 @@ let CoaVerifyForm = React.createClass({
buttons={ buttons={
<button <button
type="submit" type="submit"
className="btn ascribe-btn ascribe-btn-login"> className="btn btn-default btn-wide">
{getLangText('Verify your Certificate of Authenticity')} {getLangText('Verify your Certificate of Authenticity')}
</button>} </button>}
spinner={ spinner={
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner"> <span className="btn btn-default btn-wide btn-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" /> <AscribeSpinner color="dark-blue" size="md" />
</span> </span>
}> }>
<Property <Property

1
js/components/footer.js
View File

@ -8,7 +8,6 @@ let Footer = React.createClass({
render() { render() {
return ( return (
<div className="ascribe-footer"> <div className="ascribe-footer">
<hr />
<p className="ascribe-sub-sub-statement"> <p className="ascribe-sub-sub-statement">
<br /> <br />
<a href="http://docs.ascribe.apiary.io/" target="_blank">api</a> | <a href="http://docs.ascribe.apiary.io/" target="_blank">api</a> |

13
js/components/header.js
View File

@ -62,13 +62,13 @@ let Header = React.createClass({
}, },
getLogo(){ getLogo(){
if (this.state.whitelabel && this.state.whitelabel.logo){ let { whitelabel } = this.state;
return <img className="img-brand" src={this.state.whitelabel.logo} />; if (whitelabel.subdomain && whitelabel.subdomain !== 'www' && whitelabel.logo){
return (<img className="img-brand" src={whitelabel.logo}/>);
} }
return ( return (
<span> <span>
<span>ascribe </span> <span className="icon-ascribe-logo"></span>
<span className="glyph-ascribe-spool-chunked ascribe-color"></span>
</span> </span>
); );
}, },
@ -79,10 +79,9 @@ let Header = React.createClass({
aclObject={this.state.whitelabel} aclObject={this.state.whitelabel}
aclName="acl_view_powered_by"> aclName="acl_view_powered_by">
<li> <li>
<a className="pull-right" href="https://www.ascribe.io/" target="_blank"> <a className="pull-right ascribe-powered-by" href="https://www.ascribe.io/" target="_blank">
<span id="powered">{getLangText('powered by')} </span> <span id="powered">{getLangText('powered by')} </span>
<span>ascribe </span> <span className="icon-ascribe-logo"></span>
<span className="glyph-ascribe-spool-chunked ascribe-color"></span>
</a> </a>
</li> </li>
</AclProxy> </AclProxy>

11
js/components/logout_container.js
View File

@ -3,6 +3,8 @@
import React from 'react'; import React from 'react';
import { History } from 'react-router'; import { History } from 'react-router';
import AscribeSpinner from './ascribe_spinner';
import UserActions from '../actions/user_actions'; import UserActions from '../actions/user_actions';
import { alt, altWhitelabel, altUser, altThirdParty } from '../alt'; import { alt, altWhitelabel, altUser, altThirdParty } from '../alt';
@ -26,7 +28,14 @@ let LogoutContainer = React.createClass({
render() { render() {
setDocumentTitle(getLangText('Log out')); setDocumentTitle(getLangText('Log out'));
return null; return (
<div className="ascribe-loading-position">
<AscribeSpinner color='dark-blue' size='lg'/>
<h3 className="text-center">
{getLangText('Just a sec, we\'re logging you out...')}
</h3>
</div>
);
} }
}); });

13
js/components/password_reset_container.js
View File

@ -6,6 +6,7 @@ import { History } from 'react-router';
import Form from './ascribe_forms/form'; import Form from './ascribe_forms/form';
import Property from './ascribe_forms/property'; import Property from './ascribe_forms/property';
import ApiUrls from '../constants/api_urls'; import ApiUrls from '../constants/api_urls';
import AscribeSpinner from './ascribe_spinner';
import GlobalNotificationModel from '../models/global_notification_model'; import GlobalNotificationModel from '../models/global_notification_model';
import GlobalNotificationActions from '../actions/global_notification_actions'; import GlobalNotificationActions from '../actions/global_notification_actions';
@ -87,12 +88,12 @@ let PasswordRequestResetForm = React.createClass({
buttons={ buttons={
<button <button
type="submit" type="submit"
className="btn ascribe-btn ascribe-btn-login"> className="btn btn-default btn-wide">
{getLangText('Reset your password')} {getLangText('Reset your password')}
</button>} </button>}
spinner={ spinner={
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner"> <span className="btn btn-default btn-wide btn-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" /> <AscribeSpinner color="dark-blue" size="md" />
</span> </span>
}> }>
<div className="ascribe-form-header"> <div className="ascribe-form-header">
@ -145,12 +146,12 @@ let PasswordResetForm = React.createClass({
buttons={ buttons={
<button <button
type="submit" type="submit"
className="btn ascribe-btn ascribe-btn-login"> className="btn btn-default btn-wide">
{getLangText('Reset your password')} {getLangText('Reset your password')}
</button>} </button>}
spinner={ spinner={
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner"> <span className="btn btn-default btn-wide btn-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" /> <AscribeSpinner color="dark-blue" size="md" />
</span> </span>
}> }>
<div className="ascribe-form-header"> <div className="ascribe-form-header">

13
js/components/piece_list.js
View File

@ -20,6 +20,8 @@ import PieceListFilterDisplay from './piece_list_filter_display';
import PieceListBulkModal from './ascribe_piece_list_bulk_modal/piece_list_bulk_modal'; import PieceListBulkModal from './ascribe_piece_list_bulk_modal/piece_list_bulk_modal';
import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar'; import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
import AscribeSpinner from './ascribe_spinner';
import AppConstants from '../constants/application_constants'; import AppConstants from '../constants/application_constants';
import { mergeOptions } from '../utils/general_utils'; import { mergeOptions } from '../utils/general_utils';
@ -105,7 +107,7 @@ let PieceList = React.createClass({
let currentPage = parseInt(this.props.location.query.page, 10) || 1; let currentPage = parseInt(this.props.location.query.page, 10) || 1;
let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize); let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize);
if (this.state.pieceListCount > 10) { if (this.state.pieceListCount > 20) {
return ( return (
<Pagination <Pagination
currentPage={currentPage} currentPage={currentPage}
@ -151,7 +153,7 @@ let PieceList = React.createClass({
}, },
render() { render() {
let loadingElement = (<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />); let loadingElement = <AscribeSpinner color='dark-blue' size='lg'/>;
let AccordionListItemType = this.props.accordionListItemType; let AccordionListItemType = this.props.accordionListItemType;
setDocumentTitle(getLangText('Collection')); setDocumentTitle(getLangText('Collection'));
@ -168,7 +170,12 @@ let PieceList = React.createClass({
orderBy={this.state.orderBy} orderBy={this.state.orderBy}
applyFilterBy={this.applyFilterBy} applyFilterBy={this.applyFilterBy}
applyOrderBy={this.applyOrderBy}> applyOrderBy={this.applyOrderBy}>
{this.props.customSubmitButton} {this.props.customSubmitButton ?
this.props.customSubmitButton :
<button className="btn btn-default btn-ascribe-add">
<span className="icon-ascribe icon-ascribe-add" />
</button>
}
</PieceListToolbar> </PieceListToolbar>
<PieceListBulkModal className="ascribe-piece-list-bulk-modal" /> <PieceListBulkModal className="ascribe-piece-list-bulk-modal" />
<PieceListFilterDisplay <PieceListFilterDisplay

33
js/components/search_bar.js
View File

@ -4,6 +4,9 @@ import React from 'react';
import Input from 'react-bootstrap/lib/Input'; import Input from 'react-bootstrap/lib/Input';
import Glyphicon from 'react-bootstrap/lib/Glyphicon'; import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import AscribeSpinner from './ascribe_spinner';
import { getLangText } from '../utils/lang_utils'; import { getLangText } from '../utils/lang_utils';
@ -32,6 +35,19 @@ const SearchBar = React.createClass({
}; };
}, },
componentWillReceiveProps(nextProps) {
/**
* This enables the `PieceListStore` to override the state
* of that component in case someone is changing the `searchQuery` on
* another component.
*
* Like how it's being done in the 'Clear search' dialog.
*/
if(this.props.searchQuery !== nextProps.searchQuery || !this.state.searchQuery) {
this.setState({ searchQuery: nextProps.searchQuery });
}
},
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
const searchQueryProps = this.props.searchQuery; const searchQueryProps = this.props.searchQuery;
const searchQueryPrevProps = prevProps.searchQuery; const searchQueryPrevProps = prevProps.searchQuery;
@ -68,19 +84,6 @@ const SearchBar = React.createClass({
} }
}, },
componentWillReceiveProps(nextProps) {
/**
* This enables the `PieceListStore` to override the state
* of that component in case someone is changing the `searchQuery` on
* another component.
*
* Like how it's being done in the 'Clear search' dialog.
*/
if(this.props.searchQuery !== nextProps.searchQuery || !this.state.searchQuery) {
this.setState({ searchQuery: nextProps.searchQuery });
}
},
startTimer(searchQuery) { startTimer(searchQuery) {
const { timer } = this.state; const { timer } = this.state;
const { threshold } = this.props; const { threshold } = this.props;
@ -115,12 +118,12 @@ const SearchBar = React.createClass({
}, },
render() { render() {
let searchIcon = <Glyphicon glyph='search' className="filter-glyph"/>; let searchIcon = <span className='ascribe-icon icon-ascribe-search'/>;
const { className } = this.props; const { className } = this.props;
const { loading, searchQuery } = this.state; const { loading, searchQuery } = this.state;
if(loading) { if(loading) {
searchIcon = <span className="glyph-ascribe-spool-chunked ascribe-color spin"/>; searchIcon = <AscribeSpinner size='sm' color='dark-blue'/>;
} }
return ( return (

2
js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js
View File

@ -181,7 +181,7 @@ let AccordionListItemPrize = React.createClass({
piece={this.props.content} piece={this.props.content}
artistName={artistName} artistName={artistName}
subsubheading={ subsubheading={
<div className="pull-left"> <div>
<span>{this.props.content.date_created.split('-')[0]}</span> <span>{this.props.content.date_created.split('-')[0]}</span>
</div>} </div>}
buttons={this.getPrizeButtons()} buttons={this.getPrizeButtons()}

4
js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js
View File

@ -20,7 +20,7 @@ import UserStore from '../../../../../stores/user_store';
import Piece from '../../../../../components/ascribe_detail/piece'; import Piece from '../../../../../components/ascribe_detail/piece';
import Note from '../../../../../components/ascribe_detail/note'; import Note from '../../../../../components/ascribe_detail/note';
import AppConstants from '../../../../../constants/application_constants'; import AscribeSpinner from '../../../../ascribe_spinner';
import Form from '../../../../../components/ascribe_forms/form'; import Form from '../../../../../components/ascribe_forms/form';
import Property from '../../../../../components/ascribe_forms/property'; import Property from '../../../../../components/ascribe_forms/property';
@ -159,7 +159,7 @@ let PieceContainer = React.createClass({
} else { } else {
return ( return (
<div className="fullpage-spinner"> <div className="fullpage-spinner">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> <AscribeSpinner color='dark-blue' size='lg' />
</div> </div>
); );
} }

2
js/components/whitelabel/prize/components/prize_register_piece.js
View File

@ -63,7 +63,7 @@ let PrizeRegisterPiece = React.createClass({
</Property> </Property>
<Property <Property
name="terms" name="terms"
className="ascribe-settings-property-collapsible-toggle" className="ascribe-property-collapsible-toggle"
style={{paddingBottom: 0}}> style={{paddingBottom: 0}}>
<InputCheckbox> <InputCheckbox>
<span> <span>

8
js/components/whitelabel/prize/components/prize_settings_container.js
View File

@ -20,7 +20,7 @@ import ActionPanel from '../../../ascribe_panel/action_panel';
import GlobalNotificationModel from '../../../../models/global_notification_model'; import GlobalNotificationModel from '../../../../models/global_notification_model';
import GlobalNotificationActions from '../../../../actions/global_notification_actions'; import GlobalNotificationActions from '../../../../actions/global_notification_actions';
import AppConstants from '../../../../constants/application_constants'; import AscribeSpinner from '../../../ascribe_spinner';
import ApiUrls from '../../../../constants/api_urls'; import ApiUrls from '../../../../constants/api_urls';
import { getLangText } from '../../../../utils/lang_utils'; import { getLangText } from '../../../../utils/lang_utils';
@ -260,11 +260,7 @@ let PrizeJurySettings = React.createClass({
}, },
getMembers() { getMembers() {
let content = ( let content = <AscribeSpinner color='dark-blue' size='md' />;
<div style={{textAlign: 'center'}}>
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
</div>);
if (this.state.members.length > -1) { if (this.state.members.length > -1) {
content = ( content = (
<div> <div>

5
js/components/whitelabel/wallet/components/ascribe_detail/wallet_action_panel.js
View File

@ -2,14 +2,12 @@
import React from 'react'; import React from 'react';
import ListRequestActions from '../../../../ascribe_forms/list_form_request_actions'; import ListRequestActions from '../../../../ascribe_forms/list_form_request_actions';
import AclButtonList from '../../../../ascribe_buttons/acl_button_list'; import AclButtonList from '../../../../ascribe_buttons/acl_button_list';
import DeleteButton from '../../../../ascribe_buttons/delete_button'; import DeleteButton from '../../../../ascribe_buttons/delete_button';
import AclProxy from '../../../../acl_proxy'; import AclProxy from '../../../../acl_proxy';
import { mergeOptions } from '../../../../../utils/general_utils'; import { mergeOptions } from '../../../../../utils/general_utils';
@ -18,6 +16,7 @@ let WalletActionPanel = React.createClass({
piece: React.PropTypes.object.isRequired, piece: React.PropTypes.object.isRequired,
currentUser: React.PropTypes.object.isRequired, currentUser: React.PropTypes.object.isRequired,
loadPiece: React.PropTypes.func.isRequired, loadPiece: React.PropTypes.func.isRequired,
handleDeleteSuccess: React.PropTypes.func.isRequired,
submitButtonType: React.PropTypes.func.isRequired submitButtonType: React.PropTypes.func.isRequired
}, },
@ -62,7 +61,7 @@ let WalletActionPanel = React.createClass({
</AclProxy> </AclProxy>
</AclProxy> </AclProxy>
<DeleteButton <DeleteButton
handleSuccess={this.handleDeleteSuccess} handleSuccess={this.props.handleDeleteSuccess}
piece={this.props.piece}/> piece={this.props.piece}/>
</AclButtonList> </AclButtonList>
); );

6
js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
View File

@ -13,7 +13,7 @@ import Note from '../../../../ascribe_detail/note';
import DetailProperty from '../../../../ascribe_detail/detail_property'; import DetailProperty from '../../../../ascribe_detail/detail_property';
import ApiUrls from '../../../../../constants/api_urls'; import ApiUrls from '../../../../../constants/api_urls';
import AppConstants from '../../../../../constants/application_constants'; import AscribeSpinner from '../../../../ascribe_spinner';
import { getLangText } from '../../../../../utils/lang_utils'; import { getLangText } from '../../../../../utils/lang_utils';
@ -23,6 +23,7 @@ let WalletPieceContainer = React.createClass({
piece: React.PropTypes.object.isRequired, piece: React.PropTypes.object.isRequired,
currentUser: React.PropTypes.object.isRequired, currentUser: React.PropTypes.object.isRequired,
loadPiece: React.PropTypes.func.isRequired, loadPiece: React.PropTypes.func.isRequired,
handleDeleteSuccess: React.PropTypes.func.isRequired,
submitButtonType: React.PropTypes.func.isRequired submitButtonType: React.PropTypes.func.isRequired
}, },
@ -53,6 +54,7 @@ let WalletPieceContainer = React.createClass({
piece={this.props.piece} piece={this.props.piece}
currentUser={this.props.currentUser} currentUser={this.props.currentUser}
loadPiece={this.props.loadPiece} loadPiece={this.props.loadPiece}
handleDeleteSuccess={this.props.handleDeleteSuccess}
submitButtonType={this.props.submitButtonType}/> submitButtonType={this.props.submitButtonType}/>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Loan History')} title={getLangText('Loan History')}
@ -81,7 +83,7 @@ let WalletPieceContainer = React.createClass({
else { else {
return ( return (
<div className="fullpage-spinner"> <div className="fullpage-spinner">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> <AscribeSpinner color='dark-blue' size='lg' />
</div> </div>
); );
} }

37
js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
View File

@ -1,12 +1,18 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import { History } from 'react-router';
import PieceActions from '../../../../../../actions/piece_actions'; import PieceActions from '../../../../../../actions/piece_actions';
import PieceStore from '../../../../../../stores/piece_store'; import PieceStore from '../../../../../../stores/piece_store';
import UserStore from '../../../../../../stores/user_store'; import UserStore from '../../../../../../stores/user_store';
import PieceListStore from '../../../../../../stores/piece_list_store';
import PieceListActions from '../../../../../../actions/piece_list_actions';
import EditionListActions from '../../../../../../actions/edition_list_actions';
import CylandSubmitButton from '../cyland_buttons/cyland_submit_button'; import CylandSubmitButton from '../cyland_buttons/cyland_submit_button';
import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph'; import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph';
@ -15,28 +21,36 @@ import CylandAdditionalDataForm from '../cyland_forms/cyland_additional_data_for
import WalletPieceContainer from '../../ascribe_detail/wallet_piece_container'; import WalletPieceContainer from '../../ascribe_detail/wallet_piece_container';
import AppConstants from '../../../../../../constants/application_constants'; import AscribeSpinner from '../../../../../ascribe_spinner';
import GlobalNotificationModel from '../../../../../../models/global_notification_model';
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
import { getLangText } from '../../../../../../utils/lang_utils'; import { getLangText } from '../../../../../../utils/lang_utils';
import { setDocumentTitle } from '../../../../../../utils/dom_utils'; import { setDocumentTitle } from '../../../../../../utils/dom_utils';
import { mergeOptions } from '../../../../../../utils/general_utils'; import { mergeOptions } from '../../../../../../utils/general_utils';
let CylandPieceContainer = React.createClass({ let CylandPieceContainer = React.createClass({
propTypes: { propTypes: {
location: React.PropTypes.object, location: React.PropTypes.object,
params: React.PropTypes.object params: React.PropTypes.object
}, },
mixins: [History],
getInitialState() { getInitialState() {
return mergeOptions( return mergeOptions(
PieceStore.getState(), PieceStore.getState(),
UserStore.getState() UserStore.getState(),
PieceListStore.getState()
); );
}, },
componentDidMount() { componentDidMount() {
PieceStore.listen(this.onChange); PieceStore.listen(this.onChange);
UserStore.listen(this.onChange); UserStore.listen(this.onChange);
PieceListStore.listen(this.onChange);
// Every time we're leaving the piece detail page, // Every time we're leaving the piece detail page,
// just reset the piece that is saved in the piece store // just reset the piece that is saved in the piece store
@ -50,6 +64,7 @@ let CylandPieceContainer = React.createClass({
componentWillUnmount() { componentWillUnmount() {
PieceStore.unlisten(this.onChange); PieceStore.unlisten(this.onChange);
UserStore.unlisten(this.onChange); UserStore.unlisten(this.onChange);
PieceListStore.listen(this.onChange);
}, },
onChange(state) { onChange(state) {
@ -60,6 +75,21 @@ let CylandPieceContainer = React.createClass({
PieceActions.fetchOne(this.props.params.pieceId); PieceActions.fetchOne(this.props.params.pieceId);
}, },
handleDeleteSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
// since we're deleting a piece, we just need to close
// all editions dialogs and not reload them
EditionListActions.closeAllEditionLists();
EditionListActions.clearAllEditionSelections();
let notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection');
},
render() { render() {
if(this.state.piece && this.state.piece.title) { if(this.state.piece && this.state.piece.title) {
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', ')); setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
@ -69,6 +99,7 @@ let CylandPieceContainer = React.createClass({
piece={this.state.piece} piece={this.state.piece}
currentUser={this.state.currentUser} currentUser={this.state.currentUser}
loadPiece={this.loadPiece} loadPiece={this.loadPiece}
handleDeleteSuccess={this.handleDeleteSuccess}
submitButtonType={CylandSubmitButton}> submitButtonType={CylandSubmitButton}>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Further Details')} title={getLangText('Further Details')}
@ -85,7 +116,7 @@ let CylandPieceContainer = React.createClass({
else { else {
return ( return (
<div className="fullpage-spinner"> <div className="fullpage-spinner">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> <AscribeSpinner color='dark-blue' size='lg' />
</div> </div>
); );
} }

10
js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
View File

@ -13,7 +13,7 @@ import GlobalNotificationModel from '../../../../../../models/global_notificatio
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions'; import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
import ApiUrls from '../../../../../../constants/api_urls'; import ApiUrls from '../../../../../../constants/api_urls';
import AppConstants from '../../../../../../constants/application_constants'; import AscribeSpinner from '../../../../../ascribe_spinner';
import requests from '../../../../../../utils/requests'; import requests from '../../../../../../utils/requests';
@ -85,7 +85,7 @@ let CylandAdditionalDataForm = React.createClass({
buttons = ( buttons = (
<button <button
type="submit" type="submit"
className="btn ascribe-btn ascribe-btn-login" className="btn btn-default btn-wide"
disabled={!this.state.isUploadReady || disabled}> disabled={!this.state.isUploadReady || disabled}>
{getLangText('Proceed to loan')} {getLangText('Proceed to loan')}
</button> </button>
@ -93,7 +93,9 @@ let CylandAdditionalDataForm = React.createClass({
spinner = ( spinner = (
<div className="modal-footer"> <div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} /> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div> </div>
); );
@ -148,7 +150,7 @@ let CylandAdditionalDataForm = React.createClass({
} else { } else {
return ( return (
<div className="ascribe-loading-position"> <div className="ascribe-loading-position">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> <AscribeSpinner color='dark-blue' size='md'/>
</div> </div>
); );
} }

2
js/components/whitelabel/wallet/components/cyland/cyland_hero.js
View File

@ -10,7 +10,7 @@ let Hero = React.createClass({
<div className="hero"> <div className="hero">
<img <img
className="logo" src={AppConstants.whitelabel.logo} className="logo" src={AppConstants.whitelabel.logo}
alt="Sluice Art Prize" alt="Cyland Video Archive"
height="200px"/> height="200px"/>
</div> </div>
); );

36
js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
View File

@ -1,12 +1,18 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import { History } from 'react-router';
import PieceActions from '../../../../../../actions/piece_actions'; import PieceActions from '../../../../../../actions/piece_actions';
import PieceStore from '../../../../../../stores/piece_store'; import PieceStore from '../../../../../../stores/piece_store';
import UserStore from '../../../../../../stores/user_store'; import UserStore from '../../../../../../stores/user_store';
import PieceListStore from '../../../../../../stores/piece_list_store';
import PieceListActions from '../../../../../../actions/piece_list_actions';
import EditionListActions from '../../../../../../actions/edition_list_actions';
import IkonotvSubmitButton from '../ikonotv_buttons/ikonotv_submit_button'; import IkonotvSubmitButton from '../ikonotv_buttons/ikonotv_submit_button';
import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph'; import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph';
@ -16,7 +22,10 @@ import IkonotvArtworkDetailsForm from '../ikonotv_forms/ikonotv_artwork_details_
import WalletPieceContainer from '../../ascribe_detail/wallet_piece_container'; import WalletPieceContainer from '../../ascribe_detail/wallet_piece_container';
import AppConstants from '../../../../../../constants/application_constants'; import AscribeSpinner from '../../../../../ascribe_spinner';
import GlobalNotificationModel from '../../../../../../models/global_notification_model';
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
import { getLangText } from '../../../../../../utils/lang_utils'; import { getLangText } from '../../../../../../utils/lang_utils';
import { setDocumentTitle } from '../../../../../../utils/dom_utils'; import { setDocumentTitle } from '../../../../../../utils/dom_utils';
@ -28,16 +37,20 @@ let IkonotvPieceContainer = React.createClass({
params: React.PropTypes.object params: React.PropTypes.object
}, },
mixins: [History],
getInitialState() { getInitialState() {
return mergeOptions( return mergeOptions(
PieceStore.getState(), PieceStore.getState(),
UserStore.getState() UserStore.getState(),
PieceListStore.getState()
); );
}, },
componentDidMount() { componentDidMount() {
PieceStore.listen(this.onChange); PieceStore.listen(this.onChange);
UserStore.listen(this.onChange); UserStore.listen(this.onChange);
PieceListStore.listen(this.onChange);
// Every time we're leaving the piece detail page, // Every time we're leaving the piece detail page,
// just reset the piece that is saved in the piece store // just reset the piece that is saved in the piece store
@ -59,6 +72,7 @@ let IkonotvPieceContainer = React.createClass({
componentWillUnmount() { componentWillUnmount() {
PieceStore.unlisten(this.onChange); PieceStore.unlisten(this.onChange);
UserStore.unlisten(this.onChange); UserStore.unlisten(this.onChange);
PieceListStore.listen(this.onChange);
}, },
onChange(state) { onChange(state) {
@ -69,6 +83,21 @@ let IkonotvPieceContainer = React.createClass({
PieceActions.fetchOne(this.props.params.pieceId); PieceActions.fetchOne(this.props.params.pieceId);
}, },
handleDeleteSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
// since we're deleting a piece, we just need to close
// all editions dialogs and not reload them
EditionListActions.closeAllEditionLists();
EditionListActions.clearAllEditionSelections();
let notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection');
},
render() { render() {
let furtherDetails = ( let furtherDetails = (
<CollapsibleParagraph <CollapsibleParagraph
@ -102,6 +131,7 @@ let IkonotvPieceContainer = React.createClass({
piece={this.state.piece} piece={this.state.piece}
currentUser={this.state.currentUser} currentUser={this.state.currentUser}
loadPiece={this.loadPiece} loadPiece={this.loadPiece}
handleDeleteSuccess={this.handleDeleteSuccess}
submitButtonType={IkonotvSubmitButton}> submitButtonType={IkonotvSubmitButton}>
{furtherDetails} {furtherDetails}
</WalletPieceContainer> </WalletPieceContainer>
@ -110,7 +140,7 @@ let IkonotvPieceContainer = React.createClass({
else { else {
return ( return (
<div className="fullpage-spinner"> <div className="fullpage-spinner">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> <AscribeSpinner color='dark-blue' size='lg' />
</div> </div>
); );
} }

10
js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
View File

@ -11,7 +11,7 @@ import GlobalNotificationModel from '../../../../../../models/global_notificatio
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions'; import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
import ApiUrls from '../../../../../../constants/api_urls'; import ApiUrls from '../../../../../../constants/api_urls';
import AppConstants from '../../../../../../constants/application_constants'; import AscribeSpinner from '../../../../../ascribe_spinner';
import requests from '../../../../../../utils/requests'; import requests from '../../../../../../utils/requests';
@ -66,7 +66,7 @@ let IkonotvArtistDetailsForm = React.createClass({
buttons = ( buttons = (
<button <button
type="submit" type="submit"
className="btn ascribe-btn ascribe-btn-login" className="btn btn-default btn-wide"
disabled={this.props.disabled}> disabled={this.props.disabled}>
{getLangText('Proceed to loan')} {getLangText('Proceed to loan')}
</button> </button>
@ -74,7 +74,9 @@ let IkonotvArtistDetailsForm = React.createClass({
spinner = ( spinner = (
<div className="modal-footer"> <div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} /> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div> </div>
); );
@ -141,7 +143,7 @@ let IkonotvArtistDetailsForm = React.createClass({
} else { } else {
return ( return (
<div className="ascribe-loading-position"> <div className="ascribe-loading-position">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> <AscribeSpinner color='dark-blue' size='lg' />
</div> </div>
); );
} }

10
js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js
View File

@ -11,7 +11,7 @@ import GlobalNotificationModel from '../../../../../../models/global_notificatio
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions'; import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
import ApiUrls from '../../../../../../constants/api_urls'; import ApiUrls from '../../../../../../constants/api_urls';
import AppConstants from '../../../../../../constants/application_constants'; import AscribeSpinner from '../../../../../ascribe_spinner';
import requests from '../../../../../../utils/requests'; import requests from '../../../../../../utils/requests';
@ -65,7 +65,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
buttons = ( buttons = (
<button <button
type="submit" type="submit"
className="btn ascribe-btn ascribe-btn-login" className="btn btn-default btn-wide"
disabled={this.props.disabled}> disabled={this.props.disabled}>
{getLangText('Proceed to artist details')} {getLangText('Proceed to artist details')}
</button> </button>
@ -73,7 +73,9 @@ let IkonotvArtworkDetailsForm = React.createClass({
spinner = ( spinner = (
<div className="modal-footer"> <div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} /> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div> </div>
); );
@ -157,7 +159,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
} else { } else {
return ( return (
<div className="ascribe-loading-position"> <div className="ascribe-loading-position">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} /> <AscribeSpinner color='dark-blue' size='lg' />
</div> </div>
); );
} }

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

@ -32,7 +32,7 @@ let WalletApp = React.createClass({
// if the path of the current activeRoute is not defined, then this is the IndexRoute // 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')) if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications'))
&& (['ikonotv', 'cyland']).indexOf(subdomain) > -1) { && (['ikonotv']).indexOf(subdomain) > -1) {
header = (<div className="hero"/>); header = (<div className="hero"/>);
} else { } else {
header = <Header showAddWork={true} routes={routes} />; header = <Header showAddWork={true} routes={routes} />;

2
js/stores/piece_list_store.js
View File

@ -23,7 +23,7 @@ class PieceListStore {
this.pieceListCount = -1; this.pieceListCount = -1;
this.unfilteredPieceListCount = -1; this.unfilteredPieceListCount = -1;
this.page = 1; this.page = 1;
this.pageSize = 10; this.pageSize = 20;
this.search = ''; this.search = '';
this.orderBy = 'artist_name'; this.orderBy = 'artist_name';
this.orderAsc = true; this.orderAsc = true;

1
js/utils/general_utils.js
View File

@ -233,3 +233,4 @@ export function getSubdomain() {
let tokens = host.split('.'); let tokens = host.split('.');
return tokens.length > 2 ? tokens[0] : 'www'; return tokens.length > 2 ? tokens[0] : 'www';
} }

2
package.json
View File

@ -77,7 +77,7 @@
"react": "0.13.2", "react": "0.13.2",
"react-bootstrap": "0.25.1", "react-bootstrap": "0.25.1",
"react-datepicker": "^0.12.0", "react-datepicker": "^0.12.0",
"react-router": "1.0.0-rc1", "react-router": "^1.0.0-rc3",
"react-router-bootstrap": "^0.19.0", "react-router-bootstrap": "^0.19.0",
"react-star-rating": "~1.3.2", "react-star-rating": "~1.3.2",
"react-textarea-autosize": "^2.5.2", "react-textarea-autosize": "^2.5.2",

309
sass/ascribe-fonts/ascribe-fonts.scss
View File

@ -1,55 +1,272 @@
@font-face { @font-face {
font-family: 'ascribe'; font-family: 'ascribe';
src:url('#{$BASE_URL}static/fonts/ascribe.eot?-oi6ttk'); src: url('#{$BASE_URL}static/fonts/ascribe.eot?-oi6ttk');
src:url('#{$BASE_URL}static/fonts/ascribe.eot?#iefix-oi6ttk') format('embedded-opentype'), src: url('#{$BASE_URL}static/fonts/ascribe.eot?#iefix-oi6ttk') format('embedded-opentype'),
url('#{$BASE_URL}static/fonts/ascribe.woff?-oi6ttk') format('woff'), url('#{$BASE_URL}static/fonts/ascribe.woff?-oi6ttk') format('woff'),
url('#{$BASE_URL}static/fonts/ascribe.ttf?-oi6ttk') format('truetype'), url('#{$BASE_URL}static/fonts/ascribe.ttf?-oi6ttk') format('truetype'),
url('#{$BASE_URL}static/fonts/ascribe.svg?-oi6ttk#ascribe') format('svg'); url('#{$BASE_URL}static/fonts/ascribe.svg?-oi6ttk#ascribe') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
[class^="glyph-ascribe-"], [class*=" glyph-ascribe-"] { [class^="icon-ascribe-"], [class*=" icon-ascribe-"] {
font-family: 'ascribe'; font-family: 'ascribe-logo';
speak: none; speak: none;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-variant: normal; font-variant: normal;
text-transform: none; text-transform: none;
line-height: 1; line-height: 1;
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
@font-face {
font-family: 'ascribe-logo';
src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?q6qoae');
src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?q6qoae#iefix') format('embedded-opentype'),
url('#{$BASE_URL}static/fonts/ascribe-logo.ttf?q6qoae') format('truetype'),
url('#{$BASE_URL}static/fonts/ascribe-logo.woff?q6qoae') format('woff'),
url('#{$BASE_URL}static/fonts/ascribe-logo.svg?q6qoae#ascribe-logo') format('svg');
font-weight: normal;
font-style: normal;
}
.glyph-ascribe-logo-spool:before { [class^="icon-ascribe-"], [class*=" icon-ascribe-"] {
content: "\e600"; font-family: 'ascribe-logo';
} speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
.glyph-ascribe-spool:before { /* Better Font Rendering =========== */
content: "\e601"; -webkit-font-smoothing: antialiased;
} -moz-osx-font-smoothing: grayscale;
}
.glyph-ascribe-logo-spool-chunked:before { .icon-ascribe-add:before {
content: "\e602"; content: "\e800";
} }
.icon-ascribe-sort:before {
content: "\e801";
}
.icon-ascribe-search:before {
content: "\e802";
}
.icon-ascribe-filter:before {
content: "\e803";
}
.icon-ascribe-add-white:before {
content: "\e804";
}
.icon-ascribe-add-blue .path1:before {
content: "\e805";
color: rgb(0, 60, 106);
}
.icon-ascribe-add-blue .path2:before {
content: "\e806";
margin-left: -1em;
color: rgb(255, 255, 255);
}
.icon-ascribe-icon:before {
content: "\e807";
}
.icon-ascribe-logo:before {
content: "\e808";
}
.glyph-ascribe-spool-chunked:before {
content: "\e603";
}
@font-face {
font-family: mercury_regular;
src: url(Mercury_Regular.otf);
}
@font-face { .glyph-ascribe-logo-spool:before {
font-family: mercury_medium; content: "\e600";
src: url(Mercury_Medium.otf); }
}
@font-face { .glyph-ascribe-spool:before {
font-family: mercury_light; content: "\e601";
src: url(Mercury_Light.otf); }
}
.glyph-ascribe-logo-spool-chunked:before {
content: "\e602";
}
.glyph-ascribe-spool-chunked:before {
content: "\e603";
}
.glyph-ascribe-home:before {
content: "\e900";
}
.glyph-ascribe-home2:before {
content: "\e901";
}
.glyph-ascribe-home3:before {
content: "\e902";
}
.glyph-ascribe-pencil:before {
content: "\e905";
}
.glyph-ascribe-pencil2:before {
content: "\e906";
}
.glyph-ascribe-quill:before {
content: "\e907";
}
.glyph-ascribe-image:before {
content: "\e90d";
}
.glyph-ascribe-camera:before {
content: "\e90f";
}
.glyph-ascribe-music:before {
content: "\e911";
}
.glyph-ascribe-play:before {
content: "\e912";
}
.glyph-ascribe-film:before {
content: "\e913";
}
.glyph-ascribe-credit-card:before {
content: "\e93f";
}
.glyph-ascribe-pushpin:before {
content: "\e946";
}
.glyph-ascribe-undo2:before {
content: "\e967";
}
.glyph-ascribe-redo2:before {
content: "\e968";
}
.glyph-ascribe-enlarge:before {
content: "\e989";
}
.glyph-ascribe-shrink:before {
content: "\e98a";
}
.glyph-ascribe-enlarge2:before {
content: "\e98b";
}
.glyph-ascribe-shrink2:before {
content: "\e98c";
}
.glyph-ascribe-share:before {
content: "\ea7d";
}
.glyph-ascribe-new-tab:before {
content: "\ea7e";
}
.glyph-ascribe-share2:before {
content: "\ea82";
}
.glyph-ascribe-google:before {
content: "\ea87";
}
.glyph-ascribe-google-plus:before {
content: "\ea88";
}
.glyph-ascribe-google-plus2:before {
content: "\ea89";
}
.glyph-ascribe-facebook:before {
content: "\ea8c";
}
.glyph-ascribe-facebook2:before {
content: "\ea8d";
}
.glyph-ascribe-twitter:before {
content: "\ea91";
}
.glyph-ascribe-twitter2:before {
content: "\ea92";
}
.glyph-ascribe-youtube3:before {
content: "\ea99";
}
.glyph-ascribe-dropbox:before {
content: "\eaaf";
}
.glyph-ascribe-file-pdf:before {
content: "\eada";
}
.glyph-ascribe-chrome:before {
content: "\eae5";
}
.glyph-ascribe-firefox:before {
content: "\eae6";
}
.glyph-ascribe-IE:before {
content: "\eae7";
}
.glyph-ascribe-opera:before {
content: "\eae8";
}
.glyph-ascribe-safari:before {
content: "\eae9";
}
.btn-glyph-ascribe {
font-size: 18px;
padding: 4px 12px 0 10px
}
.ascribe-logo-circle {
border: 6px solid #F6F6F6;
border-radius: 10em;
position: relative;
top: 10%;
left: 10%;
display: block;
width: 80%;
height: 80%;
> span {
color: #F6F6F6;
position: absolute;
top: -.29em;
left: .16em;
font-size: 5em;
font-weight: normal;
}
}

193
sass/ascribe-fonts/style.scss
View File

@ -1,193 +0,0 @@
@font-face {
font-family: 'ascribe';
src:url('../../fonts/ascribe.eot?-6bb2dq');
src:url('../../fonts/ascribe.eot?#iefix-6bb2dq') format('embedded-opentype'),
url('../../fonts/ascribe.woff?-6bb2dq') format('woff'),
url('../../fonts/ascribe.ttf?-6bb2dq') format('truetype'),
url('../../fonts/ascribe.svg?-6bb2dq#ascribe') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="glyph-ascribe-"], [class*=" glyph-ascribe-"] {
font-family: 'ascribe';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyph-ascribe-ascribe-spool:before {
content: "\e600";
}
.glyph-ascribe-spool:before {
content: "\e601";
}
.glyph-ascribe-ascribe-spool-chunked:before {
content: "\e602";
}
.glyph-ascribe-spool-chunked:before {
content: "\e603";
}
.glyph-ascribe-home:before {
content: "\e900";
}
.glyph-ascribe-home2:before {
content: "\e901";
}
.glyph-ascribe-home3:before {
content: "\e902";
}
.glyph-ascribe-pencil:before {
content: "\e905";
}
.glyph-ascribe-pencil2:before {
content: "\e906";
}
.glyph-ascribe-quill:before {
content: "\e907";
}
.glyph-ascribe-image:before {
content: "\e90d";
}
.glyph-ascribe-camera:before {
content: "\e90f";
}
.glyph-ascribe-music:before {
content: "\e911";
}
.glyph-ascribe-play:before {
content: "\e912";
}
.glyph-ascribe-film:before {
content: "\e913";
}
.glyph-ascribe-credit-card:before {
content: "\e93f";
}
.glyph-ascribe-pushpin:before {
content: "\e946";
}
.glyph-ascribe-undo2:before {
content: "\e967";
}
.glyph-ascribe-redo2:before {
content: "\e968";
}
.glyph-ascribe-enlarge:before {
content: "\e989";
}
.glyph-ascribe-shrink:before {
content: "\e98a";
}
.glyph-ascribe-enlarge2:before {
content: "\e98b";
}
.glyph-ascribe-shrink2:before {
content: "\e98c";
}
.glyph-ascribe-share:before {
content: "\ea7d";
}
.glyph-ascribe-new-tab:before {
content: "\ea7e";
}
.glyph-ascribe-share2:before {
content: "\ea82";
}
.glyph-ascribe-google:before {
content: "\ea87";
}
.glyph-ascribe-google-plus:before {
content: "\ea88";
}
.glyph-ascribe-google-plus2:before {
content: "\ea89";
}
.glyph-ascribe-facebook:before {
content: "\ea8c";
}
.glyph-ascribe-facebook2:before {
content: "\ea8d";
}
.glyph-ascribe-twitter:before {
content: "\ea91";
}
.glyph-ascribe-twitter2:before {
content: "\ea92";
}
.glyph-ascribe-youtube3:before {
content: "\ea99";
}
.glyph-ascribe-dropbox:before {
content: "\eaaf";
}
.glyph-ascribe-file-pdf:before {
content: "\eada";
}
.glyph-ascribe-chrome:before {
content: "\eae5";
}
.glyph-ascribe-firefox:before {
content: "\eae6";
}
.glyph-ascribe-IE:before {
content: "\eae7";
}
.glyph-ascribe-opera:before {
content: "\eae8";
}
.glyph-ascribe-safari:before {
content: "\eae9";
}
.btn-glyph-ascribe{
font-size: 18px;
padding: 4px 12px 0 10px
}

65
sass/ascribe_accordion_list.scss
View File

@ -1,4 +1,4 @@
$ascribe-accordion-list-item-height: 8em; $ascribe-accordion-list-item-height: 100px;
.ascribe-accordion-list { .ascribe-accordion-list {
padding-left: 15px; padding-left: 15px;
@ -12,11 +12,11 @@ $ascribe-accordion-list-item-height: 8em;
.ascribe-accordion-list-item { .ascribe-accordion-list-item {
background-color: white; background-color: white;
border: 1px solid black; border: 1px solid black;
height: $ascribe-accordion-list-item-height; height: $ascribe-accordion-list-item-height + 2px;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
margin-top: 1.5em; margin-top: 1.2em;
overflow: hidden; overflow: hidden;
border-radius: 1px; border-radius: 1px;
@ -39,23 +39,33 @@ $ascribe-accordion-list-item-height: 8em;
// ToDo: Include media queries for thumbnail // ToDo: Include media queries for thumbnail
.thumbnail-wrapper { .thumbnail-wrapper {
background-color: #EEEEEE;
margin-right: 2em;
width: $ascribe-accordion-list-item-height;
height: $ascribe-accordion-list-item-height;
cursor: pointer; cursor: pointer;
height: 110px;
padding: 0; padding: 0;
text-align: center; text-align: center;
width: 110px;
img { img {
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
} }
&::before { div {
content: ' ';
display: inline-block; display: inline-block;
height: 100%; width: 100px;
vertical-align: middle; // vertical alignment of the inline element height: 100px;
background-position: center center;
background-size: cover;
} }
//&::before {
// content: ' ';
// display: inline-block;
// height: 100%;
// vertical-align: middle; // vertical alignment of the inline element
//}
} }
h1 { h1 {
@ -76,18 +86,35 @@ $ascribe-accordion-list-item-height: 8em;
white-space: nowrap; white-space: nowrap;
} }
a:not(.btn) { a {
color: #666; text-decoration: none
} };
} }
} }
.accordion-list-item-header { .accordion-list-item-header {
margin-top: .65em; margin-top: 0;
padding: 0.5em 0;
> a { h1 {
text-decoration: none; font-size: 1.9em;
}
h3 {
font-size: 1.1em;
margin-top: 0.4em;
}
}
.accordion-list-item-buttons {
position: absolute;
right: 1em;
bottom: 1em;
@media (max-width: 400px) {
right: 0;
bottom: 0;
} }
} }
@ -132,7 +159,7 @@ $ascribe-accordion-list-item-height: 8em;
td { td {
border: none !important; border: none !important;
a { a {
color: #444; color: #222;
} }
} }
} }
@ -152,7 +179,7 @@ $ascribe-accordion-list-item-height: 8em;
-webkit-user-select: none; -webkit-user-select: none;
&:hover { &:hover {
color: $ascribe-color-green; color: $ascribe-dark-blue;
cursor: pointer; cursor: pointer;
} }
} }
@ -168,7 +195,7 @@ $ascribe-accordion-list-item-height: 8em;
} }
.request-action-badge { .request-action-badge {
color: $ascribe-color-green; color: $ascribe-dark-blue;
font-size: 1.2em; font-size: 1.2em;
padding: .8em; padding: .8em;
position: absolute; position: absolute;
@ -185,7 +212,7 @@ $ascribe-accordion-list-item-height: 8em;
-webkit-user-select: none; -webkit-user-select: none;
&:hover { &:hover {
color: $ascribe-color-green; color: $ascribe-dark-blue;
} }
.glyphicon { .glyphicon {

556
sass/ascribe_custom_style.scss Normal file
View File

@ -0,0 +1,556 @@
html,
body {
font-family: $ascribe--font;
font-weight: $ascribe--font-weight-light;
background-color: #f8f8f8 !important;
}
h1, h3 {
font-family: $ascribe--font;
font-weight: $ascribe--font-weight-light;
}
h1 {
font-size: 30px;
}
hr {
border-top: 1px solid $ascribe-blue-border;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
border-color: transparent;
}
.navbar-default {
background-color: $ascribe--nav-bg-color;
box-shadow: 0 0 1px rgba(0,0,0,.1),
0 1px 2px rgba(0,0,0,.2);
.navbar-nav > li > a,
.navbar-nav > li > .active a {
text-transform: uppercase;
font-size: 12px;
font-weight: $ascribe--font-weight-light;
color: $ascribe--nav-fg-prim-color;
border-bottom: 3px solid transparent;
}
.navbar-nav > li > a:hover {
color: $ascribe--nav-fg-sec-color;
}
.navbar-nav > .active a,
.navbar-nav > .active a:hover,
.navbar-nav > .active a:focus {
color: $ascribe--nav-fg-prim-color;
border-bottom-color: $ascribe--nav-fg-prim-color;
background-color: $ascribe--nav-bg-color;
font-weight: $ascribe--font-weight-light;
}
.navbar-nav > .active {
background-color: $ascribe--nav-bg-color;
}
.navbar-nav > .open > a,
.dropdown-menu > .active > a {
color: $ascribe--nav-fg-prim-color;
background-color: $ascribe--nav-bg-color;
}
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus,,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
background-color: rgba($ascribe--button-default-color, .05);
}
.dropdown-menu {
background-color: $ascribe--nav-bg-color;
}
.dropdown-menu > li > a {
color: $ascribe--nav-fg-prim-color;
font-weight: $ascribe--font-weight-light;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: rgba($ascribe--button-default-color, .05);
}
.notification-menu {
.dropdown-menu {
background-color: white;
li:hover {
background-color: $ascribe-white;
}
}
.notification-action{
color: $ascribe-pink;
}
}
.navbar-brand,
.navbar-brand:hover {
font-size: 23px;
padding: 12px 15px;
color: $ascribe--nav-fg-prim-color;
}
.img-brand .navbar-brand {
width: 0;
height: 0;
padding-right: 120px;
padding-bottom: 36px;
padding-left: 30px;
background: transparent no-repeat center 4px;
background-size: 150px;
margin-bottom: 0;
position: relative;
}
.navbar-toggle .icon-bar {
background-color: $ascribe--nav-fg-prim-color;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
background-color: $ascribe--nav-bg-color;
}
}
.ascribe-icon {
font-size: 1.2em;
font-weight: $ascribe--font-weight-light;
}
.icon-ascribe-search{
color: $ascribe--button-default-color;
}
.ascribe-piece-list-toolbar .btn-ascribe-add{
display: none;
}
.ascribe-accordion-list {
margin-bottom: 1em;
}
.ascribe-accordion-list-item {
border: 1px solid $ascribe-blue-border;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.18);
}
.ascribe-accordion-list-item .wrapper {
h1 {
font-size: 1.6em;
margin: .4em 0 0 0;
}
h3 {
font-size: 1.1em;
margin-bottom: 0.4em;
}
a:not(.btn) {
color: $ascribe-black
}
.accordion-list-item-header {
a div {
color: rgba(0,0,0,.6)
}
}
}
.ascribe-accordion-list-item-table {
tbody {
tr {
&:hover {
background-color: rgba($ascribe--button-default-color, .05);
border-left-color: rgba($ascribe--button-default-color, .5);
}
}
}
}
.ascribe-footer {
margin-top: 5em;
text-transform: uppercase;
background-color: $ascribe-white;
border-top: 1px solid rgba(0, 60, 105, 0.1);
}
.route--landing {
margin: 0;
width: 100%;
padding: 5em 1em;
}
.route--login,
.route--signup {
.btn-spinner {
background-color: $ascribe--button-default-color;
}
}
.ascribe-accordion-list-item-table {
border-bottom: 0.1em solid $ascribe-blue-border;
border-left: 0.1em solid $ascribe-blue-border;
border-right: 0.1em solid $ascribe-blue-border;
}
.ascribe-table-header-column {
span {font-weight: 300;}
}
.route--login,
.route--signup {
.ascribe-form-bordered {
border: none;
}
}
.btn-ascribe-add {
width: 30px;
height: 30px;
background-color: transparent !important;
border: 1px solid $ascribe-dark-blue;
border-radius: 50%;
&:hover {
border-color: white!important;
background-color: $ascribe-dark-blue!important;
}
> span {
position: absolute;
left: 0;
top: 2px;
width: 30px;
height: 30px;
color: $ascribe-dark-blue;
padding: 0.4em;
&:hover {
color: white;
}
}
}
// buttons!
// thought of the day:
// "every great atrocity is the result of people just following orders"
.btn {
font-weight: $ascribe--font-weight-light;
}
// disabled buttons
.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: darken($ascribe--button-default-color, 20%);
border-color: darken($ascribe--button-default-color, 20%);
}
.btn-default {
background-color: $ascribe--button-default-color;
border-color: $ascribe--button-default-color;
&:hover,
&:active,
&:focus,
&:active:hover,
&:active:focus,
&:active.focus,
&.active:hover,
&.active:focus,
&.active.focus {
background-color: lighten($ascribe--button-default-color, 20%);
border-color: lighten($ascribe--button-default-color, 20%);
}
}
// 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($ascribe--button-secondary-bg-color, 20%);
border-color: darken($ascribe--button-secondary-fg-color, 20%);
color: darken($ascribe--button-secondary-fg-color, 20%);
}
.btn-secondary {
background-color: $ascribe--button-secondary-bg-color;
border-color: $ascribe--button-secondary-fg-color;
color: $ascribe--button-secondary-fg-color;
&:hover,
&:active,
&:focus,
&:active:hover,
&:active:focus,
&:active.focus,
&.active:hover,
&.active:focus,
&.active.focus {
background-color: $ascribe--button-secondary-fg-color;
border-color: $ascribe--button-secondary-bg-color;
color: $ascribe--button-secondary-bg-color;
}
}
.ascribe-piece-list-toolbar-filter-widget button {
background-color: transparent;
border: 1px solid transparent;
color: $ascribe--button-default-color;
&:hover,
&:active {
background-color: $ascribe--button-default-color !important;
border-color: $ascribe--button-default-color !important;
color: white;
}
}
.btn-wide {
font-weight: $ascribe--font-weight-light;
}
.btn-spinner, .btn-spinner:hover {
background-color: $ascribe--button-default-color;
border-color: $ascribe--button-default-color;
[class^="spinner-wrapper-"] {
color: white;
.spinner-circle {
border-color: white;
}
}
}
.btn-secondary .spinner-wrapper {
.spinner-circle,
.spinner-inner {
border-color: $ascribe--button-secondary-fg-color;
color: $ascribe--button-secondary-fg-color;
}
}
.open > .btn-default.dropdown-toggle:hover,
.open > .btn-default.dropdown-toggle:focus,
.open > .btn-default.dropdown-toggle.focus,
.open > .btn-default.dropdown-toggle.dropdown-toggle {
background-color: darken($ascribe--button-secondary-fg-color, 20%);
border-color: darken($ascribe--button-secondary-fg-color, 20%);
}
.pager li > a,
.pager li > span {
background-color: $ascribe--button-default-color;
border-color: $ascribe--button-default-color;
}
.pager li > a:hover,
.pager li > span:hover,
.pager li > a:focus,
.pager li > span:focus {
background-color: lighten($ascribe--button-default-color, 20%);
border-color: lighten($ascribe--button-default-color, 20%);
}
.pager .disabled > a,
.pager .disabled > span {
background-color: $ascribe--button-default-color!important;
border-color: $ascribe--button-default-color;
}
// inputs!
.ascribe-input-glyph > .form-group > .input-group > .input-group-addon > .filter-glyph {
color: $ascribe--button-default-color;
}
.search-bar > .form-group {
margin: 0;
}
.search-bar > .form-group > .input-group {
border: 1px solid rgba(0, 0, 0, 0);
&:hover, &:focus, &:active {
border-color: $ascribe-blue-border;
}
input::-webkit-input-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* firefox 19+ */
input::-moz-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* ie */
input:-ms-input-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
input:-moz-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
}
.ascribe-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before,
.ascribe-checkbox-wrapper [type=checkbox]:checked + .checkbox:before {
color: $ascribe--button-default-color;
}
.ascribe-form-header {
background-color: transparent;
border-color: transparent;
}
.ascribe-form-bordered {
border-color: transparent;
}
// properties!
.is-focused {
border-left-color: $ascribe--button-default-color !important;
background-color: rgba($ascribe--button-default-color, .05);
}
.is-error {
> div {
> span {
color: rgba($ascribe-red-error, 1) !important;
}
}
&:hover {
border-left: 3px solid rgba($ascribe-red-error, .5)!important;
}
}
.ascribe-property-wrapper:hover {
border-left-color: rgba($ascribe-blue, .5);
}
.ascribe-accordion-list-item .wrapper:hover {
background-color: rgba($ascribe--button-default-color, .05);
}
.ascribe-property {
> div,
> input,
> pre,
> select,
> span:not(.glyphicon),
> textarea {
font-family: $ascribe--font;
font-weight: $ascribe--font-weight-light;
}
> div {
> div:not(.file-drag-and-drop div) {
font-family: $ascribe--font;
font-weight: $ascribe--font-weight-light;
}
}
> span:not(.glyphicon) {
color: $ascribe--button-default-color;
}
textarea::-webkit-input-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* firefox 19+ */
textarea::-moz-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* ie */
textarea:-ms-input-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
textarea:-moz-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
input::-webkit-input-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* firefox 19+ */
input::-moz-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* ie */
input:-ms-input-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
input:-moz-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
}
// panel
.ascribe-panel-wrapper {
border: 1px solid $ascribe-blue-border;
}
// intercom stuff
#intercom-container .intercom-launcher-button {
background-color: $ascribe--button-default-color !important;
border-color: $ascribe--button-default-color !important;
}
// notifications
.ascribe-global-notification-success {
background-color: lighten($ascribe--button-default-color, 20%);
}
// uploader
.ascribe-progress-bar > .progress-bar {
background-color: lighten($ascribe--button-default-color, 20%);
}
.action-file {
text-shadow: -1px 0 black,
0 1px black,
1px 0 black,
0 -1px black;
&:hover {
color: lighten($ascribe--button-default-color, 20%);
}
}

9
sass/ascribe_footer.scss
View File

@ -1,11 +1,11 @@
.ascribe-footer { .ascribe-footer {
text-align: center; text-align: center;
margin-top: 5em;
hr { hr {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
border-top: 1px solid #eee; //border: 0;
border: 0;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
@ -23,12 +23,13 @@
} }
a:hover { a:hover {
color: #48DACB; text-decoration: none;
color: lighten($ascribe-dark-blue, 20%);
} }
} }
} }
.ascribe-footer-statement { .ascribe-footer-statement {
font-family: 'mercury_light'; font-family: 'mercury_light';
font-size: 1.6em !important; font-size: 1.6em !important;

14
sass/ascribe_login.scss
View File

@ -1,28 +1,18 @@
$break-small: 764px; $break-small: 764px;
.ascribe-btn-login { .btn-wide {
background-color: rgba(2, 182, 163, 1); background-color: rgba(2, 182, 163, 1);
border: none;
border-radius: 0;
color: white; color: white;
font-size: 1.2em; font-size: 1.2em;
font-weight: 500;
padding: .5em; padding: .5em;
text-align: center; text-align: center;
width: 100%; width: 100%;
//margin-left: 1.2em; //margin-left: 1.2em;
&:hover {
background-color: rgba(2, 182, 163, .8);
border: 0;
color: white;
}
&:active, &:active,
&:focus { &:focus {
background-color: rgba(2, 182, 163, .6); background-color: rgba(2, 182, 163, .6);
border: 0;
color: white; color: white;
} }
@ -31,7 +21,7 @@ $break-small: 764px;
} }
} }
.ascribe-btn-login-spinner { .btn-spinner {
background-color: rgba(2, 182, 163, .4); background-color: rgba(2, 182, 163, .4);
padding: .4em; padding: .4em;

4
sass/ascribe_media_player.scss
View File

@ -31,7 +31,7 @@
} }
.audiojs .loaded { .audiojs .loaded {
background-color: $ascribe-color-green; background-color: $ascribe-dark-blue;
background-image: none; background-image: none;
} }
.audiojs .progress { .audiojs .progress {
@ -58,7 +58,7 @@
.vjs-default-skin .vjs-play-progress, .vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-volume-level { .vjs-default-skin .vjs-volume-level {
background: $ascribe-color-green; background: $ascribe-dark-blue;
} }
.vjs-default-skin .vjs-big-play-button { .vjs-default-skin .vjs-big-play-button {

13
sass/ascribe_navbar.scss Normal file
View File

@ -0,0 +1,13 @@
.navbar-default {
border: 0;
border-color: #ccc;
border-left: 0;
border-right: 0;
border-top: 0;
font-size: .8em;
margin-bottom: 1.5em;
}
.navbar-right {
margin-right: 0;
}

9
sass/ascribe_notification_list.scss
View File

@ -16,13 +16,10 @@ $break-medium: 1200px;
.notification-wrapper { .notification-wrapper {
height:8.4em; height:8.4em;
border-bottom: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee;
margin: -3px 0; margin: 0;
padding: 0.5em; padding: 0.5em;
color: black; color: black;
&:hover{
background-color: rgba(2, 182, 163, .05);
}
// ToDo: Include media queries for thumbnail // ToDo: Include media queries for thumbnail
.thumbnail-wrapper { .thumbnail-wrapper {
width: 7.4em; width: 7.4em;
@ -56,7 +53,7 @@ $break-medium: 1200px;
white-space: nowrap; white-space: nowrap;
} }
.notification-action{ .notification-action{
color: $ascribe-color-green; color: $ascribe-dark-blue;
} }
} }
@ -75,8 +72,6 @@ $break-medium: 1200px;
.notification-amount { .notification-amount {
padding: 0.3em; padding: 0.3em;
font-size: 1.2em;
} }
.ascribe-global-action { .ascribe-global-action {

11
sass/ascribe_piece_list_toolbar.scss
View File

@ -14,23 +14,19 @@
.ascribe-input-glyph > .form-group > .input-group { .ascribe-input-glyph > .form-group > .input-group {
margin-left: 6px; margin-left: 6px;
border: none;
input { input {
background-color: transparent; background-color: transparent;
border: 1px solid #02b6a3;
border-right: 0;
box-shadow: none; box-shadow: none;
border: none;
} }
> .input-group-addon { > .input-group-addon {
background-color: transparent; background-color: transparent;
> .filter-glyph { > .filter-glyph {
color: #02b6a3; border: none;
} }
border: 1px solid #02b6a3;
border-left: 0;
} }
} }
@ -45,7 +41,6 @@
&:hover, &:hover,
&:active { &:active {
background-color: #02b6a3 !important; background-color: #02b6a3 !important;
border: 1px solid #02b6a3 !important;
color: white; color: white;
} }
.caret { .caret {

221
sass/ascribe_property.scss Normal file
View File

@ -0,0 +1,221 @@
$ascribe-red-error: rgb(169, 68, 66);
.ascribe-property-wrapper {
background-color: white;
border-left: 3px solid rgba(0, 0, 0, 0);
padding-bottom: 1em;
text-align: center;
width: 100%;
&div:last-of-type {
border-bottom: 1px solid rgba(0, 0, 0, .05);
}
&:hover {
border-left: 3px solid rgba(2, 182, 163, .4);
}
}
.is-hidden {
display: none;
}
.is-focused {
background-color: rgba(2, 182, 163, .05);
border-left: 3px solid rgba(2, 182, 163, 1) !important;
}
.is-error {
background-color: rgba($ascribe-red-error, .03);
border-left: 3px solid rgba($ascribe-red-error, 1);
> div {
> span {
color: rgba($ascribe-red-error, 1);
font-size: .9em;
margin-right: 1em;
}
> input,
> textarea {
color: #666;
}
}
&:hover {
border-left: 3px solid rgba($ascribe-red-error, 1);
}
}
.is-fixed {
cursor: default;
> div {
cursor: default;
> span {
cursor: default;
}
> input,
> div,
> pre,
> textarea {
color: #666;
cursor: default;
}
}
}
.ascribe-property {
border-top: 1px solid rgba(0, 0, 0, .05);
cursor: pointer;
display: inline-block;
padding-left: 1.5em;
padding-right: 1.5em;
padding-top: 1em;
text-align: left;
width: 100%;
> div,
> input,
> pre,
> select,
> span:not(.glyphicon),
> textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
> span {
color: rgba(0, 0, 0, .5);
font-size: .9em;
font-weight: normal;
}
> div {
> div:not(.file-drag-and-drop div) {
color: rgba(0, 0, 0, .5);
cursor: default;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.1em;
font-weight: normal;
padding-left: 0;
}
}
> .progressbar-container, .progressbar-progress {
margin-top: 0 !important;
}
> input,
> pre,
> textarea,
> select,
.datepicker__input {
background-color: rgba(0, 0, 0, 0);
border: 0;
box-shadow: none;
color: rgba(0, 0, 0, .8);
font-size: 1.1em;
font-weight: 400;
margin-top: .5em;
padding-left: 0;
width: 100%;
&:focus {
border: 0;
box-shadow: none;
outline: 0;
}
&::selection {
background-color: rgba(0, 0, 0, 1);
color: white;
}
}
.datepicker__input {
padding: 0;
}
> textarea{
color: #666;
margin-top: 1em;
padding: 0;
}
}
.ascribe-property-footer {
font-size: .8em;
margin-top: 10px;
width: 100%;
}
.ascribe-property-collapsible-toggle {
border-top: 1px solid rgba(0, 0, 0, .05);
display: inline-block;
padding: .5em 1.5em;
text-align: left;
width: 100%;
}
.ascribe-checkbox-wrapper{
.checkbox > span {
color: black;
}
}
.ascribe-property-collapsible-toggle, .ascribe-checkbox-wrapper {
cursor: pointer;
// Taken from: http://www.htmllion.com/css3-checkbox.html
.checkbox {
display: inline-block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: .9em;
font-weight: normal;
vertical-align: middle;
> span {
left: 5px;
position: relative;
top: 1px;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
}
[type=checkbox] {
display: none;
}
.checkbox:before {
background-color: white;
border: 1px solid rgba(0, 0, 0, .5);
border-radius: 1px;
color: #f3f3f3;
content: "";
display: inline-block;
height: 17px;
text-align: center;
vertical-align: middle;
width: 17px;
}
[type=checkbox]:checked + .checkbox:before {
color: rgba(2, 182, 163, 1);
content: "\2713";
font-size: 20px;
line-height: .8;
}
}
.ascribe-checkbox-badge {
> span > span {
margin-top: 0;
}
}

220
sass/ascribe_settings.scss
View File

@ -2,223 +2,3 @@
margin: auto; margin: auto;
max-width: 600px; max-width: 600px;
} }
.ascribe-settings-wrapper {
background-color: white;
border-left: 3px solid rgba(0, 0, 0, 0);
padding-bottom: 1em;
text-align: center;
width: 100%;
&div:last-of-type {
border-bottom: 1px solid rgba(0, 0, 0, .05);
}
&:hover {
border-left: 3px solid rgba(2, 182, 163, .4);
}
}
.is-hidden {
display: none;
}
.is-focused {
background-color: rgba(2, 182, 163, .05);
border-left: 3px solid rgba(2, 182, 163, 1) !important;
}
.is-error {
background-color: rgba(169, 68, 66, .05);
border-left: 3px solid rgba(169, 68, 66, 1);
> div {
> span {
color: rgba(169, 68, 66, 1);
font-size: .9em;
margin-right: 1em;
}
> input,
> textarea {
color: #666;
}
}
&:hover {
border-left: 3px solid rgba(169, 68, 66, 1);
}
}
.is-fixed {
cursor: default;
> div {
cursor: default;
> span {
cursor: default;
}
> input,
> div,
> pre,
> textarea {
color: #666;
cursor: default;
}
}
}
.ascribe-settings-property {
border-top: 1px solid rgba(0, 0, 0, .05);
cursor: pointer;
display: inline-block;
padding-left: 1.5em;
padding-right: 1.5em;
padding-top: 1em;
text-align: left;
width: 100%;
> div,
> input,
> pre,
> select,
> span:not(.glyphicon),
> textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
> span {
color: rgba(0, 0, 0, .5);
font-size: .9em;
font-weight: normal;
}
> div {
> div:not(.file-drag-and-drop div) {
color: rgba(0, 0, 0, .5);
cursor: default;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.1em;
font-weight: normal;
padding-left: 0;
}
}
> .progressbar-container, .progressbar-progress {
margin-top: 0 !important;
}
> input,
> pre,
> textarea,
> select,
.datepicker__input {
background-color: rgba(0, 0, 0, 0);
border: 0;
box-shadow: none;
color: rgba(0, 0, 0, .8);
font-size: 1.1em;
font-weight: 400;
margin-top: .5em;
padding-left: 0;
width: 100%;
&:focus {
border: 0;
box-shadow: none;
outline: 0;
}
&::selection {
background-color: rgba(0, 0, 0, 1);
color: white;
}
}
.datepicker__input {
padding: 0;
}
> textarea{
color: #666;
margin-top: 1em;
padding: 0;
}
}
.ascribe-property-footer {
font-size: .8em;
margin-top: 10px;
width: 100%;
}
.ascribe-settings-property-collapsible-toggle {
border-top: 1px solid rgba(0, 0, 0, .05);
display: inline-block;
padding: .5em 1.5em;
text-align: left;
width: 100%;
}
.ascribe-checkbox-wrapper{
.checkbox > span {
color: black;
}
}
.ascribe-settings-property-collapsible-toggle, .ascribe-checkbox-wrapper {
cursor: pointer;
// Taken from: http://www.htmllion.com/css3-checkbox.html
.checkbox {
display: inline-block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: .9em;
font-weight: normal;
vertical-align: middle;
> span {
left: 5px;
position: relative;
top: 1px;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
}
[type=checkbox] {
display: none;
}
.checkbox:before {
background-color: white;
border: 1px solid rgba(0, 0, 0, .5);
border-radius: 1px;
color: #f3f3f3;
content: "";
display: inline-block;
height: 17px;
text-align: center;
vertical-align: middle;
width: 17px;
}
[type=checkbox]:checked + .checkbox:before {
color: rgba(2, 182, 163, 1);
content: "\2713";
font-size: 20px;
line-height: .8;
}
}
.ascribe-checkbox-badge {
> span > span {
margin-top: 0;
}
}

149
sass/ascribe_spinner.scss Normal file
View File

@ -0,0 +1,149 @@
$ascribe-black: #1E1E1E;
$ascribe-dark-blue: #003C69;
$ascribe-blue: #65CFE9;
$ascribe-light-blue: #D3DEE4;
$ascribe-pink: #D10074;
$ascribe--spinner-color: $ascribe-blue;
$ascribe--spinner-size-lg: 50px;
$ascribe--spinner-size-md: 30px;
$ascribe--spinner-size-sm: 15px;
[class^="spinner-wrapper-"]{
margin: auto;
}
.spinner-wrapper-blue {
color: $ascribe-blue;
.spinner-circle {
border-color: $ascribe-blue;
}
}
.spinner-wrapper-dark-blue {
color: $ascribe-dark-blue;
.spinner-circle {
border-color: $ascribe-dark-blue;
}
}
.spinner-wrapper-pink {
color: $ascribe-pink;
.spinner-circle {
border-color: $ascribe-pink;
}
}
.spinner-wrapper-loop {
-webkit-animation: spinner-color-loop 20s infinite;
-moz-animation: spinner-color-loop 20s infinite;
-o-animation: spinner-color-loop 20s infinite;
-ms-animation: spinner-color-loop 20s infinite;
animation: spinner-color-loop 20s;
}
.spinner-wrapper-black {
color: $ascribe-black;
.spinner-circle {
border-color: $ascribe-black;
}
}
.spinner-wrapper-lg {
width: $ascribe--spinner-size-lg;
height: $ascribe--spinner-size-lg;
}
.spinner-wrapper-md {
width: $ascribe--spinner-size-md;
height: $ascribe--spinner-size-md;
}
.spinner-wrapper-sm {
width: $ascribe--spinner-size-sm;
height: $ascribe--spinner-size-sm;
}
.spinner-circle {
border-radius: 50%;
border-style: solid;
-webkit-animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
-o-animation: spin 1s infinite linear;
-ms-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}
.spinner-wrapper-lg .spinner-inner,
.spinner-wrapper-lg .spinner-circle {
width: $ascribe--spinner-size-lg;
height: $ascribe--spinner-size-lg;
}
.spinner-wrapper-md .spinner-inner,
.spinner-wrapper-md .spinner-circle {
width: $ascribe--spinner-size-md;
height: $ascribe--spinner-size-md;
}
.spinner-wrapper-sm .spinner-inner,
.spinner-wrapper-sm .spinner-circle {
width: $ascribe--spinner-size-sm;
height: $ascribe--spinner-size-sm;
}
.spinner-wrapper-lg .spinner-circle,
.spinner-wrapper-sm .spinner-circle,
.spinner-wrapper-md .spinner-circle {
border-width: 1px 1px 1px 0;
}
.spinner-inner {
position: relative;
text-align: center;
}
.spinner-wrapper-lg .spinner-inner {
font-size: $ascribe--spinner-size-lg;
top: -64px;
}
.spinner-wrapper-md .spinner-inner {
font-size: $ascribe--spinner-size-md;
top: -38px;
}
.spinner-wrapper-sm .spinner-inner {
font-size: $ascribe--spinner-size-sm;
top: -19px;
}
@-webkit-keyframes spin {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes spin {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(359deg);}
}
@-o-keyframes spin {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(359deg);}
}
@keyframes spin{
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
@include keyframes(spinner-color-loop) {
0% { color: $ascribe-black; }
20% { color: $ascribe-dark-blue; }
40% { color: $ascribe-blue; }
60% { color: $ascribe-light-blue; }
80% { color: $ascribe-pink; }
}

70
sass/ascribe_uploader.scss
View File

@ -8,7 +8,6 @@
overflow: auto; overflow: auto;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
cursor: default !important;
padding: 1.5em 0 1.5em 0; padding: 1.5em 0 1.5em 0;
.file-drag-and-drop-dialog > p:first-child { .file-drag-and-drop-dialog > p:first-child {
@ -108,6 +107,29 @@
cursor: default; cursor: default;
overflow: hidden; overflow: hidden;
} }
.action-file {
color: white;
cursor: pointer;
font-size: 2.5em;
text-shadow: -1px 0 black,
0 1px black,
1px 0 black,
0 -1px black;
&:link,
&:visited,
&:hover,
&:active {
text-decoration: none;
}
&:hover {
color: #d9534f;
}
}
.spinner-file {
font-size: 2.5em;
}
.file-drag-and-drop-preview-image { .file-drag-and-drop-preview-image {
border: 1px solid #616161; border: 1px solid #616161;
@ -117,23 +139,8 @@
text-align: center; text-align: center;
width: 104px; width: 104px;
.action-file { .action-file, .spinner-file {
color: white;
cursor: pointer;
font-size: 2.5em;
margin-top: .6em; margin-top: .6em;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
&:link,
&:visited,
&:hover,
&:active {
text-decoration: none;
}
&:hover {
color: #d9534f;
}
} }
} }
@ -147,29 +154,26 @@
margin-top: 5px; margin-top: 5px;
} }
.action-file { .action-file, .spinner-file {
color: white;
cursor: pointer;
font-size: 2.5em;
margin-top: 0; margin-top: 0;
position: relative; position: relative;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
top: .3em; top: .3em;
&:link,
&:visited,
&:hover,
&:active {
text-decoration: none;
}
&:hover {
color: #d9534f;
}
span:not(:first-child) { span:not(:first-child) {
display: block; display: block;
margin-top: .5em; margin-top: .5em;
} }
} }
} }
.ascribe-progress-bar {
margin-bottom: 0;
> .progress-bar {
background-color: $ascribe-dark-blue;
}
}
.ascribe-progress-bar-xs {
height: 12px;
}

26
sass/ascribe_variables.scss
View File

@ -1,3 +1,25 @@
$ascribe-color-green: rgba(2, 182, 163, 1); $ascribe-black: #1E1E1E;
$ascribe-dark-blue: #003C69;
$ascribe-blue: #65CFE9;
$ascribe-light-blue: #D3DEE4;
$ascribe-white: #F8F8F8;
$ascribe-pink: #D10074;
$ascribe-blue-border: rgba(0, 60, 105, 0.1);
$ascribe-red-error: rgb(169, 68, 66);
$ascribe-brand-danger: #fc535f;
$ascribe--fg-color: $ascribe-dark-blue;
$ascribe--bg-color: $ascribe-dark-blue;
$ascribe--nav-fg-prim-color: $ascribe-dark-blue;
$ascribe--nav-fg-sec-color: lighten($ascribe-dark-blue, 20%);
$ascribe--nav-bg-color: white;
$ascribe--button-default-color: $ascribe--bg-color;
$ascribe--button-secondary-fg-color: $ascribe--bg-color;
$ascribe--button-secondary-bg-color: white;
$ascribe--font: 'canada-type-gibson', sans-serif !important;
$ascribe--font-weight-light: 300 !important;
$ascribe--font-weight-normal: normal;

149
sass/main.scss
View File

@ -11,8 +11,8 @@ $BASE_URL: '<%= BASE_URL %>';
@import '../node_modules/react-datepicker/dist/react-datepicker'; @import '../node_modules/react-datepicker/dist/react-datepicker';
@import 'glyphicons-social'; @import 'glyphicons-social';
@import 'ascribe_theme'; @import 'ascribe_theme';
@import './ascribe-fonts/style';
@import './ascribe-fonts/ascribe-fonts'; @import './ascribe-fonts/ascribe-fonts';
@import 'ascribe_navbar';
@import 'ascribe_login'; @import 'ascribe_login';
@import 'ascribe_table'; @import 'ascribe_table';
@import 'ascribe_accordion_list'; @import 'ascribe_accordion_list';
@ -31,9 +31,12 @@ $BASE_URL: '<%= BASE_URL %>';
@import 'offset_right'; @import 'offset_right';
@import 'ascribe_settings'; @import 'ascribe_settings';
@import 'ascribe_slides_container'; @import 'ascribe_slides_container';
@import 'ascribe_property';
@import 'ascribe_form'; @import 'ascribe_form';
@import 'ascribe_panel'; @import 'ascribe_panel';
@import 'ascribe_collapsible'; @import 'ascribe_collapsible';
@import 'ascribe_custom_style';
@import 'ascribe_spinner';
@import 'whitelabel/index'; @import 'whitelabel/index';
@ -68,8 +71,6 @@ hr {
.no-margin { .no-margin {
margin: 0; margin: 0;
margin-left: 0;
margin-right: 0;
} }
.no-padding { .no-padding {
@ -80,78 +81,10 @@ hr {
display: inline; display: inline;
} }
.navbar-default { .ascribe-powered-by {
border: 0; font-size: 11px!important;
border-color: #ccc; text-transform: none!important;
border-left: 0; font-weight: normal!important;
border-right: 0;
border-top: 0;
font-size: .8em;
margin-bottom: 1.5em;
.navbar-nav > li > a {
border: 1px solid rgba(0, 0, 0, 0);
}
.navbar-nav > .active {
a {
background-color: transparent !important;
border-bottom: 1px solid #02b6a3;
color: #02b6a3;
> span {
color: #02b6a3;
}
&:hover,
&:focus {
background-color: transparent;
border-bottom: 1px solid #02b6a3;
color: #02b6a3;
> span {
color: #02b6a3;
}
}
}
}
}
.img-brand {
height: 60px;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 4em;
@media only screen and (min-width: 400px) {
width: 8em;
}
@media only screen and (min-width: 600px) {
width: 12em;
}
@media only screen and (min-width: 1000px) {
width: 14em;
}
@media only screen and (min-width: 1200px) {
width: 16em;
}
@media only screen and (min-width: 1400px) {
width: 18em;
}
}
.navbar-right {
margin-right: 0;
} }
.clear-paddings { .clear-paddings {
@ -165,7 +98,7 @@ hr {
} }
.ascribe-color { .ascribe-color {
color: $ascribe-color-green; color: $ascribe-dark-blue;
} }
.ascribe-subheader { .ascribe-subheader {
@ -202,59 +135,15 @@ hr {
} }
.btn-delete { .btn-delete {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0)!important;
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0)!important;
color: #888; color: #888;
&:hover { &:hover {
border: 1px solid $ascribe-brand-danger; background-color: $ascribe-red-error !important;
border: 1px solid $ascribe-red-error !important;
} }
} }
.btn-ascribe {
border: 1px solid #444;
border-radius: 0 !important;
font-family: sans-serif !important;
line-height: 2em;
margin-left: 0 !important;
font-family: sans-serif !important;
border-radius: 0 !important;
color: #222 !important;
}
.btn-ascribe:active, .btn-ascribe:hover {
color: #FFF !important;
background-color: #444;
}
.btn-ascribe-sm {
font-size: 12px;
line-height: 1.3em;
}
.btn-ascribe-green,
.btn-ascribe-green-inv {
border: 1px solid #48dacb;
border-radius: 0 !important;
font-family: sans-serif !important;
line-height: 2em;
margin-left: 0 !important;
}
.btn-ascribe-green,
.btn-ascribe-green-inv:active,
.btn-ascribe-green-inv:hover {
background-color: #fff;
border: 1px solid rgba(2, 182, 163, .5);
color: rgba(2, 182, 163, 0.5);
}
.btn-ascribe-green:active,
.btn-ascribe-green:hover,
.btn-ascribe-green-inv {
background-color: rgba(2, 182, 163, .5);
border: 1px solid rgba(2, 182, 163, .5);
color: white;
}
.ascribe-detail-title { .ascribe-detail-title {
font-size: 2em; font-size: 2em;
@ -450,18 +339,6 @@ hr {
text-align: center; text-align: center;
} }
.ascribe-progress-bar {
margin-bottom: 0;
> .progress-bar {
background-color: $ascribe-color-green;
}
}
.ascribe-progress-bar-xs {
height: 12px;
}
.ascribe-piece-list-filter-display { .ascribe-piece-list-filter-display {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;

20
sass/variables.scss
View File

@ -19,7 +19,7 @@ $brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
$brand-success: #5cb85c !default; $brand-success: #5cb85c !default;
$brand-info: #5bc0de !default; $brand-info: #5bc0de !default;
$brand-warning: #ccc !default; $brand-warning: #ccc !default;
$brand-danger: $ascribe-brand-danger !default; $brand-danger: $ascribe-red-error !default;
//== Scaffolding //== Scaffolding
@ -150,8 +150,8 @@ $table-border-color: #ddd !default;
$btn-font-weight: normal !default; $btn-font-weight: normal !default;
$btn-default-color: white !default; $btn-default-color: white !default;
$btn-default-bg: $ascribe-color-green !default; $btn-default-bg: $ascribe-dark-blue !default;
$btn-default-border: $ascribe-color-green !default; $btn-default-border: $ascribe-dark-blue !default;
$btn-primary-color: #fff !default; $btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default; $btn-primary-bg: $brand-primary !default;
@ -219,9 +219,9 @@ $legend-color: $gray-dark !default;
$legend-border-color: #e5e5e5 !default; $legend-border-color: #e5e5e5 !default;
//** Background color for textual input addons //** Background color for textual input addons
$input-group-addon-bg: $ascribe-color-green !default; $input-group-addon-bg: $ascribe-dark-blue !default;
//** Border color for textual input addons //** Border color for textual input addons
$input-group-addon-border-color: $ascribe-color-green !default; $input-group-addon-border-color: transparent !default;
//** Disabled cursor for form controls and buttons. //** Disabled cursor for form controls and buttons.
$cursor-disabled: not-allowed !default; $cursor-disabled: not-allowed !default;
@ -468,14 +468,14 @@ $pagination-disabled-border: #ddd !default;
// //
//## //##
$pager-bg: $ascribe-color-green !default; $pager-bg: $ascribe-dark-blue !default;
$pager-border: $ascribe-color-green !default; $pager-border: $ascribe-dark-blue !default;
$pager-border-radius: 0 !default; $pager-border-radius: 0 !default;
$pager-hover-bg: darken($ascribe-color-green, 10%) !default; $pager-hover-bg: darken($ascribe-dark-blue, 10%) !default;
$pager-active-bg: $ascribe-color-green !default; $pager-active-bg: $ascribe-dark-blue !default;
$pager-active-color: $ascribe-color-green !default; $pager-active-color: $ascribe-dark-blue !default;
$pager-disabled-color: #CCC !default; $pager-disabled-color: #CCC !default;
$pager-disabled-border: 1px solid #CCC !default; $pager-disabled-border: 1px solid #CCC !default;

2
sass/whitelabel/index.scss
View File

@ -1,3 +1,3 @@
@import 'prize/index'; @import 'prize/index';
@import 'wallet/index'; @import 'wallet/index';
@import 'wallet/ikonotv/ikonotv_landing';

3
sass/whitelabel/prize/index.scss
View File

@ -1,5 +1,4 @@
@import 'landing'; @import 'sluice/sluice_custom_style';
@import 'rating';
.ascribe-prize-app { .ascribe-prize-app {
border-radius: 0; border-radius: 0;

34
sass/whitelabel/prize/landing.scss
View File

@ -1,34 +0,0 @@
.wp {
height: 100%;
max-width: 90%;
margin: auto;
/* We need this, otherwise piece list will have a scrollbar */
}
.hero {
font-family: 'Nunito', sans-serif;
font-weight: 300;
overflow: hidden;
text-align: center;
> img {
margin-top: 5em;
margin-bottom: 5em;
}
}
.wp-landing-wrapper {
text-align: center;
font-family: 'Nunito', sans-serif;
font-weight: 300;
> .enter {
margin-top: 2em;
> p {
margin-top: 2em;
}
}
}

34
sass/whitelabel/prize/rating.scss
View File

@ -1,34 +0,0 @@
.rating-container .rating-stars {
width: 25px;
color: #02b6a3;
}
#list-rating {
> a > span > span > .rating-container .rating-stars {
color: #000;
}
> span > span > span > .rating-container .rating-stars {
color: #000;
}
> span > span > .rating-container .rating-stars {
color: #000;
}
}
.react-rating-caption {
font-size: 1em;
}
.rating-list {
margin-left: 1.5em;
font-size: 0.9em;
margin-bottom: 0.3em;
color: #333;
}
.rating-note {
color: #666;
font-style: italic;
padding: 0.7em;
}

253
sass/whitelabel/prize/sluice/sluice_custom_style.scss Normal file
View File

@ -0,0 +1,253 @@
$sluice--nav-bg-color: #fcfcfc;
$sluice--nav-fg-prim-color: #1E1E1E;
$sluice--button-color: $sluice--nav-fg-prim-color;
.wp {
height: 100%;
max-width: 90%;
margin: auto;
/* We need this, otherwise piece list will have a scrollbar */
}
.hero {
font-family: 'Nunito', sans-serif;
font-weight: 300;
overflow: hidden;
text-align: center;
> img {
margin-top: 5em;
margin-bottom: 5em;
}
}
.wp-landing-wrapper {
text-align: center;
font-family: 'Nunito', sans-serif;
font-weight: 300;
> .enter {
margin-top: 2em;
> p {
margin-top: 2em;
}
}
}
.rating-container {
color: lighten($sluice--nav-fg-prim-color, 80%) !important;
.rating-stars {
width: 25px;
color: $sluice--nav-fg-prim-color !important;
}
}
#list-rating {
> a > span > span > .rating-container .rating-stars {
color: #000;
}
> span > span > span > .rating-container .rating-stars {
color: #000;
}
> span > span > .rating-container .rating-stars {
color: #000;
}
}
.react-rating-caption {
font-size: 1em;
}
.rating-list {
margin-left: 1.5em;
font-size: 0.9em;
margin-bottom: 0.3em;
color: #333;
}
.rating-note {
color: #666;
font-style: italic;
padding: 0.7em;
}
.client--sluice {
.navbar-default {
background-color: $sluice--nav-bg-color;
box-shadow: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.navbar-nav > li > a,
.navbar-nav > li > .active a {
color: $sluice--nav-fg-prim-color;
background-color: $sluice--nav-bg-color;
}
.navbar-nav > li > a:hover {
color: lighten($sluice--nav-fg-prim-color, 40%);
}
.navbar-nav > .active a,
.navbar-nav > .active a:hover,
.navbar-nav > .active a:focus {
color: $sluice--nav-fg-prim-color;
border-bottom-color: $sluice--nav-fg-prim-color;
background-color: $sluice--nav-bg-color;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: lighten($sluice--nav-fg-prim-color, 40%);
background-color: $sluice--nav-bg-color;
}
.navbar-nav > .open > a,
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: lighten($sluice--nav-fg-prim-color, 40%);
background-color: $sluice--nav-bg-color;
}
.dropdown-menu {
background-color: $sluice--nav-bg-color;
}
.dropdown-menu > li > a {
color: $sluice--nav-fg-prim-color;
}
.navbar-toggle .icon-bar {
background-color: $sluice--nav-fg-prim-color;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
background-color: $sluice--nav-bg-color;
}
}
.client--sluice .ascribe-footer {
display: none;
}
.client--sluice .icon-ascribe-search{
color: $sluice--button-color;
}
.client--sluice .ascribe-piece-list-toolbar .btn-ascribe-add{
display: none;
}
// disabled buttons
.client--sluice {
.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: darken($sluice--button-color, 20%);
border-color: darken($sluice--button-color, 20%);
}
}
// buttons!
// thought of the day:
// "every great atrocity is the result of people just following orders"
.client--sluice {
.ascribe-piece-list-toolbar-filter-widget button {
color: $sluice--button-color !important;
background-color: transparent !important;
border-color: transparent !important;
&:hover,
&:active {
background-color: $sluice--button-color !important;
border-color: $sluice--button-color !important;
color: white !important;
}
}
.btn-wide,
.btn-default {
background-color: $sluice--button-color;
border-color: $sluice--button-color;
&:hover,
&:active,
&:focus,
&:active:hover,
&:active:focus,
&:active.focus,
&.active:hover,
&.active:focus,
&.active.focus {
background-color: lighten($sluice--button-color, 20%);
border-color: lighten($sluice--button-color, 20%);
}
}
.open > .btn-default.dropdown-toggle:hover,
.open > .btn-default.dropdown-toggle:focus,
.open > .btn-default.dropdown-toggle.focus,
.open > .btn-default.dropdown-toggle.dropdown-toggle {
background-color: darken($sluice--button-color, 20%);
border-color: darken($sluice--button-color, 20%);
}
.pager li > a, .pager li > span {
background-color: $sluice--button-color;
border-color: $sluice--button-color;
}
.pager li.disabled > a,
.pager li.disabled > span {
background-color: $sluice--button-color !important;
border-color: $sluice--button-color;
}
}
// spinner!
.client--sluice {
.btn-spinner {
color: $sluice--button-color;
}
.spinner-circle {
border-color: $sluice--button-color;
}
.spinner-inner {
color: $sluice--button-color;
display: none;
}
}
// intercom stuff
.client--sluice {
#intercom-container .intercom-launcher-button {
background-color: $sluice--button-color !important;;
border-color: $sluice--button-color !important;;
}
}
// notifications
.client--sluice .ascribe-global-notification-success {
background-color: lighten($sluice--button-color, 50%);
}
// progress bar
.client--sluice .ascribe-progress-bar > .progress-bar {
background-color: $sluice--button-color;
}

206
sass/whitelabel/wallet/cc/cc_custom_style.scss Normal file
View File

@ -0,0 +1,206 @@
$cc--nav-bg-color: #fcfcfc;
$cc--nav-fg-prim-color: #1E1E1E;
$cc--button-color: $cc--nav-fg-prim-color;
.client--cc {
.navbar-default {
background-color: $cc--nav-bg-color;
box-shadow: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.navbar-nav > li > a,
.navbar-nav > li > .active a {
color: $cc--nav-fg-prim-color;
background-color: $cc--nav-bg-color;
}
.navbar-nav > li > a:hover {
color: lighten($cc--nav-fg-prim-color, 40%);
}
.navbar-nav > .active a,
.navbar-nav > .active a:hover,
.navbar-nav > .active a:focus {
color: $cc--nav-fg-prim-color;
border-bottom-color: $cc--nav-fg-prim-color;
background-color: $cc--nav-bg-color;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: lighten($cc--nav-fg-prim-color, 40%);
background-color: $cc--nav-bg-color;
}
.navbar-nav > .open > a,
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: lighten($cc--nav-fg-prim-color, 40%);
background-color: $cc--nav-bg-color;
}
.dropdown-menu {
background-color: $cc--nav-bg-color;
}
.dropdown-menu > li > a {
color: $cc--nav-fg-prim-color;
}
.navbar-toggle .icon-bar {
background-color: $cc--nav-fg-prim-color;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
background-color: $cc--nav-bg-color;
}
}
.client--cc .ascribe-footer {
display: none;
}
.client--cc .icon-ascribe-search{
color: $cc--button-color;
}
.client--cc .ascribe-piece-list-toolbar .btn-ascribe-add{
display: none;
}
// disabled buttons
.client--cc {
// disabled buttons
.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: $cc--nav-bg-color;
color: $cc--nav-fg-prim-color;
}
}
.client--cc {
.btn-secondary {
background-color: $cc--nav-bg-color;
border-color: $cc--nav-fg-prim-color;
color: $cc--nav-fg-prim-color;
&:hover,
&:active,
&:focus,
&:active:hover,
&:active:focus,
&:active.focus,
&.active:hover,
&.active:focus,
&.active.focus {
background-color: $cc--nav-fg-prim-color;
border-color: $cc--nav-fg-prim-color;
color: $cc--nav-bg-color;
}
}
}
// buttons!
// thought of the day:
// "every great atrocity is the result of people just following orders"
.client--cc {
.ascribe-piece-list-toolbar-filter-widget button {
color: $cc--button-color !important;
background-color: transparent !important;
border-color: transparent !important;
&:hover,
&:active {
background-color: $cc--button-color !important;
border-color: $cc--button-color !important;
color: white !important;
}
}
.btn-wide,
.btn-default {
background-color: $cc--button-color;
border-color: $cc--button-color;
&:hover,
&:active,
&:focus,
&:active:hover,
&:active:focus,
&:active.focus,
&.active:hover,
&.active:focus,
&.active.focus {
background-color: lighten($cc--button-color, 20%);
border-color: lighten($cc--button-color, 20%);
}
}
.open > .btn-default.dropdown-toggle:hover,
.open > .btn-default.dropdown-toggle:focus,
.open > .btn-default.dropdown-toggle.focus,
.open > .btn-default.dropdown-toggle.dropdown-toggle {
background-color: darken($cc--button-color, 20%);
border-color: darken($cc--button-color, 20%);
}
.pager li > a,
.pager li > span {
background-color: $cc--button-color;
border-color: $cc--button-color;
}
.pager li.disabled > a,
.pager li.disabled > span {
background-color: $cc--button-color !important;
border-color: $cc--button-color;
}
}
// spinner!
.client--cc {
.btn-spinner {
color: $cc--button-color;
}
.spinner-circle {
border-color: $cc--button-color;
}
.spinner-inner {
color: $cc--button-color;
display: none;
}
}
// intercom stuff
.client--cc {
#intercom-container .intercom-launcher-button {
background-color: $cc--button-color !important;;
border-color: $cc--button-color !important;;
}
}
// notifications
.client--cc .ascribe-global-notification-success {
background-color: lighten($cc--button-color, 50%);
}
// progress bar
.client--cc .ascribe-progress-bar > .progress-bar {
background-color: $cc--button-color;
}

181
sass/whitelabel/wallet/cyland/cyland_custom_style.scss Normal file
View File

@ -0,0 +1,181 @@
$cyland--nav-bg-color: #fcfcfc;
$cyland--nav-fg-prim-color: #1E1E1E;
$cyland--button-color: $cyland--nav-fg-prim-color;
.client--cyland {
.navbar-default {
background-color: $cyland--nav-bg-color;
box-shadow: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.navbar-nav > li > a,
.navbar-nav > li > .active a {
color: $cyland--nav-fg-prim-color;
background-color: $cyland--nav-bg-color;
}
.navbar-nav > li > a:hover {
color: lighten($cyland--nav-fg-prim-color, 40%);
}
.navbar-nav > .active a,
.navbar-nav > .active a:hover,
.navbar-nav > .active a:focus {
color: $cyland--nav-fg-prim-color;
border-bottom-color: $cyland--nav-fg-prim-color;
background-color: $cyland--nav-bg-color;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: lighten($cyland--nav-fg-prim-color, 40%);
background-color: $cyland--nav-bg-color;
}
.navbar-nav > .open > a,
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: lighten($cyland--nav-fg-prim-color, 40%);
background-color: $cyland--nav-bg-color;
}
.dropdown-menu {
background-color: $cyland--nav-bg-color;
}
.dropdown-menu > li > a {
color: $cyland--nav-fg-prim-color;
}
.navbar-toggle .icon-bar {
background-color: $cyland--nav-fg-prim-color;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
background-color: $cyland--nav-bg-color;
}
}
.client--cyland .ascribe-footer {
display: none;
}
.client--cyland .icon-ascribe-search{
color: $cyland--button-color;
}
.client--cyland .ascribe-piece-list-toolbar .btn-ascribe-add{
display: none;
}
// disabled buttons
.client--cyland {
.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: darken($cyland--button-color, 20%);
border-color: darken($cyland--button-color, 20%);
}
}
// buttons!
// thought of the day:
// "every great atrocity is the result of people just following orders"
.client--cyland {
.ascribe-piece-list-toolbar-filter-widget button {
color: $cyland--button-color !important;
background-color: transparent !important;
border-color: transparent !important;
&:hover,
&:active {
background-color: $cyland--button-color !important;
border-color: $cyland--button-color !important;
color: white !important;
}
}
.btn-wide,
.btn-default {
background-color: $cyland--button-color;
border-color: $cyland--button-color;
&:hover,
&:active,
&:focus,
&:active:hover,
&:active:focus,
&:active.focus,
&.active:hover,
&.active:focus,
&.active.focus {
background-color: lighten($cyland--button-color, 20%);
border-color: lighten($cyland--button-color, 20%);
}
}
.open > .btn-default.dropdown-toggle:hover,
.open > .btn-default.dropdown-toggle:focus,
.open > .btn-default.dropdown-toggle.focus,
.open > .btn-default.dropdown-toggle.dropdown-toggle {
background-color: darken($cyland--button-color, 20%);
border-color: darken($cyland--button-color, 20%);
}
.pager li > a, .pager li > span {
background-color: $cyland--button-color;
border-color: $cyland--button-color;
}
.pager li.disabled > a,
.pager li.disabled > span {
background-color: $cyland--button-color !important;
border-color: $cyland--button-color;
}
}
// spinner!
.client--cyland {
.btn-spinner {
color: $cyland--button-color;
}
.spinner-circle {
border-color: $cyland--button-color;
}
.spinner-inner {
color: $cyland--button-color;
display: none;
}
}
// intercom stuff
.client--cyland {
#intercom-container .intercom-launcher-button {
background-color: $cyland--button-color !important;;
border-color: $cyland--button-color !important;;
}
}
// notifications
.client--cyland .ascribe-global-notification-success {
background-color: lighten($cyland--button-color, 50%);
}
// progress bar
.client--cyland .ascribe-progress-bar > .progress-bar {
background-color: $cyland--button-color;
}

152
sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss → sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
View File

@ -2,7 +2,7 @@ $ikono--landing-bg-color: #093;
$ikono--bg-color: #06c; $ikono--bg-color: #06c;
$ikono--button-color: $ikono--bg-color; $ikono--button-color: $ikono--bg-color;
$ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono_tv.png'; $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono_tv.png';
$ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
@include keyframes(color-loop) { @include keyframes(color-loop) {
0% { background: $ikono--landing-bg-color; } 0% { background: $ikono--landing-bg-color; }
@ -12,23 +12,16 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
.client--ikonotv { .client--ikonotv {
font-family: 'Helvetica Neue', 'Helvetica', sans-serif; font-family: $ikono--font;
h1, h3 {
font-family: $ikono--font;
}
} }
.navbar-default .navbar-nav > .active a:hover, .navbar-default .navbar-nav > .active a:focus {
}
.client--ikonotv .navbar-default { .client--ikonotv .navbar-default {
background-color: $ikono--bg-color; background-color: $ikono--bg-color;
box-shadow: none;
// this is a horrible hack
.navbar-nav > li > a[href="https://www.ascribe.io/"] {
font-size: 11px;
text-transform: none;
font-weight: normal;
}
.navbar-nav > li > a, .navbar-nav > li > a,
.navbar-nav > li > .active a { .navbar-nav > li > .active a {
@ -47,6 +40,8 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
.navbar-nav > .active a:focus { .navbar-nav > .active a:focus {
color: black; color: black;
border-bottom-color: transparent; border-bottom-color: transparent;
background-color: transparent;
font-weight: bold;
} }
.navbar-nav > .active { .navbar-nav > .active {
@ -67,6 +62,30 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
background-color: $ikono--bg-color; background-color: $ikono--bg-color;
} }
.dropdown-menu {
background-color: $ikono--bg-color;
}
.dropdown-menu > li > a {
color: white;
font-weight: bold;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: $ikono--bg-color;
background-color: white;
}
.notification-menu {
.dropdown-menu {
background-color: white;
li:hover {
background-color: rgba($ikono--button-color, 0.1);
}
}
}
.img-brand.navbar-brand { .img-brand.navbar-brand {
width: 0; width: 0;
height: 0; height: 0;
@ -92,6 +111,8 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
.client--ikonotv .route--landing { .client--ikonotv .route--landing {
background-color: $ikono--landing-bg-color; background-color: $ikono--landing-bg-color;
animation: color-loop 20s; animation: color-loop 20s;
-o-animation: color-loop 20s infinite;
-ms-animation: color-loop 20s infinite;
-moz-animation: color-loop 20s infinite; -moz-animation: color-loop 20s infinite;
-webkit-animation: color-loop 20s infinite; -webkit-animation: color-loop 20s infinite;
@ -105,7 +126,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
.client--ikonotv .route--signup { .client--ikonotv .route--signup {
background-color: $ikono--landing-bg-color; background-color: $ikono--landing-bg-color;
.ascribe-btn-login { .btn-wide {
display: block; display: block;
margin: 50px auto 0; margin: 50px auto 0;
width: auto; width: auto;
@ -115,7 +136,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
width: 180px; width: 180px;
} }
.ascribe-btn-login-spinner { .btn-spinner {
background-color: $ikono--button-color; background-color: $ikono--button-color;
} }
@ -138,11 +159,10 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
text-align: center; text-align: center;
font-size: 22px; font-size: 22px;
text-indent: -99999px; text-indent: -99999px;
font-size: 0;
} }
} }
.ascribe-settings-wrapper { .ascribe-property-wrapper {
background-color: transparent; background-color: transparent;
&:hover { &:hover {
@ -154,15 +174,15 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
} }
} }
.ascribe-settings-property { .ascribe-property {
border: none; border: none;
} }
.ascribe-settings-property > span { .ascribe-property > span {
color: white; color: white;
} }
.ascribe-settings-property > input { .ascribe-property > input {
padding: 10px; padding: 10px;
background-color: #fff; background-color: #fff;
margin-top: .1em; margin-top: .1em;
@ -205,6 +225,30 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
display: none; display: none;
} }
.client--ikonotv .icon-ascribe-search{
color: $ikono--button-color;
}
.client--ikonotv .ascribe-piece-list-toolbar .btn-ascribe-add{
display: none;
}
// spinner!
.client--ikonotv {
.btn-spinner {
color: $ikono--button-color;
}
.spinner-circle {
border-color: $ikono--button-color;
}
.spinner-inner {
display: none;
font-family: $ascribe--font;
color: $ikono--button-color;
}
}
.ikonotv-landing { .ikonotv-landing {
/* center all text on the page */ /* center all text on the page */
text-align: center; text-align: center;
@ -336,31 +380,34 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
// "every great atrocity is the result of people just following orders" // "every great atrocity is the result of people just following orders"
.client--ikonotv { .client--ikonotv {
.ascribe-piece-list-toolbar-filter-widget button { .ascribe-piece-list-toolbar-filter-widget button {
background-color: transparent; color: $ikono--button-color !important;
border: 1px solid transparent; background-color: transparent !important;
color: $ikono--button-color; border-color: transparent !important;
&:hover, &:hover,
&:active { &:active {
background-color: $ikono--button-color !important; background-color: $ikono--button-color !important;
border-color: $ikono--button-color !important; border-color: $ikono--button-color !important;
color: white; color: white !important;
} }
} }
.ascribe-btn-login, .btn-wide,
.btn-default { .btn-default {
background-color: $ikono--button-color; background-color: $ikono--button-color;
border-color: $ikono--button-color; border-color: $ikono--button-color;
&:hover,
&:active,
&:focus,
&:active:hover, &:active:hover,
&:active:focus, &:active:focus,
&:active.focus, &:active.focus,
&.active:hover, &.active:hover,
&.active:focus, &.active:focus,
&.active.focus { &.active.focus {
background-color: darken($ikono--button-color, 20%); background-color: lighten($ikono--button-color, 20%);
border-color: darken($ikono--button-color, 20%); border-color: lighten($ikono--button-color, 20%);
} }
} }
@ -376,6 +423,12 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
background-color: $ikono--button-color; background-color: $ikono--button-color;
border-color: $ikono--button-color; border-color: $ikono--button-color;
} }
.pager li.disabled > a,
.pager li.disabled > span {
background-color: $ikono--button-color !important;
border-color: $ikono--button-color;
}
} }
// inputs! // inputs!
@ -390,20 +443,55 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
border-color: $ikono--button-color; border-color: $ikono--button-color;
} }
.ascribe-settings-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before, .ascribe-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before,
.ascribe-checkbox-wrapper [type=checkbox]:checked + .checkbox:before { .ascribe-checkbox-wrapper [type=checkbox]:checked + .checkbox:before {
color: $ikono--button-color; color: $ikono--button-color;
} }
.search-bar > .form-group > .input-group > .input-group-addon {
border-color: transparent;
}
} }
// properties! // properties!
.client--ikonotv { .client--ikonotv {
input {
background-color: white;
}
.ascribe-property {
> div,
> input,
> pre,
> select,
> span:not(.glyphicon),
> textarea {
font-family: $ikono--font;
}
> div {
> div:not(.file-drag-and-drop div) {
font-family: $ikono--font;
}
}
}
.is-focused { .is-focused {
border-left-color: $ikono--button-color !important; border-left-color: $ikono--button-color !important;
background-color: rgba($ikono--button-color, .05); background-color: rgba($ikono--button-color, .05);
} }
.ascribe-settings-wrapper:hover { .is-error {
> div {
> span {
color: white !important;
}
> input,
> textarea {
color: rgba($ascribe-red-error, 1) !important;
}
}
&:hover {
border-left: 3px solid rgba($ascribe-red-error, .5)!important;
}
}
.ascribe-property-wrapper:hover {
border-left-color: rgba($ikono--button-color, .5); border-left-color: rgba($ikono--button-color, .5);
} }
} }
@ -418,15 +506,15 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
// intercom stuff // intercom stuff
.client--ikonotv { .client--ikonotv {
#intercom-container .intercom-launcher-button { #intercom-container .intercom-launcher-button {
background-color: $ikono--button-color; background-color: $ikono--button-color !important;;
border-color: $ikono--button-color; border-color: $ikono--button-color !important;;
} }
} }
// notifications // notifications
.client--ikonotv .ascribe-global-notification-success { .client--ikonotv .ascribe-global-notification-success {
background-color: $ikono--button-color; background-color: lighten($ikono--button-color, 20%);
} }
// progress bar // progress bar

4
sass/whitelabel/wallet/index.scss
View File

@ -1,3 +1,7 @@
@import 'cc/cc_custom_style';
@import 'cyland/cyland_custom_style';
@import 'ikonotv/ikonotv_custom_style';
.ascribe-wallet-app { .ascribe-wallet-app {
border-radius: 0; border-radius: 0;
padding-top: 70px; padding-top: 70px;