From aaa1a9a0004fa9f1a4d620ddaa20df3d7e56edbe Mon Sep 17 00:00:00 2001 From: diminator Date: Mon, 12 Oct 2015 15:25:21 +0200 Subject: [PATCH] replaced fonts replaced spinners WIP renamed settings-property to property --- fonts/ascribe-logo.eot | Bin 2832 -> 2888 bytes fonts/ascribe-logo.svg | 17 +- fonts/ascribe-logo.ttf | Bin 2648 -> 2704 bytes fonts/ascribe-logo.woff | Bin 2724 -> 2780 bytes js/components/ascribe_detail/edition.js | 3 +- .../ascribe_detail/edition_container.js | 5 +- .../ascribe_detail/piece_container.js | 5 +- js/components/ascribe_forms/form_consign.js | 6 +- .../form_copyright_association.js | 2 +- .../ascribe_forms/form_delete_edition.js | 6 +- .../ascribe_forms/form_delete_piece.js | 6 +- js/components/ascribe_forms/form_loan.js | 8 +- .../form_remove_editions_from_collection.js | 6 +- .../form_remove_piece_from_collection.js | 6 +- .../ascribe_forms/form_share_email.js | 6 +- js/components/ascribe_forms/form_signup.js | 2 +- .../ascribe_forms/form_submit_to_prize.js | 8 +- js/components/ascribe_forms/form_transfer.js | 6 +- js/components/ascribe_forms/form_unconsign.js | 6 +- .../ascribe_forms/form_unconsign_request.js | 9 +- js/components/ascribe_forms/property.js | 4 +- .../ascribe_forms/property_collapsible.js | 6 +- .../ascribe_settings/account_settings.js | 6 +- .../ascribe_settings/api_settings.js | 4 +- .../bitcoin_wallet_settings.js | 4 +- js/components/piece_list.js | 7 +- .../prize/components/prize_register_piece.js | 2 +- sass/ascribe-fonts/ascribe-fonts.scss | 31 +-- sass/ascribe_custom_style.scss | 46 +++- sass/ascribe_property.scss | 219 ++++++++++++++++++ sass/ascribe_settings.scss | 66 ------ .../wallet/ikonotv/ikonotv_landing.scss | 8 +- 32 files changed, 362 insertions(+), 148 deletions(-) create mode 100644 sass/ascribe_property.scss diff --git a/fonts/ascribe-logo.eot b/fonts/ascribe-logo.eot index d4815136db354b8d68b58cc4826845f82005406f..609770bc0093849b766fea8d58a5d970d28e9176 100644 GIT binary patch delta 327 zcmbOrc0!ERgPVb2!bDbcmh5LLQWG7z1#K7@81?{hLUL|mfkfDa{)u;F>W?n^x0Zo{ zv4VktEh8f}F-3&=^mPUX_6I<9W*`9(WdTD51`Y`zUnL{Aq{1wPu@cA!nPrlbpPb0z zz%~oWF97moauX{G7-Si>fczdHUm-6sH}#O<$y6YJ4bYB51^LA#49q|o1}>0#1qNnT zMy|;fjP{HilXozB14$O9Oan#+hW`gx7?=+*06oB{D5xx`D5@xEEU3uB@K4$8pEBcJ zH^#e+j~VYmd7CqtnAv2cRGwwW^V@u7;AR0?z;MaYc^!hHbIP4fSZ9KVj`ker)XAQ5(`A>j+m5khy3ZoRpN(KfF4j|tkCqFrn zjgR>VkZ%FxOXVh36fnpzY61BnK)ym=Vs7do!IP;#ehJWyLk0Q8B@E0!83rzpdIbh% zRz~&76^! - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/fonts/ascribe-logo.ttf b/fonts/ascribe-logo.ttf index b42d53037a34e492d3fb7c1de3841c673165d7ee..79acfe895e713ec580619e42c55e85873beaf105 100644 GIT binary patch delta 351 zcmca1GC{PSfsuiMft#U$ftkU;KUm+0Ux>{HD6$8L6OwZi3naoW^fNFp$^iKx>50V! zKw1FE2hkkqIhAQg7yVlcompT5q(!2SRzZw3+&Q5G-+DwP28RWfo* zD$G(CD}j8F9VR*X$&QIE4s5f40w4orauX{G7-Si>fczdHUm-6sH}#O<$y6YJ4bYN9 z1^LA#K!*YW7f8JV12Zev!~^z>9FrKm8965VFlHJ6z4QM73j^~3pr;rZ6$O&AGO@iF6FC~xydMrJk{DV1m0@%%Pl8Ms+MrZZe}bY2IeCtqMU u7vhD8gC!Z5fE3GQQ4T$E3x*hmMGWT{50V! zKw1FE2hkkqIhARS_qrbe`4tQdY$h40i7CQ=^xYX4*w+B%%`$)jBFX{=K>iaTUnL{A zq{1kLu@b121IRbX$xn7nWaDE#0u-tNO$P_KfV47`++UC;KpFZhp!5pH)Upna4k#-{va=Hw#EH z!zJ6&G#EXZg~ObW2Oj3giK-esWu`(w=8K};W17wK|2(vh_&B{%z09wp(1ISkZV_8P6 zyu{p8px6(f<%dA{kl@MGg8bqVpnpJmA?lccEM``&$vlkqj2x4F7`=hy48}|YMh1re z2Ur-G4}g5ms3@o`s3@u^Xe_A6!thVo?VmE^T{p(NjE@=bLV272GBUHtNU1!_j_0@e z%D~M6G?#(llB4rF7(H2r!(50LA`X^hU;_T69 zVlhZ;50K9R#RBO$m1#h+BMb~|CLrv1ulrF(YGMil1N#r48Z!_U{-f`n0TcvkGXU~c zKv+asz#t>Hqyi`gG9M&vV3fjGnUkLkROiRh0u+z}VKzSIBe{tcK#MsR0Qm}FEW@ak zmzbLh6gvR4{16Bq5)7b#muTcnTOGyk$ticqc@P8!I-((l<7aK zjG8i!e>}gh^7y~e9W^(9>J27-HY++ - + ); } diff --git a/js/components/ascribe_detail/edition_container.js b/js/components/ascribe_detail/edition_container.js index 0f726ae5..338f9bee 100644 --- a/js/components/ascribe_detail/edition_container.js +++ b/js/components/ascribe_detail/edition_container.js @@ -7,8 +7,7 @@ import EditionStore from '../../stores/edition_store'; import Edition from './edition'; -import AppConstants from '../../constants/application_constants'; - +import AscribeSpinner from '../ascribe_spinner'; /** @@ -70,7 +69,7 @@ let EditionContainer = React.createClass({ } else { return (
- +
); } diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js index c2eb1759..229639d2 100644 --- a/js/components/ascribe_detail/piece_container.js +++ b/js/components/ascribe_detail/piece_container.js @@ -35,7 +35,8 @@ import GlobalNotificationActions from '../../actions/global_notification_actions import Note from './note'; import ApiUrls from '../../constants/api_urls'; -import AppConstants from '../../constants/application_constants'; +import AscribeSpinner from '../ascribe_spinner'; + import { mergeOptions } from '../../utils/general_utils'; import { getLangText } from '../../utils/lang_utils'; @@ -269,7 +270,7 @@ let PieceContainer = React.createClass({ } else { return (
- +
); } diff --git a/js/components/ascribe_forms/form_consign.js b/js/components/ascribe_forms/form_consign.js index de4a4788..f57e0045 100644 --- a/js/components/ascribe_forms/form_consign.js +++ b/js/components/ascribe_forms/form_consign.js @@ -8,7 +8,7 @@ import Form from './form'; import Property from './property'; import InputTextAreaToggable from './input_textarea_toggable'; -import AppConstants from '../../constants/application_constants'; +import AscribeSpinner from '../ascribe_spinner'; import { getLangText } from '../../utils/lang_utils.js'; @@ -43,7 +43,9 @@ let ConsignForm = React.createClass({ } spinner={
- +

+ +

}> -
+
{this.renderChildren()}
diff --git a/js/components/ascribe_settings/account_settings.js b/js/components/ascribe_settings/account_settings.js index 1898c599..5f4cfe7a 100644 --- a/js/components/ascribe_settings/account_settings.js +++ b/js/components/ascribe_settings/account_settings.js @@ -15,7 +15,7 @@ import AclProxy from '../acl_proxy'; import CopyrightAssociationForm from '../ascribe_forms/form_copyright_association'; import ApiUrls from '../../constants/api_urls'; -import AppConstants from '../../constants/application_constants'; +import AscribeSpinner from '../ascribe_spinner'; import { getLangText } from '../../utils/lang_utils'; @@ -37,7 +37,7 @@ let AccountSettings = React.createClass({ }, render() { - let content = ; + let content = ; let profile = null; if (this.props.currentUser.username) { @@ -78,7 +78,7 @@ let AccountSettings = React.createClass({ getFormData={this.getFormDataProfile}> diff --git a/js/components/ascribe_settings/api_settings.js b/js/components/ascribe_settings/api_settings.js index 0f638675..ed35041b 100644 --- a/js/components/ascribe_settings/api_settings.js +++ b/js/components/ascribe_settings/api_settings.js @@ -15,7 +15,7 @@ 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 AscribeSpinner from '../ascribe_spinner'; import { getLangText } from '../../utils/lang_utils'; @@ -57,7 +57,7 @@ let APISettings = React.createClass({ }, getApplications(){ - let content = ; + let content = ; if (this.state.applications.length > -1) { content = this.state.applications.map(function(app, i) { diff --git a/js/components/ascribe_settings/bitcoin_wallet_settings.js b/js/components/ascribe_settings/bitcoin_wallet_settings.js index ea528709..91f5e5d6 100644 --- a/js/components/ascribe_settings/bitcoin_wallet_settings.js +++ b/js/components/ascribe_settings/bitcoin_wallet_settings.js @@ -10,7 +10,7 @@ import Property from '../ascribe_forms/property'; import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph'; -import AppConstants from '../../constants/application_constants'; +import AscribeSpinner from '../ascribe_spinner'; import { getLangText } from '../../utils/lang_utils'; @@ -38,7 +38,7 @@ let BitcoinWalletSettings = React.createClass({ }, render() { - let content = ; + let content = ; if (this.state.walletSettings.btc_public_key) { content = ( diff --git a/js/components/piece_list.js b/js/components/piece_list.js index a543f7b7..45d17f74 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -168,10 +168,9 @@ let PieceList = React.createClass({ applyOrderBy={this.applyOrderBy}> {this.props.customSubmitButton ? this.props.customSubmitButton : - - - - + } diff --git a/js/components/whitelabel/prize/components/prize_register_piece.js b/js/components/whitelabel/prize/components/prize_register_piece.js index 0bd3fe75..4a62dfdd 100644 --- a/js/components/whitelabel/prize/components/prize_register_piece.js +++ b/js/components/whitelabel/prize/components/prize_register_piece.js @@ -60,7 +60,7 @@ let PrizeRegisterPiece = React.createClass({ diff --git a/sass/ascribe-fonts/ascribe-fonts.scss b/sass/ascribe-fonts/ascribe-fonts.scss index 263c6f3a..0d428e7d 100644 --- a/sass/ascribe-fonts/ascribe-fonts.scss +++ b/sass/ascribe-fonts/ascribe-fonts.scss @@ -24,11 +24,11 @@ } @font-face { font-family: 'ascribe-logo'; - src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?ijga43'); - src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?ijga43#iefix') format('embedded-opentype'), - url('#{$BASE_URL}static/fonts/ascribe-logo.ttf?ijga43') format('truetype'), - url('#{$BASE_URL}static/fonts/ascribe-logo.woff?ijga43') format('woff'), - url('#{$BASE_URL}static/fonts/ascribe-logo.svg?ijga43#ascribe-logo') format('svg'); + src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?q6qoae'); + src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?q6qoae#iefix') format('embedded-opentype'), + url('#{$BASE_URL}static/fonts/ascribe-logo.ttf?q6qoae') format('truetype'), + url('#{$BASE_URL}static/fonts/ascribe-logo.woff?q6qoae') format('woff'), + url('#{$BASE_URL}static/fonts/ascribe-logo.svg?q6qoae#ascribe-logo') format('svg'); font-weight: normal; font-style: normal; } @@ -47,32 +47,35 @@ -moz-osx-font-smoothing: grayscale; } -.icon-ascribe-sort:before { +.icon-ascribe-add:before { content: "\e800"; } -.icon-ascribe-search:before { +.icon-ascribe-sort:before { content: "\e801"; } -.icon-ascribe-filter:before { +.icon-ascribe-search:before { content: "\e802"; } -.icon-ascribe-add-white:before { +.icon-ascribe-filter:before { content: "\e803"; } -.icon-ascribe-add .path1:before { +.icon-ascribe-add-white:before { content: "\e804"; +} +.icon-ascribe-add-blue .path1:before { + content: "\e805"; color: rgb(0, 60, 106); } -.icon-ascribe-add .path2:before { - content: "\e805"; +.icon-ascribe-add-blue .path2:before { + content: "\e806"; margin-left: -1em; color: rgb(255, 255, 255); } .icon-ascribe-icon:before { - content: "\e806"; + content: "\e807"; } .icon-ascribe-logo:before { - content: "\e807"; + content: "\e808"; } diff --git a/sass/ascribe_custom_style.scss b/sass/ascribe_custom_style.scss index 180b5e9b..e12f657a 100644 --- a/sass/ascribe_custom_style.scss +++ b/sass/ascribe_custom_style.scss @@ -142,7 +142,7 @@ h1 { .ascribe-icon { font-size: 1.2em; - font-weight: 800; + font-weight: 300; } .ascribe-accordion-list-item { @@ -184,7 +184,16 @@ h1 { } } - +.ascribe-accordion-list-item-table { + tbody { + tr { + &:hover { + background-color: rgba($ascribe--button-default-color, .05); + border-left-color: rgba($ascribe--button-default-color, .5); + } + } + } +} .ascribe-footer { position: fixed; left: 0; @@ -259,15 +268,15 @@ h1 { } } - .ascribe-settings-property { + .ascribe-property { border: none; } - .ascribe-settings-property > span { + .ascribe-property > span { color: white; } - .ascribe-settings-property > input { + .ascribe-property > input { padding: 10px; background-color: #fff; margin-top: .1em; @@ -310,6 +319,31 @@ h1 { } } +.btn-ascribe-add { + width: 30px; + height: 30px; + background-color: transparent !important; + border: 1px solid $ascribe-dark-blue; + border-radius: 50%; + + &:hover { + border-color: white!important; + background-color: $ascribe-dark-blue!important; + } + + > span { + position: absolute; + left: 0; + top: 2px; + width: 30px; + height: 30px; + color: $ascribe-dark-blue; + padding: 0.4em; + &:hover { + color: white; + } + } +} // disabled buttons .btn-default.disabled, @@ -477,7 +511,7 @@ fieldset[disabled] .btn-secondary.active { } -.ascribe-settings-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before, +.ascribe-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before, .ascribe-checkbox-wrapper [type=checkbox]:checked + .checkbox:before { color: $ascribe--button-default-color; } diff --git a/sass/ascribe_property.scss b/sass/ascribe_property.scss new file mode 100644 index 00000000..dd28f901 --- /dev/null +++ b/sass/ascribe_property.scss @@ -0,0 +1,219 @@ +.ascribe-property-wrapper { + background-color: white; + border-left: 3px solid rgba(0, 0, 0, 0); + padding-bottom: 1em; + text-align: center; + width: 100%; + + &div:last-of-type { + border-bottom: 1px solid rgba(0, 0, 0, .05); + } + + &:hover { + border-left: 3px solid rgba(2, 182, 163, .4); + } +} + +.is-hidden { + display: none; +} + +.is-focused { + background-color: rgba(2, 182, 163, .05); + border-left: 3px solid rgba(2, 182, 163, 1) !important; +} + +.is-error { + background-color: rgba(169, 68, 66, .05); + border-left: 3px solid rgba(169, 68, 66, 1); + + > div { + > span { + color: rgba(169, 68, 66, 1); + font-size: .9em; + margin-right: 1em; + } + + > input, + > textarea { + color: #666; + } + } + + &:hover { + border-left: 3px solid rgba(169, 68, 66, 1); + } +} + +.is-fixed { + cursor: default; + + > div { + cursor: default; + + > span { + cursor: default; + } + + > input, + > div, + > pre, + > textarea { + color: #666; + cursor: default; + } + } +} + +.ascribe-property { + border-top: 1px solid rgba(0, 0, 0, .05); + cursor: pointer; + display: inline-block; + padding-left: 1.5em; + padding-right: 1.5em; + padding-top: 1em; + text-align: left; + width: 100%; + + > div, + > input, + > pre, + > select, + > span:not(.glyphicon), + > textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + } + + > span { + color: rgba(0, 0, 0, .5); + font-size: .9em; + font-weight: normal; + } + + > div { + > div:not(.file-drag-and-drop div) { + color: rgba(0, 0, 0, .5); + cursor: default; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1.1em; + font-weight: normal; + padding-left: 0; + } + } + + > .progressbar-container, .progressbar-progress { + margin-top: 0 !important; + } + + > input, + > pre, + > textarea, + > select, + .datepicker__input { + background-color: rgba(0, 0, 0, 0); + border: 0; + box-shadow: none; + color: rgba(0, 0, 0, .8); + font-size: 1.1em; + font-weight: 400; + margin-top: .5em; + padding-left: 0; + width: 100%; + + &:focus { + border: 0; + box-shadow: none; + outline: 0; + } + + &::selection { + background-color: rgba(0, 0, 0, 1); + color: white; + } + + } + + .datepicker__input { + padding: 0; + } + + > textarea{ + color: #666; + margin-top: 1em; + padding: 0; + } +} + +.ascribe-property-footer { + font-size: .8em; + margin-top: 10px; + width: 100%; +} + +.ascribe-property-collapsible-toggle { + border-top: 1px solid rgba(0, 0, 0, .05); + display: inline-block; + padding: .5em 1.5em; + text-align: left; + width: 100%; +} + +.ascribe-checkbox-wrapper{ + .checkbox > span { + color: black; + } +} + +.ascribe-property-collapsible-toggle, .ascribe-checkbox-wrapper { + cursor: pointer; + + // Taken from: http://www.htmllion.com/css3-checkbox.html + .checkbox { + display: inline-block; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: .9em; + font-weight: normal; + vertical-align: middle; + + > span { + left: 5px; + position: relative; + top: 1px; + + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + } + } + + [type=checkbox] { + display: none; + } + + .checkbox:before { + background-color: white; + border: 1px solid rgba(0, 0, 0, .5); + border-radius: 1px; + color: #f3f3f3; + content: ""; + display: inline-block; + height: 17px; + text-align: center; + vertical-align: middle; + width: 17px; + } + + [type=checkbox]:checked + .checkbox:before { + color: rgba(2, 182, 163, 1); + content: "\2713"; + font-size: 20px; + line-height: .8; + } +} + +.ascribe-checkbox-badge { + > span > span { + margin-top: 0; + } +} diff --git a/sass/ascribe_settings.scss b/sass/ascribe_settings.scss index c47ddb67..505444ea 100644 --- a/sass/ascribe_settings.scss +++ b/sass/ascribe_settings.scss @@ -3,72 +3,6 @@ max-width: 600px; } -.ascribe-settings-wrapper { - background-color: white; - border-left: 3px solid rgba(0, 0, 0, 0); - padding-bottom: 1em; - text-align: center; - width: 100%; - - &div:last-of-type { - border-bottom: 1px solid rgba(0, 0, 0, .05); - } - - &:hover { - border-left: 3px solid rgba(2, 182, 163, .4); - } -} - -.is-hidden { - display: none; -} - -.is-focused { - background-color: rgba(2, 182, 163, .05); - border-left: 3px solid rgba(2, 182, 163, 1) !important; -} - -.is-error { - background-color: rgba(169, 68, 66, .05); - border-left: 3px solid rgba(169, 68, 66, 1); - - > div { - > span { - color: rgba(169, 68, 66, 1); - font-size: .9em; - margin-right: 1em; - } - - > input, - > textarea { - color: #666; - } - } - - &:hover { - border-left: 3px solid rgba(169, 68, 66, 1); - } -} - -.is-fixed { - cursor: default; - - > div { - cursor: default; - - > span { - cursor: default; - } - - > input, - > div, - > pre, - > textarea { - color: #666; - cursor: default; - } - } -} .ascribe-settings-property { border-top: 1px solid rgba(0, 0, 0, .05); diff --git a/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss b/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss index 982fda69..b96385c1 100644 --- a/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss +++ b/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss @@ -154,15 +154,15 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik } } - .ascribe-settings-property { + .ascribe-property { border: none; } - .ascribe-settings-property > span { + .ascribe-property > span { color: white; } - .ascribe-settings-property > input { + .ascribe-property > input { padding: 10px; background-color: #fff; margin-top: .1em; @@ -390,7 +390,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik border-color: $ikono--button-color; } - .ascribe-settings-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before, + .ascribe-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before, .ascribe-checkbox-wrapper [type=checkbox]:checked + .checkbox:before { color: $ikono--button-color; }