diff --git a/app/assets/images/common/lang-nl/button-background-ideal-active-border.png b/app/assets/images/common/lang-nl/button-background-ideal-active-border.png new file mode 100644 index 000000000..b05443243 Binary files /dev/null and b/app/assets/images/common/lang-nl/button-background-ideal-active-border.png differ diff --git a/app/assets/images/pages/play/modal/lang-nl/buy-gems-background-NL.png b/app/assets/images/pages/play/modal/lang-nl/buy-gems-background-NL.png new file mode 100644 index 000000000..a1a2576f9 Binary files /dev/null and b/app/assets/images/pages/play/modal/lang-nl/buy-gems-background-NL.png differ diff --git a/app/styles/play/modal/buy-gems-modal.sass b/app/styles/play/modal/buy-gems-modal.sass index 6dcbbaa72..e038fc618 100644 --- a/app/styles/play/modal/buy-gems-modal.sass +++ b/app/styles/play/modal/buy-gems-modal.sass @@ -78,7 +78,8 @@ width: 80% left: 10% bottom: -30px - + + //- Errors .alert position: absolute diff --git a/app/styles/play/modal/lang-nl/buy-gems-modal-nl.sass b/app/styles/play/modal/lang-nl/buy-gems-modal-nl.sass new file mode 100644 index 000000000..b01b39cdf --- /dev/null +++ b/app/styles/play/modal/lang-nl/buy-gems-modal-nl.sass @@ -0,0 +1,96 @@ +@import "app/styles/mixins" + +#buy-gems-modal-nl + + //- Header + + h1 + position: absolute + left: 325px + top: -70px + margin: 0 + width: 612px + text-align: center + color: rgb(254,188,68) + font-size: 38px + text-shadow: black 4px 4px 0, black -4px -4px 0, black 4px -4px 0, black -4px 4px 0, black 4px 0px 0, black 0px -4px 0, black -4px 0px 0, black 0px 4px 0 + + //- Clear modal defaults + .modal-dialog + margin: 150px auto 0 auto + padding: 0 + width: 1300px + height: 460px + background: none + + //- Background + #buy-gems-background + position: absolute + top: -157px + left: -2px + + //- Close modal button + + #close-modal + position: absolute + left: 1005px + top: -80px + width: 60px + height: 60px + color: white + text-align: center + font-size: 30px + padding-top: 15px + cursor: pointer + @include rotate(-3deg) + + &:hover + color: yellow + + //- Products + + #products + position: absolute + left: 55px + top: 242px + width: 1300px + height: 140px + + .product + width: 228px + height: 136px + float: left + text-align: center + margin-right: 12px + position: relative + + h4 + font-size: 20px + color: rgb(22,16,5) + + h3 + margin-top: 10px + text-transform: uppercase + color: rgb(22,16,5) + + button + position: absolute + width: 80% + left: 10% + bottom: -30px + + .btn-ideal + border-image: url(/images/common/lang-nl/button-background-ideal-active-border.png) 14 20 20 fill round + color: #f2f2f2 + + a + color: #f2f2f2 + text-decoration: none + + //- Errors + .alert + position: absolute + left: 10% + width: 80% + top: 20px + border: 5px solid gray diff --git a/app/templates/play/modal/buy-gems-modal.jade b/app/templates/play/modal/buy-gems-modal.jade index 261fa9e41..e5c603a28 100644 --- a/app/templates/play/modal/buy-gems-modal.jade +++ b/app/templates/play/modal/buy-gems-modal.jade @@ -1,16 +1,19 @@ .modal-dialog - .modal-content - + .modal-content + if view.state === 'purchasing' .alert.alert-info(data-i18n="buy_gems.purchasing") - + else if view.state === 'retrying' #retrying-alert.alert.alert-danger(data-i18n="buy_gems.retrying") else - img(src="/images/pages/play/modal/buy-gems-background.png")#buy-gems-background - h1(data-i18n="play.buy_gems") - + if (me.get('preferredLanguage',true) || 'en-US').split('-')[0] == 'nl' + img(src="/images/pages/play/modal/lang-nl/buy-gems-background-NL.png")#buy-gems-background) + else + img(src="/images/pages/play/modal/buy-gems-background.png")#buy-gems-background + h1(data-i18n="play.buy_gems") + #products for product in view.products.models .product @@ -19,6 +22,16 @@ button.btn.btn-illustrated.btn-lg(value=product.get('name')) span= product.get('priceString') + if (me.get('preferredLanguage',true) || 'en-US').split('-')[0] == 'nl' + .product + h4.subscription-gem-amount x{{gems}} / mo + h3 + | 1, 3, 6 OF 12 + br + | MAANDEN + a(href="http://www.codecombat.nl/kopen", target="_blank") + button.btn.btn-ideal.btn-illustrated.btn-lg.btn-succes PREPAID CODES + .product h4.subscription-gem-amount x{{gems}} / mo h3(data-i18n="account.subscription") diff --git a/app/views/play/modal/BuyGemsModal.coffee b/app/views/play/modal/BuyGemsModal.coffee index 0f153a7f9..816715cce 100644 --- a/app/views/play/modal/BuyGemsModal.coffee +++ b/app/views/play/modal/BuyGemsModal.coffee @@ -6,7 +6,11 @@ SubscribeModal = require 'views/core/SubscribeModal' Products = require 'collections/Products' module.exports = class BuyGemsModal extends ModalView - id: 'buy-gems-modal' + id: + if (me.get('preferredLanguage',true) || 'en-US').split('-')[0] == 'nl' + 'buy-gems-modal-nl' + else + 'buy-gems-modal' template: template plain: true @@ -68,6 +72,9 @@ module.exports = class BuyGemsModal extends ModalView onClickProductButton: (e) -> @playSound 'menu-button-click' productID = $(e.target).closest('button').val() + # Don't throw error when product is not found + if productID.length == 0 + return product = @products.findWhere { name: productID } if application.isIPadApp