codecombat/app/templates/play/level/modal/image-gallery-modal.jade
Phoenix Eliot 73bbe598da Improve WebDev level image gallery
Improve image gallery

Add How to Copy/Paste section

Fix modal close button

Add specs for image gallery

Fix up i18n

Fix render resetting scroll

Address code review feedback

Ensure afterRender is called
2016-08-12 13:19:26 -07:00

67 lines
2.2 KiB
Text
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

extends /templates/core/modal-base-flat
block modal-header-content
block modal-body-content
.row.modal-body-content
div.image-list-container.col-sm-7
h3
='1. '
span(data-i18n="web_dev.select_an_image")
ul.image-list
for image in view.images
- var selectedState = state.get('selectedUrl') === image.portraitURL ? 'selected' : ''
li.image-list-item.render(data-portrait-url=image.portraitURL, class=selectedState, selected=selectedState)
img(src=image.portraitURL)
.small.text-center
span(data-i18n="web_dev.scroll_down_for_more_images")
div.col-sm-5.flex-col.render
h3
='2. '
span(data-i18n="web_dev.copy_the_url")
.text-h3.subtitle(data-i18n="web_dev.copy_the_url_description")
.copy-row.m-t-1
.copy-textarea-col
textarea.image-url.copyable
if view.state.get('selectedUrl')
= utils.pathToUrl(view.state.get('selectedUrl'))
.copy-button-col
button.btn.btn-forest.copy-url-button
span(data-i18n="web_dev.copy_url")
.hr-text.m-t-1
hr
span(data-i18n="general.or")
h3(data-i18n="web_dev.copy_the_img_tag")
.text-h3.subtitle(data-i18n="web_dev.copy_the_img_tag_description")
.copy-row.m-t-1
.copy-textarea-col
textarea.image-tag.copyable
if view.state.get('selectedUrl')
= '<img src="' + utils.pathToUrl(view.state.get('selectedUrl')) + '"/>'
.copy-button-col
button.btn.btn-forest.copy-tag-button
span(data-i18n="web_dev.copy_img")
.how-to-copy-paste.m-t-3
div.m-b-1.text-center
span(data-i18n="web_dev.how_to_copy_paste")
.windows-only
span(data-i18n="web_dev.copy")
| : ControlC
br
span(data-i18n="web_dev.paste")
| : ControlV
.mac-only.hidden
span(data-i18n="web_dev.copy")
| : Command ⌘C
br
span(data-i18n="web_dev.paste")
| : Command ⌘V
.close-button
a(href='#', data-dismiss="modal", aria-hidden="true", data-i18n="web_dev.back_to_editing").btn.btn-lg.btn-primary
block modal-footer-content