Merge remote-tracking branch 'remotes/origin/AD-456-ikonotv-branded-page-for-registra' into AD-883-show-notificationsrequests-on-col

Conflicts:
	sass/ascribe_accordion_list.scss

.scss-lint.yml

@@ -0,0 +1,224 @@
+linters:
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+
+  BemDepth:
+    enabled: false
+    max_elements: 1
+
+  BorderZero:
+    enabled: true
+    convention: zero # or `none`
+
+  ColorKeyword:
+    enabled: true
+
+  ColorVariable:
+    enabled: true
+
+  Comment:
+    enabled: true
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DisableLinterReason:
+    enabled: false
+
+  DuplicateProperty:
+    enabled: true
+
+  ElsePlacement:
+    enabled: true
+    style: same_line # or 'new_line'
+
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: true
+
+  EmptyRule:
+    enabled: true
+
+  ExtendDirective:
+    enabled: false
+
+  FinalNewline:
+    enabled: false
+    present: true
+
+  HexLength:
+    enabled: true
+    style: short # or 'long'
+
+  HexNotation:
+    enabled: true
+    style: lowercase # or 'uppercase'
+
+  HexValidation:
+    enabled: true
+
+  IdSelector:
+    enabled: true
+
+  ImportantRule:
+    enabled: true
+
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+
+  Indentation:
+    enabled: true
+    allow_non_nested_indentation: false
+    character: space # or 'tab'
+    width: 4
+
+  LeadingZero:
+    enabled: true
+    style: exclude_zero # or 'include_zero'
+
+  MergeableSelector:
+    enabled: true
+    force_nesting: true
+
+  NameFormat:
+    enabled: true
+    allow_leading_underscore: true
+    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
+
+  NestingDepth:
+    enabled: true
+    max_depth: 3
+    ignore_parent_selectors: false
+
+  PlaceholderInExtend:
+    enabled: true
+
+  PropertyCount:
+    enabled: false
+    include_nested: false
+    max_properties: 10
+
+  PropertySortOrder:
+    enabled: false
+    ignore_unspecified: false
+    min_properties: 2
+    separate_groups: false
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+
+  PropertyUnits:
+    enabled: true
+    global: [
+      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
+      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
+      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
+      'deg', 'grad', 'rad', 'turn',            # Angle
+      'ms', 's',                               # Duration
+      'Hz', 'kHz',                             # Frequency
+      'dpi', 'dpcm', 'dppx',                   # Resolution
+      '%']                                     # Other
+    properties: {}
+
+  QualifyingElement:
+    enabled: true
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 3
+
+  SelectorFormat:
+    enabled: true
+    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
+
+  Shorthand:
+    enabled: true
+    allowed_shorthands: [1, 2, 3]
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: true
+
+  SingleLinePerSelector:
+    enabled: true
+
+  SpaceAfterComma:
+    enabled: true
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceAfterVariableName:
+    enabled: true
+
+  SpaceAroundOperator:
+    enabled: true
+    style: one_space # or 'no_space'
+
+  SpaceBeforeBrace:
+    enabled: true
+    style: space # or 'new_line'
+    allow_single_line_padding: false
+
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+
+  StringQuotes:
+    enabled: true
+    style: single_quotes # or double_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingWhitespace:
+    enabled: true
+
+  TrailingZero:
+    enabled: false
+
+  TransitionAll:
+    enabled: false
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: true
+
+  UrlQuotes:
+    enabled: true
+
+  VariableForProperty:
+    enabled: false
+    properties: []
+
+  VendorPrefix:
+    enabled: false
+    identifier_list: base
+    additional_identifiers: []
+    excluded_identifiers: []
+
+  ZeroUnit:
+    enabled: true
+
+  Compass::*:
+    enabled: false

README.md

