diff --git a/app/styles/play/level.sass b/app/styles/play/level.sass
index 64ea6e43a..3abc58d24 100644
--- a/app/styles/play/level.sass
+++ b/app/styles/play/level.sass
@@ -37,6 +37,12 @@ body.is-playing
right: 0
top: 0px
bottom: 0
+ transition: width 0.5s ease-in-out
+ &.fullscreen-editor
+ position: fixed
+ width: 100%
+ height: 100%
+ z-index: 20
#pointer
position: absolute
diff --git a/app/styles/play/level/tome/problem_alert.sass b/app/styles/play/level/tome/problem_alert.sass
index df410f680..d26a3ad5b 100644
--- a/app/styles/play/level/tome/problem_alert.sass
+++ b/app/styles/play/level/tome/problem_alert.sass
@@ -6,13 +6,14 @@
bottom: -120px
left: 10px
right: 10px
- background: transparent url(/images/level/code_editor_error_background.png) no-repeat
- background-size: 100% 100%
+ background: transparent
border: 0
padding: 18px 35px 18px 14px
text-shadow: none
color: white
word-wrap: break-word
+ border-image: url(/images/level/code_editor_error_background.png) 16 20 fill round
+ border-width: 16px 20px
.close
@include opacity(0.80)
@@ -30,11 +31,28 @@
//&.alert-error
&.alert-warning
- background-image: url(/images/level/code_editor_warning_background.png)
+ border-image-source: url(/images/level/code_editor_warning_background.png)
&.alert-info
- background-image: url(/images/level/code_editor_info_background.png)
+ border-image-source: url(/images/level/code_editor_info_background.png)
&.alert-style
// Do we ever want to do this for style?
- background-image: url(/images/level/code_editor_info_background.png)
+ border-image-source: url(/images/level/code_editor_info_background.png)
+
+html.no-borderimage
+ .problem-alert
+ border-width: 0
+ border-image: none
+ background: transparent url(/images/level/code_editor_error_background.png) no-repeat
+ background-size: 100% 100%
+
+ &.alert-warning
+ background-image: url(/images/level/code_editor_warning_background.png)
+
+ &.alert-info
+ background-image: url(/images/level/code_editor_info_background.png)
+
+ &.alert-style
+ // Do we ever want to do this for style?
+ background-image: url(/images/level/code_editor_info_background.png)
\ No newline at end of file
diff --git a/app/styles/play/level/tome/spell.sass b/app/styles/play/level/tome/spell.sass
index 73d727457..291403dc0 100644
--- a/app/styles/play/level/tome/spell.sass
+++ b/app/styles/play/level/tome/spell.sass
@@ -26,6 +26,13 @@
top: 0
height: 100%
width: 100%
+
+ span.code-background
+ border-width: 22px
+ border-image: url(/images/level/code_editor_background.png) 22 fill round
+
+ img.code-background
+ display: none
.save-status
display: none
@@ -64,7 +71,7 @@
.ace_gutter
background-color: rgba(255, 255, 255, 0.25)
- width: 40px
+ width: 47px
margin-left: 4px
border-bottom: 1px dotted #2f261d
@@ -133,3 +140,11 @@
.ace_searchbtn, .ace_replacebtn
padding: 0px 4px
+
+html.no-borderimage
+ #spell-view
+ span.code-background
+ display: none
+ img.code-background
+ display: block
+
diff --git a/app/styles/play/level/tome/spell_debug.sass b/app/styles/play/level/tome/spell_debug.sass
index 976675c2e..d06143caa 100644
--- a/app/styles/play/level/tome/spell_debug.sass
+++ b/app/styles/play/level/tome/spell_debug.sass
@@ -6,8 +6,8 @@
min-width: 250px
max-width: 400px
padding: 10px
- background: transparent url(/images/level/popover_background.png)
- background-size: 100% 100%
+ border-image: url(/images/level/popover_background.png) 18 fill round
+ border-width: 8px
.progress
position: relative
span
@@ -15,4 +15,10 @@
display: block
color: black
width: 100%
+
+html.no-borderimage
+ .spell-debug-view
+ background: transparent url(/images/level/popover_background.png)
+ background-size: 100% 100%
+ border: 0
diff --git a/app/styles/play/level/tome/spell_list.sass b/app/styles/play/level/tome/spell_list.sass
index 0af5f314f..0692a47a0 100644
--- a/app/styles/play/level/tome/spell_list.sass
+++ b/app/styles/play/level/tome/spell_list.sass
@@ -8,6 +8,11 @@
left: 0%
right: 10%
padding: 4%
- background: transparent url(/images/level/popover_background.png)
- background-size: 100% 100%
+ border-image: url(/images/level/popover_background.png) 18 fill round
+ border-width: 15px
+html.no-borderimage
+ #spell-list-view
+ background: transparent url(/images/level/popover_background.png)
+ background-size: 100% 100%
+ border: 0
\ No newline at end of file
diff --git a/app/styles/play/level/tome/spell_list_entry.sass b/app/styles/play/level/tome/spell_list_entry.sass
index 8d036dd57..8f8683c41 100644
--- a/app/styles/play/level/tome/spell_list_entry.sass
+++ b/app/styles/play/level/tome/spell_list_entry.sass
@@ -17,15 +17,15 @@
width: -webkit-calc(100% - 100px)
width: calc(100% - 100px)
padding: 0px 8px
- background: transparent url(/images/level/code_editor_tab_background.png) no-repeat
- background-size: 100% 100%
+ border-width: 3px
+ border-image: url(/images/level/code_editor_tab_background.png) 4 fill repeat
text-align: center
&.read-only
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%), url(/images/level/code_editor_tab_background.png)
background-size: 100% 100%
- .spell-list-button, .thang-avatar-wrapper, .reload-code, .beautify-code
+ .spell-list-button, .thang-avatar-wrapper, .reload-code, .beautify-code, .fullscreen-code
width: $childSize
height: $childSize
margin: $childMargin
@@ -41,6 +41,15 @@
.beautify-code
float: right
+ .fullscreen-code
+ float: right
+ &:not(.maximized)
+ .icon-resize-small
+ display: none
+ &.maximized
+ .icon-fullscreen
+ display: none
+
.btn.btn-small
background: transparent
padding: 0
@@ -49,7 +58,7 @@
border-color: transparent
@include box-shadow(none)
- .icon-chevron-down, .icon-repeat, .icon-magnet
+ .icon-chevron-down, .icon-repeat, .icon-magnet, .icon-fullscreen, .icon-resize-small
margin-top: 7px
.thang-avatar-wrapper
@@ -94,3 +103,11 @@
.thang-avatar-wrapper
margin: 0 5px 0 0
//margin: 2px 10px 2px 5px
+
+
+html.no-borderimage
+ .spell-list-entry-view.spell-tab
+ border-width: 0
+ border-image: none
+ background: transparent url(/images/level/code_editor_tab_background.png) no-repeat
+ background-size: 100% 100%
\ No newline at end of file
diff --git a/app/styles/play/level/tome/spell_list_entry_thangs.sass b/app/styles/play/level/tome/spell_list_entry_thangs.sass
index 0f005675a..5398423f9 100644
--- a/app/styles/play/level/tome/spell_list_entry_thangs.sass
+++ b/app/styles/play/level/tome/spell_list_entry_thangs.sass
@@ -10,8 +10,8 @@
max-height: 500px
overflow: scroll
padding: 4%
- background: transparent url(/images/level/popover_background.png)
- background-size: 100% 100%
+ border-image: url(/images/level/popover_background.png) 18 fill round
+ border-width: 15px
.thang-avatar-view
cursor: pointer
@@ -20,4 +20,9 @@
display: inline-block
-
+html.no-borderimage
+ .spell-list-entry-view
+ .spell-list-entry-thangs-view
+ background: transparent url(/images/level/popover_background.png)
+ background-size: 100% 100%
+ border: 0
\ No newline at end of file
diff --git a/app/styles/play/level/tome/spell_palette.sass b/app/styles/play/level/tome/spell_palette.sass
index 5e19cc0ce..3e2f78794 100644
--- a/app/styles/play/level/tome/spell_palette.sass
+++ b/app/styles/play/level/tome/spell_palette.sass
@@ -17,13 +17,20 @@
z-index: 0
//overflow-y: auto
- img
+ .code-palette-background
position: absolute
left: 0
top: 0
width: 100%
height: 100%
z-index: -1
+
+ span.code-palette-background
+ border-width: 25px
+ border-image: url(/images/level/code_palette_background.png) 25 fill round
+
+ img.code-palette-background
+ display: none
&.disabled
@include opacity(0.80)
@@ -86,3 +93,9 @@
&.io
background-image: url(/images/pages/home/language_logo_io.png)
+html.no-borderimage
+ #spell-palette-view
+ span.code-palette-background
+ display: none
+ img.code-palette-background
+ display: block
\ No newline at end of file
diff --git a/app/styles/play/level/tome/tome.sass b/app/styles/play/level/tome/tome.sass
index 773005d64..370cc293d 100644
--- a/app/styles/play/level/tome/tome.sass
+++ b/app/styles/play/level/tome/tome.sass
@@ -37,9 +37,8 @@
.popover
padding: 10px 10px 30px 10px
- background: transparent url(/images/level/popover_background.png)
- background-size: 100% 100%
- border: 0
+ border-image: url(/images/level/popover_background.png) 18 fill round
+ border-width: 15px
@include box-shadow(0 0 0 #000)
h1:not(.not-code), h2:not(.not-code), h3:not(.not-code), h4:not(.not-code), h5:not(.not-code), h6:not(.not-code)
@@ -70,3 +69,10 @@
pre
display: inline-block
padding: 5px
+
+html.no-borderimage
+ #tome-view
+ .popover
+ background: transparent url(/images/level/popover_background.png)
+ background-size: 100% 100%
+ border: 0
diff --git a/app/templates/play/level/tome/spell.jade b/app/templates/play/level/tome/spell.jade
index 85fcdbda0..32a97806d 100644
--- a/app/templates/play/level/tome/spell.jade
+++ b/app/templates/play/level/tome/spell.jade
@@ -1,4 +1,5 @@
img(src="/images/level/code_editor_background.png").code-background
+span.code-background
div.ace
diff --git a/app/templates/play/level/tome/spell_list_tab_entry.jade b/app/templates/play/level/tome/spell_list_tab_entry.jade
index 8ebad097f..9199b8a48 100644
--- a/app/templates/play/level/tome/spell_list_tab_entry.jade
+++ b/app/templates/play/level/tome/spell_list_tab_entry.jade
@@ -4,10 +4,15 @@
code #{methodSignature}
+.btn.btn-small.fullscreen-code(title="Expand code editor")
+ i.icon-fullscreen
+ i.icon-resize-small
+
.btn.btn-small.reload-code(title="Reload original code for " + spell.name)
i.icon-repeat
.btn.btn-small.beautify-code(title="Ctrl+Shift+B: Beautify code for " + spell.name)
i.icon-magnet
+
.clearfix
\ No newline at end of file
diff --git a/app/templates/play/level/tome/spell_palette.jade b/app/templates/play/level/tome/spell_palette.jade
index 2164a970b..2344bfdaf 100644
--- a/app/templates/play/level/tome/spell_palette.jade
+++ b/app/templates/play/level/tome/spell_palette.jade
@@ -1,4 +1,5 @@
img(src="/images/level/code_palette_background.png").code-palette-background
+span.code-palette-background
.code-language-logo
ul(class="nav nav-pills" + (tabbed ? ' multiple-tabs' : ''))
each slug, group in entryGroupSlugs
diff --git a/app/views/play/level/modal/docs_modal.coffee b/app/views/play/level/modal/docs_modal.coffee
index 72aa6b8d0..9970b8916 100644
--- a/app/views/play/level/modal/docs_modal.coffee
+++ b/app/views/play/level/modal/docs_modal.coffee
@@ -8,7 +8,6 @@ utils = require 'lib/utils'
module.exports = class DocsModal extends View
template: template
id: 'docs-modal'
- plain: true
shortcuts:
'enter': 'hide'
diff --git a/app/views/play/level/tome/doc_formatter.coffee b/app/views/play/level/tome/doc_formatter.coffee
index 2d256c3ad..d159d08e4 100644
--- a/app/views/play/level/tome/doc_formatter.coffee
+++ b/app/views/play/level/tome/doc_formatter.coffee
@@ -83,7 +83,7 @@ module.exports = class DocFormatter
@doc.title = if @options.shortenize then @doc.shorterName else @doc.shortName
# Grab the language-specific documentation for some sub-properties, if we have it.
- toTranslate = [{obj: @doc, prop: 'example'}, {obj: @doc, prop: 'returns'}]
+ toTranslate = [{obj: @doc, prop: 'description'}, {obj: @doc, prop: 'example'}, {obj: @doc, prop: 'returns'}]
for arg in (@doc.args ? [])
toTranslate.push {obj: arg, prop: 'example'}, {obj: arg, prop: 'description'}
for {obj, prop} in toTranslate
@@ -93,6 +93,7 @@ module.exports = class DocFormatter
obj[prop] = null
formatPopover: ->
+ console.log "gotta do the popover", @doc
content = popoverTemplate doc: @doc, language: @options.language, value: @formatValue(), marked: marked, argumentExamples: (arg.example or arg.default or arg.name for arg in @doc.args ? [])
owner = if @doc.owner is 'this' then @options.thang else window[@doc.owner]
content = content.replace /#{spriteName}/g, @options.thang.type ? @options.thang.spriteName # Prefer type, and excluded the quotes we'd get with @formatValue
diff --git a/app/views/play/level/tome/spell_list_tab_entry_view.coffee b/app/views/play/level/tome/spell_list_tab_entry_view.coffee
index 1938cc1e4..32d4682b1 100644
--- a/app/views/play/level/tome/spell_list_tab_entry_view.coffee
+++ b/app/views/play/level/tome/spell_list_tab_entry_view.coffee
@@ -18,6 +18,7 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
'click .spell-list-button': 'onDropdownClick'
'click .reload-code': 'onCodeReload'
'click .beautify-code': 'onBeautifyClick'
+ 'click .fullscreen-code': 'onFullscreenClick'
constructor: (options) ->
super options
@@ -86,6 +87,14 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
return unless @controlsEnabled
Backbone.Mediator.publish 'spell-beautify', spell: @spell
+ onFullscreenClick: ->
+ unless $('.fullscreen-code').hasClass 'maximized'
+ $('#code-area').addClass 'fullscreen-editor'
+ $('.fullscreen-code').addClass 'maximized'
+ else
+ $('#code-area').removeClass 'fullscreen-editor'
+ $('.fullscreen-code').removeClass 'maximized'
+
updateReloadButton: ->
changed = @spell.hasChanged null, @spell.getSource()
@$el.find('.reload-code').css('display', if changed then 'inline-block' else 'none')
diff --git a/bower.json b/bower.json
index 357b9d431..e979e2f49 100644
--- a/bower.json
+++ b/bower.json
@@ -44,7 +44,8 @@
"bootstrap": "~3.1.1",
"validated-backbone-mediator": "~0.1.3",
"jquery.browser": "~0.0.6",
- "zatanna": "~0.0.2"
+ "zatanna": "~0.0.2",
+ "modernizr": "~2.8.3"
},
"overrides": {
"backbone": {
@@ -81,6 +82,9 @@
"./dist/fonts/glyphicons-halflings-regular.ttf",
"./dist/fonts/glyphicons-halflings-regular.woff"
]
+ },
+ "modernizr": {
+ "main": "modernizr.js"
}
}
}