@@ -32,8 +32,8 @@ Additionally, to work on the white labeling functionality, you need to edit your
 ```
 
 
-Code Conventions
+JavaScript Code Conventions
-================
+===========================
 For this project, we're using:
 
 * 4 Spaces
@@ -42,6 +42,15 @@ For this project, we're using:
 * We don't use camel case for file naming but in everything Javascript related
 * We use `let` instead of `var`: [SA Post](http://stackoverflow.com/questions/762011/javascript-let-keyword-vs-var-keyword) 
 
+
+SCSS Code Conventions
+=====================
+Install [lint-scss](https://github.com/brigade/scss-lint), check the [editor integration docs](https://github.com/brigade/scss-lint#editor-integration) to integrate the lint in your editor.
+
+Some interesting links:
+* [Improving Sass code quality on theguardian.com](https://www.theguardian.com/info/developer-blog/2014/may/13/improving-sass-code-quality-on-theguardiancom)
+
+
 Testing
 ===============
 We're using Facebook's jest to do testing as it integrates nicely with react.js as well.

gulpfile.js

@@ -23,7 +23,7 @@ var argv = require('yargs').argv;
 var server = require('./server.js').app;
 var minifyCss = require('gulp-minify-css');
 var uglify = require('gulp-uglify');
-
+var opn = require('opn');
 
 
 var config = {
@@ -48,8 +48,7 @@ var config = {
     },
     filesToWatch: [
         'build/css/*.css',
-        'build/js/*.js',
+        'build/js/*.js'
-        'node_modules/react-s3-fine_uploader/*.js'
     ]
 };
 
@@ -73,6 +72,9 @@ gulp.task('js:build', function() {
 
 gulp.task('serve', ['browser-sync', 'run-server', 'sass:build', 'sass:watch', 'copy'], function() {
     bundle(true);
+
+    // opens the browser window with the correct url, which is localhost.com
+    opn('http://www.localhost.com:3000');
 });
 
 gulp.task('jest', function(done) {
@@ -93,7 +95,9 @@ gulp.task('browser-sync', function() {
     browserSync({
         files: config.filesToWatch,
         proxy: 'http://localhost:4000',
-        port: 3000
+        port: 3000,
+        open: false, // does not open the browser-window anymore (handled manually)
+        ghostMode: false
     });
 });
 

js/actions/contract_actions.js

@@ -4,27 +4,27 @@ import alt from '../alt';
 import OwnershipFetcher from '../fetchers/ownership_fetcher';
 
 
-class LoanContractActions {
+class ContractActions {
     constructor() {
         this.generateActions(
-            'updateLoanContract',
+            'updateContract',
-            'flushLoanContract'
+            'flushContract'
         );
     }
 
-    fetchLoanContract(email) {
+    fetchContract(email) {
         if(email.match(/.+\@.+\..+/)) {
-            OwnershipFetcher.fetchLoanContract(email)
+            OwnershipFetcher.fetchContract(email)
                 .then((contracts) => {
                     if (contracts && contracts.length > 0) {
-                        this.actions.updateLoanContract({
+                        this.actions.updateContract({
                             contractKey: contracts[0].s3Key,
                             contractUrl: contracts[0].s3Url,
                             contractEmail: email
                         });
                     }
                     else {
-                        this.actions.updateLoanContract({
+                        this.actions.updateContract({
                             contractKey: null,
                             contractUrl: null,
                             contractEmail: null
@@ -33,7 +33,7 @@ class LoanContractActions {
                 })
                 .catch((err) => {
                     console.logGlobal(err);
-                    this.actions.updateLoanContract({
+                    this.actions.updateContract({
                         contractKey: null,
                         contractUrl: null,
                         contractEmail: null
@@ -45,4 +45,4 @@ class LoanContractActions {
     }
 }
 
-export default alt.createActions(LoanContractActions);
+export default alt.createActions(ContractActions);

js/actions/contract_list_actions.js

@@ -0,0 +1,27 @@
+'use strict';
+
+import alt from '../alt';
+import OwnershipFetcher from '../fetchers/ownership_fetcher';
+
+
+class ContractListActions {
+    constructor() {
+        this.generateActions(
+            'updateContractList',
+            'flushContractList'
+        );
+    }
+
+    fetchContractList() {
+        OwnershipFetcher.fetchContractList()
+            .then((contracts) => {
+                this.actions.updateContractList(contracts);
+            })
+            .catch((err) => {
+                console.logGlobal(err);
+                this.actions.updateContractList([]);
+            });
+    }
+}
+
+export default alt.createActions(ContractListActions);

js/actions/loan_contract_list_actions.js

@@ -1,27 +0,0 @@
-'use strict';
-
-import alt from '../alt';
-import OwnershipFetcher from '../fetchers/ownership_fetcher';
-
-
-class LoanContractListActions {
-    constructor() {
-        this.generateActions(
-            'updateLoanContractList',
-            'flushLoanContractList'
-        );
-    }
-
-    fetchLoanContractList() {
-        OwnershipFetcher.fetchLoanContractList()
-            .then((contracts) => {
-                this.actions.updateLoanContractList(contracts);
-            })
-            .catch((err) => {
-                console.logGlobal(err);
-                this.actions.updateLoanContractList([]);
-            });
-    }
-}
-
-export default alt.createActions(LoanContractListActions);

js/actions/piece_list_actions.js

@@ -25,8 +25,9 @@ class PieceListActions {
             orderBy,
             orderAsc,
             filterBy,
-            'pieceList': [],
+            pieceList: [],
-            'pieceListCount': -1
+            pieceListCount: -1,
+            unfilteredPieceListCount: -1
         });
 
         // afterwards, we can load the list
@@ -42,8 +43,9 @@ class PieceListActions {
                         orderBy,
                         orderAsc,
                         filterBy,
-                        'pieceList': res.pieces,
+                        pieceList: res.pieces,
-                        'pieceListCount': res.count
+                        pieceListCount: res.count,
+                        unfilteredPieceListCount: res.unfiltered_count
                     });
                     resolve();
                 })

js/components/ascribe_collapsible/collapsible_paragraph.js

@@ -38,14 +38,14 @@ const CollapsibleParagraph = React.createClass({
         if(this.props.show) {
             return (
                 <div className="ascribe-detail-header">
-                    <div className="ascribe-edition-collapsible-wrapper">
+                    <div className="ascribe-collapsible-wrapper">
                         <div onClick={this.handleToggle}>
                             <span>{text} {this.props.title}</span>
                         </div>
                         <Panel
                             collapsible
                             expanded={this.state.expanded}
-                            className="ascribe-edition-collapsible-content">
+                            className="ascribe-collapsible-content">
                             {this.props.children}
                         </Panel>
                     </div>

js/components/ascribe_detail/further_details.js

@@ -15,7 +15,7 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 
 import FurtherDetailsFileuploader from './further_details_fileuploader';
 
-import { isReadyForFormSubmission } from '../ascribe_uploader/react_s3_fine_uploader_utils';
+import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
 
 let FurtherDetails = React.createClass({
     propTypes: {
@@ -80,7 +80,7 @@ let FurtherDetails = React.createClass({
                         <FurtherDetailsFileuploader
                             submitKey={this.submitKey}
                             setIsUploadReady={this.setIsUploadReady}
-                            isReadyForFormSubmission={isReadyForFormSubmission}
+                            isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                             editable={this.props.editable}
                             overrideForm={true}
                             pieceId={this.props.pieceId}

js/components/ascribe_forms/form_contract.js

@@ -2,8 +2,8 @@
 
 import React from 'react';
 
-import LoanContractListActions from '../../actions/loan_contract_list_actions';
+import ContractListActions from '../../actions/contract_list_actions';
-import LoanContractListStore from '../../stores/loan_contract_list_store';
+import ContractListStore from '../../stores/contract_list_store';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
@@ -26,7 +26,7 @@ let ContractForm = React.createClass({
 
      getInitialState() {
         return mergeOptions(
-            LoanContractListStore.getState(),
+            ContractListStore.getState(),
             {
                 selectedContract: 0
             }
@@ -34,12 +34,12 @@ let ContractForm = React.createClass({
     },
 
     componentDidMount() {
-        LoanContractListStore.listen(this.onChange);
+        ContractListStore.listen(this.onChange);
-        LoanContractListActions.fetchLoanContractList();
+        ContractListActions.fetchContractList();
     },
 
     componentWillUnmount() {
-        LoanContractListStore.unlisten(this.onChange);
+        ContractListStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -92,7 +92,7 @@ let ContractForm = React.createClass({
             <Form
                 className="ascribe-form-bordered ascribe-form-wrapper"
                 ref='form'
-                url={ApiUrls.ownership_loans_contract}
+                url={ApiUrls.blob_contracts}
                 handleSuccess={this.props.handleSuccess}
                 buttons={<button
                             type="submit"

js/components/ascribe_forms/form_create_contract.js

@@ -0,0 +1,102 @@
+'use strict';
+
+import React from 'react';
+
+import Form from '../ascribe_forms/form';
+import Property from '../ascribe_forms/property';
+
+import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
+
+import AppConstants from '../../constants/application_constants';
+import ApiUrls from '../../constants/api_urls';
+
+import { getLangText } from '../../utils/lang_utils';
+import { getCookie } from '../../utils/fetch_api_utils';
+import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
+
+let CreateContractForm = React.createClass({
+
+    getInitialState() {
+        return {
+            digitalWorkKey: null,
+            isUploadReady: false
+        };
+    },
+
+    submitKey(key) {
+        this.setState({
+            digitalWorkKey: key
+        });
+    },
+
+    setIsUploadReady(isReady) {
+        this.setState({
+            isUploadReady: isReady
+        });
+    },
+
+    render() {
+        return (
+            <Form
+                url={ApiUrls.ownership_contract}
+                buttons={
+                    <button
+                        type="submit"
+                        className="btn ascribe-btn ascribe-btn-login"
+                        disabled={!this.state.isUploadReady}>
+                        {getLangText('Create new contract')}
+                    </button>
+                }
+                spinner={
+                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                    </span>
+                }>
+                <Property
+                    label="Contract file">
+                    <ReactS3FineUploader
+                        keyRoutine={{
+                            url: AppConstants.serverUrl + 's3/key/',
+                            fileClass: 'contract'
+                        }}
+                        createBlobRoutine={{
+                            url: ApiUrls.blob_contracts
+                        }}
+                        validation={{
+                            itemLimit: 100000,
+                            sizeLimit: '50000000'
+                        }}
+                        signature={{
+                            endpoint: AppConstants.serverUrl + 's3/signature/',
+                            customHeaders: {
+                               'X-CSRFToken': getCookie(AppConstants.csrftoken)
+                            }
+                        }}
+                        deleteFile={{
+                            enabled: true,
+                            method: 'DELETE',
+                            endpoint: AppConstants.serverUrl + 's3/delete',
+                            customHeaders: {
+                               'X-CSRFToken': getCookie(AppConstants.csrftoken)
+                            }
+                        }}
+                        areAssetsDownloadable={true}
+                        areAssetsEditable={true}
+                        submitKey={this.submitKey}
+                        setIsUploadReady={this.setIsUploadReady}
+                        isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}/>
+                </Property>
+                <Property
+                    name='contract_ name'
+                    label={getLangText('Contract name')}>
+                    <input
+                        type="text"
+                        placeholder="(e.g. Loan agreement #1)"
+                        required/>
+                </Property>
+            </Form>
+        );
+    }
+});
+
+export default CreateContractForm;

js/components/ascribe_forms/form_loan.js

@@ -12,8 +12,8 @@ import InputTextAreaToggable from './input_textarea_toggable';
 import InputDate from './input_date';
 import InputCheckbox from './input_checkbox';
 
-import LoanContractStore from '../../stores/loan_contract_store';
+import ContractStore from '../../stores/contract_store';
-import LoanContractActions from '../../actions/loan_contract_actions';
+import ContractActions from '../../actions/contract_actions';
 
 import AppConstants from '../../constants/application_constants';
 
@@ -48,16 +48,16 @@ let LoanForm = React.createClass({
     },
 
     getInitialState() {
-        return LoanContractStore.getState();
+        return ContractStore.getState();
     },
 
     componentDidMount() {
-        LoanContractStore.listen(this.onChange);
+        ContractStore.listen(this.onChange);
-        LoanContractActions.flushLoanContract.defer();
+        ContractActions.flushContract.defer();
     },
 
     componentWillUnmount() {
-        LoanContractStore.unlisten(this.onChange);
+        ContractStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -72,7 +72,7 @@ let LoanForm = React.createClass({
         let potentialEmail = event.target.value;
 
         if(potentialEmail.match(/.*@.*/)) {
-            LoanContractActions.fetchLoanContract(potentialEmail);
+            ContractActions.fetchContract(potentialEmail);
         }
     },
 

js/components/ascribe_forms/form_register_piece.js

@@ -16,7 +16,7 @@ import ApiUrls from '../../constants/api_urls';
 import { getCookie } from '../../utils/fetch_api_utils';
 import { getLangText } from '../../utils/lang_utils';
 import { mergeOptions } from '../../utils/general_utils';
-import { isReadyForFormSubmission } from '../ascribe_uploader/react_s3_fine_uploader_utils';
+import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
 
 
 let RegisterPieceForm = React.createClass({
@@ -115,7 +115,7 @@ let RegisterPieceForm = React.createClass({
                     <FileUploader
                         submitKey={this.submitKey}
                         setIsUploadReady={this.setIsUploadReady}
-                        isReadyForFormSubmission={isReadyForFormSubmission}
+                        isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                         isFineUploaderActive={this.props.isFineUploaderActive}
                         onLoggedOut={this.props.onLoggedOut}
                         editable={this.props.isFineUploaderEditable}
@@ -192,11 +192,11 @@ let FileUploader = React.createClass({
                 createBlobRoutine={{
                     url: ApiUrls.blob_digitalworks
                 }}
-                submitKey={this.props.submitKey}
                 validation={{
                     itemLimit: 100000,
                     sizeLimit: '25000000000'
                 }}
+                submitKey={this.props.submitKey}
                 setIsUploadReady={this.props.setIsUploadReady}
                 isReadyForFormSubmission={this.props.isReadyForFormSubmission}
                 areAssetsDownloadable={false}

js/components/ascribe_settings/account_settings.js

@@ -0,0 +1,144 @@
+'use strict';
+
+import React from 'react';
+
+import UserStore from '../../stores/user_store';
+import UserActions from '../../actions/user_actions';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+import Form from '../ascribe_forms/form';
+import Property from '../ascribe_forms/property';
+import InputCheckbox from '../ascribe_forms/input_checkbox';
+import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
+
+import ApiUrls from '../../constants/api_urls';
+import AppConstants from '../../constants/application_constants';
+
+import { getLangText } from '../../utils/lang_utils';
+
+let AccountSettings = React.createClass({
+    getInitialState() {
+        return UserStore.getState();
+    },
+
+    componentDidMount() {
+        UserStore.listen(this.onChange);
+        UserActions.fetchCurrentUser();
+    },
+
+    componentWillUnmount() {
+        UserStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    handleSuccess(){
+        UserActions.fetchCurrentUser();
+        let notification = new GlobalNotificationModel(getLangText('Settings succesfully updated'), 'success', 5000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
+    getFormDataProfile(){
+        return {'email': this.state.currentUser.email};
+    },
+    
+    render() {
+        let content = <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
+        let profile = null;
+
+        if (this.state.currentUser.username) {
+            content = (
+                <Form
+                    url={ApiUrls.users_username}
+                    handleSuccess={this.handleSuccess}>
+                    <Property
+                        name='username'
+                        label={getLangText('Username')}>
+                        <input
+                            type="text"
+                            defaultValue={this.state.currentUser.username}
+                            placeholder={getLangText('Enter your username')}
+                            required/>
+                    </Property>
+                    <Property
+                        name='email'
+                        label={getLangText('Email')}
+                        editable={false}>
+                        <input
+                            type="text"
+                            defaultValue={this.state.currentUser.email}
+                            placeholder={getLangText('Enter your username')}
+                            required/>
+                    </Property>
+                    <hr />
+                </Form>
+            );
+            profile = (
+                <Form
+                    url={ApiUrls.users_profile}
+                    handleSuccess={this.handleSuccess}
+                    getFormData={this.getFormDataProfile}>
+                    <Property
+                        name="hash_locally"
+                        className="ascribe-settings-property-collapsible-toggle"
+                        style={{paddingBottom: 0}}>
+                        <InputCheckbox
+                            defaultChecked={this.state.currentUser.profile.hash_locally}>
+                            <span>
+                                {' ' + getLangText('Enable hash option, e.g. slow connections or to keep piece private')}
+                            </span>
+                        </InputCheckbox>
+                    </Property>
+                    <hr />
+                    {/*<Property
+                        name='language'
+                        label={getLangText('Choose your Language')}
+                        editable={true}>
+                        <select id="select-lang" name="language">
+                            <option value="fr">
+                                Fran&ccedil;ais
+                            </option>
+                            <option value="en"
+                                    selected="selected">
+                                English
+                            </option>
+                        </select>
+                    </Property>*/}
+                </Form>
+            );
+        }
+        return (
+            <CollapsibleParagraph
+                title={getLangText('Account')}
+                show={true}
+                defaultExpanded={true}>
+                {content}
+                {profile}
+                {/*<Form
+                    url={AppConstants.serverUrl + 'api/users/set_language/'}>
+                    <Property
+                        name='language'
+                        label={getLangText('Choose your Language')}
+                        editable={true}>
+                        <select id="select-lang" name="language">
+                            <option value="fr">
+                                Fran&ccedil;ais
+                            </option>
+                            <option value="en"
+                                    selected="selected">
+                                English
+                            </option>
+                        </select>
+                    </Property>
+                    <hr />
+                </Form>*/}
+            </CollapsibleParagraph>
+        );
+    }
+});
+
+export default AccountSettings;

js/components/ascribe_settings/api_settings.js

@@ -0,0 +1,124 @@
+'use strict';
+
+import React from 'react';
+
+import ApplicationStore from '../../stores/application_store';
+import ApplicationActions from '../../actions/application_actions';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+import Form from '../ascribe_forms/form';
+import Property from '../ascribe_forms/property';
+
+import ActionPanel from '../ascribe_panel/action_panel';
+import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
+
+import ApiUrls from '../../constants/api_urls';
+import AppConstants from '../../constants/application_constants';
+
+import { getLangText } from '../../utils/lang_utils';
+
+
+let APISettings = React.createClass({
+    propTypes: {
+        defaultExpanded: React.PropTypes.bool
+    },
+
+    getInitialState() {
+        return ApplicationStore.getState();
+    },
+
+    componentDidMount() {
+        ApplicationStore.listen(this.onChange);
+        ApplicationActions.fetchApplication();
+    },
+
+    componentWillUnmount() {
+        ApplicationStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    handleCreateSuccess() {
+        ApplicationActions.fetchApplication();
+        let notification = new GlobalNotificationModel(getLangText('Application successfully created'), 'success', 5000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
+    handleTokenRefresh(event) {
+        let applicationName = event.target.getAttribute('data-id');
+        ApplicationActions.refreshApplicationToken(applicationName);
+
+        let notification = new GlobalNotificationModel(getLangText('Token refreshed'), 'success', 2000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
+    getApplications(){
+        let content = <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
+
+        if (this.state.applications.length > -1) {
+            content = this.state.applications.map(function(app, i) {
+                return (
+                    <ActionPanel
+                        name={app.name}
+                        key={i}
+                        content={
+                            <div>
+                                <div className='ascribe-panel-title'>
+                                    {app.name}
+                                </div>
+                                <div className="ascribe-panel-subtitle">
+                                    {'Bearer ' + app.bearer_token.token}
+                                </div>
+                            </div>
+                        }
+                        buttons={
+                            <div className="pull-right">
+                                <div className="pull-right">
+                                    <button
+                                        className="pull-right btn btn-default btn-sm"
+                                        onClick={this.handleTokenRefresh}
+                                        data-id={app.name}>
+                                        {getLangText('REFRESH')}
+                                    </button>
+                                </div>
+                            </div>
+                        }/>
+                    );
+            }, this);
+        }
+        return content;
+    },
+    
+    render() {
+        return (
+            <CollapsibleParagraph
+                title={getLangText('API Integration')}
+                show={true}
+                defaultExpanded={this.props.defaultExpanded}>
+                <Form
+                    url={ApiUrls.applications}
+                    handleSuccess={this.handleCreateSuccess}>
+                    <Property
+                        name='name'
+                        label={getLangText('Application Name')}>
+                        <input
+                            type="text"
+                            placeholder={getLangText('Enter the name of your app')}
+                            required/>
+                    </Property>
+                    <hr />
+                </Form>
+                <pre>
+                    Usage: curl &lt;url&gt; -H 'Authorization: Bearer &lt;token&gt;'
+                </pre>
+                {this.getApplications()}
+            </CollapsibleParagraph>
+        );
+    }
+});
+
+export default APISettings;

js/components/ascribe_settings/bitcoin_wallet_settings.js

@@ -0,0 +1,72 @@
+'use strict';
+
+import React from 'react';
+
+import WalletSettingsStore from '../../stores/wallet_settings_store';
+import WalletSettingsActions from '../../actions/wallet_settings_actions';
+
+import Form from '../ascribe_forms/form';
+import Property from '../ascribe_forms/property';
+
+import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
+
+import AppConstants from '../../constants/application_constants';
+
+import { getLangText } from '../../utils/lang_utils';
+
+
+let BitcoinWalletSettings = React.createClass({
+    propTypes: {
+        defaultExpanded: React.PropTypes.bool
+    },
+
+    getInitialState() {
+        return WalletSettingsStore.getState();
+    },
+
+    componentDidMount() {
+        WalletSettingsStore.listen(this.onChange);
+        WalletSettingsActions.fetchWalletSettings();
+    },
+
+    componentWillUnmount() {
+        WalletSettingsStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    render() {
+        let content = <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
+
+        if (this.state.walletSettings.btc_public_key) {
+            content = (
+                <Form >
+                    <Property
+                        name='btc_public_key'
+                        label={getLangText('Bitcoin public key')}
+                        editable={false}>
+                        <pre className="ascribe-pre">{this.state.walletSettings.btc_public_key}</pre>
+                    </Property>
+                    <Property
+                        name='btc_root_address'
+                        label={getLangText('Root Address')}
+                        editable={false}>
+                        <pre className="ascribe-pre">{this.state.walletSettings.btc_root_address}</pre>
+                    </Property>
+                    <hr />
+                </Form>);
+        }
+        return (
+            <CollapsibleParagraph
+                title={getLangText('Crypto Wallet')}
+                show={true}
+                defaultExpanded={this.props.defaultExpanded}>
+                {content}
+            </CollapsibleParagraph>
+        );
+    }
+});
+
+export default BitcoinWalletSettings;

js/components/ascribe_settings/contract_settings.js

@@ -0,0 +1,29 @@
+'use strict';
+
+import React from 'react';
+
+import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
+import CreateContractForm from '../ascribe_forms/form_create_contract';
+
+import { getLangText } from '../../utils/lang_utils';
+
+
+let ContractSettings = React.createClass({
+    propTypes: {
+        defaultExpanded: React.PropTypes.bool
+    },
+
+    render() {
+        return (
+            <CollapsibleParagraph
+                title={getLangText('Contract Settings')}
+                show={true}
+                defaultExpanded={true}>
+                {/* this should be this.props.defaultExpanded */}
+                <CreateContractForm />
+            </CollapsibleParagraph>
+        );
+    }
+});
+
+export default ContractSettings;

js/components/ascribe_settings/settings_container.js

@@ -0,0 +1,36 @@
+'use strict';
+
+import React from 'react';
+import Router from 'react-router';
+
+import AccountSettings from './account_settings';
+import BitcoinWalletSettings from './bitcoin_wallet_settings';
+import ContractSettings from './contract_settings';
+import APISettings from './api_settings';
+
+
+let SettingsContainer = React.createClass({
+    propTypes: {
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element])
+    },
+
+    mixins: [Router.Navigation],
+
+    render() {
+        return (
+            <div className="settings-container">
+                <AccountSettings />
+                {this.props.children}
+                <APISettings />
+                <BitcoinWalletSettings />
+                <ContractSettings />
+                <br />
+                <br />
+            </div>
+        );
+    }
+});
+
+export default SettingsContainer;

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -297,6 +297,9 @@ var ReactS3FineUploader = React.createClass({
                 } else if(res.digitalwork) {
                     file.s3Url = res.digitalwork.url_safe;
                     file.s3UrlSafe = res.digitalwork.url_safe;
+                } else if(res.contractblob) {
+                    file.s3Url = res.contractblob.url_safe;
+                    file.s3UrlSafe = res.contractblob.url_safe;
                 } else {
                     throw new Error(getLangText('Could not find a url to download.'));
                 }
@@ -531,7 +534,7 @@ var ReactS3FineUploader = React.createClass({
 
     handleDeleteFile(fileId) {
         // In some instances (when the file was already uploaded and is just displayed to the user
-        // - for example in the loan contract or additional files dialog)
+        // - for example in the contract or additional files dialog)
         // fineuploader does not register an id on the file (we do, don't be confused by this!).
         // Since you can only delete a file by its id, we have to implement this method ourselves
         //

js/components/ascribe_uploader/react_s3_fine_uploader_utils.js

@@ -1,16 +1,34 @@
 'use strict';
 
+export const formSubmissionValidation = {
     /**
      * Returns a boolean if there has been at least one file uploaded
      * successfully without it being deleted or canceled.
      * @param  {array of files}  files provided by react fine uploader
- * @return {Boolean}       
+     * @return {boolean}       
      */
-export function isReadyForFormSubmission(files) {
+    atLeastOneUploadedFile(files) {
         files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
         if (files.length > 0 && files[0].status === 'upload successful') {
             return true;
         } else {
             return false;
         }
+    },
+
+    /**
+     * File submission for the form is optional, but if the user decides to submit a file
+     * the form is not ready until there are no more files currently uploading.
+     * @param  {array of files} files files provided by react fine uploader
+     * @return {boolean}       [description]
+     */
+    fileOptional(files) {
+        let uploadingFiles = files.filter((file) => file.status === 'submitting');
+
+        if (uploadingFiles.length === 0) {
+            return true;
+        } else {
+            return false;
         }
+    }
+};

js/components/piece_list.js

@@ -61,6 +61,7 @@ let PieceList = React.createClass({
         
         PieceListStore.listen(this.onChange);
         EditionListStore.listen(this.onChange);
+
         let orderBy = this.props.orderBy ? this.props.orderBy : this.state.orderBy;
         if (this.state.pieceList.length === 0 || this.state.page !== page){
             PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
@@ -70,7 +71,7 @@ let PieceList = React.createClass({
     },
 
     componentDidUpdate() {
-        if (this.props.redirectTo && this.state.pieceListCount === 0) {
+        if (this.props.redirectTo && this.state.unfilteredPieceListCount === 0) {
             // FIXME: hack to redirect out of the dispatch cycle
             window.setTimeout(() => this.transitionTo(this.props.redirectTo), 0);
         }

js/components/settings_container.js

@@ -1,408 +0,0 @@
-'use strict';
-
-import React from 'react';
-import Router from 'react-router';
-
-import UserActions from '../actions/user_actions';
-import UserStore from '../stores/user_store';
-
-import WalletSettingsActions from '../actions/wallet_settings_actions';
-import WalletSettingsStore from '../stores/wallet_settings_store';
-
-import ApplicationActions from '../actions/application_actions';
-import ApplicationStore from '../stores/application_store';
-
-import GlobalNotificationModel from '../models/global_notification_model';
-import GlobalNotificationActions from '../actions/global_notification_actions';
-
-import ReactS3FineUploader from './ascribe_uploader/react_s3_fine_uploader';
-
-import CollapsibleParagraph from './ascribe_collapsible/collapsible_paragraph';
-import Form from './ascribe_forms/form';
-import Property from './ascribe_forms/property';
-import InputCheckbox from './ascribe_forms/input_checkbox';
-
-import ActionPanel from './ascribe_panel/action_panel';
-
-import ApiUrls from '../constants/api_urls';
-import AppConstants from '../constants/application_constants';
-
-import { getLangText } from '../utils/lang_utils';
-import { getCookie } from '../utils/fetch_api_utils';
-
-let SettingsContainer = React.createClass({
-    propTypes: {
-        children: React.PropTypes.oneOfType([
-            React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element])
-    },
-
-    mixins: [Router.Navigation],
-
-    render() {
-        return (
-            <div className="settings-container">
-                <AccountSettings />
-                {this.props.children}
-                <APISettings />
-                <BitcoinWalletSettings />
-                <LoanContractSettings />
-                <br />
-                <br />
-            </div>
-        );
-    }
-});
-
-
-let AccountSettings = React.createClass({
-    getInitialState() {
-        return UserStore.getState();
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
-    handleSuccess(){
-        UserActions.fetchCurrentUser();
-        let notification = new GlobalNotificationModel(getLangText('Settings succesfully updated'), 'success', 5000);
-        GlobalNotificationActions.appendGlobalNotification(notification);
-    },
-
-    getFormDataProfile(){
-        return {'email': this.state.currentUser.email};
-    },
-    
-    render() {
-        let content = <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
-        let profile = null;
-
-        if (this.state.currentUser.username) {
-            content = (
-                <Form
-                    url={ApiUrls.users_username}
-                    handleSuccess={this.handleSuccess}>
-                    <Property
-                        name='username'
-                        label={getLangText('Username')}>
-                        <input
-                            type="text"
-                            defaultValue={this.state.currentUser.username}
-                            placeholder={getLangText('Enter your username')}
-                            required/>
-                    </Property>
-                    <Property
-                        name='email'
-                        label={getLangText('Email')}
-                        editable={false}>
-                        <input
-                            type="text"
-                            defaultValue={this.state.currentUser.email}
-                            placeholder={getLangText('Enter your username')}
-                            required/>
-                    </Property>
-                    <hr />
-                </Form>
-            );
-            profile = (
-                <Form
-                    url={ApiUrls.users_profile}
-                    handleSuccess={this.handleSuccess}
-                    getFormData={this.getFormDataProfile}>
-                    <Property
-                        name="hash_locally"
-                        className="ascribe-settings-property-collapsible-toggle"
-                        style={{paddingBottom: 0}}>
-                        <InputCheckbox
-                            defaultChecked={this.state.currentUser.profile.hash_locally}>
-                            <span>
-                                {' ' + getLangText('Enable hash option, e.g. slow connections or to keep piece private')}
-                            </span>
-                        </InputCheckbox>
-                    </Property>
-                    <hr />
-                    {/*<Property
-                        name='language'
-                        label={getLangText('Choose your Language')}
-                        editable={true}>
-                        <select id="select-lang" name="language">
-                            <option value="fr">
-                                Fran&ccedil;ais
-                            </option>
-                            <option value="en"
-                                    selected="selected">
-                                English
-                            </option>
-                        </select>
-                    </Property>*/}
-                </Form>
-            );
-        }
-        return (
-            <CollapsibleParagraph
-                title={getLangText('Account')}
-                show={true}
-                defaultExpanded={true}>
-                {content}
-                {profile}
-                {/*<Form
-                    url={AppConstants.serverUrl + 'api/users/set_language/'}>
-                    <Property
-                        name='language'
-                        label={getLangText('Choose your Language')}
-                        editable={true}>
-                        <select id="select-lang" name="language">
-                            <option value="fr">
-                                Fran&ccedil;ais
-                            </option>
-                            <option value="en"
-                                    selected="selected">
-                                English
-                            </option>
-                        </select>
-                    </Property>
-                    <hr />
-                </Form>*/}
-            </CollapsibleParagraph>
-        );
-    }
-});
-
-
-
-let BitcoinWalletSettings = React.createClass({
-
-    propTypes: {
-        defaultExpanded: React.PropTypes.bool
-    },
-
-    getInitialState() {
-        return WalletSettingsStore.getState();
-    },
-
-    componentDidMount() {
-        WalletSettingsStore.listen(this.onChange);
-        WalletSettingsActions.fetchWalletSettings();
-    },
-
-    componentWillUnmount() {
-        WalletSettingsStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
-    render() {
-        let content = <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
-        if (this.state.walletSettings.btc_public_key) {
-            content = (
-                <Form >
-                    <Property
-                        name='btc_public_key'
-                        label={getLangText('Bitcoin public key')}
-                        editable={false}>
-                        <pre className="ascribe-pre">{this.state.walletSettings.btc_public_key}</pre>
-                    </Property>
-                    <Property
-                        name='btc_root_address'
-                        label={getLangText('Root Address')}
-                        editable={false}>
-                        <pre className="ascribe-pre">{this.state.walletSettings.btc_root_address}</pre>
-                    </Property>
-                    <hr />
-                </Form>);
-        }
-        return (
-            <CollapsibleParagraph
-                title={getLangText('Crypto Wallet')}
-                show={true}
-                defaultExpanded={this.props.defaultExpanded}>
-                {content}
-            </CollapsibleParagraph>
-        );
-    }
-});
-
-let LoanContractSettings = React.createClass({
-    propTypes: {
-        defaultExpanded: React.PropTypes.bool
-    },
-
-    render() {
-        return (
-            <CollapsibleParagraph
-                title="Loan Contract Settings"
-                show={true}
-                defaultExpanded={this.props.defaultExpanded}>
-                    <FileUploader />
-            </CollapsibleParagraph>
-        );
-    }
-});
-
-let FileUploader = React.createClass({
-    propTypes: {
-    },
-
-    render() {
-        return (
-            <Form>
-                <Property
-                    label="Contract file">
-                    <ReactS3FineUploader
-                        keyRoutine={{
-                            url: AppConstants.serverUrl + 's3/key/',
-                            fileClass: 'contract'
-                        }}
-                        createBlobRoutine={{
-                            url: ApiUrls.ownership_loans_contract
-                        }}
-                        validation={{
-                            itemLimit: 100000,
-                            sizeLimit: '50000000'
-                        }}
-                        session={{
-                            endpoint: ApiUrls.ownership_loans_contract,
-                            customHeaders: {
-                                'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                            },
-                            cors: {
-                                expected: true,
-                                sendCredentials: true
-                            }
-                        }}
-                        signature={{
-                            endpoint: AppConstants.serverUrl + 's3/signature/',
-                            customHeaders: {
-                               'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                            }
-                        }}
-                        deleteFile={{
-                            enabled: true,
-                            method: 'DELETE',
-                            endpoint: AppConstants.serverUrl + 's3/delete',
-                            customHeaders: {
-                               'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                            }
-                        }}
-                        areAssetsDownloadable={true}
-                        areAssetsEditable={true}/>
-                </Property>
-                <hr />
-            </Form>
-        );
-    }
-});
-
-let APISettings = React.createClass({
-    propTypes: {
-        defaultExpanded: React.PropTypes.bool
-    },
-
-    getInitialState() {
-        return ApplicationStore.getState();
-    },
-
-    componentDidMount() {
-        ApplicationStore.listen(this.onChange);
-        ApplicationActions.fetchApplication();
-    },
-
-    componentWillUnmount() {
-        ApplicationStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
-    handleCreateSuccess() {
-        ApplicationActions.fetchApplication();
-        let notification = new GlobalNotificationModel(getLangText('Application successfully created'), 'success', 5000);
-        GlobalNotificationActions.appendGlobalNotification(notification);
-    },
-
-    handleTokenRefresh(event) {
-        let applicationName = event.target.getAttribute('data-id');
-        ApplicationActions.refreshApplicationToken(applicationName);
-
-        let notification = new GlobalNotificationModel(getLangText('Token refreshed'), 'success', 2000);
-        GlobalNotificationActions.appendGlobalNotification(notification);
-    },
-
-    getApplications(){
-        let content = <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
-        if (this.state.applications.length > -1) {
-            content = this.state.applications.map(function(app, i) {
-                return (
-                    <ActionPanel
-                        name={app.name}
-                        key={i}
-                        content={
-                            <div>
-                                <div className='ascribe-panel-title'>
-                                    {app.name}
-                                </div>
-                                <div className="ascribe-panel-subtitle">
-                                    {'Bearer ' + app.bearer_token.token}
-                                </div>
-                            </div>
-                        }
-                        buttons={
-                            <div className="pull-right">
-                                <div className="pull-right">
-                                    <button
-                                        className="pull-right btn btn-default btn-sm"
-                                        onClick={this.handleTokenRefresh}
-                                        data-id={app.name}>
-                                        {getLangText('REFRESH')}
-                                    </button>
-                                </div>
-                            </div>
-                        }/>
-                    );
-            }, this);
-        }
-        return content;
-    },
-    
-    render() {
-        return (
-            <CollapsibleParagraph
-                title={getLangText('API Integration')}
-                show={true}
-                defaultExpanded={this.props.defaultExpanded}>
-                <Form
-                    url={ApiUrls.applications}
-                    handleSuccess={this.handleCreateSuccess}>
-                    <Property
-                        name='name'
-                        label={getLangText('Application Name')}>
-                        <input
-                            type="text"
-                            placeholder={getLangText('Enter the name of your app')}
-                            required/>
-                    </Property>
-                    <hr />
-                </Form>
-                <pre>
-                    Usage: curl &lt;url&gt; -H 'Authorization: Bearer &lt;token&gt;'
-                </pre>
-                {this.getApplications()}
-            </CollapsibleParagraph>
-        );
-    }
-});
-
-export default SettingsContainer;

js/components/whitelabel/prize/components/prize_settings_container.js

@@ -9,7 +9,7 @@ import PrizeStore from '../stores/prize_store';
 import PrizeJuryActions from '../actions/prize_jury_actions';
 import PrizeJuryStore from '../stores/prize_jury_store';
 
-import SettingsContainer from '../../../settings_container';
+import SettingsContainer from '../../../ascribe_settings/settings_container';
 import CollapsibleParagraph from '../../../ascribe_collapsible/collapsible_paragraph';
 
 import Form from '../../../ascribe_forms/form';
@@ -190,7 +190,7 @@ let PrizeJurySettings = React.createClass({
                                 {getLangText('RESEND')}
                             </button>
                             <button
-                                className="btn btn-default btn-sm ascribe-btn-gray margin-left-2px"
+                                className="btn btn-warning btn-sm margin-left-2px"
                                 onClick={this.handleRevoke}
                                 data-id={member.email}>
                                 {getLangText('REVOKE')}
@@ -218,7 +218,7 @@ let PrizeJurySettings = React.createClass({
                     }
                     buttons={
                         <button
-                            className="btn btn-default btn-sm ascribe-btn-gray"
+                            className="btn btn-warning btn-sm"
                             onClick={this.handleRevoke}
                             data-id={member.email}>
                             {getLangText('REVOKE')}
@@ -265,7 +265,7 @@ let PrizeJurySettings = React.createClass({
 
         if (this.state.members.length > -1) {
             content = (
-                <div style={{padding: '1em'}}>
+                <div>
                     <CollapsibleParagraph
                         title={getLangText('Active Jury Members')}
                         show={true}

js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js

@@ -15,6 +15,8 @@ import AppConstants from '../../../../../../constants/application_constants';
 import requests from '../../../../../../utils/requests';
 
 import { getLangText } from '../../../../../../utils/lang_utils';
+import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
+
 
 let CylandAdditionalDataForm = React.createClass({
     propTypes: {
@@ -60,16 +62,6 @@ let CylandAdditionalDataForm = React.createClass({
         });
     },
 
-    isReadyForFormSubmission(files) {
-        let uploadingFiles = files.filter((file) => file.status === 'submitting');
-
-        if (uploadingFiles.length === 0) {
-            return true;
-        } else {
-            return false;
-        }
-    },
-
     render() {
         if(this.props.piece && this.props.piece.id) {
             return (
@@ -122,7 +114,7 @@ let CylandAdditionalDataForm = React.createClass({
                         uploadStarted={this.uploadStarted}
                         submitKey={this.submitKey}
                         setIsUploadReady={this.setIsUploadReady}
-                        isReadyForFormSubmission={this.isReadyForFormSubmission}
+                        isReadyForFormSubmission={formSubmissionValidation.fileOptional}
                         editable={!this.props.disabled}
                         pieceId={this.props.piece.id}
                         otherData={this.props.piece.other_data}

js/components/whitelabel/wallet/components/ikonotv/ikonotv_request_loan.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import ContractForm from '../../../../../components/ascribe_forms/contract_form';
+import ContractForm from '../../../../../components/ascribe_forms/form_contract';
 
 
 let IkonotvRequestLoan = React.createClass({

js/components/whitelabel/wallet/wallet_routes.js

@@ -11,7 +11,7 @@ import PasswordResetContainer from '../../../components/password_reset_container
 import PieceList from '../../../components/piece_list';
 import PieceContainer from '../../../components/ascribe_detail/piece_container';
 import EditionContainer from '../../../components/ascribe_detail/edition_container';
-import SettingsContainer from '../../../components/settings_container';
+import SettingsContainer from '../../../components/ascribe_settings/settings_container';
 import RegisterPiece from '../../../components/register_piece';
 
 import CylandLanding from './components/cyland/cyland_landing';
@@ -71,7 +71,7 @@ let ROUTES = {
             <Route name="logout" path="logout" handler={LogoutContainer} />
             <Route name="signup" path="signup" handler={SignupContainer} />
             <Route name="password_reset" path="password_reset" handler={PasswordResetContainer} />
-            <Route name="request_loan" path="request_loan" handler={IkonotvRequestLoan}/>
+            <Route name="request_loan" path="request_loan" handler={IkonotvRequestLoan} headerTitle="SEND NEW CONTRACT" />
             <Route name="register_piece" path="register_piece" handler={RegisterPiece} headerTitle="+ NEW WORK"/>
             <Route name="pieces" path="collection" handler={IkonotvPieceList} headerTitle="COLLECTION"/>
             <Route name="piece" path="pieces/:pieceId" handler={IkonotvPieceContainer} />

js/constants/api_urls.js

@@ -13,6 +13,7 @@ let ApiUrls = {
     'application_token_refresh': AppConstants.apiEndpoint + 'applications/refresh_token/',
     'blob_digitalworks': AppConstants.apiEndpoint + 'blob/digitalworks/',
     'blob_otherdatas': AppConstants.apiEndpoint + 'blob/otherdatas/',
+    'blob_contracts': AppConstants.apiEndpoint + 'blob/contracts/',
     'coa': AppConstants.apiEndpoint + 'coa/${id}/',
     'coa_create': AppConstants.apiEndpoint + 'coa/',
     'coa_verify': AppConstants.apiEndpoint + 'coa/verify_coa/',
@@ -38,7 +39,6 @@ let ApiUrls = {
     'ownership_loans_editions': AppConstants.apiEndpoint + 'ownership/loans/editions/',
     'ownership_loans_confirm': AppConstants.apiEndpoint + 'ownership/loans/editions/confirm/',
     'ownership_loans_deny': AppConstants.apiEndpoint + 'ownership/loans/editions/deny/',
-    'ownership_loans_contract': AppConstants.apiEndpoint + 'ownership/loans/editions/contract/',
     'ownership_shares_editions': AppConstants.apiEndpoint + 'ownership/shares/editions/',
     'ownership_shares_pieces': AppConstants.apiEndpoint + 'ownership/shares/pieces/',
     'ownership_transfers': AppConstants.apiEndpoint + 'ownership/transfers/',
@@ -46,6 +46,7 @@ let ApiUrls = {
     'ownership_unconsigns': AppConstants.apiEndpoint + 'ownership/unconsigns/',
     'ownership_unconsigns_deny': AppConstants.apiEndpoint + 'ownership/unconsigns/deny/',
     'ownership_unconsigns_request': AppConstants.apiEndpoint + 'ownership/unconsigns/request/',
+    'ownership_contract': AppConstants.apiEndpoint + 'ownership/contracts/',
     'piece': AppConstants.apiEndpoint + 'pieces/${piece_id}/',
     'piece_extradata': AppConstants.apiEndpoint + 'pieces/${piece_id}/extradata/',
     'piece_first_edition_id': AppConstants.apiEndpoint + 'pieces/${piece_id}/edition_index/',

js/fetchers/ownership_fetcher.js

@@ -6,17 +6,17 @@ import ApiUrls from '../constants/api_urls';
 
 let OwnershipFetcher = {
     /**
-     * Fetch the default, public loan contract of a user from the API.
+     * Fetch the default, public contract of a user from the API.
      */
-    fetchLoanContract(email) {
+    fetchContract(email) {
-        return requests.get(ApiUrls.ownership_loans_contract + '?loanee=' + email);
+        return requests.get(ApiUrls.blob_contracts + '?loanee=' + email);
     },
 
     /**
      * Fetch the contracts of the logged-in user from the API.
      */
-    fetchLoanContractList(){
+    fetchContractList(){
-        return requests.get(ApiUrls.ownership_loans_contract);
+        return requests.get(ApiUrls.ownership_contract);
     },
 
     fetchLoanPieceRequestList(){

js/routes.js

@@ -17,7 +17,7 @@ import LogoutContainer from './components/logout_container';
 import SignupContainer from './components/signup_container';
 import PasswordResetContainer from './components/password_reset_container';
 
-import SettingsContainer from './components/settings_container';
+import SettingsContainer from './components/ascribe_settings/settings_container';
 import CoaVerifyContainer from './components/coa_verify_container';
 
 import RegisterPiece from './components/register_piece';

js/stores/contract_list_store.js

@@ -0,0 +1,22 @@
+'use strict';
+
+import alt from '../alt';
+import ContractListActions from '../actions/contract_list_actions';
+
+
+class ContractListStore {
+    constructor() {
+        this.contractList = [];
+        this.bindActions(ContractListActions);
+    }
+
+    onUpdateContractList(contractList) {
+        this.contractList = contractList;
+    }
+
+    onFlushContractList() {
+        this.contractList = [];
+    }
+}
+
+export default alt.createStore(ContractListStore, 'ContractListStore');

js/stores/contract_store.js

@@ -1,28 +1,28 @@
 'use strict';
 
 import alt from '../alt';
-import LoanContractActions from '../actions/loan_contract_actions';
+import ContractActions from '../actions/contract_actions';
 
 
-class LoanContractStore {
+class ContractStore {
     constructor() {
         this.contractKey = null;
         this.contractUrl = null;
         this.contractEmail = null;
-        this.bindActions(LoanContractActions);
+        this.bindActions(ContractActions);
     }
 
-    onUpdateLoanContract({contractKey, contractUrl, contractEmail}) {
+    onUpdateContract({contractKey, contractUrl, contractEmail}) {
         this.contractKey = contractKey;
         this.contractUrl = contractUrl;
         this.contractEmail = contractEmail;
     }
 
-    onFlushLoanContract() {
+    onFlushContract() {
         this.contractKey = null;
         this.contractUrl = null;
         this.contractEmail = null;
     }
 }
 
-export default alt.createStore(LoanContractStore, 'LoanContractStore');
+export default alt.createStore(ContractStore, 'ContractStore');

js/stores/loan_contract_list_store.js

@@ -1,22 +0,0 @@
-'use strict';
-
-import alt from '../alt';
-import LoanContractListActions from '../actions/loan_contract_list_actions';
-
-
-class LoanContractListStore {
-    constructor() {
-        this.contractList = [];
-        this.bindActions(LoanContractListActions);
-    }
-
-    onUpdateLoanContractList(contractList) {
-        this.contractList = contractList;
-    }
-
-    onFlushLoanContractList() {
-        this.contractList = [];
-    }
-}
-
-export default alt.createStore(LoanContractListStore, 'LoanContractListStore');

js/stores/piece_list_store.js

@@ -21,6 +21,7 @@ class PieceListStore {
         this.pieceList = [];
         // -1 specifies that the store is currently loading
         this.pieceListCount = -1;
+        this.unfilteredPieceListCount = -1;
         this.page = 1;
         this.pageSize = 10;
         this.search = '';
@@ -31,13 +32,14 @@ class PieceListStore {
         this.bindActions(PieceListActions);
     }
     
-    onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount, filterBy }) {
+    onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount, unfilteredPieceListCount, filterBy }) {
         this.page = page;
         this.pageSize = pageSize;
         this.search = search;
         this.orderAsc = orderAsc;
         this.orderBy = orderBy;
         this.pieceListCount = pieceListCount;
+        this.unfilteredPieceListCount = unfilteredPieceListCount;
         this.filterBy = filterBy;
 
         /**

package.json

@@ -69,6 +69,7 @@
     "lodash": "^3.9.3",
     "moment": "^2.10.6",
     "object-assign": "^2.0.0",
+    "opn": "^3.0.2",
     "q": "^1.4.1",
     "raven-js": "^1.1.19",
     "react": "^0.13.2",

sass/ascribe_accordion_list.scss

@@ -1,5 +1,4 @@
 $ascribe-accordion-list-item-height: 8em;
-$ascribe-accordion-list-font: 'Source Sans Pro';
 
 .ascribe-accordion-list {
     padding-left: 15px;
@@ -14,60 +13,69 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
     padding-left: 0;
     padding-right: 0;
     margin-top: 1.5em;
+    overflow: hidden;
+
+    border-radius: 1px;
+    border-left: .1em solid rgba(0, 0, 0, .2);
+    border-right: .1em solid rgba(0, 0, 0, .2);
+    border-top: .1em solid rgba(0, 0, 0, .2);
+    border-bottom: .1em solid rgba(0, 0, 0, .2);
+
     &::first-child {
         margin-top: 0;
     }
 
-    overflow:hidden;
-
-    border-left: 0.1em solid rgba(0,0,0,.2);
-    border-right: 0.1em solid rgba(0,0,0,.2);
-    border-top: 0.1em solid rgba(0,0,0,.2);
-    border-radius: 1px;
-    border-bottom: 0.1em solid rgba(0,0,0,.2);
     .wrapper {
-        &:hover{
-            background-color: rgba(2, 182, 163, 0.05);
-        }
-        width:100%;
         height: 100%;
+        width: 100%;
+
+        &:hover {
+            background-color: rgba(2, 182, 163, .05);
+        }
+
         // ToDo: Include media queries for thumbnail
         .thumbnail-wrapper {
-            width: 110px;
+            cursor: pointer;
             height: 110px;
             padding: 0;
-            cursor: pointer;
             text-align: center;
+            width: 110px;
+
             img {
-                max-width: 100%;
                 max-height: 100%;
+                max-width: 100%;
             }
+
             &::before {
                 content: ' ';
                 display: inline-block;
-                    vertical-align: middle; /* vertical alignment of the inline element */
                 height: 100%;
+                vertical-align: middle; // vertical alignment of the inline element
             }
         }
+
         h1 {
-            margin: .1em 0 .1em 0;
+            cursor: pointer;
             font-size: 2.2em;
-            cursor: pointer;
+            margin: .1em 0;
-            white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            white-space: nowrap;
         }
+
         h3 {
-            font-size: 1.3em;
-            margin: .2em 0 .3em 0;
             cursor: pointer;
-            white-space: nowrap;
+            font-size: 1.3em;
+            margin: .2em 0 .3em;
             overflow: hidden;
             text-overflow: ellipsis;
+            white-space: nowrap;
         }
+
         a:not(.btn) {
             color: #666;
         }
+
     }
 }
 
@@ -85,45 +93,46 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
 }
 
 .ascribe-accordion-list-item-table {
-    font-size: .9em;
-    text-align: center;
     background-color: white;
-
+    border-bottom: .1em solid rgba(0, 0, 0, .15);
-    //border-bottom-left-radius: 1px;
+    border-left: .1em solid rgba(0, 0, 0, .2);
-    //border-bottom-right-radius: 1px;
+    border-right: .1em solid rgba(0, 0, 0, .2);
-    border-bottom: 0.1em solid rgba(0,0,0,.15);
+    font-size: .9em;
-    border-left: 0.1em solid rgba(0,0,0,.2);
-    border-right: 0.1em solid rgba(0,0,0,.2);
     padding: 0;
+    text-align: center;
+
     thead:first-child {
+        border-bottom: 1px solid rgba(0, 0, 0, .05);
+        border-left: 3px solid rgba(0, 0, 0, 0);
+
         tr:first-child {
             border: none !important;
             th {
-                padding-left: 10px;
                 border: none !important;
+                padding-left: 10px;
             }
         }
-        border-left: 3px solid rgba(0,0,0,0);
-        //border-top: 1px solid rgba(0,0,0,.1);
-        border-bottom: 1px solid rgba(0,0,0,.05);
     }
+
     tbody {
         tr {
+            border-bottom: 1px solid rgba(0, 0, 0, .03);
+            border-left: 3px solid rgba(0, 0, 0, 0);
             padding: 1em;
+
             &:hover {
                 background-color: rgba(2, 182, 163, 0.05);
                 border-left: 3px solid rgba(2, 182, 163, 0.4);
             }
-            border-left: 3px solid rgba(0,0,0,0);
+
-            border-bottom:  1px solid rgba(0,0,0,.03);
             td {
                 border: none !important;
                 a {
-                    color: #444
+                    color: #444;
+                }
+            }
         }
 
-            }
-        }
         tr {
             td:first-child {
                 margin-left: 10px;
@@ -132,11 +141,11 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
     }
 }
 
-span.ascribe-accordion-list-table-toggle {
+.ascribe-accordion-list-table-toggle {
-    -webkit-user-select: none;
-    -moz-user-select: none;
     -khtml-user-select: none;
+    -moz-user-select: none;
     -ms-user-select: none;
+    -webkit-user-select: none;
 
     &:hover {
         color: $ascribe-color-green;
@@ -146,34 +155,37 @@ span.ascribe-accordion-list-table-toggle {
 
 .ascribe-accordion-list-table-list {
     margin-bottom: .5em;
-    th, td {
+
+    th,
+    td {
         font-size: .85em;
         text-align: center;
     }
 }
 
 .request-action-badge {
-    position: absolute;
-    top: 0px;
-    right: 0px;
     color: $ascribe-color-green;
     font-size: 1.2em;
-    padding: 0.8em;
+    padding: .8em;
+    position: absolute;
+    right: 0;
+    top: 0;
 }
 
 .ascribe-accordion-list-item-edition-widget {
     cursor: pointer;
 
-    -webkit-user-select: none;
-    -moz-user-select: none;
     -khtml-user-select: none;
+    -moz-user-select: none;
     -ms-user-select: none;
+    -webkit-user-select: none;
 
     &:hover {
         color: $ascribe-color-green;
     }
+
     .glyphicon {
+        font-size: .8em;
         top: 1px !important;
-        font-size: 0.8em;
     }
 }

sass/ascribe_button.scss

@@ -1,9 +0,0 @@
-.ascribe-btn-gray {
-    border-color: #CCCCCC;
-    background-color: #CCCCCC;
-
-    &:hover{
-        border-color: #AAAAAA;
-        background-color: #AAAAAA;
-    }
-}

sass/ascribe_collapsible.scss

@@ -0,0 +1,33 @@
+.ascribe-collapsible-wrapper {
+    vertical-align: bottom;
+    width: 100%;
+
+    > div:first-child {
+        background-color: rgba(0, 0, 0, 0);
+        cursor: pointer;
+        margin-top: 20px;
+        padding: 0 10px 10px 0;
+        width: 100%;
+    }
+
+    > div > span {
+        font-size: 1.2em;
+        margin-right: .5em;
+    }
+
+    > div > span:nth-child(2) {
+        font-size: .9em;
+    }
+}
+
+.ascribe-collapsible-content {
+    background: none;
+    border: 0;
+    width: 100%;
+    
+    /* Shrink the size of the headline for a nested element */
+    .ascribe-collapsible-wrapper > div:first-child {
+        padding-left: 1em;
+        font-size: 90%;
+    }
+}

sass/ascribe_edition.scss

@@ -3,46 +3,20 @@
     margin-bottom: 1em;
 }
 
-.ascribe-edition-collapsible-wrapper {
-    vertical-align: bottom;
-    width:100%;
-}
-
-.ascribe-edition-collapsible-wrapper > div:first-child {
-    width: 100%;
-    cursor: pointer;
-    background-color: rgba(0,0,0,0);
-    padding: 0 10px 10px 0;
-    margin-top: 20px;
-}
-.ascribe-edition-collapsible-wrapper > div > span {
-    font-size: 1.2em;
-    margin-right: .5em;
-}
-.ascribe-edition-collapsible-wrapper > div > span:nth-child(2) {
-    font-size: 0.9em;
-}
-
-.ascribe-edition-collapsible-content {
-    width:100%;
-    background: none;
-    border: none;
-}
-
 .coa-file-wrapper {
     display: table;
     height: 200px;
-    overflow: hidden;
     margin: 0 auto;
-    width: 100%;
+    overflow: hidden;
     padding: 1em;
+    width: 100%;
 }
 
 .coa-file {
+    background-color: #F8F8F8;
+    border: 1px solid #CCC;
     display: table-cell;
     vertical-align: middle;
-    border: 1px solid #CCC;
-    background-color: #F8F8F8;
 }
 
 .ascribe-button-list {

sass/ascribe_footer.scss

@@ -1,19 +1,34 @@
 
 .ascribe-footer {
     text-align: center;
-}
 
-.ascribe-footer hr {
+    hr {
-    border: 0;
-    border-top: 1px solid #eee;
         background-color: rgba(0, 0, 0, 0);
+        border-top: 1px solid #eee;
+        border: 0;
         margin-bottom: 0 !important;
     }
 
-.ascribe-footer .btn-ascribe-landing {
+    .btn-ascribe-landing {
         margin-top: 2em;
     }
 
+    .social-icons-wrapper {
+        margin-top: 1em;
+
+        a {
+            color: #424242;
+            font-size: 1.3em;
+            margin-left: 1em;
+        }
+
+        a:hover {
+            color: #48DACB;
+        }
+    }
+
+}
+
 .ascribe-footer-statement {
     font-family: 'mercury_light';
     font-size: 1.6em !important;
@@ -21,7 +36,8 @@
     margin-top: 0;
 }
 
-.ascribe-footer-statement a, .ascribe-footer-sub-statement a {
+.ascribe-footer-statement a,
+.ascribe-footer-sub-statement a {
     color: #424242;
 }
 
@@ -30,23 +46,7 @@
     margin-bottom: 2.5em;
 }
 
-.ascribe-footer-statement a, .ascribe-footer-sub-statement a {
+.ascribe-footer-statement a:hover,
-    color: #424242;
+.ascribe-footer-sub-statement a:hover {
-}
+    color: #48dacb;
-.ascribe-footer-statement a:hover, .ascribe-footer-sub-statement a:hover {
-    color: #48DACB;
-}
-
-.ascribe-footer .social-icons-wrapper {
-    margin-top: 1em;
-}
-
-.ascribe-footer .social-icons-wrapper a {
-    color: #424242;
-    margin-left: 1em;
-    font-size: 1.3em;
-}
-
-.ascribe-footer .social-icons-wrapper a:hover {
-    color: #48DACB;
 }

sass/ascribe_form.scss

@@ -1,24 +1,25 @@
 .ascribe-form-bordered {
-    border: 1px solid #F5F5F5;
+    border: 1px solid #f5f5f5;
 }
 
 .ascribe-form-header {
-    padding-bottom: 0;
-    margin-bottom: 0;
     background-color: white;
-}
-
-.ascribe-form-header > h3 {
-    padding: .75em 0 .75em 1em;
-    margin-top: 0;
     margin-bottom: 0;
+    padding-bottom: 0;
+
+    > h3 {
         color: #616161;
+        margin-bottom: 0;
+        margin-top: 0;
+        padding: .75em 0 .75em 1em;
+    }
 }
 
 .ascribe-form-wrapper {
-    width: 80%;
     margin: 0 auto;
     max-width: 600px;
+    width: 80%;
+
     @media (max-width: 550px) {
         width: 100%;
     }

sass/ascribe_global_notification.scss

@@ -1,14 +1,12 @@
 .ascribe-global-notification {
-    position: fixed;
-    
     background-color: #212121;
     color: white;
-    width: 100%;
+    display: table;
     height: 3.5em;
     left: 0;
-    display:table;
+    position: fixed;
-
+    transition: .2s bottom cubic-bezier(.77, 0, .175, 1);
-    transition: .2s bottom cubic-bezier(0.77, 0, 0.175, 1);
+    width: 100%;
 }
 
 .ascribe-global-notification-off {
@@ -19,34 +17,29 @@
     bottom: 0;
 }
 
-.ascribe-global-notification > div, .ascribe-global-notification-bubble > div {
+.ascribe-global-notification > div,
-    display:table-cell;
-    vertical-align: middle;
-    font-size: 1.25em;
-    font-family: 'Source Sans Pro';
-    text-align: right;
-    padding-right: 3em;
-}
-
 .ascribe-global-notification-bubble > div {
-    padding: .75em 1.5em .75em 1.5em;
+    display: table-cell;
+    font-size: 1.25em;
+    padding-right: 3em;
+    text-align: right;
+    vertical-align: middle;
 }
 
 .ascribe-global-notification-bubble {
-    position: fixed;
-    bottom: 3em;
-    right: -50em;
-
-    display:table;
-
-    height: 3.5em;
-
     background-color: #212121;
     border-radius: 2px;
-
+    bottom: 3em;
     color: white;
-
+    display: table;
+    height: 3.5em;
+    position: fixed;
+    right: -50em;
     transition: 1s right ease;
+
+    > div {
+        padding: .75em 1.5em;
+    }
 }
 
 .ascribe-global-notification-bubble-off {

sass/ascribe_login.scss

@@ -2,26 +2,28 @@ $break-small: 764px;
 
 
 .ascribe-btn-login {
-  padding: 0.5em;
-  font-weight: 500;
-  text-align: center;
     background-color: rgba(2, 182, 163, 1);
+    border: none;
+    border-radius: 0;
     color: white;
     font-size: 1.2em;
-  border-radius: 0;
+    font-weight: 500;
+    padding: .5em;
+    text-align: center;
     width: 100%;
-  border:none;
     //margin-left: 1.2em;
 
     &:hover {
+        background-color: rgba(2, 182, 163, .8);
+        border: 0;
         color: white;
-    background-color: rgba(2, 182, 163, 0.8);
-    border: none;
     }
-  &:active, &:focus {
+
+    &:active,
+    &:focus {
+        background-color: rgba(2, 182, 163, .6);
+        border: 0;
         color: white;
-    background-color: rgba(2, 182, 163, 0.6);
-    border: none;
     }
 
     &[disabled] {
@@ -30,48 +32,53 @@ $break-small: 764px;
 }
 
 .ascribe-btn-login-spinner {
-  background-color: rgba(2, 182, 163, 0.4);
+    background-color: rgba(2, 182, 163, .4);
-  padding: 0.4em;
+    padding: .4em;
+
     img {
         height: 1.6em;
     }
+
     &:hover {
-    background-color: rgba(2, 182, 163, 0.4);
+        background-color: rgba(2, 182, 163, .4);
     }
-  &:active, &:focus {
+
-    background-color: rgba(2, 182, 163, 0.4);
+    &:active,
+    &:focus {
+        background-color: rgba(2, 182, 163, .4);
     }
 }
 
 
 .ascribe-login-wrapper {
-  width: 80%;
     margin: 0 auto;
     max-width: 600px;
+    width: 80%;
+
     @media screen and (max-width: $break-small) {
         width: 100%;
     }
 }
 
 .ascribe-login-text {
-  font-size: 0.8em;
+    color: rgba(0, 0, 0, .6);
-  padding: 0 0 1em 0;
+    font-size: .8em;
-  margin-left: 0.4em;
+    margin-left: .4em;
     margin-top: 1.5em;
-  color: rgba(0, 0, 0, 0.6);
+    padding: 0 0 1em;
 }
 
 .ascribe-login-header {
     font-size: 2em;
-  margin-left: 0.8em;
+    margin-left: .8em;
 }
 
 .ascribe-form {
     hr {
-    color: rgba(0, 0, 0, 0.05);
+        background-color: rgba(0, 0, 0, .05);
-    border: none;
+        border: 0;
+        color: rgba(0, 0, 0, .05);
         height: 1px;
-    background-color: rgba(0, 0, 0, 0.05);
         margin-top: 0;
     }
 }
@@ -79,7 +86,7 @@ $break-small: 764px;
 %vertical-align {
     position: relative;
     top: 50%;
-  -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
 }

sass/ascribe_media_player.scss

@@ -3,36 +3,36 @@
 
     video,
     img {
-        max-width: 100%;
-        max-height: 640px;
-        width: auto;
-        height: auto;
         display: block;
+        height: auto;
         margin: 0 auto;
+        max-height: 640px;
+        max-width: 100%;
+        width: auto;
     }
 
     .media-other {
-        font-size: 500%;
         color: #cccccc;
+        font-size: 500%;
     }
 
     .audiojs {
-        margin: 50px auto;
         background-image: none;
-    }
+        margin: 50px auto;
-
+        * {
-    .audiojs * {
             box-sizing: content-box;
         }
 
-    .audiojs .loaded {
+        .loaded {
             background-color: $ascribe-color-green;
             background-image: none;
         }
-    .audiojs .progress {
+
-        background-color: rgba(255,255,255,0.8);
+        .progress {
+            background-color: rgba(255, 255, 255, .8);
             background-image: none;
         }
+    }
 
     .video-js,
     .vjs-poster {
@@ -44,12 +44,13 @@
     }
 
     .vjs-fullscreen {
-        padding-top: 0px;
+        padding-top: 0;
-    }
 
-    .vjs-fullscreen video {
+        video {
             max-height: 100%;
         }
+    }
+
 
     .vjs-default-skin .vjs-play-progress,
     .vjs-default-skin .vjs-volume-level {
@@ -57,41 +58,35 @@
     }
 
     .vjs-default-skin .vjs-big-play-button {
-        border-radius: 6px;
+        background-color: rgba(0, 0, 0, .8);
-        -o-border-radius: 6px;
+        border: 0;
         -moz-border-radius: 6px;
+        -o-border-radius: 6px;
         -webkit-border-radius: 6px;
-
+        border-radius: 6px;
-        box-shadow: none;
-        -o-box-shadow: none;
         -moz-box-shadow: none;
+        -o-box-shadow: none;
         -webkit-box-shadow: none;
-
+        box-shadow: none;
-        width: 100px;
         height: 60px;
-        top: 50%;
         left: 50%;
         margin: -30px -50px;
-
+        top: 50%;
-        border: none;
+        width: 100px;
-
-        background-color: rgba(0,0,0,.8);
     }
 
     .vjs-default-skin:hover .vjs-big-play-button,
     .vjs-default-skin .vjs-big-play-button:focus {
-        border-color: #fff;
         background-color: rgba(0, 0, 0, .9);
-
+        border-color: #fff;
-        box-shadow: none;
-        -o-box-shadow: none;
         -moz-box-shadow: none;
+        -o-box-shadow: none;
         -webkit-box-shadow: none;
-
+        box-shadow: none;
-        transition: all 0s;
-        -o-transition: all 0s;
         -moz-transition: all 0s;
+        -o-transition: all 0s;
         -webkit-transition: all 0s;
+        transition: all 0s;
     }
 
     .vjs-default-skin .vjs-big-play-button:before {

sass/ascribe_panel.scss

@@ -1,13 +1,12 @@
 .ascribe-panel-wrapper {
-    border: 1px solid #DDD;
+    border: 1px solid #ddd;
-    min-height: 5em;
     height: 5em;
-
     margin-top: 1em;
+    min-height: 5em;
 
     > div {
-        height: 100%;
         float: left;
+        height: 100%;
 
         &:first-child {
             width: 60%;
@@ -32,7 +31,6 @@
             > div {
                 padding-left: 1em;
             }
-            
         }
 
         &:nth-child(2) {
@@ -52,7 +50,6 @@
             > div {
                 padding-left: 2em;
             }
-            
         }
 
         &:nth-child(2) {
@@ -73,8 +70,8 @@
     }
 
     .ascribe-panel-subtitle {
+        color: rgba(0, 0, 0, .5);
         font-size: .7em;
-        color: rgba(0,0,0,0.5);
     }
 
 }
@@ -85,8 +82,8 @@
     }
 
     .ascribe-panel-subtitle {
+        color: rgba(0, 0, 0, .5);
         font-size: .9em;
-        color: rgba(0,0,0,0.5);
     }
 }
 

sass/ascribe_piece_list_bulk_modal.scss

@@ -1,20 +1,17 @@
 .ascribe-piece-list-bulk-modal {
-    position: fixed;
+    background-color: #fafafa;
-    top:0;
+    border-bottom: .2em solid #e0e0e0;
-    left: 3%;
-    width:94%;
-
-    background-color: #FAFAFA;
-
-    border-left: 0.1em solid #E0E0E0;
-    border-right: 0.1em solid #E0E0E0;
-    border-top: 0.1em solid #E0E0E0;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
-    border-bottom: 0.2em solid #E0E0E0;
+    border-left: .1em solid #e0e0e0;
-    z-index:1000;
+    border-right: .1em solid #e0e0e0;
-    
+    border-top: .1em solid #e0e0e0;
+    left: 3%;
     padding-bottom: 1em;
+    position: fixed;
+    top: 0;
+    width: 94%;
+    z-index: 1000;
 }
 
 @media(min-width:1174px){
@@ -25,6 +22,6 @@
 }
 
 .piece-list-bulk-modal-clear-all {
-    text-decoration: underline;
     cursor: pointer;
+    text-decoration: underline;
 }

sass/ascribe_piece_list_toolbar.scss

@@ -6,6 +6,7 @@
 
 .search-bar {
     max-width: 200px;
+
     input {
         height: 33px;
     }
@@ -13,37 +14,45 @@
 
 .ascribe-input-glyph > .form-group > .input-group {
     margin-left: 6px;
+
     input {
-        box-shadow: none;
         background-color: transparent;
         border: 1px solid #02b6a3;
         border-right: 0;
+        box-shadow: none;
     }
+
     > .input-group-addon {
         background-color: transparent;
+
         > .filter-glyph {
             color: #02b6a3;
         }
+
         border: 1px solid #02b6a3;
         border-left: 0;
     }
 }
 
 .ascribe-piece-list-toolbar-filter-widget {
+
     button {
         background-color: rgba(0, 0, 0, 0);
-        color: #02b6a3;
         border: 1px solid rgba(0, 0, 0, 0);
+        color: #02b6a3;
         padding: 6px 4px 6px 8px;
-        &:hover, &:active {
+
+        &:hover,
+        &:active {
             background-color: #02b6a3 !important;
-            color: white;
             border: 1px solid #02b6a3 !important;
+            color: white;
         }
         .caret {
             display: none;
         }
     }
+
     .filter-widget-item {
 
         > a {
@@ -53,23 +62,22 @@
     }
 
     .checkbox-line {
-        position: relative;
         height: 25px;
+        position: relative;
 
         span {
-            position: absolute;
-            left: 9px;
-            top: 3px;
             cursor: pointer;
-
+            left: 9px;
             margin-right: 10px;
+            position: absolute;
+            top: 3px;
         }
 
         input {
-            position: absolute;
-            top: 2px;
-            right: 9px;
             margin-left: 10px;
+            position: absolute;
+            right: 9px;
+            top: 2px;
         }
     }
 }

sass/ascribe_piece_register.scss

@@ -9,8 +9,9 @@ $break-medium: 991px;
         max-width: 1200px;
     }
     margin: 0 auto;
-}
 
-.ascribe-row > div {
+    > div {
         padding-left: 0;
     }
+}
+

sass/ascribe_settings.scss

@@ -1,22 +1,21 @@
 .settings-container {
-    max-width: 600px;
     margin: auto;
+    max-width: 600px;
 }
 
 .ascribe-settings-wrapper {
-    width: 100%;
-    text-align: center;
-    padding-bottom: 1em;
-
     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, 0.4);
+      border-left: 3px solid rgba(2, 182, 163, .4);
     }
 }
 
@@ -25,20 +24,23 @@
 }
 
 .is-focused {
-    background-color: rgba(2, 182, 163, 0.05);
+    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, 0.05);
+    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: 0.9em;
+            font-size: .9em;
             margin-right: 1em;
         }
-        > input, > textarea {
+
+        > input,
+        > textarea {
             color: #666;
         }
     }
@@ -50,49 +52,57 @@
 
 .is-fixed {
     cursor: default;
+
     > div {
         cursor: default;
+
         > span {
             cursor: default;
         }
-        > input, > div, > pre, > textarea {
+
-            cursor: default;
+        > input,
+        > div,
+        > pre,
+        > textarea {
             color: #666;
+            cursor: default;
         }
     }
 }
 
 .ascribe-settings-property {
-    display: inline-block;
-    width: 100%;
-    text-align: left;
     border-top: 1px solid rgba(0, 0, 0, .05);
-
+    cursor: pointer;
-    padding-top: 1em;
+    display: inline-block;
     padding-left: 1.5em;
     padding-right: 1.5em;
+    padding-top: 1em;
+    text-align: left;
+    width: 100%;
 
-    cursor:pointer;
+    > div,
-    
+    > input,
-    > input, > div, > span:not(.glyphicon), > pre, > textarea, > select {
+    > pre,
+    > select,
+    > span:not(.glyphicon),
+    > textarea {
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
 
     > span {
-        font-weight: normal;
-        font-size: 0.9em;
         color: rgba(0, 0, 0, .5);
+        font-size: .9em;
+        font-weight: normal;
     }
 
     > div {
-        /* margin-top: 10px; */
         > div:not(.file-drag-and-drop div) {
-          padding-left: 0;
-          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-          font-weight: normal;
-          font-size: 1.1em;
-          cursor: default;
             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;
         }
     }
 
@@ -100,29 +110,34 @@
         margin-top: 0 !important;
     }
 
-    > input, > pre, > textarea, > select, .datepicker__input {
+    > input,
-        font-weight: 400;
+    > pre,
-        font-size: 1.1em;
+    > textarea,
-        width:100%;
+    > select,
-        margin-top: .5em;
+    .datepicker__input {
-        border: 0;
         background-color: rgba(0, 0, 0, 0);
-        color: rgba(0,0,0,.8);
+        border: 0;
-        padding-left: 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;
-            outline:0;
             box-shadow: none;
+            outline: 0;
         }
 
         &::selection {
-            color: white;
             background-color: rgba(0, 0, 0, 1);
+            color: white;
         }
 
     }
+
     .datepicker__input {
         padding: 0;
     }
@@ -135,73 +150,70 @@
 }
 
 .ascribe-property-footer {
-    font-size: 0.8em;
+    font-size: .8em;
     margin-top: 10px;
     width: 100%;
 }
 
 .ascribe-settings-property-collapsible-toggle {
-    text-align: left;
-    display: inline-block;
-    width: 100%;
     border-top: 1px solid rgba(0, 0, 0, .05);
-
+    display: inline-block;
-    padding: .5em 1.5em .5em 1.5em;
+    padding: .5em 1.5em;
+    text-align: left;
+    width: 100%;
 }
 
 .ascribe-checkbox-wrapper{
-    .checkbox > span {color: black;}
+    .checkbox > span {
+        color: black;
+    }
 }
 
 .ascribe-settings-property-collapsible-toggle, .ascribe-checkbox-wrapper {
-
     cursor: pointer;
 
-    /* Taken from: http://www.htmllion.com/css3-checkbox.html */
+    // Taken from: http://www.htmllion.com/css3-checkbox.html
     .checkbox {
         display: inline-block;
-
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-        font-weight: normal;
         font-size: .9em;
+        font-weight: normal;
         vertical-align: middle;
 
         > span {
+            left: 5px;
             position: relative;
             top: 1px;
-            left: 5px;
 
-            -webkit-user-select: none;
-            -moz-user-select: none;
             -khtml-user-select: none;
+            -moz-user-select: none;
             -ms-user-select: none;
+            -webkit-user-select: none;
         }
     }
 
-    input[type=checkbox] {
+    [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;
-        width: 17px;
         height: 17px;
-        vertical-align:middle;
-        background-color: white;
-        color: #f3f3f3;
         text-align: center;
-
+        vertical-align: middle;
-        border-radius: 1px;
+        width: 17px;
-        border: 1px solid rgba(0, 0, 0, .5);
     }
 
-    input[type=checkbox]:checked + .checkbox:before {
+    [type=checkbox]:checked + .checkbox:before {
-        line-height: .8;
+        color: rgba(2, 182, 163, 1);
-
         content: "\2713";
         font-size: 20px;
-        color: rgba(2, 182, 163, 1);
+        line-height: .8;
     }
 }
 

sass/ascribe_slides_container.scss

@@ -6,40 +6,41 @@
 }
 
 .ascribe-sliding-container {
-    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
     padding-left: 0;
     padding-right: 0;
+    transition: transform 1s cubic-bezier(.23, 1, .32, 1);
 }
 
 .ascribe-slide {
-    position: relative;
-    min-height: 1px;
     float: left;
+    min-height: 1px;
+    position: relative;
 }
 
 .ascribe-breadcrumb-container {
     div:last-child {
         .ascribe-breadcrumb {
-            border-right: 1px solid #EEE;
+            border-right: 1px solid #eee;
         }
     }
 }
 
 .ascribe-breadcrumb {
-    padding: 1em;
-    border: 1px solid #EEE;
-    border-right: 1px solid rgba(0, 0, 0, 0);
-    margin-bottom: 0.6em;
     background-color: white;
+    border: 1px solid #eee;
+    border-right: 1px solid rgba(0, 0, 0, 0);
+    margin-bottom: .6em;
+    padding: 1em;
 
     .active {
         color: #666;
     }
+
     a {
-        color: #DDD;
+        color: #ddd;
-        text-decoration: none;
         font-size: 1.1em;
         font-style: italic;
+        text-decoration: none;
     }
 }
 

sass/ascribe_table.scss

@@ -3,7 +3,7 @@
     font-size: 1.1em;
 }
 
-/*This is aligning the first checkbox in pieclist detail with all the other ones*/
+// This is aligning the first checkbox in pieclist detail with all the other ones
 .table > thead:first-child > tr:first-child > th {
     padding-left: 0;
 }
@@ -14,36 +14,34 @@
 }
 
 .ascribe-table-header-column > span {
-    display: table-cell;
-    vertical-align: middle;
-    font-family: 'Source Sans Pro';
-    font-weight: 600;
     color: #424242;
+    display: table-cell;
+    font-weight: 600;
+    vertical-align: middle;
 }
 
 .ascribe-table-item-column {
-    font-family: 'Source Sans Pro';
+    display: table-cell;
     font-size: .8em;
     height: 3em;
     vertical-align: middle;
-    display: table-cell;
-}
 
-.ascribe-table-item-column > * {
+    > * {
         display: table-cell;
-    vertical-align: middle;
-    white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        vertical-align: middle;
+        white-space: nowrap;
     }
 
-.ascribe-table-item-column > span > input {
+    > span > input {
-    margin-top:10px;
         margin-left: 2px;
+        margin-top: 10px;
+    }
 }
 
 .ascribe-table-item-selected {
-    background-color: rgba(2, 182, 163, 0.5);
+    background-color: rgba(2, 182, 163, .5);
 }
 
 .ascribe-table-item-selectable {

sass/ascribe_textarea.scss

@@ -1,24 +1,23 @@
 .ascribe-textarea {
-    border: none;
+    border: 0;
     box-shadow: none;
     margin-bottom: 1em;
 }
 
 .ascribe-textarea-editable:hover {
-    //border: 1px solid #AAA;;
+    border: 0;
-    border: none;
 }
 
 .ascribe-pre {
-    word-break: break-word;
-    white-space: pre-wrap;
-    white-space: -moz-pre-wrap;
-    white-space: -pre-wrap;
-    white-space: -o-pre-wrap;
-    font-family: inherit;
-    text-align: justify;
     background-color: white;
-    border: none;
+    border: 0;
-    padding: 0;
+    font-family: inherit;
     margin: 0;
+    padding: 0;
+    text-align: justify;
+    white-space: -moz-pre-wrap;
+    white-space: -o-pre-wrap;
+    white-space: -pre-wrap;
+    white-space: pre-wrap;
+    word-break: break-word;
 }

sass/ascribe_theme.scss

@@ -1,11 +1,11 @@
-/* All bootstrap overwrites should take place in this file */
+// All bootstrap overwrites should take place in this file
 
 .pager li a {
     color: white;
 }
 
 .panel-default {
-    border: none;
+    border: 0;
     box-shadow: none;
     margin-bottom: 0;
 }

sass/ascribe_uploader.scss

@@ -1,21 +1,26 @@
 .file-drag-and-drop {
-    display: block;
+    background-color: #fefefe;
-    outline: 1px dashed #9E9E9E;
-    vertical-align: middle;
-    text-align: center;
-    height: auto;
-    background-color: #FEFEFE;
-    overflow: auto;
-    margin-top: 1em;
-
     cursor: default !important;
+    display: block;
+    height: auto;
+    margin-top: 1em;
+    outline: 1px dashed #9e9e9e;
+    overflow: auto;
+    padding: 1.5em 0;
+    text-align: center;
+    vertical-align: middle;
 
-    padding: 1.5em 0 1.5em 0;
+    .file-drag-and-drop-dialog > p:first-child {
+        font-size: 1.5em !important;
+        margin-bottom: 0;
+        margin-top: 0;
+        padding-bottom: 0;
+    }
 }
 
 .inactive-dropzone {
-    cursor: default !important;
     background-color: rgba(0, 0, 0, 0) !important;
+    cursor: default !important;
     outline: 0;
 }
 
@@ -25,44 +30,34 @@
     }
 
     .btn {
-        margin: 0 1em 0 1em;
+        margin: 0 1em;
     }
 }
 
-.file-drag-and-drop .file-drag-and-drop-dialog > p:first-child {
-    font-size: 1.5em !important;
-
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-bottom: 0;
-}
 
 .file-drag-and-drop-position {
-    position: relative;
     display: inline-block;
-
     margin-left: .7em;
     margin-right: .7em;
+    position: relative;
 
     .delete-file {
-        display: block;
         background-color: black;
-        
+        border-radius: 1em;
-        width: 20px;
+        cursor: pointer;
+        display: block;
         height: 20px;
         position: absolute;
         right: -7px;
-        top: -7px;
-        border-radius: 1em;
         text-align: center;
-
+        top: -7px;
-        cursor: pointer;
+        width: 20px;
 
         span {
             color: white;
-            top: 1;
-            left: 0;
             font-size: .8em;
+            left: 0;
+            top: 1px;
 
             &:hover {
                 color: $brand-danger;
@@ -78,29 +73,31 @@
 }
 
 .file-drag-and-drop-preview {
-    overflow:hidden;
+    background-color: #eeeeee;
-    cursor: default;
-    background-color: #EEEEEE;
     border: 1px solid #616161;
+    cursor: default;
+    overflow: hidden;
 }
 
 .file-drag-and-drop-preview-image {
+    border: 1px solid #616161;
     display: table;
     height: 104px;
-    width:104px;
     overflow: hidden;
-    border: 1px solid #616161;
     text-align: center;
-}
+    width: 104px;
 
-.file-drag-and-drop-preview-image .action-file {
+    .action-file {
+        color: white;
+        cursor: pointer;
         font-size: 2.5em;
         margin-top: .6em;
-    color: white;
         text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
-    cursor: pointer;
 
-    &:link, &:visited, &:hover, &:active {
+        &:link,
+        &:visited,
+        &:hover,
+        &:active {
             text-decoration: none;
         }
 
@@ -108,33 +105,37 @@
             color: #d9534f;
         }
     }
-
-.file-drag-and-drop-preview-other .action-file {
-    position: relative;
-    top: .3em;
-    margin-top: 0;
-    font-size: 2.5em;
-    color: white;
-    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
-    cursor: pointer;
-
-    &:link, &:visited, &:hover, &:active {
-        text-decoration: none;
 }
 
-    &:hover {
-        color: #d9534f;
-    }
-}
 
 .file-drag-and-drop-preview-other {
     display: table-cell;
     text-align: center;
     vertical-align: middle;
 
+    .action-file {
+        color: white;
+        cursor: pointer;
+        font-size: 2.5em;
+        margin-top: 0;
+        position: relative;
+        text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
+        top: .3em;
+
+        &:link,
+        &:visited,
+        &:hover,
+        &:active {
+            text-decoration: none;
         }
 
-.file-drag-and-drop-preview-other span:not(:first-child) {
+        &:hover {
+            color: #d9534f;
+        }
+
+        span:not(:first-child) {
             display: block;
             margin-top: .5em;
         }
+    }
+}

sass/ascribe_variables.scss

@@ -1,4 +1,3 @@
 $ascribe-color-green: rgba(2, 182, 163, 1);
 
-$ascribe-brand-danger: #FC535F;
+$ascribe-brand-danger: #fc535f;
-$ascribe-brand-warning: #FFC354;

sass/main.scss

@@ -31,14 +31,16 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'ascribe_slides_container';
 @import 'ascribe_form';
 @import 'ascribe_panel';
-@import 'ascribe_button';
+@import 'ascribe_collapsible';
 
 @import 'whitelabel/index';
 
 
-html, body {
+html,
+body {
+    background-color: #fdfdfd;
+    font-family: 'Source Sans Pro';
     height: 100%;
-    background-color: #FDFDFD;
 }
 
 html {
@@ -46,8 +48,8 @@ html {
 }
 
 .ascribe-default-app {
-    padding-top: 70px;
     overflow-x: hidden;
+    padding-top: 70px;
 }
 
 hr {
@@ -64,68 +66,88 @@ hr {
 
 .no-margin {
     margin: 0;
+    margin-left: 0;
+    margin-right: 0;
 }
+
 .no-padding {
     padding: 0;
 }
+
 .inline {
     display: inline;
 }
 
 .navbar-default {
-    border: none;
+    border: 0;
+    border-color: #ccc;
     border-left: 0;
     border-right: 0;
-    margin-bottom: 1.5em;
     border-top: 0;
-    border-color: #CCC;
+    font-size: .8em;
-    font-size: 0.8em;
+    margin-bottom: 1.5em;
-}
 
-.navbar-default .navbar-nav > .active {
+    .navbar-nav > li > a {
-    a {
-        background-color: transparent!important;
-        > span {color: #02b6a3;}
-        color: #02b6a3;
-        border-bottom: 1px solid #02b6a3;
-
-        &:hover, &:focus{
-            > span {color: #02b6a3;}
-            color: #02b6a3;
-            background-color: transparent;
-            border-bottom: 1px solid #02b6a3;
-        }
-    }
-}
-.navbar-default .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 {
-    white-space: nowrap;
-    width: 4em;
     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;
 }
@@ -136,8 +158,8 @@ hr {
 }
 
 .clear-margins {
-    margin-top:0;
     margin-bottom: 0;
+    margin-top: 0;
 }
 
 .ascribe-color {
@@ -147,68 +169,75 @@ hr {
 .ascribe-subheader {
     padding-bottom: 10px;
     margin-top: -10px;
+
     a {
-        cursor: pointer;
-        font-size: 0.8em;
         color: #222;
+        cursor: pointer;
+        font-size: .8em;
     }
 }
 
 .tooltip-inner {
+    background-color: #fcfafa;
+    border: 1px solid;
+    border-radius: 0;
+    color: #000;
     max-width: 300px;
     padding: 3px 8px;
-    color: #000;
     text-align: center;
     text-decoration: none;
-    background-color: #FCFAFA;
-    border-radius: 0;
-    border: 1px solid;
 }
 
-/* Taken from http://stackoverflow.com/a/20548578 */
+// Taken from http://stackoverflow.com/a/20548578
 .vcenter {
     display: inline-block;
-    vertical-align: middle;
     float: none;
+    vertical-align: middle;
 }
+
 .filter-glyph {
     color: white;
 }
-.no-margin {
+
-    margin-right: 0;
-    margin-left: 0;
-}
 .btn-delete {
     background-color: rgba(0, 0, 0, 0);
-    color: #888;
     border: 1px solid rgba(0, 0, 0, 0);
+    color: #888;
+
     &:hover {
         border: 1px solid $ascribe-brand-danger;
     }
 }
-.btn-ascribe, .btn-ascribe-inv {
+
+.btn-ascribe,
+.btn-ascribe-inv {
     border: 1px solid #444;
-    line-height: 2em;
-    margin-right: 1px;
-    margin-left: 0 !important;
-    font-family: sans-serif !important;
     border-radius: 0 !important;
+    font-family: sans-serif !important;
+    line-height: 2em;
+    margin-left: 0 !important;
+    margin-right: 1px;
 }
 
-.btn-ascribe, .btn-ascribe-inv:active, .btn-ascribe-inv:hover {
+.btn-ascribe,
+.btn-ascribe-inv:active,
+.btn-ascribe-inv:hover {
+    background-color: #fff;
     color: #222 !important;
-    background-color: #FFF;
 }
 
-.btn-ascribe:active, .btn-ascribe:hover, .btn-ascribe-inv {
+.btn-ascribe:active,
-    color: #FFF !important;
+.btn-ascribe:hover,
+.btn-ascribe-inv {
     background-color: #444;
+    color: #fff !important;
 }
 
-.btn-ascribe-inv:disabled, .btn-ascribe-inv:focus {
+.btn-ascribe-inv:disabled,
-    color: #444 !important;
+.btn-ascribe-inv:focus {
     background-color: #BBB !important;
     border: 1px solid #444 !important;
+    color: #444 !important;
 }
 
 .btn-ascribe-sm {
@@ -216,24 +245,29 @@ hr {
     line-height: 1.3em;
 }
 
-.btn-ascribe-green, .btn-ascribe-green-inv {
+.btn-ascribe-green,
-    border: 1px solid #48DACB;
+.btn-ascribe-green-inv {
+    border: 1px solid #48dacb;
+    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;
 }
 
-.btn-ascribe-green, .btn-ascribe-green-inv:active, .btn-ascribe-green-inv:hover {
+.btn-ascribe-green,
-    background-color: #FFF;
+.btn-ascribe-green-inv:active,
-    border: 1px solid rgba(2, 182, 163, 0.5);
+.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 {
+.btn-ascribe-green:active,
-    border: 1px solid rgba(2, 182, 163, 0.5);
+.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;
-    background-color: rgba(2, 182, 163, 0.5);
 }
 
 .ascribe-detail-title {
@@ -242,33 +276,34 @@ hr {
 }
 
 .ascribe-detail-property {
-    padding-bottom: 0.4em;
+    padding-bottom: .4em;
 }
 
 .ascribe-detail-property-label {
-    font-size: 0.8em;
+    font-size: .8em;
 }
 
 .ascribe-detail-property-value {
-    /* white-space: nowrap;
-    overflow: hidden; */
     text-overflow: ellipsis;
 }
 
-::-webkit-input-placeholder { /* WebKit browsers */
+::-webkit-input-placeholder { // WebKit browsers
-    font-size: 0.9em;
+    font-size: .9em;
     font-style: italic;
 }
-:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+
-    font-size: 0.9em;
+:-moz-placeholder { // Mozilla Firefox 4 to 18
+    font-size: .9em;
     font-style: italic;
 }
-::-moz-placeholder { /* Mozilla Firefox 19+ */
+
-    font-size: 0.9em;
+::-moz-placeholder { // Mozilla Firefox 19+
+    font-size: .9em;
     font-style: italic;
 }
-:-ms-input-placeholder { /* Internet Explorer 10+ */
+
-    font-size: 0.9em;
+:-ms-input-placeholder { // Internet Explorer 10+
+    font-size: .9em;
     font-style: italic;
 }
 
@@ -277,15 +312,15 @@ hr {
 }
 
 .input-checkbox-ascribe {
-    text-align: left;
     line-height: 1.6;
-    width: 90%;
     margin-left: 1.6em;
     margin-right: auto;
+    text-align: left;
+    width: 90%;
 }
 
-/* columns of same height styles */
+// columns of same height styles
-/* http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height */
+// http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
 .row-full-height {
     height: 100%;
 }
@@ -297,9 +332,9 @@ hr {
 
 .row-same-height {
     display: table;
-    width: 100%;
+    // fix overflow
-    /* fix overflow */
     table-layout: fixed;
+    width: 100%;
 }
 
 .col-xs-height {
@@ -328,7 +363,7 @@ hr {
     }
 }
 
-/* vertical alignment styles */
+// vertical alignment styles
 
 .col-top {
     vertical-align: top;
@@ -352,15 +387,15 @@ hr {
 }
 
 .spin {
-    display:inline-block;
-    -webkit-animation: spin 1s infinite linear;
     -moz-animation: spin 1s infinite linear;
-    -o-animation: spin 1s infinite linear;
     -ms-animation: spin 1s infinite linear;
+    -o-animation: spin 1s infinite linear;
+    -webkit-animation: spin 1s infinite linear;
     animation: spin 1s infinite linear;
-    -webkit-transform-origin: 55% 70%;
     -moz-transform-origin: 55% 70%;
     -o-transform-origin: 55% 70%;
+    -webkit-transform-origin: 55% 70%;
+    display: inline-block;
     transform-origin: 55% 70%;
     width: 10px;
     height: 10px;
@@ -370,18 +405,22 @@ hr {
     0% { -webkit-transform: rotate(0deg);}
     100% { -webkit-transform: rotate(360deg);}
 }
+
 @-moz-keyframes spin {
     0% { -moz-transform: rotate(0deg); }
     100% { -moz-transform: rotate(360deg);}
 }
+
 @-o-keyframes spin {
     0% { -o-transform: rotate(0deg);}
     100% { -o-transform: rotate(360deg);}
 }
+
 @-ms-keyframes spin {
     0% { -ms-transform: rotate(0deg);}
     100% { -ms-transform: rotate(360deg);}
 }
+
 @-keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg);}
@@ -394,9 +433,8 @@ hr {
 }
 
 .fullpage-spinner {
-    padding-top: 30%;
     padding-bottom: 30%;
-
+    padding-top: 30%;
     text-align: center;
 
     > span {
@@ -406,21 +444,22 @@ hr {
 
 
 .disable-select {
-    -webkit-user-select: none;  
     -moz-user-select: none;
     -ms-user-select: none;
+    -webkit-user-select: none;
     user-select: none;
 }
 
 .link-ascribe {
     color: #666;
+
     &:hover {
         color: #000;
     }
 }
 
 .ascribe-loading-position {
-    padding-top: 30%;
     padding-bottom: 30%;
+    padding-top: 30%;
     text-align: center;
 }

sass/offset_right.scss

@@ -1,81 +1,106 @@
-/* Taken from: http://stackoverflow.com/a/27501063/1263876 */
+// Taken from: http://stackoverflow.com/a/27501063/1263876
 
 .col-xs-offset-right-12 {
     margin-right: 100%;
 }
+
 .col-xs-offset-right-11 {
     margin-right: 91.66666667%;
 }
+
 .col-xs-offset-right-10 {
     margin-right: 83.33333333%;
 }
+
 .col-xs-offset-right-9 {
     margin-right: 75%;
 }
+
 .col-xs-offset-right-8 {
     margin-right: 66.66666667%;
 }
+
 .col-xs-offset-right-7 {
     margin-right: 58.33333333%;
 }
+
 .col-xs-offset-right-6 {
     margin-right: 50%;
 }
+
 .col-xs-offset-right-5 {
     margin-right: 41.66666667%;
 }
+
 .col-xs-offset-right-4 {
     margin-right: 33.33333333%;
 }
+
 .col-xs-offset-right-3 {
     margin-right: 25%;
 }
+
 .col-xs-offset-right-2 {
     margin-right: 16.66666667%;
 }
+
 .col-xs-offset-right-1 {
     margin-right: 8.33333333%;
 }
+
 .col-xs-offset-right-0 {
     margin-right: 0;
 }
+
 @media (min-width: 768px) {
     .col-sm-offset-right-12 {
         margin-right: 100%;
     }
+
     .col-sm-offset-right-11 {
         margin-right: 91.66666667%;
     }
+
     .col-sm-offset-right-10 {
         margin-right: 83.33333333%;
     }
+
     .col-sm-offset-right-9 {
         margin-right: 75%;
     }
+
     .col-sm-offset-right-8 {
         margin-right: 66.66666667%;
     }
+
     .col-sm-offset-right-7 {
         margin-right: 58.33333333%;
     }
+
     .col-sm-offset-right-6 {
         margin-right: 50%;
     }
+
     .col-sm-offset-right-5 {
         margin-right: 41.66666667%;
     }
+
     .col-sm-offset-right-4 {
         margin-right: 33.33333333%;
     }
+
     .col-sm-offset-right-3 {
         margin-right: 25%;
     }
+
     .col-sm-offset-right-2 {
         margin-right: 16.66666667%;
     }
+
     .col-sm-offset-right-1 {
         margin-right: 8.33333333%;
     }
+
     .col-sm-offset-right-0 {
         margin-right: 0;
     }
@@ -84,80 +109,105 @@
     .col-md-offset-right-12 {
         margin-right: 100%;
     }
+
     .col-md-offset-right-11 {
         margin-right: 91.66666667%;
     }
+
     .col-md-offset-right-10 {
         margin-right: 83.33333333%;
     }
+
     .col-md-offset-right-9 {
         margin-right: 75%;
     }
+
     .col-md-offset-right-8 {
         margin-right: 66.66666667%;
     }
+
     .col-md-offset-right-7 {
         margin-right: 58.33333333%;
     }
+
     .col-md-offset-right-6 {
         margin-right: 50%;
     }
+
     .col-md-offset-right-5 {
         margin-right: 41.66666667%;
     }
+
     .col-md-offset-right-4 {
         margin-right: 33.33333333%;
     }
+
     .col-md-offset-right-3 {
         margin-right: 25%;
     }
+
     .col-md-offset-right-2 {
         margin-right: 16.66666667%;
     }
+
     .col-md-offset-right-1 {
         margin-right: 8.33333333%;
     }
+
     .col-md-offset-right-0 {
         margin-right: 0;
     }
 }
+
 @media (min-width: 1200px) {
     .col-lg-offset-right-12 {
         margin-right: 100%;
     }
+
     .col-lg-offset-right-11 {
         margin-right: 91.66666667%;
     }
+
     .col-lg-offset-right-10 {
         margin-right: 83.33333333%;
     }
+
     .col-lg-offset-right-9 {
         margin-right: 75%;
     }
+
     .col-lg-offset-right-8 {
         margin-right: 66.66666667%;
     }
+
     .col-lg-offset-right-7 {
         margin-right: 58.33333333%;
     }
+
     .col-lg-offset-right-6 {
         margin-right: 50%;
     }
+
     .col-lg-offset-right-5 {
         margin-right: 41.66666667%;
     }
+
     .col-lg-offset-right-4 {
         margin-right: 33.33333333%;
     }
+
     .col-lg-offset-right-3 {
         margin-right: 25%;
     }
+
     .col-lg-offset-right-2 {
         margin-right: 16.66666667%;
     }
+
     .col-lg-offset-right-1 {
         margin-right: 8.33333333%;
     }
+
     .col-lg-offset-right-0 {
         margin-right: 0;
     }

sass/variables.scss

@@ -18,7 +18,7 @@ $gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee
 $brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
 $brand-success:         #5cb85c !default;
 $brand-info:            #5bc0de !default;
-$brand-warning:         $ascribe-brand-warning !default;
+$brand-warning:         #ccc !default;
 $brand-danger:          $ascribe-brand-danger !default;
 
 
@@ -51,14 +51,14 @@ $font-family-base:        $font-family-sans-serif !default;
 
 $font-size-base:          14px !default;
 $font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
-$font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
+$font-size-small:         ceil(($font-size-base * .85)) !default; // ~12px
 
 $font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
 $font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
 $font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
 $font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
 $font-size-h5:            $font-size-base !default;
-$font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
+$font-size-h6:            ceil(($font-size-base * .85)) !default; // ~12px
 
 //** Unit-less `line-height` for use in components like buttons.
 $line-height-base:        1.428571429 !default; // 20/14
@@ -556,7 +556,7 @@ $popover-arrow-color:                 $popover-bg !default;
 //** Popover outer arrow width
 $popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
 //** Popover outer arrow color
-$popover-arrow-outer-color:           fade_in($popover-border-color, 0.05) !default;
+$popover-arrow-outer-color:           fade_in($popover-border-color, .05) !default;
 //** Popover outer arrow fallback color
 $popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;